/* ════════════════════════════════════════════════════════════════════════════
   CHIEFMATE marketing site — motion layer (pass 1, 2026-08).
   Loaded by templates/marketing/base.html via static_v() AFTER the inline
   sheet, so these rules layer on top of it. Vanilla CSS only, CSP-clean.
   Companion behavior lives in static/js/marketing.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero dot-matrix backdrop ────────────────────────────────────────────── */
/* The canvas sits behind the hero copy; marketing.js paints a drifting swell
   field on it. The hero already has position:relative in the inline sheet. */
.hero { overflow: hidden; }
/* The hero backdrop. pointer-events stays ON so the shader can take the
   cursor steer; the copy above it sits on .hero > .wrap at z-index 1 and is
   unaffected. */
.hero-ocean {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
/* Scrim between the water and the copy, AND the floor fade that used to be a
   second .hero::after further down this file. Two rules with the same selector
   meant the later one silently won and the scrim did nothing; keep this as the
   single hero::after. Strong through the copy band, releases so the swell shows,
   then closes again so the water meets the section border instead of a hard
   line. Sits above the canvas, below .hero > .wrap. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--bg) 0%,
        rgba(18, 21, 26, 0.78) 32%,
        rgba(18, 21, 26, 0.52) 52%,
        rgba(18, 21, 26, 0.20) 68%,
        rgba(18, 21, 26, 0.04) 84%,
        rgba(18, 21, 26, 0.42) 94%,
        var(--bg) 100%);
}
/* No WebGL: the canvas paints nothing, so drop the scrim too rather than
   leaving a grey wash over the hero. */
.hero.hero-no-gl::after { background: none; }
.hero > .wrap { position: relative; z-index: 1; }

/* ── Scroll reveals ──────────────────────────────────────────────────────── */
/* marketing.js tags candidates with .mk-reveal and flips on .mk-in the first
   time they enter the viewport. Elements render normally when JS is absent
   because the class is only ever added by the script. */
.mk-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: var(--mk-delay, 0s);
}
.mk-reveal.mk-in {
    opacity: 1;
    transform: none;
}

/* ── Section kicker pills ────────────────────────────────────────────────── */
/* Fintra-style: the small uppercase kicker above each section headline gets
   a pill outline in its own accent. Scoped to the two kicker contexts so the
   one-off jumbo kicker on the pricing page is left alone. */
.section-head .kicker,
.rec-band .rec-copy .kicker {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(212, 152, 42, 0.35);
    background: rgba(212, 152, 42, 0.06);
}
.rec-band .rec-copy .kicker {
    border-color: rgba(61, 186, 106, 0.35);
    background: rgba(61, 186, 106, 0.06);
}

/* ── Footer dot-matrix world map ─────────────────────────────────────────── */
/* Static stipple map (static/brand/dot-world-map.svg) with the home-port
   marker; carries the hero's dot motif to the foot of every marketing page. */
.footer-map {
    text-align: center;
    margin: 36px 0 4px;
}
.footer-map img {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: inline-block;
}

/* ── Connected-system demo diagram (home, conn-band) ─────────────────────── */
/* The two connected bands use the same flow diagram as the features
   section (.cf, built by marketing.js), in a smaller box. */

