/* =====================================================================
 * Main page — brand hero
 *
 * Calm typographic hero. Entry motion is gated by `html.hero-ready`,
 * which an inline script in main.ejs sets only after the browser has
 * completed its first paint (two rAFs). This prevents the CSS animation
 * clock from advancing during initial parse/layout/rasterisation —
 * otherwise the user would see elements snap straight to their end
 * state because the fade-in has already elapsed before paint lands.
 *
 * The aura animation is delayed past the entry sweep so the first
 * frames never have to composite two animated layers at once.
 * ===================================================================== */

/* Reset shared chrome so the hero can breathe full-bleed. */
#wrapper-contents {
    padding: 0;
    background-color: var(--global-body-background);
}

#main-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3.2vh, 40px);
    padding: clamp(80px, 14vh, 160px) 24px clamp(80px, 12vh, 140px);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ---------- Ambient mesh aura ----------
   Animation kicks in 1.2s after load so it never competes with the
   entry fade for compositor cycles. translate-only keyframes keep the
   blurred texture from being re-rasterised per frame. */
.hero-aura {
    position: absolute;
    inset: -25% -15% auto -15%;
    height: 110%;
    z-index: -1;
    background:
        radial-gradient(38% 48% at 22% 30%, rgba(var(--brand-iris-rgb),     0.22), transparent 70%),
        radial-gradient(34% 42% at 78% 22%, rgba(var(--brand-mulberry-rgb), 0.18), transparent 72%),
        radial-gradient(40% 46% at 62% 72%, rgba(var(--brand-lichen-rgb),   0.18), transparent 70%),
        radial-gradient(36% 40% at 18% 78%, rgba(var(--brand-brass-rgb),    0.16), transparent 72%);
    filter: blur(60px) saturate(120%);
    opacity: 0.9;
    pointer-events: none;
}
.hero-aura {
    animation: hero-aura-drift 26s ease-in-out 1.2s infinite alternate;
}
@keyframes hero-aura-drift {
    0%   { transform: translate3d(-2%, -1%, 0); }
    100% { transform: translate3d( 2%,  1%, 0); }
}

/* ---------- Hero elements ----------
   Default state is fully invisible + 16px below rest. The animation
   restores them to their final position. No JS gating — the default
   state is what the very first paint shows, so the user never sees a
   flash of `opacity:1` content before the entry sequence begins. */
.hero-mark,
.hero-wordmark,
.hero-tagline,
.hero-beta,
.hero-secondary-link {
    opacity: 0;
    transform: translateY(16px);
}
.hero-mark              { animation: hero-fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards; }
.hero-wordmark          { animation: hero-fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards; }
.hero-tagline-primary   { animation: hero-fade-up 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards; }
.hero-tagline-secondary { animation: hero-fade-up 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.70s forwards; }
.hero-beta              { animation: hero-fade-up 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards; }
.hero-secondary-link    { animation: hero-fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards; }

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Brand mark ----------
   Mirrors the about page mark — same gradient stops, same sheen overlay,
   same drop-shadow recipe. Both pages are intentionally static (no spin,
   no hue cycle, no sweep); the sheen sits at its rest transform so the
   mark reads as a frozen highlight rather than an animated identity. */
.hero-mark {
    width: clamp(72px, 9vw, 112px);
    aspect-ratio: 603 / 958;
}
.hero-mark svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: drop-shadow(0 12px 40px rgba(var(--brand-iris-rgb), 0.22));
}
.hero-mark-sweep {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: rotate(20deg) translateX(-40%);
    mix-blend-mode: overlay;
}

/* ---------- Wordmark ---------- */
.hero-wordmark {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--global-text-color);
    /* Brand wordmark is one token — never break mid-word.
       Overrides inherited `overflow-wrap: anywhere`. */
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ---------- Tagline ---------- */
.hero-tagline {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    font-family: inherit;
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: -0.012em;
    color: var(--global-text-color);
}
.hero-tagline span { display: block; }
.hero-tagline-primary {
    margin-top: clamp(12px, 2vh, 24px);
    font-size: clamp(20px, 2.2vw, 28px);
}
.hero-tagline-secondary {
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--global-text-muted);
}

/* ---------- Closed Beta notice ---------- */
.hero-beta {
    margin-top: clamp(28px, 5vh, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.hero-beta-badge {
    /* Outlined badge — DESIGN.md §7.8. */
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 10px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: var(--global-text-muted);
    border: 1px solid rgba(var(--global-text-color-rgb), 0.16);
    background: transparent;
}
.hero-beta-message {
    margin: 0;
    max-width: 520px;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(13px, 1.15vw, 14px);
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
    white-space: pre-line;
}
.hero-beta-email {
    color: var(--global-text-color);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--global-text-color-rgb), 0.25);
    padding-bottom: 1px;
    margin-left: 0.35em;
    transition: border-color 0.3s ease;
}
.hero-beta-email:hover { border-bottom-color: var(--global-text-color); }

.hero-beta-contact {
    margin: 6px 0 0;
    font-size: 0.92em;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: rgba(var(--global-text-color-rgb), 0.55);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px 0;
}
.hero-beta-contact .hero-beta-email { margin-left: 0.25em; }

/* ---------- Secondary CTA ---------- */
.hero-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: clamp(20px, 3.5vh, 36px);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(var(--global-text-color-rgb), 0.7);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--global-text-color-rgb), 0.18);
    padding-bottom: 2px;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        gap 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-secondary-link:hover {
    color: var(--global-text-color);
    border-bottom-color: var(--global-text-color);
    gap: 10px;
}
.hero-secondary-link svg { flex-shrink: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html.hero-init .hero-mark,
    html.hero-init .hero-wordmark,
    html.hero-init .hero-tagline,
    html.hero-init .hero-beta,
    html.hero-init .hero-secondary-link { opacity: 1; transform: none; }
    html.hero-ready .hero-aura,
    html.hero-ready .hero-mark,
    html.hero-ready .hero-wordmark,
    html.hero-ready .hero-tagline-primary,
    html.hero-ready .hero-tagline-secondary,
    html.hero-ready .hero-beta,
    html.hero-ready .hero-secondary-link { animation: none; }
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
    .hero-aura { opacity: 0.7; }
    .hero-mark svg { filter: drop-shadow(0 12px 40px rgba(var(--brand-iris-rgb), 0.40)); }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    #main-hero {
        padding-top: clamp(56px, 10vh, 96px);
        padding-bottom: clamp(56px, 9vh, 96px);
        padding-left: clamp(28px, 8vw, 48px);
        padding-right: clamp(28px, 8vw, 48px);
    }
    .hero-wordmark { font-size: clamp(44px, 13vw, 72px); }
    .hero-tagline { max-width: 100%; }
    .hero-tagline-primary br,
    .hero-tagline-secondary br { display: none; }
    .hero-beta-message { padding: 0; }
}