/* index.html: scroll scenes, the reel, the Kraken, and the stall's little tricks */

/* ---------- intro curtain (JS adds .curtain--on once per visit) ---------- */
.curtain { display: none; }
.curtain--on {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.curtain__cloth {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--red) 0 80px, var(--cream) 80px 160px);
  border-bottom: 6px solid var(--ink);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 20px) no-repeat, radial-gradient(40px 20px at 40px 0, #000 98%, transparent 101%) 0 100% / 80px 20px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 20px) no-repeat, radial-gradient(40px 20px at 40px 0, #000 98%, transparent 101%) 0 100% / 80px 20px repeat-x;
}
.curtain__text {
  position: relative;
  font: 400 clamp(1.4rem, 3vw, 2.2rem)/1 "Lilita One", sans-serif;
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  padding: .6em 1em .5em;
  box-shadow: var(--lip);
}
.curtain__text span { animation: dot 1s infinite; }
.curtain__text span:nth-child(2) { animation-delay: .2s; }
.curtain__text span:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.curtain--up { animation: curtain-up .75s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes curtain-up { 0% { transform: none; } 20% { transform: translateY(3%); } 100% { transform: translateY(-105%); } }

/* ---------- awning: scroll-progress goblin + sound sign ---------- */
.runner {
  position: absolute;
  top: 44px;
  left: calc(120px + var(--sp, 0) * (100% - 160px));
  height: 36px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(59, 35, 20, .5));
  transition: left .15s linear;
}
.runner.running { animation: trot .28s ease-in-out infinite alternate; }
.runner.back { transform: scaleX(-1); }
.runner.back.running { animation-name: trot-back; }
@keyframes trot { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -5px; rotate: 6deg; } }
@keyframes trot-back { from { translate: 0 0; rotate: 6deg; } to { translate: 0 -5px; rotate: -6deg; } }
.awning__rail { z-index: 2; }

.sign button {
  display: block;
  font: 400 1rem/1 "Lilita One", sans-serif;
  letter-spacing: .03em;
  color: var(--ink);
  background: linear-gradient(var(--cream), var(--cream-2));
  border: var(--line) solid var(--ink);
  border-radius: 9px;
  padding: .55em .9em .5em;
  box-shadow: var(--lip-sm);
  cursor: pointer;
  transition: transform .2s var(--ease-spring), background .2s;
}
.sign button:hover { transform: rotate(-4deg) translateY(2px); background: var(--gold); }
.sign button[aria-pressed="true"] { background: #7bd85f; }
@media (max-width: 760px) { .sign--sound { display: block !important; } .sign--sound button { font-size: .85rem; padding: .5em .6em .45em; } }

/* ---------- coin burst particles (from button presses) ---------- */
.coin {
  position: fixed;
  z-index: 300;
  width: 12px;
  height: 12px;
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: inset -3px -3px 0 #e0a81e;
  pointer-events: none;
}

/* ---------- scroll scene shell ---------- */
.scene { position: relative; height: 340vh; }
.scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- THE CHARGE ---------- */
.charge { margin-top: 40px; }
.charge__stage { border-block: var(--line) solid var(--ink); }
.charge__bg {
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(rgba(23, 60, 58, .25), rgba(23, 60, 58, .05) 40%, rgba(15, 43, 42, .75)),
    url("../img/scenes/field.webp") center 40% / cover;
  transform: scale(calc(1.06 + var(--p, 0) * .08));
  filter: saturate(1.1);
}
.charge.clash .charge__bg { animation: quake .5s steps(6) 2; }
@keyframes quake { 0%, 100% { translate: 0 0; } 25% { translate: -6px 3px; } 50% { translate: 5px -4px; } 75% { translate: -3px -2px; } }
.charge__head {
  position: absolute;
  top: clamp(96px, 13vh, 130px);
  left: 0;
  right: 0;
  text-align: center;
  padding-inline: 16px;
  z-index: 6;
}
.charge__head h2 { font-size: clamp(2.3rem, 6vw, 5rem); }
.charge__sub { max-width: 520px; margin: 16px auto 0; padding: 12px 16px; font-weight: 800; transform: rotate(-1deg); }

.army { position: absolute; inset: auto 0 4vh 0; height: 56vh; pointer-events: none; }
.army--goblins { transform: translateX(calc((var(--march, 0) - 1) * 62vw)); }
.army--humans { transform: translateX(calc((1 - var(--march, 0)) * 62vw)); }
.unit {
  position: absolute;
  bottom: calc(var(--row) * 6.5vh);
  height: calc(var(--h, 1) * min(31vh, 24vw) * (1 - var(--row) * .12));
  z-index: calc(10 - var(--row));
  transition: transform 1.1s cubic-bezier(.2, .75, .3, 1), opacity .8s;
}
.army--goblins .unit { right: calc(50% + 1vw + var(--slot) * 8vw + var(--row) * 2.6vw); }
.army--humans .unit { left: calc(50% + 1vw + var(--slot) * 8vw + var(--row) * 2.6vw); }
.unit img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 6px 0 rgba(15, 30, 20, .45)) brightness(calc(1 - var(--row) * .12));
  transform-origin: 50% 100%;
}
.charge.marching .unit img { animation: hop .34s ease-in-out infinite alternate; animation-delay: calc(var(--slot) * -.11s + var(--row) * -.07s); }
@keyframes hop { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-11%) rotate(5deg); } }
.charge.clash .unit img { animation: scuffle .16s steps(2) infinite; animation-delay: calc(var(--slot) * -.05s); }
@keyframes scuffle { 0% { transform: translate(-3px, 0) rotate(-7deg); } 100% { transform: translate(3px, -4px) rotate(7deg); } }
.unit.launched { transform: translate(var(--lx, 0), -95vh) rotate(var(--lr, 720deg)); opacity: .0; }