/* ── Hardware band wave lines ────────────────────────────────────────────── */
#hardware { position: relative; overflow: hidden; }
#hardware > .wrap { position: relative; z-index: 1; }
.hw-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ── Hover polish ────────────────────────────────────────────────────────── */
.nav-links a {
    transition: color 0.18s ease;
}
.feature-card:not(.fc-card) {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.feature-card:hover {
    border-color: rgba(74, 159, 200, 0.45);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* Kill the reveal travel and let marketing.js render the dots as one static
   frame (it checks the same media query before animating). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mk-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .feature-card,
    .feature-card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PASS 3 (2026-09)
   1 working sight reduction demo · 2 hero stat chips · 3 product screenshot on
   a halftone panel · 4 mini UI mockups in the top feature cards · 5 radial
   module fan. Everything below honours prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2. Trust strip: seven figures on one line ──────────────────────────── */
/* Replaced the hero stat chips on 2026-09-05; the counts moved down here. */
.trust-grid {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}
.trust-cell { flex: 1 1 0; min-width: 0; padding: 16px 10px; border-right: 1px solid var(--border); }
.trust-cell:last-child { border-right: none; }
.trust-num { font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.trust-label { font-size: 12.5px; font-weight: 600; color: #fff; margin: 6px 0 4px; }
.trust-sub { font-size: 11px; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) {
    .trust-grid { flex-wrap: wrap; }
    .trust-cell { flex: 1 1 30%; min-width: 150px; border-right: none; }
}

/* ── 3. Product screenshot on a halftone panel ──────────────────────────── */
.shot-band { position: relative; overflow: hidden; }
.shot-band .shot-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(74, 159, 200, .22) 1px, transparent 1.4px);
    background-size: 13px 13px;
    /* halftone: dots crowd at the panel and thin out toward the edges */
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 68% 50%, #000 0%, transparent 78%);
            mask-image: radial-gradient(ellipse 62% 78% at 68% 50%, #000 0%, transparent 78%);
}
.shot-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr minmax(0, 420px);
    gap: 44px;
    align-items: center;
}
.shot-frame {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 9px;
    background: linear-gradient(160deg, rgba(74, 159, 200, .16), rgba(12, 16, 24, .6));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 8px; }
.shot-cap { font-size: 12px; color: var(--muted); text-align: center; margin: 11px 0 0; line-height: 1.6; }
@media (max-width: 900px) {
    .shot-grid { grid-template-columns: 1fr; gap: 28px; }
    .shot-frame { max-width: 420px; margin: 0 auto; }
}

/* ── 4. Mini UI mockups inside the top feature cards ────────────────────── */
.feature-mock {
    margin: 13px 0 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #0b0f14;
    overflow: hidden;
}
.feature-mock svg { display: block; width: 100%; height: auto; }

/* ── 5. Module flow (ship record at the centre, modules on a ring) ─────── */
/* Rule between the module cards and the module flow diagram. */
.feature-divider { border: none; border-top: 1px solid var(--border); margin: 40px 0 0; width: 100%; }
/* Lines and pulses are drawn on .cf-canvas by marketing.js (moduleFlow);
   the centre box and the module nodes are DOM so the labels stay sharp.
   Node positions are written by the script from the box size. */
.cf-wrap { max-width: 1000px; margin: 40px auto 0; }
.cf { position: relative; width: 100%; aspect-ratio: 1000 / 460; min-height: 300px; --cf: var(--accent); }
.cf-warm { --cf: var(--warm); }
.cf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108px;
    height: 108px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    background: #0f151b;
    border: 1px solid var(--cf);
    box-shadow: 0 0 18px rgba(74, 159, 200, 0.30);
    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #e9eef3;
    line-height: 1.3;
}
.cf-node {
    position: absolute;
    width: 66px;
    height: 46px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #12181e;
    border: 1px solid color-mix(in srgb, var(--cf) 32%, transparent);
    flex-direction: column;
    gap: 2px;
}
.cf-node small {
    font-family: "Courier New", monospace;
    font-size: 8.5px;
    color: var(--muted);
    line-height: 1.2;
}
/* Small variant for the two connected bands: four or three wider nodes with a
   sub-line, in a 460x320 box. */
.cf-sm { aspect-ratio: 460 / 320; min-height: 260px; }
.cf-sm .cf-center { width: 96px; height: 96px; font-size: 11px; border-radius: 22px; }
.cf-sm .cf-node { width: 116px; height: 50px; }
.cf-sm .cf-node span { font-size: 9.5px; }
.cf-node span {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9fb0bd;
}
@media (max-width: 600px) {
    .cf-center { width: 84px; height: 84px; font-size: 11px; border-radius: 20px; }
    .cf-node { width: 56px; height: 38px; }
    .cf-node span { font-size: 7.5px; }
}

/* ── Home page section rhythm ─────────────────────────────────────────── */
/* One padding and one divider line for every section on the home page, so
   the gaps between sections are equal and the page runs shorter. The base
   sheet's 72px stays for the other /site pages. Inline paddings and borders
   on the home sections were removed in favour of this rule (2026-09-05). */
.mk-home section {
    padding: 48px 0;
    border-top: 1px solid var(--border);
    border-bottom: none;
}
.mk-home .section-head { margin-bottom: 36px; }

/* ── 6. Depth carousel for the module cards ─────────────────────────────── */
/* Layout math lives in marketing.js (depthCarousel). These rules only give
   the stage its perspective and the cards their resting state; every
   transform, opacity, blur and z-index is written per frame by the script,
   so nothing here may animate transform on .fc-card. */
.fc {
    position: relative;
    height: 500px;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    touch-action: pan-y;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    overflow: hidden;
    border-radius: 14px;
}
.fc:active { cursor: grabbing; }
.fc:focus-visible { outline: 2px solid rgba(74, 159, 200, 0.6); outline-offset: 4px; }
.fc-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.fc-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 400px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
    will-change: transform, opacity, filter;
    cursor: pointer;
    transition: border-color 0.22s ease;
}
.fc-card h3 { display: block; }
.fc-card .feature-mock { margin-top: 12px; }
/* Darkens each card as it recedes, the reference's "tint" prop. Opacity is
   driven by the script. */
