/* ════════════════════════════════════════════════════════════════
   ELDARA GAMES — STUDIO SYSTEM
   The studio's own interface, independent of any one game: midnight
   ink, cool light, one signal blue, Archivo. Game art always sits
   inside a frame; the frame belongs to the studio.

   Tokens (colour, type, space, motion) · base · the header and its
   mobile sheet · buttons and links · the footer · the trailer
   theatre (ui/theatre.js builds the <dialog>).
   ════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ──────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;

  /* ink: the stage everything sits on */
  --ink-0:#04060a;
  --ink-1:#080b11;
  --ink-2:#0d1119;
  --ink-3:#141a25;
  --ink-4:#1d2534;
  --line:rgb(196 214 255 / .09);
  --line-2:rgb(196 214 255 / .17);
  --line-3:rgb(196 214 255 / .32);
  --text:#eef2f8;
  --text-2:#b4bdcc;
  --text-3:#808a9c;

  /* signal: the studio's one accent (focus, state, direction) */
  --signal:#4d8dff;
  --signal-hi:#a3c4ff;
  --signal-strong:#2c6be6;      /* fills under white text, 4.8:1 */
  --live:#46d39a;               /* "out now" */

  /* paper: the one bright surface, for reading */
  --paper:#edf0f4;
  --paper-2:#dde3eb;
  --paper-ink:#0a0e15;
  --paper-text-2:#48515f;
  --paper-line:rgb(10 14 21 / .12);
  --paper-signal:#1f5fd6;

  /* type */
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-label:.6875rem;
  --fs-small:.875rem;
  --fs-body:1rem;
  --fs-lead:clamp(1.0625rem,.99rem + .28vw,1.25rem);
  --fs-h3:clamp(1.25rem,1.08rem + .62vw,1.75rem);
  --fs-h2:clamp(2.125rem,1.5rem + 2.3vw,3.5rem);
  --fs-display:clamp(2.75rem,1.45rem + 4.3vw,5.75rem);

  /* space */
  --g:clamp(16px,3.2vw,48px);          /* page gutter */
  --max:1520px;
  --section:clamp(96px,7vw + 48px,176px);
  --header-h:72px;
  --r-xl:clamp(18px,1.7vw,30px);
  --r-lg:18px;
  --r:12px;
  --r-sm:8px;

  /* motion: one language for the whole site */
  --ease:cubic-bezier(.16,1,.3,1);        /* arrivals and settles: fast out, long glide */
  --ease-ui:cubic-bezier(.25,.8,.25,1);   /* hover, press, focus */
  --ease-io:cubic-bezier(.65,0,.35,1);    /* things that travel and come back */
  --t-ui:200ms;
  --t-enter:820ms;
  --t-media:1300ms;
  --stagger:80ms;
}
@media (max-width:640px){ :root{ --header-h:64px; } }

/* ── base ────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--ink-1);
  scroll-padding-top:var(--header-h);
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; min-height:100svh;
  background:var(--ink-1); color:var(--text);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.6; font-stretch:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--signal-strong); color:#fff; }

.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:fixed; left:var(--g); top:12px; z-index:100;
  padding:10px 16px; border-radius:999px; background:var(--text); color:var(--ink-1);
  font-weight:600; font-size:var(--fs-small);
  translate:0 -160%; transition:translate var(--t-ui) var(--ease-ui);
}
.skip-link:focus-visible{ translate:0 0; }
main:focus{ outline:none; }

.wrap{ width:min(100% - 2 * var(--g), var(--max)); margin-inline:auto; }
.icon{ width:1em; height:1em; fill:currentColor; flex:none; }

/* type roles */
.label{
  font-size:var(--fs-label); font-weight:600; font-stretch:125%;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.35;
  color:var(--text-2);
}
.display{
  font-size:var(--fs-display); font-weight:660; font-stretch:100%;
  letter-spacing:-.035em; line-height:.98;
}
.h2{
  font-size:var(--fs-h2); font-weight:640; font-stretch:100%;
  letter-spacing:-.03em; line-height:1.02;
}
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--text-2); max-width:44ch; }

/* Masked lines: <span class="line"><span>…</span></span>. The inner
   span rises into place when its group enters (see pages). */
.line{ display:block; overflow:hidden; padding-block:.06em .1em; margin-block:-.06em -.1em; }
.line > span{ display:block; }

