/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 76% 48%,rgba(201,134,58,.10),rgba(201,134,58,0) 55%),
    linear-gradient(180deg,#100c07 0%,#0d0b07 100%);
}
.hero::after{ /* subtle noise/texture stand-in */
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(rgba(240,232,208,.25) 1px,transparent 1px);
  background-size:4px 4px;
}
.hero .container{
  position:relative;z-index:2;
  min-height:780px;display:flex;align-items:center;
  padding-top:72px;padding-bottom:96px;
}
.hero-copy{max-width:560px}
.hero h1{
  font-family:var(--serif);font-weight:900;
  font-size:64px;line-height:1.18;letter-spacing:-1.68px;
  color:var(--ink);
}
.hero h1 .move{color:var(--gold-logo)}
.hero-sub{
  margin:28px 0 44px;font-size:16px;line-height:28.8px;
  color:var(--ink-muted);max-width:330px;
}
/* knight — large, bleeding toward the right edge (per Figma) */
.hero-art{
  position:absolute;top:51%;right:11%;transform:translateY(-50%);
  width:clamp(340px,36vw,560px);z-index:3;
}
/* slider controls under the hero animation */
.hero-nav{display:flex;gap:18px;justify-content:center;margin-top:14px}
.hero-arrow{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:#291908;border:1px solid var(--border);color:#fdc98f;
  font-family:var(--serif);font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.hero-arrow:hover{border-color:var(--gold);background:#3a2410;color:#ffe9b8;box-shadow:0 0 14px rgba(201,134,58,.45)}
/* fixed box; the poster is the first paint and the no-JS state, and the canvas
   sits on top of it. Its first drawn frame is that same poster image, so the
   handover to .is-live is invisible. */
.hero-anim{position:relative;display:block;width:100%;aspect-ratio:2868/2892;cursor:pointer;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-anim>img,.hero-anim>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-anim>img{object-fit:contain}
.hero-anim.is-live>img{opacity:0}
/* faint gold grid of lines + dots behind the knight (Figma Group 24) */
.hero-grid{
  position:absolute;top:50%;right:9%;transform:translateY(-50%);z-index:0;
  width:clamp(300px,30vw,472px);aspect-ratio:472/435;pointer-events:none;
  background:
    linear-gradient(rgba(200,160,32,.06),rgba(200,160,32,.06)) 0 33%/100% 2px no-repeat,
    linear-gradient(rgba(200,160,32,.06),rgba(200,160,32,.06)) 0 66%/100% 2px no-repeat,
    linear-gradient(rgba(200,160,32,.06),rgba(200,160,32,.06)) 33% 0/2px 100% no-repeat,
    linear-gradient(rgba(200,160,32,.06),rgba(200,160,32,.06)) 66% 0/2px 100% no-repeat,
    radial-gradient(3.5px 3.5px at 33% 33%,rgba(200,160,32,.35) 99%,transparent 100%),
    radial-gradient(3.5px 3.5px at 66% 33%,rgba(200,160,32,.35) 99%,transparent 100%),
    radial-gradient(3.5px 3.5px at 33% 66%,rgba(200,160,32,.35) 99%,transparent 100%),
    radial-gradient(3.5px 3.5px at 66% 66%,rgba(200,160,32,.35) 99%,transparent 100%),
    radial-gradient(3.5px 3.5px at 93% 93%,rgba(200,160,32,.35) 99%,transparent 100%);
}