.fc-tint {
    position: absolute;
    inset: 0;
    background: #05060a;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.fc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3000;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(18, 20, 26, 0.55);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fc-arrow:hover { background: rgba(28, 31, 40, 0.85); border-color: var(--accent); }
.fc-arrow:active { transform: translateY(-50%) scale(0.94); }
.fc-prev { left: 16px; }
.fc-next { right: 16px; }
.fc-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(14, 16, 22, 0.4);
    backdrop-filter: blur(6px);
}
.fc-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.fc-dot.is-active { width: 20px; background: var(--accent); }
/* Two-faced card. The outer .fc-card keeps the script-driven transform;
   the flip is a rotateY on .fc-inner so the two never fight. Faces are
   absolute so the card's 360x400 box is the same whichever side is up. */
.fc-card { padding: 0; }
.fc-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fc-card.is-flipped .fc-inner { transform: rotateY(180deg); }
.fc-face {
    position: absolute;
    inset: 0;
    padding: 26px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: inherit;
    background: var(--bg-card);
}
.fc-back {
    transform: rotateY(180deg);
    padding: 20px 22px;
    overflow-y: auto;
    border-left: 3px solid var(--accent);
}
.fc-back-title {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--warm);
    margin-bottom: 10px;
}
.fc-back > p {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--label);
    margin-bottom: 6px;
}
.fc-back ul { list-style: none; margin: 0; padding: 0; }
.fc-back li {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    padding: 2px 0 2px 16px;
    position: relative;
}
.fc-back li::before { content: '›'; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
@media (max-width: 600px) {
    .fc { height: 440px; }
    .fc-arrow { width: 36px; height: 36px; }
    .fc-prev { left: 6px; }
    .fc-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .fc-card { will-change: auto; }
    .fc-arrow, .fc-dot, .fc-inner { transition: none; }
}

/* ── App Store badge (static/brand/app-store-badge.svg, self-hosted) ───────── */
.appstore-badge { display: inline-flex; align-items: center; line-height: 0; }
.appstore-badge img { height: 44px; width: auto; display: block; border-radius: 7px; transition: transform .15s ease, box-shadow .15s ease; }
.appstore-badge:hover img { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.iface-appstore { margin-top: 14px; }

/* The hidden attribute wins over class display rules (the download page's
   Install button is hidden until install.js can offer an install). */
[hidden] { display: none !important; }