/* scenes part 2: games gallery, ink-burst + eyes, finale + footer */

/* ============================ GAMES GALLERY ============================== */

#s-games { height: calc(100vh + 180vh); background: var(--night); }

.games-stripes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
}

.games-head {
  position: absolute;
  z-index: 6;
  top: 9%;
  left: 50%;
  translate: -50% 0;
  text-align: center;
  color: var(--gold);
}

.games-head h2 {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-h-chapter);
  line-height: 1;
  color: var(--paper);
  border: 3px solid var(--gold);
  padding: 0.18em 0.5em 0.12em;
  box-shadow: 0 0 34px rgb(212 160 23 / 25%), inset 0 0 26px rgb(212 160 23 / 12%);
  rotate: -1deg;
}

.games-head p {
  display: inline-block;
  margin-top: 1.2em;
  font-family: var(--font-display-sc);
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  color: var(--gold);
  border: 1px solid rgb(212 160 23 / 55%);
  padding: 0.55em 1em 0.6em;
  rotate: 0.6deg;
}

.games-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding-top: 17vh;
}

.game-card {
  --i: 0;
  --seg: clamp(0, calc((var(--p, 0) - var(--at)) / 0.26), 1);
  position: relative;
  display: block;
  width: clamp(150px, 21vw, 280px);
  transform:
    translateY(calc((1 - var(--seg)) * -120vh))
    rotate(calc((1 - var(--seg)) * var(--tilt) + var(--rest)));
  transform-origin: 50% -30vh;
  text-decoration: none;
}

.game-card:nth-child(1) { --at: 0.16; --tilt: -6deg; --rest: -0.9deg; }

.game-card--solo { width: clamp(210px, 23vw, 330px); }

/* Imperian key art fills the card frame edge to edge */
.imperian-art { position: relative; background: var(--night); }

.game-card__string {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 60vh;
  background: linear-gradient(to bottom, transparent, var(--gold));
}

.game-card__frame {
  display: block;
  border: 3px solid var(--gold);
  background: var(--night);
  box-shadow: 0 18px 44px rgb(0 0 0 / 70%), 0 0 30px rgb(212 160 23 / 16%);
  transition: transform 0.35s var(--ease-brush), box-shadow 0.35s var(--ease-brush);
}

.game-card:hover .game-card__frame,
.game-card:focus-visible .game-card__frame {
  transform: translateY(-8px) rotate(1deg) scale(1.02);
  box-shadow: 0 26px 60px rgb(0 0 0 / 80%), 0 0 46px rgb(212 160 23 / 30%);
}

.game-card__art { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.game-card__art img,
.game-card__art video { width: 100%; height: 100%; object-fit: cover; display: block; }

.game-card__meta {
  display: block;
  border-top: 2px solid rgb(212 160 23 / 65%);
  color: var(--paper);
  padding: 0.7em 0.8em 0.8em;
  background: var(--night);
}

.game-card__meta h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.7rem);
  line-height: 1;
  color: var(--paper);
}

.game-card__meta p {
  margin-top: 0.45em;
  font-family: var(--font-display-sc);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  opacity: 0.7;
}

.game-card__status {
  position: absolute;
  z-index: 3;
  top: -0.9em;
  right: -0.9em;
  rotate: 6deg;
  background: var(--vermilion);
  color: var(--paper);
  font-family: var(--font-display-sc);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  padding: 0.45em 0.7em;
  border: 3px solid var(--ink);
}

/* ============================ INK BURST + EYES =========================== */

#s-eyes { height: calc(100vh + 175vh); background: var(--ink); }

#s-eyes .scene__stage { display: grid; place-items: center; }

.burst-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--paper);
  opacity: calc(var(--p, 0) * 0.9);
}

.burst-splash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw, 720px);
  translate: -50% -50%;
  color: var(--paper);
  --seg: clamp(0, calc(var(--p, 0) / 0.3), 1);
  transform:
    scale(calc(0.15 + var(--seg) * 3.1))
    rotate(calc(var(--seg) * 18deg));
  opacity: min(1, calc(var(--seg) * 4));
}

