/* =======================================
   AmbTrack — home page additions
   Everything else reuses /css/styles.css
   and /css/theme.css as-is. This file adds
   the cinematic hero/CTA scenes and a few
   ambient touches; it defines no new tokens
   and never hides content by default — every
   animation here is a decorative enhancement
   layered on top of a fully visible static page.
   ======================================= */

/* ---- Hero layout ---- */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-grid .hero-copy-col { min-width: 0; }
.hero-mockup-col { display: flex; justify-content: center; }
.hero-mockup-frame .mockup-phone { width: 260px; }
.hero-mockup-caption {
    margin-top: 14px; text-align: center;
    font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
    color: rgba(255,255,255,.4) !important;
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-mockup-col { order: -1; margin-bottom: 8px; }
}

/* =======================================
   Cinematic hero scene
   A fixed dark "scene" — like .cta-inner,
   it stays dark regardless of the light/
   dark toggle, per theme.css's existing
   precedent for this exact component set.
   ======================================= */
.hero-cinematic {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 100% at 18% 0%, #14243f 0%, #0a1526 42%, #060c17 78%, #04080f 100%) !important;
    padding-bottom: 8px;
}

.hero-visual {
    position: relative;
    z-index: 1;
}

.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Clipped separately from .hero-scene, and extended well past the visible
   hero on top/left/right, so the blurred glows below always fade to nothing
   before they reach a clip edge — clipping a glow while it still has visible
   alpha reads as a hard-edged rectangle pasted on the scene. Bottom stays
   flush with the hero so the glow never bleeds into .hero-proof below. */
.hero-glow-field {
    position: absolute;
    top: -320px; left: -240px; right: -240px; bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-scene::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 28%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 38% 15%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 62% 42%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,.3), transparent),
        radial-gradient(1.5px 1.5px at 88% 55%, rgba(255,255,255,.45), transparent),
        radial-gradient(1px 1px at 12% 65%, rgba(255,255,255,.3), transparent),
        radial-gradient(1.5px 1.5px at 52% 72%, rgba(255,255,255,.3), transparent);
    opacity: .7;
}

/* One warm key light (brand red) plus one near-neutral, very low-saturation
   fill light for depth — a single accent hue reads as designed; two
   competing saturated hues (the earlier red+blue pairing) read as unfinished.
   The soft edge is baked into the gradient's own stops rather than done with
   filter: blur() — a large blur filter on a big element gets rasterized with
   a hard rectangular clip at (or near) the element's own box in some
   browsers/GPUs, independent of any overflow:hidden ancestor, which is
   exactly the "box pasted on the scene" look this replaces. */
.hero-glow {
    position: absolute;
    border-radius: 50%;
}
.hero-glow-red {
    width: 760px; height: 760px;
    background: radial-gradient(circle,
        rgba(220,38,38,.4) 0%,
        rgba(220,38,38,.3) 14%,
        rgba(220,38,38,.2) 28%,
        rgba(220,38,38,.11) 44%,
        rgba(220,38,38,.05) 60%,
        rgba(220,38,38,.02) 76%,
        transparent 100%);
    top: -220px; left: -30px;
}
.hero-glow-blue {
    width: 760px; height: 760px;
    background: radial-gradient(circle,
        rgba(100,116,139,.2) 0%,
        rgba(100,116,139,.15) 14%,
        rgba(100,116,139,.1) 28%,
        rgba(100,116,139,.06) 44%,
        rgba(100,116,139,.03) 60%,
        rgba(100,116,139,.01) 76%,
        transparent 100%);
    /* Bottom-aligned (not hanging past the hero's own edge) so its fade
       reaches zero before the field's bottom clip — that edge sits right at
       the visible boundary with .hero-proof, unlike the top clip which is
       hidden behind the fixed nav and can tolerate a little residual alpha. */
    bottom: 0; left: 10%;
}

.hero-scene-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: .9;
}
.hero-scene-road {
    fill: none; stroke: rgba(148,163,184,.2); stroke-width: 2.5; stroke-linecap: round;
}
.hero-scene-road-thin { stroke: rgba(148,163,184,.13); stroke-width: 1.5; }
.hero-scene-route {
    fill: none; stroke: #fb7185; stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 3 10;
    filter: drop-shadow(0 0 6px rgba(251,113,133,.5));
    opacity: .8;
}
.hero-scene-incident {
    fill: #fb7185;
    filter: drop-shadow(0 0 8px rgba(251,113,133,.7));
}

