/* ==========================================================================
   hero.css — animated "From intent to order" hero
   Profile tile-scatter (exact vocabulary from cover-front.php) + heartbeat.
   Tiles are generated by js/hero-scatter.js into #scatter.
   ========================================================================== */

:root {
    /* mm→px scale for the profile scatter (profile tile = 30mm) */
    --mm: 2.8px;
}

.hero {
    position: relative;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow: hidden;
    background: #A5CFED;            /* profile cover field (phase-2.56 nudge) */
    display: flex;
    align-items: center;
}

/* ---- scatter field (tiles injected by JS) ---- */
.cov-scatter {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ---- Hero background video (optional) ----------------------------------
   A full-bleed muted autoplay loop behind the headline, at the same layer as
   the tile scatter (z-index:1) so the headline (z-index:10) stays on top. The
   sky-blue .hero background + poster show until the video paints, so there's no
   flash. To REVERT to the tile scatter: remove the <video class="hero__video">
   from index.html and delete the data-video-active attribute on .hero. ------ */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    display: block;
}
/* when a video is active, hide the JS tile scatter so they don't stack */
.hero[data-video-active] .cov-scatter { display: none; }

.cov-stile {
    position: absolute;
    overflow: hidden;
    /* heartbeat: each tile pulses opacity around base --o, fast --dur */
    animation: beat var(--dur, 1.6s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.cov-st-ice       { background: var(--ice); }
.cov-st-cer-light { background: var(--cerulean-light); }
.cov-st-cer       { background: var(--cerulean); }
.cov-st-deepsky   { background: var(--deep-sky); }
.cov-st-indigo    { background: var(--indigo); }
.cov-st-midnight  { background: var(--midnight); }
.cov-st-accent    { background: var(--cerulean); position: absolute; }
.cov-st-accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        transparent 48%,
        rgba(255, 255, 255, 0.45) 48%,
        rgba(255, 255, 255, 0.45) 52%,
        transparent 52%);
}
.cov-stile-svg svg { width: 100%; height: 100%; display: block; }

@keyframes beat {
    0%, 100% { opacity: var(--o); }
    50%      { opacity: calc(var(--o) * 0.32); }
}
@media (prefers-reduced-motion: reduce) {
    .cov-stile { animation: none; opacity: var(--o); }
}

/* legibility wash over the left where the text sits */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(165, 207, 237, 0.95) 0%,
        rgba(165, 207, 237, 0.55) 40%,
        rgba(165, 207, 237, 0) 64%);
}

/* ---- hero content ---- */
.hero__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(24px, 4vh, 72px) var(--pad-x);
}
@media (max-width: 768px) {
    .hero { height: auto; min-height: calc(100svh - var(--header-h)); display: block; }
    .hero__inner { padding: clamp(48px, 9vw, 80px) var(--pad-x-mobile); }
}

.hero__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--deep-sky);
    margin-bottom: clamp(12px, 2.2vh, 24px);
    opacity: 0;
    animation: hero-rise .9s var(--ease-out) .3s forwards;
}
.hero__title {
    font-size: var(--fs-hero);
    font-weight: 900;
    letter-spacing: var(--tr-hero);
    line-height: 0.96;
    color: var(--raven);
    max-width: 15ch;
    opacity: 0;
    animation: hero-rise 1s var(--ease-out) .5s forwards;
}
@media (min-width: 769px) {
    .hero__title { font-size: min(var(--fs-hero), 13vh); }
}
.hero__title .accent { color: var(--cerulean); }

.hero__rule {
    width: 90px; height: 3px;
    background: var(--cerulean);
    border: 0;
    margin: clamp(18px, 3vh, 32px) 0;
    opacity: 0;
    animation: hero-rise .8s var(--ease-out) .8s forwards;
}
.hero__lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--midnight);
    max-width: 50ch;
    opacity: 0;
    animation: hero-rise .9s var(--ease-out) .95s forwards;
}
.hero__actions {
    margin-top: clamp(20px, 3.4vh, 36px);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: hero-rise .9s var(--ease-out) 1.1s forwards;
}

@keyframes hero-rise { to { opacity: 1; transform: none; } }
.hero__eyebrow, .hero__title, .hero__rule, .hero__lead, .hero__actions { transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow, .hero__title, .hero__rule, .hero__lead, .hero__actions {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
}

/* status line bottom of hero */
.hero__status {
    position: absolute;
    bottom: 26px;
    inset-inline: var(--pad-x);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(11, 36, 69, 0.5);
    opacity: 0;
    animation: hero-rise 1s ease 1.4s forwards;
}
.hero__status .dot { color: var(--cerulean); }
@media (max-width: 768px) { .hero__status { display: none; } }