/* ════════════════════════════════════════════════════════════════════════
   home.css — zBrush for the HOME page only (zMeta.zBrush: [home]).
   Named for the PAGE, not the <zVaF> system tag — <zVaF> means too many things
   across zOS (root element / template / runtime chrome host) to also be a brush.

   ACT III revival — home-only IDENTITY classes (the cinematic opening hero).
   Revived from _archive/styles_2026-06-15/zVaF.css, trimmed to ONLY the hero
   the current zUI.zVaF.zolo uses. The shared zc- layout grammar
   (container / section / title / subtitle) is NOT revived yet — it returns
   later as its own layout brush. SSOT for the hero look: this file.

   DOM note: the readable content column lives on <zVaF> (zCloud.css canvas).
   The hero is the page's opening canvas, so it BREAKS OUT to full-bleed using
   the same recipe as the canonical navbar (zbase.css) — gradient spans the
   viewport, text self-centers via flex. Sections below stay in the column.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Canvas — full-bleed gradient + soft top glow ────────────────────────── */
.hero-landing {
    /* Escape the centered <zVaF> column to the viewport edges. The math
       self-cancels when the parent is already full width (50% == 50vw), so it's
       inert wherever the hero lands. Mirrors zbase.css zNavBar. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);

    background:
        radial-gradient(55% 45% at 50% 0%, rgba(124, 58, 237, 0.10), transparent 62%),
        linear-gradient(180deg, #0A0E27 0%, #0b0f24 55%, #0d1126 100%);
    min-height: 100vh;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* ── Stage — full-viewport, vertically-centred opening shot ───────────────── */
.hero-top {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 1.5rem 6rem;
    position: relative;
}
.hero-top::before {
    content: '';
    position: absolute;
    top: 43%;
    left: 50%;
    width: min(840px, 92vw);
    height: 640px;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side,
        rgba(124, 58, 237, 0.22),
        rgba(79, 70, 229, 0.06) 55%,
        transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.hero-top > * { position: relative; z-index: 1; }

/* ── Logo — giant, glowing ───────────────────────────────────────────────── */
.hero-logo-xl {
    width: 380px;
    max-width: 78vw;
    height: auto;
    margin: 0 auto 2rem;
    display: block;
    filter:
        drop-shadow(0 0 60px rgba(124, 58, 237, 0.42))
        drop-shadow(0 0 120px rgba(79, 70, 229, 0.22));
}

/* ── Alpha badge — quiet green eyebrow ───────────────────────────────────── */
.hero-alpha-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #7CC83A;
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ── Title — solid near-white, calm scale ────────────────────────────────── */
.hero-landing .hero-title {
    font-size: clamp(2.75rem, 7vw, 5.4rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.02;
    margin: 0.5rem 0 1.5rem;
    background: none;
    -webkit-text-fill-color: #f5f5f7;
    color: #f5f5f7;
    text-shadow: none;
}

/* ── Subtitle ────────────────────────────────────────────────────────────── */
.hero-subtitle {
    font-size: 1.35rem;
    color: #a1a1aa;
    max-width: 40ch;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
    font-weight: 400;
}

/* ── Action row (button skin stays bifrost-owned — SSOT) ─────────────────── */
.hero-top .hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

/* ── Entrance — each beat rises into place once on load ───────────────────── */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.hero-top > * { animation: hero-rise 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-top .hero-logo-xl     { animation-delay: 0.05s; }
.hero-top .hero-alpha-badge { animation-delay: 0.32s; }
.hero-top .hero-title       { animation-delay: 0.44s; }
.hero-top .hero-subtitle    { animation-delay: 0.60s; }
.hero-top .hero-actions     { animation-delay: 0.76s; }
@media (prefers-reduced-motion: reduce) {
    .hero-top > * { animation: none; }
}

/* ── Responsive (hero chrome) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-top      { padding: 6rem 1.25rem 4rem; }
    .hero-subtitle { font-size: 1.3rem; }
    .hero-logo-xl  { width: 280px; }
}
@media (max-width: 480px) {
    .hero-subtitle { font-size: 1.15rem; }
}