/* Homepage hero film: the film sits in the hero, above the fold on every screen. */
/* Hero copy sits centered above the film, matching the sales page. */
.world-home .world-hero, .world-hero { grid-template-columns:1fr; gap:0; padding-block:0; min-height:0; padding:18px 0 26px; }
.world-hero .hero-copy { grid-column:1/-1; max-width:900px; margin:0 auto; text-align:center; }
.world-hero .hero-copy h1 { font-size:clamp(2rem,3.5vw,3.5rem); line-height:1.02; }
.world-hero .hero-copy .lede { margin:10px auto 10px; }
.world-hero .hero-actions { grid-column:1/-1; justify-content:center; margin:14px 0 0; }
.world-hero .hero-entry-note { text-align:center; }
.world-hero .hero-entry-note { display:none; }
.world-hero .hero-copy .eyebrow { margin-bottom:10px; }
.world-hero .hero-film-note { text-align:center; }
.world-hero .concept-line { justify-content:center; margin:8px 0 0; }
.world-hero .hero-film { grid-column:1/-1; justify-self:center; width:min(100%, 1180px, max(300px, calc((100svh - 470px) * 16 / 9))); margin:4px auto 0; animation:heroFilmIn .9s ease-out both; }
.hero-film-note { margin:0 0 8px; font:600 .78rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light, var(--gold)); animation:heroNotePulse 2.6s ease-in-out infinite; }
.hero-film-frame { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--gold); box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 25%,transparent), 0 18px 50px -18px color-mix(in srgb,var(--gold) 55%,transparent); }
.hero-film-frame video { display:block; width:100%; height:auto; aspect-ratio:16/9; margin:0; border:0; border-radius:0; background:var(--deep); }
.hero-film-play { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle, transparent 30%, color-mix(in srgb,var(--background, #07110c) 45%,transparent)); border:0; cursor:pointer; }
.hero-film-play[hidden] { display:none; }
.hero-film-ring { position:relative; display:grid; place-items:center; width:84px; height:84px; padding-left:6px; border-radius:50%; font-size:1.9rem; color:var(--ink, #07110c); background:linear-gradient(120deg,#8c7038 0%,#e0c48c 35%,#fff3d6 50%,#e0c48c 65%,#8c7038 100%); background-size:250% 100%; animation:heroShimmer 2.4s linear infinite, heroPulse 2.2s ease-in-out infinite; }
.hero-film-ring::after { content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--gold); animation:heroRipple 2.2s ease-out infinite; }
.hero-film-play:hover .hero-film-ring, .hero-film-play:focus-visible .hero-film-ring { transform:scale(1.08); }
@keyframes heroShimmer { from { background-position:200% 0; } to { background-position:-50% 0; } }
@keyframes heroPulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent); } 50% { box-shadow:0 0 28px 6px color-mix(in srgb,var(--gold) 45%,transparent); } }
@keyframes heroRipple { from { opacity:.8; transform:scale(.9); } to { opacity:0; transform:scale(1.35); } }
@keyframes heroNotePulse { 0%,100% { opacity:.75; } 50% { opacity:1; } }
@keyframes heroFilmIn { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
/* The oval map artwork sits between the legend and the "Thousands of Years" section. */
main > .hero-map { width:min(720px,100%); margin:0 auto 64px; }
@media (max-width:700px) { .hero-film { width:100%; } .hero-film-ring { width:64px; height:64px; font-size:1.4rem; } main > .hero-map { width:min(520px,92%); margin:0 auto 48px; } }
@media (prefers-reduced-motion:reduce) { .hero-film, .hero-film-note, .hero-film-ring, .hero-film-ring::after { animation:none; } }
.world-hero > .concept-line { grid-column:1\/-1; margin:12px 0 0; }