:root {
    --bg: #0b0b0e;
    --fg: #efefef;
    --muted: #9aa0a6;
    --accent: #f5c542; /* gold */
}
:root {
    --card-top: 8vmin; /* will be updated on interaction */
    --portal-x: 80vw;  /* will be updated on interaction */
    --portal-y: 22vh;  /* will be updated on interaction */
}
html, body { height: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden; /* lock scroll for true splash feel */
}
#bg-video {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    object-fit: cover; z-index: 0;
    filter: brightness(0.85) contrast(1.08) saturate(1.15);
}
.grain { /* subtle film grain layer */
    position: fixed; inset: -50px; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.75\" numOctaves=\"2\" stitchTiles=\"stitch\"/></filter><rect width=\"200\" height=\"200\" filter=\"url(%23n)\"/></svg>');
    animation: moveGrain 12s linear infinite;
}
@keyframes moveGrain { from {transform: translate3d(0,0,0)} to {transform: translate3d(-200px,-200px,0)} }
header.hero {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
}
/* Futuristic comet + portal reveal */
.comet {
    position: fixed; z-index: 2; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ffd77a 35%, #f5c542 60%, rgba(245,197,66,0));
    box-shadow: 0 0 24px 6px rgba(245,197,66,.55), 0 0 64px 16px rgba(245,197,66,.25);
    filter: blur(.2px); opacity: 0; pointer-events: none;
    transform: translate3d(-20vw, 110vh, 0);
}
.comet::after { /* trail */
    content: ""; position: absolute; left: -120px; top: 50%; height: 2px; width: 140px;
    background: linear-gradient(90deg, rgba(245,197,66,0), rgba(245,197,66,.9));
    transform: translateY(-50%); filter: blur(1px);
}
body.summon .comet {
    opacity: 1; animation: cometFlight 900ms cubic-bezier(.12,.7,.1,1) forwards;
}
@keyframes cometFlight {
    0%   { transform: translate3d(-20vw, 110vh, 0); opacity: 0; }
    10%  { opacity: 1; }
    75%  { transform: translate3d(calc(var(--portal-x) - 24px), calc(var(--portal-y) + 24px), 0) rotate(-8deg); }
    100% { transform: translate3d(var(--portal-x), var(--portal-y), 0) rotate(0deg); opacity: 0; }
}
.portal {
    position: fixed; z-index: 2; width: 20vmax; height: 20vmax; pointer-events: none; opacity: 0;
    transform: translate3d(calc(var(--portal-x) - 10vmax), calc(var(--portal-y) - 10vmax), 0) scale(.2);
    background: radial-gradient(closest-side, rgba(245,197,66,.35), rgba(245,197,66,.15) 35%, rgba(245,197,66,0) 70%);
    mix-blend-mode: screen; filter: blur(6px);
}
body.summon .portal { animation: portalPulse 950ms ease forwards; }
@keyframes portalPulse {
    0% { opacity: 0; transform: translate3d(calc(var(--portal-x) - 10vmax), calc(var(--portal-y) - 10vmax), 0) scale(.2); }
    50% { opacity: .75; transform: translate3d(calc(var(--portal-x) - 10vmax), calc(var(--portal-y) - 10vmax), 0) scale(1.04); }
    100% { opacity: 0; transform: translate3d(calc(var(--portal-x) - 10vmax), calc(var(--portal-y) - 10vmax), 0) scale(1.2); }
}
/* Docking hero reveal (left/right on interaction) */
#heroReveal {
    position: fixed; bottom: 6vmin; left: 6vmin; right: auto; top: auto;
    width: min(820px, 92vw);
    margin: 0; pointer-events: auto;
    transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s ease, -webkit-mask-size .8s ease;
    opacity: 0; transform: translate3d(-30px, -10px, 0) rotateY(-8deg) scale(.98);
    will-change: transform, opacity;
    /* radial mask reveal centered at portal */
    -webkit-mask-image: radial-gradient(circle at var(--reveal-cx, 50%) var(--reveal-cy, 20%), #000 0%, #000 30%, transparent 32%);
    -webkit-mask-size: 0% 0%;
    -webkit-mask-repeat: no-repeat;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Removed #heroReveal.dock-right and #heroReveal.dock-left rules as requested */
body.has-interacted #heroReveal.reveal {
    opacity: 1; transform: none;
    transition: -webkit-mask-size .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
    -webkit-mask-size: 1200% 1200%; /* expand far beyond to avoid clipping */
}