.brawl { position: absolute; left: 50%; bottom: 8vh; width: 0; height: 0; z-index: 12; pointer-events: none; }
.dust {
  position: absolute;
  width: var(--s, 180px);
  height: var(--s, 180px);
  margin: calc(var(--s, 180px) / -2);
  border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #eadcc0 70%);
  border: var(--line) solid var(--ink);
  transform: scale(0);
  transition: transform .45s var(--ease-spring);
}
.d1 { --s: 26vh; left: 0; top: -10vh; }
.d2 { --s: 18vh; left: -11vw; top: -4vh; transition-delay: .05s; }
.d3 { --s: 20vh; left: 11vw; top: -5vh; transition-delay: .1s; }
.d4 { --s: 14vh; left: -5vw; top: -22vh; transition-delay: .15s; }
.d5 { --s: 15vh; left: 6vw; top: -20vh; transition-delay: .08s; }
.charge.clash .dust { transform: scale(1); animation: churn 1.2s linear infinite; }
@keyframes churn { to { rotate: 360deg; } }
.pow {
  position: absolute;
  font: 400 clamp(1.4rem, 3.4vw, 3rem)/1 "Lilita One", sans-serif;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 var(--ink);
  transform: translate(-50%, -50%) scale(0) rotate(var(--r));
  transition: transform .35s var(--ease-spring);
}
.p1 { --r: -12deg; left: -9vw; top: -26vh; }
.p2 { --r: 9deg; left: 10vw; top: -30vh; color: var(--red); transition-delay: .12s; }
.p3 { --r: -4deg; left: 0; top: -38vh; color: #7bd85f; transition-delay: .24s; }
.p4 { --r: 14deg; left: 16vw; top: -14vh; color: var(--cream); transition-delay: .36s; }
.p5 { --r: -16deg; left: -16vw; top: -12vh; color: var(--cream); transition-delay: .48s; font-size: clamp(1rem, 2.2vw, 1.8rem); }
.charge.clash .pow { transform: translate(-50%, -50%) scale(1) rotate(var(--r)); animation: throb .5s ease-in-out infinite alternate; }
@keyframes throb { to { scale: 1.08; } }
.charge.settled .dust, .charge.settled .pow { transform: translate(-50%, -50%) scale(0) rotate(var(--r)); animation: none; }
.charge.settled .dust { transform: scale(0); }

.charge__after {
  position: absolute;
  right: max(16px, 6vw);
  bottom: 52vh;
  max-width: 300px;
  z-index: 14;
  opacity: 0;
  transform: translateY(20px) scale(.9);
  transition: opacity .3s, transform .5s var(--ease-spring);
}
.charge__after::after { left: 40px; bottom: -13px; }
.charge.settled .charge__after { opacity: 1; transform: none; }

/* ---------- GRIFFIN FLIGHT ---------- */
.flight__stage { border-block: var(--line) solid var(--ink); }
.flight__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(#5db7ec, #a9dcf5 55%, #e9f6fb);
}
.flight__sky::after { /* sunset takes over as you fly */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#4c4f9a, #e7826a 50%, #ffd27a);
  opacity: calc(var(--p, 0) * .85);
}
.sun {
  position: absolute;
  z-index: 1;
  right: 12vw;
  top: calc(8vh + var(--p, 0) * 34vh);
  width: clamp(80px, 10vw, 140px);
  aspect-ratio: 1;
  background: var(--gold);
  border: var(--line) solid var(--ink);
  border-radius: 22%;
  box-shadow: 0 0 0 14px rgba(255, 204, 51, .25), 0 0 0 30px rgba(255, 204, 51, .12);
  rotate: calc(var(--p, 0) * 90deg);
}
.clouds { position: absolute; inset: 0; pointer-events: none; }
.clouds--far { transform: translateX(calc(var(--p, 0) * -40vw)); z-index: 2; }
.clouds--near { transform: translateX(calc(var(--p, 0) * -150vw)); z-index: 6; }
.cloud {
  position: absolute;
  height: var(--ch, 50px);
  width: var(--cw, 160px);
  background: #fffaf0;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 -10px 0 #dbe9f2;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 3px);
  background: #fffaf0;
  border: var(--line) solid var(--ink);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.cloud::before { left: 16%; width: 38%; height: 70%; }
.cloud::after { left: 46%; width: 30%; height: 110%; }
.clouds--far .cloud { opacity: .85; transform: scale(.7); }

.flight__land {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  width: 220vw;
  height: 40vh;
  z-index: 3;
  transform: translateX(calc(var(--p, 0) * -120vw));
  -webkit-mask: linear-gradient(transparent, #000 35%);
  mask: linear-gradient(transparent, #000 35%);
}
.flight__land img { width: 110vw; height: 100%; object-fit: cover; object-position: center 70%; }
.flight__land img + img { transform: scaleX(-1); }

.flight__title {
  position: absolute;
  top: clamp(96px, 13vh, 130px);
  left: max(16px, 5vw);
  z-index: 8;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  max-width: 11ch;
}
.flight__notes {
  position: absolute;
  left: max(16px, 5vw);
  top: calc(clamp(96px, 13vh, 130px) + clamp(2.2rem, 5.4vw, 4.6rem) * 2.3);
  z-index: 8;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.note-board {
  width: fit-content;
  font: 400 clamp(1rem, 1.6vw, 1.35rem)/1 "Lilita One", sans-serif;
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  padding: .5em .8em .45em 2.1em;
  box-shadow: var(--lip-sm);
  position: relative;
  opacity: 0;
  transform: translateX(-30px) rotate(-3deg);
  transition: opacity .25s, transform .5s var(--ease-spring);
}
.note-board::before { /* the tick box */
  content: "";
  position: absolute;
  left: .6em;
  top: 50%;
  width: .9em;
  height: .9em;
  margin-top: -.5em;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
}
.note-board.on { opacity: 1; transform: rotate(-1deg); }
.note-board.done::before { background: #7bd85f; box-shadow: inset 0 0 0 2px #fff; }
.note-board.done { color: var(--ink-soft); }

.rider {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  width: clamp(170px, 22vw, 320px);
  will-change: transform;
}
.rider__img { width: 100%; filter: drop-shadow(0 12px 0 rgba(30, 40, 80, .35)); animation: flap .42s ease-in-out infinite alternate; transform-origin: 40% 60%; }
@keyframes flap { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-7%) scaleY(.94); } }
.rider__trail {
  position: absolute;
  right: 70%;
  top: 30%;
  width: 70%;
  height: 40%;
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .85) 14px 18px);
  -webkit-mask: linear-gradient(90deg, transparent, #000);
  mask: linear-gradient(90deg, transparent, #000);
  opacity: var(--speed, .4);
}
.feather {
  position: absolute;
  z-index: 7;
  width: 10px;
  height: 22px;
  background: #e8c27a;
  border: 2px solid var(--ink);
  border-radius: 2px 8px;
  pointer-events: none;
}

/* ---------- wanted posters that play their fight ---------- */
.poster--video { cursor: zoom-in; }
.poster--video video {
  position: absolute;
  left: 14px;
  right: 14px;
  top: clamp(50px, 4.4vw, 60px);
  width: calc(100% - 28px);
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--line) solid var(--ink);
  border-radius: 4px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .25s, transform .35s var(--ease-spring);
}
.poster--video:hover video, .poster--video.playing video { opacity: 1; transform: none; }
.poster__hint {
  position: absolute;
  right: 10px;
  top: calc(clamp(50px, 4.4vw, 60px) + 8px);
  font: 800 .72rem/1 "Nunito", sans-serif;
  color: var(--cream);
  background: var(--ink);
  border-radius: 99px;
  padding: .35em .6em;
  transition: opacity .2s;
}
.poster--video:hover .poster__hint, .poster--video.playing .poster__hint { opacity: 0; }
@media (hover: none) { .poster__hint { display: none; } }

/* ---------- THE REEL ---------- */
.reel { padding: 40px 0 110px; }
.reel__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 30px; margin-bottom: 34px; }
.reel__head h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.reel__head p { margin: 0; color: #f4e6c8; max-width: 40ch; }
.reel__strip {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(16px, 8vw);
  padding: 46px max(16px, 8vw) 40px;
  background-color: #1d120a;
  background-image:
    radial-gradient(circle at 50% 50%, #0f2b2a 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 50%, #0f2b2a 0 5px, transparent 5.5px);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 6px, 0 calc(100% - 6px);
  background-repeat: repeat-x;
  background-attachment: local;
  border-block: var(--line) solid var(--ink);
  transform: rotate(-1deg);
  cursor: grab;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reel__strip::-webkit-scrollbar { display: none; }
.reel__strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.frame {
  flex: none;
  width: min(520px, 78vw);
  margin: 0;
  scroll-snap-align: center;
  transition: transform .4s var(--ease-spring);
}
.frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 6px solid var(--cream-2);
  border-radius: 4px;
  background: #0b1a19;
  pointer-events: none;
}
.frame figcaption { margin-top: 12px; color: var(--cream); font-weight: 800; font-size: .98rem; }
.frame:hover { transform: translateY(-6px) rotate(.8deg); }

/* ---------- the Kraken takes the receipt ---------- */
.also { position: relative; overflow: clip; padding-bottom: 160px; }
.receipt-wrap { position: relative; }
.receipt { transition: transform .6s var(--ease-spring); }
.also.grabbed .receipt { transform: rotate(-5deg) translate(-10px, -14px); }
.tentacle {
  position: absolute;
  right: -10px;
  bottom: -180px;
  z-index: 3;
  transform: translateY(calc((1 - var(--rise, 0)) * 120%));
  pointer-events: none;
}
.seg {
  position: absolute;
  bottom: calc(100% - 8px);
  left: 50%;
  width: var(--w);
  height: 46px;
  margin-left: calc(var(--w) / -2);
  background:
    radial-gradient(circle at 22% 50%, #ff9fd6 0 5px, var(--ink) 5.5px 7px, transparent 7.5px),
    linear-gradient(90deg, #8a3fb3, #a957d1 60%, #7a35a0);
  border: var(--line) solid var(--ink);
  border-radius: 8px;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--curl, 0) * -1deg));
}
.tentacle > .seg { position: relative; bottom: 0; left: 0; margin: 0; }
.kraken-note {
  position: absolute;
  left: -10px;
  bottom: -50px;
  margin: 0;
  font: 400 1.6rem/1 "Lilita One", sans-serif;
  color: #c98ee8;
  text-shadow: 0 3px 0 var(--ink);
  opacity: 0;
  transform: rotate(-6deg) scale(.8);
  transition: opacity .3s, transform .5s var(--ease-spring);
}
.also.grabbed .kraken-note { opacity: 1; transform: rotate(-6deg); }

/* ---------- trailer screen switches on like an old telly ---------- */
.screen__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fffaf0;
  opacity: 0;
  pointer-events: none;
}
.screen.tv-on .screen__glass::after { animation: tv-on .55s ease-out forwards; }
@keyframes tv-on {
  0% { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); }
  40% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

/* ---------- reduced motion: scenes show their final frame, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene__stage { position: relative; height: 90vh; min-height: 560px; }
  .army--goblins, .army--humans { transform: none; }
  .tentacle { display: none; }
}
@media (max-width: 760px) {
  .scene { height: 300vh; }
  .unit { height: calc(var(--h, 1) * 17vh * (1 - var(--row) * .12)); }
  .army--goblins .unit { right: calc(50% + 2vw + var(--slot) * 9vw + var(--row) * 3vw); }
  .army--humans .unit { left: calc(50% + 2vw + var(--slot) * 9vw + var(--row) * 3vw); }
  .flight__notes { top: auto; bottom: 44vh; }
  .rider { width: 44vw; }
  .brawl { scale: .62; }
  .charge__after { bottom: 46vh; right: 16px; left: 16px; max-width: none; }
  .tentacle { right: -30px; transform: translateY(calc((1 - var(--rise, 0)) * 120%)) scale(.7); transform-origin: bottom right; }
}