/* =============================================================
   AKU WORLD 2.0 · styles/v2-hero.css
   The approved "Step Into the Book" hero, generated from
   v2/lab/hero.css and scoped under .hero so it can sit on a page
   that also loads the design system. Not redesigned.
   Load after v2-tokens.css and v2-pages.css.
   ============================================================= */
:root{ --cta:var(--starlight); --cta-ink:#1B1608; }
body[data-world="ibra"]{ --world:var(--galaxy); --cta:var(--energy); --cta-ink:#06140F; }
body[data-cta="green"][data-world]{ --cta:var(--energy); --cta-ink:#06140F; }
body[data-cta="white"][data-world]{ --cta:#FFFFFF; --cta-ink:#15131C; }
.hero .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:14px 28px; border:2px solid transparent; border-radius:3px;
  font-family:var(--ui); font-weight:800; font-size:14px; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; cursor:pointer; line-height:1.1;
  transition:transform .18s var(--ease), background-color .5s var(--ease), color .3s, border-color .3s, box-shadow .3s; }
.hero .btn--action{ background:var(--cta); color:var(--cta-ink); box-shadow:0 10px 30px -12px rgba(0,0,0,.7); }
.hero .btn--action:hover{ background:#fff; color:#15131C; transform:translateY(-2px); }
.hero .btn--line{ background:rgba(11,10,18,.34); color:#fff; border-color:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero .btn--line:hover{ background:#fff; color:var(--deep); border-color:#fff; transform:translateY(-2px); }
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; background:var(--night); }
.hero__art{ position:absolute; inset:0; z-index:-2; }
.hero__plate, .hero__plate img{ position:absolute; inset:0; width:100%; height:100%; }
.hero__plate img{ object-fit:cover; }
.hero__plate[data-plate="ibra"] img{ object-position:20% 30%; }
.hero__plate[data-plate="pyra"] img{ object-position:22% 55%; }
.hero__plate{ opacity:0; transition:opacity .9s var(--ease); }
body[data-world="ibra"] .hero__plate[data-plate="ibra"], body[data-world="pyra"] .hero__plate[data-plate="pyra"]{ opacity:1; }
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s var(--ease); }
.hero.is-live .hero__gl{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,10,18,.6) 0%, rgba(11,10,18,0) 20%),
             linear-gradient(0deg, rgba(11,10,18,.55) 0%, rgba(11,10,18,0) 30%),
             linear-gradient(90deg, rgba(11,10,18,.84) 0%, rgba(11,10,18,.66) 24%, rgba(11,10,18,.22) 46%, rgba(11,10,18,0) 60%); }
.hero__copy{ position:relative; padding:0 var(--gut); width:min(calc(760px + var(--gut)), 100%); transition:opacity .45s var(--ease); }
.hero.is-swapping .hero__copy{ opacity:0; }
.hero .world[hidden]{ display:none; }
.hero .hand{ margin:0 0 12px 2px; font-family:var(--hand); font-size:clamp(1.45rem,2.1vw,1.9rem); line-height:1; color:var(--starlight); transform:rotate(-2deg); transform-origin:left bottom; }
.hero .display{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(3rem,5.9vw,5.3rem); line-height:.9; letter-spacing:.01em; text-wrap:balance; text-shadow:0 2px 34px rgba(0,0,0,.5); }
.hero .lede{ margin:26px 0 0; max-width:31ch; font-size:clamp(1.1rem,1.4vw,1.28rem); line-height:1.5; color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.6); }
.hero .facts{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; font-family:var(--ui); font-weight:500; font-size:14px; line-height:1.3; color:var(--starlight); }
.hero .facts li{ padding:0 14px; border-left:1px solid rgba(255,234,167,.45); }
.hero .facts li:first-child{ padding-left:0; border-left:0; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero .switch{ position:relative; display:flex; gap:0; margin:clamp(34px,6vh,64px) var(--gut) calc(clamp(24px,4.5vh,48px) + env(safe-area-inset-bottom,0px)); align-self:flex-start; border:2px solid rgba(255,255,255,.7); border-radius:3px; overflow:hidden;
  background:rgba(11,10,18,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero .switch__b{ appearance:none; border:0; background:transparent; color:#fff; cursor:pointer; padding:10px 22px 11px; min-width:132px; min-height:56px; text-align:left; display:flex; flex-direction:column; gap:1px; transition:background-color .35s, color .35s; }
.hero .switch__b + .switch__b{ border-left:2px solid rgba(255,255,255,.7); }
.hero .switch__n{ font-family:var(--ui); font-weight:500; font-size:12px; opacity:.8; }
.hero .switch__t{ font-family:var(--display); font-weight:900; font-size:1.15rem; text-transform:uppercase; line-height:1; }
.hero .switch__b:hover{ background:rgba(255,255,255,.14); }
.hero .switch__b[aria-pressed="true"]{ background:#fff; color:var(--deep); }
.hero .switch__b[aria-pressed="true"] .switch__t{ color:var(--world); }
.hero.is-travelling .switch__b{ cursor:default; }
.hero .hint{ display:none; }
.hero .sound{ position:absolute; right:var(--gut); bottom:calc(clamp(24px,4.5vh,48px) + env(safe-area-inset-bottom,0px)); z-index:5; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 14px;
  appearance:none; border:2px solid rgba(255,255,255,.55); border-radius:3px; background:rgba(11,10,18,.4); color:#fff; cursor:pointer; font-family:var(--ui); font-weight:500; font-size:13px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero .sound i{ width:14px; height:14px; border-radius:50%; border:2px solid currentColor; }
.hero .sound[aria-pressed="true"]{ border-color:var(--cta); }
.hero .sound[aria-pressed="true"] i{ background:var(--cta); border-color:var(--cta); }
@media (max-width:760px){
:root{ --art-h:min(133.34vw, 62svh); }
.hero{ justify-content:flex-start; }
.hero__art{ position:relative; inset:auto; z-index:0; height:var(--art-h); flex:none; touch-action:pan-y; }
.hero__plate[data-plate="ibra"] img, .hero__plate[data-plate="pyra"] img{ object-position:50% 50%; }
.hero__scrim{ inset:0 0 auto 0; height:var(--art-h); z-index:1;
    background:linear-gradient(180deg, rgba(11,10,18,.62) 0%, rgba(11,10,18,0) 20%),
               linear-gradient(0deg, var(--night) 0%, rgba(11,10,18,.7) 12%, rgba(11,10,18,0) 34%); }
.hero__copy{ z-index:2; margin-top:-58px; padding:0 20px; width:100%; }
.hero .hand{ font-size:1.4rem; margin-bottom:8px; }
.hero .display{ font-size:clamp(2.5rem,12.4vw,3.5rem); }
.hero .lede{ display:none; margin-top:14px; font-size:1rem; line-height:1.45; max-width:34ch; text-shadow:none; color:rgba(255,255,255,.9); }
.hero .facts{ margin-top:14px; font-size:12.5px; flex-wrap:nowrap; white-space:nowrap; }
.hero .facts li{ padding:0 10px; }
.hero .facts li:nth-child(3){ display:none; }
.hero .actions{ margin-top:18px; }
.hero .actions .btn{ flex:1 1 100%; }
.hero .btn--wide{ display:none; }
.hero .switch{ z-index:2; align-self:stretch; margin:14px 20px calc(18px + env(safe-area-inset-bottom,0px)); }
.hero .switch__b{ flex:1 1 0; min-width:0; }
.hero .hint{ display:block; position:absolute; z-index:2; right:18px; bottom:104px; margin:0; font-family:var(--hand); font-size:1.15rem; color:#fff; opacity:.9; transform:rotate(-3deg);
    text-shadow:0 1px 10px rgba(0,0,0,.7); pointer-events:none; animation:nudge 2.6s var(--ease) 1.2s 3 both; transition:opacity .6s; }
.hero .hint::after{ content:" \2192"; font-family:var(--ui); }
.hero .hint.is-done{ opacity:0; }
.hero .sound{ top:calc(86px + env(safe-area-inset-top,0px)); bottom:auto; right:20px; min-height:36px; padding:5px 11px; font-size:12px; gap:8px; }
.hero .sound i{ width:11px; height:11px; }
}
@media (max-width:760px) and (min-height:800px){
.hero .lede{ display:block; }
}
@keyframes nudge{ 0%,100%{ transform:rotate(-3deg) translateX(0); } 50%{ transform:rotate(-3deg) translateX(-10px); } }
@media (prefers-reduced-motion: reduce){
.hero .hint{ animation:none; }
.hero__plate, .hero .btn, .hero__copy{ transition:none; }
}
/* the header button follows the world on screen (hero pages only) */
.site-top--hero .btn{ background:var(--cta); color:var(--cta-ink); transition:background-color .5s var(--ease), color .3s; }
.site-top--hero .btn:hover{ background:#fff; color:#15131C; }
.site-top--hero .menu > summary{ border-color:#fff; color:#fff; background:rgba(11,10,18,.34); }
.site-top--hero .menu[open] > summary{ background:#fff; color:var(--deep); }

/* the hero is always light type on art, whatever mode the rest of the page uses */
.hero{ color:#fff; }
.hero .display, .hero .lede{ color:#fff; }