.eyes-wrap {
  position: relative;
  z-index: 3;
  width: min(62vw, 720px);
  border: var(--panel-border) solid var(--ink);
  background: var(--paper);
  box-shadow: 9px 11px 0 rgb(23 18 16 / 85%);
  rotate: -0.8deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.42) / 0.26), 1);
  opacity: var(--seg);
  transform: translateY(-7vh) scale(calc(0.55 + var(--seg) * 0.45));
}

.eyes-wrap img,
.eyes-wrap video { display: block; width: 100%; }

.eyes-statement {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 10%;
  translate: -50% 0;
  width: min(92vw, 1000px);
  text-align: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 0.9rem + 3.6vw, 4.2rem);
  line-height: 1.05;
  --seg: clamp(0, calc((var(--p, 0) - 0.78) / 0.18), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 5vh));
}

.eyes-statement em {
  font-style: normal;
  color: var(--vermilion);
}

/* ================================ FINALE ================================= */

#s-finale {
  background: #020009; /* exact ground black of the arcade illumination */
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: 22vh calc(var(--frame-gap) * 2) 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.finale-pillars {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 58%;
  object-fit: cover;
  object-position: 50% 35%;
  pointer-events: none;
}

.finale-core {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  flex: 1;
}

.finale-core h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-h-poster);
  line-height: 0.9;
  color: var(--paper);
  text-shadow: 0.045em 0.055em 0 #8e1710;
}

.finale-core h2 span { display: block; }

.finale-core > p {
  margin: 2.4em auto 0;
  max-width: 52ch;
  font-size: var(--text-body);
  background: var(--paper);
  color: var(--ink);
  border: var(--panel-border) solid var(--ink);
  box-shadow: 6px 7px 0 rgb(23 18 16 / 85%);
  padding: 1em 1.5em;
  rotate: -0.5deg;
}

.finale-cta {
  display: inline-block;
  margin-top: 2.6em;
  background: var(--paper);
  color: var(--ink);
  border: var(--panel-border) solid var(--ink);
  box-shadow: 7px 8px 0 #8e1710;
  font-family: var(--font-display-sc);
  font-size: clamp(0.85rem, 0.7rem + 0.7vw, 1.15rem);
  letter-spacing: 0.2em;
  text-decoration: none;
  padding: 0.9em 1.6em;
  transition: transform 0.25s var(--ease-brush), box-shadow 0.25s var(--ease-brush);
}

.finale-cta:hover,
.finale-cta:focus-visible {
  transform: translate(-2px, -3px) rotate(-0.6deg);
  box-shadow: 10px 12px 0 var(--ink);
}

.site-foot {
  position: relative;
  z-index: 2;
  margin-top: 14vh;
  border-top: 2px solid var(--gold);
  padding: 1.4rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-family: var(--font-display-sc);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
}

.site-foot nav { display: flex; gap: 1.6rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .games-row {
    flex-direction: column;
    gap: 1rem;
    padding: 31vh 0 0;
    justify-content: flex-start;
  }
  .games-head { width: 94vw; top: 6%; }
  .game-card { width: min(88vw, 380px); }
  .game-card__string { display: none; }
  .game-card__frame { display: flex; }
  .game-card__art { width: 104px; flex: none; aspect-ratio: auto; }
  .game-card__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
    border-left: 2px solid rgb(212 160 23 / 65%);
  }
  .game-card__status { top: -0.7em; right: 0.4em; }

  .eyes-statement {
    width: 88vw;
    bottom: 7%;
    background: var(--paper);
    border: 3px solid var(--ink);
    padding: 0.55em 0.7em 0.6em;
    box-shadow: 5px 6px 0 rgb(23 18 16 / 85%);
  }
}

/* ============================ REDUCED MOTION ============================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-seal, .lantern-glow, .imperian-stack { animation: none; }
  .scene [class] { transition: none; }
}