/* status chip: a dot and a word */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  height:26px; padding:0 11px 0 9px; border-radius:999px;
  border:1px solid var(--line-2); background:rgb(8 11 17 / .5);
  font-size:var(--fs-label); font-weight:600; font-stretch:112%; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text);
}
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgb(70 211 154 / .18); }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  --bh:48px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  height:var(--bh); padding:0 1.4em; border-radius:999px;
  font-size:.875rem; font-weight:620; font-stretch:110%; letter-spacing:.01em; line-height:1; white-space:nowrap;
  transition:background-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui),
             border-color var(--t-ui) var(--ease-ui), box-shadow 320ms var(--ease-ui), scale 140ms var(--ease-ui);
}
.btn:active{ scale:.97; }
.btn .icon{ font-size:1.05em; transition:translate 260ms var(--ease); }
.btn--sm{ --bh:38px; padding:0 1.05em; font-size:.8125rem; }
.btn--lg{ --bh:54px; padding:0 1.65em; font-size:.9375rem; }
.btn--primary{ background:var(--text); color:var(--ink-1); }
.btn--ghost{ border:1px solid var(--line-3); color:var(--text); background:rgb(255 255 255 / .02); }
.btn--icon{ width:var(--bh); padding:0; }
@media (hover:hover){
  .btn--primary:hover{ background:var(--signal-strong); color:#fff; box-shadow:0 10px 34px -10px rgb(77 141 255 / .75); }
  .btn--ghost:hover{ border-color:var(--text); background:rgb(255 255 255 / .07); }
  .btn:hover .icon--go{ translate:3px 0; }
  .btn:hover .icon--down{ translate:0 3px; }
  .btn:hover .icon--out{ translate:2px -2px; }
}

/* A text link whose underline draws in, with an arrow that leans the
   way the link goes. */
.go{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:var(--fs-small); font-weight:600; font-stretch:110%;
  color:var(--text); padding-block:6px;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size 360ms var(--ease), color var(--t-ui) var(--ease-ui);
}
.go .icon{ font-size:1em; transition:translate 260ms var(--ease); }
@media (hover:hover){
  .go:hover{ background-size:100% 1px; }
  .go:hover .icon--go{ translate:3px 0; }
  .go:hover .icon--out{ translate:2px -2px; }
}

/* ── header ──────────────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:50;
  height:var(--header-h);
  transition:translate 420ms var(--ease-io);
}
/* The solid state is a layer behind the bar, never a filter on the
   header itself: a filter would trap the fixed mobile sheet inside. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgb(8 11 17 / .74);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity 360ms var(--ease-ui);
}
.hdr.is-solid::before{ opacity:1; }
.hdr.is-hidden{ translate:0 -110%; }
.hdr__bar{
  position:relative; z-index:2; height:100%;
  width:min(100% - 2 * var(--g), var(--max)); margin-inline:auto;
  display:flex; align-items:center; gap:24px;
}

.brand{ position:relative; z-index:3; display:inline-flex; align-items:center; gap:12px; flex:none; padding:6px 0; }
.brand .mark{ width:30px; height:30px; color:var(--text); transition:rotate 700ms var(--ease); }
.brand__word{
  font-size:.875rem; font-weight:700; font-stretch:118%; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  white-space:nowrap;
}
.brand__word span{ font-weight:450; color:var(--text-2); margin-left:.32em; }
.mark__sun{ fill:var(--signal); }
@media (hover:hover){ .brand:hover .mark{ rotate:-90deg; } }

.hdr__menu{ display:flex; align-items:center; flex:1; gap:24px; }
.site-nav{ flex:1; display:flex; justify-content:center; }
.site-nav__list{ position:relative; display:flex; gap:clamp(18px,2.6vw,40px); }
.site-nav__list a{
  position:relative; display:block; padding:10px 0;
  font-size:.8125rem; font-weight:600; font-stretch:112%; letter-spacing:.04em;
  color:var(--text-2); transition:color var(--t-ui) var(--ease-ui);
}
.site-nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
  background:currentColor; transform-origin:0 50%; scale:0 1;
  transition:scale 360ms var(--ease);
}
.site-nav__list a[aria-current]{ color:var(--text); }
@media (hover:hover){
  .site-nav__list a:hover{ color:var(--text); }
  .site-nav__list a:not([aria-current]):hover::after{ scale:1 1; }
}
/* the current section: a signal bar that slides between links (nav.js sets --spy-x/--spy-w) */
.site-nav__list::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:var(--spy-w,0px);
  border-radius:2px; background:var(--signal);
  translate:var(--spy-x,0px) 0; opacity:0;
  transition:translate 480ms var(--ease), width 480ms var(--ease), opacity var(--t-ui) var(--ease-ui);
}
.site-nav__list:has([aria-current])::after{ opacity:1; }
.hdr__actions{ display:flex; align-items:center; gap:10px; flex:none; }
.hdr__social{ display:none; }