/* Eases back off near 100% rather than reaching peak darkness right at the
   edge — this gradient is clipped exactly to .hero-visual's box, so if it's
   darkest at that very edge, .hero-proof (which has no vignette at all)
   reveals a visibly brighter, un-vignetted color the instant it starts,
   reading as a hard-edged, full-width band. Peaking mid-way and relaxing
   back down keeps the boundary a small, unnoticeable step instead. */
.hero-scene-vignette {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(4,8,15,.14) 42%, rgba(4,8,15,.5) 68%, rgba(4,8,15,.16) 100%);
}

/* Persistent dark-glass chrome — the page opens on a dark scene, so the
   header reads as one continuous piece of chrome instead of a light bar
   sitting on top of a dark hero. */
.nav {
    background: rgba(8,14,26,.55) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.nav.scrolled { background: rgba(8,14,26,.82) !important; box-shadow: 0 1px 24px rgba(0,0,0,.28); }
.nav-logo, .nav-links a, .nav-link-cta { color: rgba(255,255,255,.82) !important; }
.nav-links a:hover, .nav-link-cta:hover { color: #fff !important; }
.nav-burger span { background: rgba(255,255,255,.82) !important; }
.nav-mobile { background: rgba(8,14,26,.96); border-top-color: rgba(255,255,255,.08); }
.nav-mobile a { color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.08); }
.nav-right .btn.btn-sm,
.nav-mobile .btn {
    background: linear-gradient(135deg, #e5323e, #b91c1c) !important;
    color: #fff !important;
}

/* Hero text — forced light-on-dark regardless of the site theme toggle */
.hero-cinematic .hero-eyebrow { color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.05) !important; padding: 6px 14px; border-radius: 100px; display: inline-flex; }
.hero-cinematic .hero-h1 { color: #f3f7ff !important; text-shadow: 0 18px 60px rgba(0,0,0,.35); }
.hero-cinematic .hero-h1 em { color: #fb7185 !important; }
.hero-cinematic .hero-p { color: #a9b8cd !important; }
.hero-cinematic .hero-scroll-link { color: rgba(255,255,255,.45) !important; }
.hero-cinematic .hero-scroll-link:hover { color: #fb7185 !important; }
.hero-cinematic .hero-actions .btn.btn-lg {
    background: linear-gradient(135deg, #e5323e, #b91c1c) !important;
    box-shadow: 0 14px 34px -10px rgba(220,38,38,.6);
}
.hero-cinematic .hero-actions .btn.btn-lg:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -8px rgba(220,38,38,.7); }

/* A flat, solid match for the hero's own resting dark tone (the far end of
   its background gradient), not a translucent tint layered over whatever's
   behind it — .hero-proof sits inside .hero-cinematic below an 80px margin
   gap with no vignette of its own, so any tint here reads as a rectangle at
   a visibly different brightness than the vignette-darkened hero above it.
   A flat match removes the seam outright instead of fighting the gradient
   math to make a translucent overlay land on the same value. */
.hero-cinematic .hero-proof { background: #04080f !important; border-top-color: rgba(255,255,255,.08) !important; position: relative; z-index: 1; }
.hero-cinematic .proof-num { color: #f3f7ff !important; }
.hero-cinematic .proof-label { color: rgba(255,255,255,.4) !important; }
.hero-proof-note {
    text-align: center; font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,.35) !important; padding: 0 24px 20px;
}

/* Illustrative mockup, presented as a glass card floating in the scene */
.hero-mockup-frame {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* The phone mockup's map area, restyled from the shared flat placeholder
   into a small echo of the hero scene's route/incident motif so it reads as
   an illustration instead of a blank colour block. */
.hero-mockup-frame .mockup-map {
    background: linear-gradient(155deg, #0e1b30, #16304e);
    position: relative;
    overflow: hidden;
}
.hero-mini-map svg { width: 100%; height: 100%; display: block; }
.hero-mini-route {
    fill: none; stroke: #fb7185; stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 3 8;
    filter: drop-shadow(0 0 4px rgba(251,113,133,.6));
}
.hero-mini-start { fill: rgba(255,255,255,.85); }
.hero-mini-end { fill: #fb7185; filter: drop-shadow(0 0 5px rgba(251,113,133,.85)); }

/* ---- Positioning statement callout ---- */
.positioning-note {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--slate-50);
    border-left: 3px solid var(--red);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    box-shadow: 0 18px 40px -24px rgba(15,23,42,.35);
}
.positioning-note p {
    font-family: var(--serif); font-style: italic;
    font-size: 19px; line-height: 1.5; color: var(--slate-800);
}
.positioning-note span {
    display: block; margin-top: 10px;
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--slate-400); font-style: normal;
}

[data-theme="dark"] .positioning-note { background: rgba(255,255,255,.04); }
html.amb-public-page[data-theme="dark"] .positioning-note p { color: var(--slate-200, #e2e8f0) !important; }

/* ---- Ambient section polish ---- */
.section-alt {
    background-image: radial-gradient(60% 140% at 85% 0%, rgba(37,99,235,.05), transparent 60%),
                       radial-gradient(50% 120% at 5% 100%, rgba(220,38,38,.04), transparent 60%);
}

.bento-card:hover {
    box-shadow: 0 20px 48px -16px rgba(15,23,42,.16), 0 0 0 1px rgba(220,38,38,.08);
}

.role-mockup .mockup-phone,
.role-mockup .mockup-tablet {
    box-shadow: 0 28px 56px -18px rgba(15,23,42,.22);
}

/* ---- Cinematic CTA close ---- */
.cta-cinematic { position: relative; overflow: hidden; }
.cta-content { position: relative; z-index: 1; }
/* Softness is baked into the gradient stops rather than filter: blur() —
   see the note above .hero-glow for why a large blur filter is avoided. */
.cta-glow {
    position: absolute; inset: -20%;
    z-index: 0;
    background:
        radial-gradient(42% 62% at 20% 15%,
            rgba(220,38,38,.22) 0%,
            rgba(220,38,38,.14) 25%,
            rgba(220,38,38,.07) 45%,
            rgba(220,38,38,.03) 65%,
            transparent 85%),
        radial-gradient(46% 72% at 85% 90%,
            rgba(100,116,139,.16) 0%,
            rgba(100,116,139,.1) 25%,
            rgba(100,116,139,.05) 45%,
            rgba(100,116,139,.02) 65%,
            transparent 85%);
}

.cta-cinematic .btn.btn-lg.demo-submit {
    background: linear-gradient(135deg, #e5323e, #b91c1c) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px -10px rgba(220,38,38,.55);
}
.cta-cinematic .btn.btn-lg.demo-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -8px rgba(220,38,38,.65); }

/* ---- Ambient motion, gated behind reduced-motion ---- */
@media (prefers-reduced-motion: no-preference) {
    .hero-glow-red { animation: heroGlowDriftA 14s ease-in-out infinite; }
    .hero-glow-blue { animation: heroGlowDriftB 18s ease-in-out infinite; }
    .hero-scene-route { animation: heroRouteFlow 5s linear infinite, heroRouteGlow 4s ease-in-out infinite; }
    .hero-scene-incident { animation: heroIncidentPulse 2.4s ease-in-out infinite; }
    .hero-mini-route { animation: heroRouteFlow 3.2s linear infinite; }
    .hero-mockup-frame { animation: heroMockupFloat 6.5s ease-in-out infinite; }
    .cta-glow { animation: ctaGlowBreathe 8s ease-in-out infinite; }
}

@keyframes heroGlowDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .6; }
    50% { transform: translate(20px, 14px) scale(1.06); opacity: .8; }
}
@keyframes heroGlowDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .65; }
    50% { transform: translate(-16px, -12px) scale(1.04); opacity: .85; }
}
@keyframes heroRouteFlow {
    to { stroke-dashoffset: -130; }
}
@keyframes heroRouteGlow {
    0%, 100% { opacity: .55; }
    50% { opacity: .85; }
}
@keyframes heroIncidentPulse {
    0%, 100% { transform: scale(1); opacity: .85; }
    50% { transform: scale(1.35); opacity: 1; }
}
@keyframes heroMockupFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes ctaGlowBreathe {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}