/* After reveal, completely remove the mask so nothing clips */
body.has-interacted #heroReveal.unmasked {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/* Futuristic blended typography */
.hero-copy { text-align: left; pointer-events: auto; }
.hero-copy .kicker {
    color: rgba(255,255,255,.55);
    letter-spacing: .18em; text-transform: uppercase;
    mix-blend-mode: lighten;
    opacity: .9;
}
.hero-copy h1 {
    margin: .2em 0 .25em 0;
    line-height: .92;
    text-wrap: balance;
    filter: drop-shadow(0 8px 22px rgba(245,197,66,.22));
    letter-spacing: -0.015em;
    mix-blend-mode: lighten;
}
.hero-copy .sub {
    color: rgba(255,255,255,.82);
    max-width: 70ch;
    mix-blend-mode: lighten;
    opacity: .9;
}
.cta {
    display: inline-block; margin-top: 1rem; text-decoration: none; font-weight: 700;
    color: rgba(255,255,255,.92); position: relative; mix-blend-mode: lighten;
}
.cta::after {
    content:""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, rgba(245,197,66,0), rgba(245,197,66,1), rgba(245,197,66,0));
    transform: scaleX(.45); transform-origin: center; transition: transform .25s ease;
}
.cta:hover::after { transform: scaleX(1); }
h1 { font-size: clamp(36px, 8vmin, 88px); line-height: 0.95; letter-spacing: -0.02em; margin: 0; }
.gold { background: radial-gradient(120% 120% at 50% 0%, #ffe9a3 0%, #f5c542 35%, #b98500 70%, #2f2100 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
p.kicker { color: var(--muted); margin: 0; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
p.sub { margin: 0; opacity: .9; font-size: clamp(14px, 2.2vmin, 18px); }
/* === Minimal HUD (blended, no card) === */
.hud {
    position: fixed; top: 6vmin; right: 6vmin; z-index: 2; pointer-events: none;
    display: grid; gap: 10px; mix-blend-mode: lighten; color: #fff;
    font-weight: 600; letter-spacing: .01em;
}
.hud .chip {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 999px; backdrop-filter: blur(0px);
    background: rgba(0,0,0,0); border: 0; box-shadow: none;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hud .chip .label { opacity: .72; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.hud .chip .value { font-size: 16px; font-weight: 700; }
.hud .chip .delta.up::before { content:"▲ "; }
.hud .chip .delta.down::before { content:"▼ "; }
.hud .muted { opacity: .7; font-weight: 500; }
.hud .small { font-size: 12px; }
@media (max-width: 900px) { .hud { top: 12px; right: 12px; gap: 6px; } .hud .chip { padding: 6px 8px; } }
footer { position: fixed; z-index: 2; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }


/* --- Cinematic light-beam pass over the hero card --- */
#heroReveal::before {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 3;
    width: 46vmax;           /* beam length */
    height: 2px;
    left: var(--portal-x);
    top: var(--portal-y);
    opacity: 0;
    transform-origin: left center;
    transform: translate(-8vw, 16vh) rotate(-12deg) scaleX(0.2);
    filter: blur(4px);
    background:
            radial-gradient(closest-side, rgba(245,197,66,.9), rgba(245,197,66,0.1) 70%) /* core */,
            linear-gradient(90deg, rgba(245,197,66,0) 0%, rgba(245,197,66,.9) 12%, rgba(245,197,66,0) 28%) /* trail */;
    box-shadow:
            0 0 30px 6px rgba(245,197,66,.35),
            0 0 90px 24px rgba(245,197,66,.15);
}

#heroReveal.beam-on::before {
    animation: beamPass 900ms cubic-bezier(.16,.78,.12,1) forwards;
}

@keyframes beamPass {
    0%   { opacity: 0; transform: translate(-10vw, 22vh) rotate(-16deg) scaleX(0.15); }
    10%  { opacity: .7; }
    60%  { opacity: .9; transform: translate(-2vw, 6vh) rotate(-10deg) scaleX(1.05); }
    100% { opacity: 0; transform: translate(12vw, -4vh) rotate(-6deg)  scaleX(1.2); }
}

/* --- Line-by-line rise-in synced with the beam --- */
.hero-copy .kicker,
.hero-copy h1,
.hero-copy .sub {
    opacity: 0;
    transform: translateY(12px);
    will-change: transform, opacity;
}

body.has-interacted #heroReveal.reveal .kicker { animation: riseIn .45s ease-out .08s forwards; }
body.has-interacted #heroReveal.reveal h1      { animation: riseIn .50s ease-out .16s forwards; }
body.has-interacted #heroReveal.reveal .sub    { animation: riseIn .55s ease-out .26s forwards; }

@keyframes riseIn {
    0%   { opacity: 0; transform: translateY(12px); filter: blur(3px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* --- Gold text shimmer sweep (one-shot) --- */
.hero-copy h1 .gold {
    background-image:
            radial-gradient(120% 120% at 50% 0%, #ffe9a3 0%, #f5c542 35%, #b98500 70%, #2f2100 100%),
            linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 12%, rgba(255,255,255,0) 22%);
    background-size: auto, 220% 100%;
    background-position: center top, -160% 0%;
}

body.has-interacted #heroReveal.reveal .gold {
    animation: shimmerMove 1.3s ease-out .22s forwards;
}

@keyframes shimmerMove {
    0%   { background-position: center top, -160% 0%; }
    100% { background-position: center top,  260% 0%; }
}