.nav-toggle{
  display:none; position:relative; z-index:3; margin-left:auto;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:rgb(8 11 17 / .35);
  transition:border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.nav-toggle__bars,.nav-toggle__bars::before{
  position:absolute; left:50%; top:50%; width:16px; height:1.5px; margin:-.75px 0 0 -8px;
  background:var(--text); border-radius:2px;
  transition:translate 320ms var(--ease), rotate 320ms var(--ease);
}
.nav-toggle__bars{ translate:0 -3.5px; }
.nav-toggle__bars::before{ content:""; left:0; margin:0; translate:0 7px; }
.hdr.is-open .nav-toggle__bars{ translate:0 0; rotate:45deg; }
.hdr.is-open .nav-toggle__bars::before{ translate:0 0; rotate:-90deg; }

@media (max-width:1023.98px){
  .nav-toggle{ display:block; }
  .hdr__menu{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; align-items:stretch; justify-content:space-between; gap:40px;
    padding:calc(var(--header-h) + clamp(24px,6svh,56px)) var(--g) calc(28px + env(safe-area-inset-bottom));
    background:
      radial-gradient(70% 50% at 100% 0%, rgb(77 141 255 / .14), transparent 70%),
      var(--ink-1);
    overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden; clip-path:inset(0 0 100% 0);
    transition:clip-path 420ms var(--ease-io), visibility 0s 420ms;
  }
  .hdr.is-open .hdr__menu{ visibility:visible; clip-path:inset(0); transition:clip-path 560ms var(--ease), visibility 0s; }
  .hdr.is-open::before{ opacity:0; }
  .site-nav{ flex:none; justify-content:flex-start; }
  .site-nav__list{ flex-direction:column; gap:0; width:100%; }
  .site-nav__list::after{ display:none; }
  .site-nav__list li{ border-bottom:1px solid var(--line); }
  .site-nav__list a{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0; font-size:clamp(1.75rem,7vw,2.5rem); font-weight:640; font-stretch:100%; letter-spacing:-.02em; color:var(--text);
  }
  .site-nav__list a::after{ display:none; }
  .site-nav__list a[aria-current]::before{ content:""; order:2; width:8px; height:8px; border-radius:50%; background:var(--signal); }
  .hdr__actions{ flex-direction:column; align-items:stretch; gap:14px; }
  .hdr__actions .btn{ --bh:52px; width:100%; }
  .hdr__actions .btn--icon{ display:none; }
  .hdr__social{ display:flex; gap:10px; }
  .hdr__social a{ flex:1; }
  /* the sheet's contents arrive in order */
  .hdr .site-nav__list li,.hdr .hdr__actions > *{ opacity:0; translate:0 14px; transition:opacity 200ms var(--ease-ui), translate 0s 200ms; }
  .hdr.is-open .site-nav__list li,.hdr.is-open .hdr__actions > *{
    opacity:1; translate:0 0;
    transition:opacity 420ms var(--ease) calc(140ms + var(--i,0) * 60ms), translate 620ms var(--ease) calc(140ms + var(--i,0) * 60ms);
  }
}
@media (hover:hover){ .nav-toggle:hover{ border-color:var(--line-3); background:rgb(255 255 255 / .06); } }

/* ── footer ──────────────────────────────────────────────────────── */
.ftr{ background:var(--ink-0); border-top:1px solid var(--line); padding:clamp(56px,7vw,96px) 0 calc(28px + env(safe-area-inset-bottom)); }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); gap:48px; }
.ftr__brand p{ margin-top:16px; max-width:30ch; color:var(--text-3); font-size:var(--fs-small); }
.ftr__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.ftr__h{ margin-bottom:14px; color:var(--text-3); }
.ftr__cols li + li{ margin-top:4px; }
.ftr__cols a{ display:inline-block; padding:5px 0; font-size:var(--fs-small); color:var(--text-2); transition:color var(--t-ui) var(--ease-ui); }
@media (hover:hover){ .ftr__cols a:hover{ color:var(--text); } }
.ftr__base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  margin-top:clamp(48px,6vw,80px); padding-top:24px; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--text-3);
}
.ftr__base a{ color:var(--text-2); }
@media (max-width:860px){
  .ftr__top{ grid-template-columns:1fr; }
  .ftr__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
}

/* ── theatre (ui/theatre.js) ─────────────────────────────────────── */
.dialog{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0;
  padding:clamp(12px,3vw,40px); border:0; background:transparent; color:var(--text);
  grid-template-rows:auto minmax(0,1fr); gap:14px;
  opacity:0; transition:opacity 280ms var(--ease-ui), display 280ms allow-discrete, overlay 280ms allow-discrete;
}
.dialog[open]{ display:grid; opacity:1; }
@starting-style{ .dialog[open]{ opacity:0; } }
.dialog::backdrop{ background:rgb(3 5 9 / .92); opacity:0; transition:opacity 280ms var(--ease-ui), display 280ms allow-discrete, overlay 280ms allow-discrete; }
.dialog[open]::backdrop{ opacity:1; }
@starting-style{ .dialog[open]::backdrop{ opacity:0; } }
.dialog__bar{ display:flex; align-items:center; gap:16px; width:min(100%,1400px); margin-inline:auto; }
.dialog__title{
  font-size:var(--fs-label); font-weight:600; font-stretch:125%; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2);
}
.dialog__close{
  margin-left:auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line-2);
  transition:border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.dialog__close .icon{ font-size:18px; }
@media (hover:hover){ .dialog__close:hover{ border-color:var(--text); background:rgb(255 255 255 / .08); } }
.dialog__frame{ display:grid; place-items:center; min-height:0; }
.dialog__media{
  width:min(100%,1400px,calc((100svh - 150px) * 16 / 9)); aspect-ratio:16 / 9;
  background:#000; border-radius:var(--r-lg);
  scale:1; transition:scale 520ms var(--ease);
}
@starting-style{ .dialog[open] .dialog__media{ scale:.96; } }

/* ── reduced motion: arrive composed, without travel ─────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; animation-delay:0s!important; transition-duration:1ms!important; transition-delay:0s!important; }
}