:root{
  --navy:#0c2a44;
  --cream:#fbf0d9;
  --white:#fffaf0;
  --orange:#f7832b;
  --red:#ef4c3c;
  --sky:#18b4cd;
  --sunc:#ffc93a;
  --bass:0; --mid:0; --high:0;
  --fh:min(56svh, 440px);
  --fw:min(520px, calc(100vw - 40px));
  --evstep:60svh;
}
*{box-sizing:border-box}
html{background:var(--sky);-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sky); color:var(--navy);
  font:700 18px/1.45 Nunito, system-ui, sans-serif;
  overflow-x:clip;
}
body.locked{overflow:hidden}
[hidden]{display:none !important}
a{color:inherit}
img{display:block;max-width:100%}

/* sky and sun */
#sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--sky)}
.sun-pos{position:absolute; left:50%; top:0; width:calc(var(--sun-s, 72) * 1vmin); aspect-ratio:1; will-change:transform}
.sun{width:100%; height:100%; border-radius:50%; background:var(--sunc);
  box-shadow:0 0 0 calc(1.2vmin + var(--bass) * 2.4vmin) color-mix(in srgb, var(--sunc) 45%, #fff3d0);
  transform:scale(calc(1 + var(--bass) * .03));}

main{position:relative; z-index:1}
#spine{position:absolute; left:0; top:0; width:100%; pointer-events:none; z-index:0; overflow:visible}

.sec{position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:clip; z-index:1}
.wrap{position:relative; z-index:2; width:min(1100px, 100%); padding:72px 16px; display:flex; flex-direction:column; align-items:center; gap:22px}

/* stickers */
.stickers{position:absolute; inset:0; z-index:1; pointer-events:none}
.st{position:absolute; left:calc(var(--x) * .1%); top:calc(var(--y) * .1%); width:calc(var(--s) * .1vmin); aspect-ratio:1; transform:translate(-50%,-50%) rotate(var(--r))}
.st svg{width:100%; height:100%; display:block; overflow:visible}
.st-burst svg{transform:scale(calc(1 + var(--bass) * .09))}
.st-note svg{transform:translateY(calc(var(--mid) * -18%)) rotate(calc(var(--mid) * 8deg))}
.st-spark svg{transform:scale(calc(.8 + var(--high) * .45)); opacity:calc(.55 + var(--high) * .45)}
.st-reel{opacity:.85}

/* reveals: discrete, never tied to scroll position */
.rv{opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d, 0ms)}
.in .rv{opacity:1; transform:none}

/* film-frame button */
.frame-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:28px 22px; background:var(--cream); color:var(--navy); text-decoration:none;
  border:0; border-radius:0; cursor:pointer; font:700 clamp(20px, 2.2vw, 26px)/1 Fredoka, sans-serif;
  transform:rotate(-2deg); box-shadow:7px 7px 0 var(--navy); transition:transform .18s, box-shadow .18s;
}
.frame-btn::before,.frame-btn::after{content:""; position:absolute; left:10px; right:10px; height:9px;
  background:repeating-linear-gradient(90deg, var(--navy) 0 13px, transparent 13px 24px)}
.frame-btn::before{top:9px}
.frame-btn::after{bottom:9px}
.frame-btn span{display:block; border:3px solid var(--navy); padding:14px 26px; background:var(--sunc); transition:background .18s}
.frame-btn:hover,.frame-btn:focus-visible{transform:rotate(-2deg) translate(3px,3px); box-shadow:4px 4px 0 var(--navy); outline:none}
.frame-btn:hover span,.frame-btn:focus-visible span{background:var(--white)}
.frame-btn:focus-visible{outline:3px solid var(--white); outline-offset:6px}

/* gate */
.gate{position:fixed; inset:0; z-index:50; display:grid; place-items:center; color:var(--cream);
  background:radial-gradient(circle at 50% 46%, #1a6f86 0, #0f3a55 55%, #0a2235 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%, transparent var(--iris, 0px), #000 calc(var(--iris, 0px) + 1px));
          mask-image:radial-gradient(circle at 50% 46%, transparent var(--iris, 0px), #000 calc(var(--iris, 0px) + 1px));}
.gate-in{display:flex; flex-direction:column; align-items:center; gap:clamp(18px, 3.5vh, 34px); padding:24px 16px; text-align:center}
.gate-mark{width:clamp(96px, 13vh, 132px); color:var(--cream)}
.leader{width:min(64vw, 38vh, 300px); aspect-ratio:1; color:var(--cream); position:relative}
.leader svg{width:100%; height:100%; overflow:visible}
.leader .sweep{fill:none; stroke:#2d8fab; stroke-width:80; stroke-dasharray:251.33; stroke-dashoffset:251.33; transform:rotate(-90deg); transform-origin:100px 100px}
.gate.rolling .leader .sweep{animation:sweep var(--cnt, 420ms) linear infinite}
@keyframes sweep{to{stroke-dashoffset:0}}
.gate.rolling .frame-btn{pointer-events:none}
.lamp{position:absolute; inset:0; background:#fff6d6; opacity:0; pointer-events:none}
.gate.flick .lamp{animation:flick .5s steps(1) forwards}
@keyframes flick{0%{opacity:.0}15%{opacity:.55}30%{opacity:.08}45%{opacity:.7}60%{opacity:.15}100%{opacity:0}}

/* sound toggle cut from the reel */
.snd{position:fixed; z-index:40; top:calc(env(safe-area-inset-top) + 12px); right:12px; display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:6px; cursor:pointer; color:var(--cream); font:700 16px/1 Fredoka, sans-serif;
  text-shadow:2px 2px 0 var(--navy)}
.snd svg{width:44px; height:44px; filter:drop-shadow(2px 2px 0 var(--navy))}
.snd.on svg{animation:spin 3.2s linear infinite}
.snd:focus-visible{outline:3px solid var(--cream); outline-offset:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero-wrap{gap:clamp(14px, 2.4vh, 26px)}
.hero-mark{width:clamp(96px, min(13vw, 15svh), 150px); color:var(--navy)}
.title{margin:0; display:flex; flex-direction:column; align-items:center; font-family:Fredoka, sans-serif; font-weight:700; line-height:.92}
.t-name{font-size:clamp(28px, min(4vw, 5svh), 46px); color:var(--navy); text-shadow:2px 2px 0 var(--white); margin-bottom:.35em}
.t-nov,.t-hang{text-transform:uppercase; letter-spacing:-.01em; paint-order:stroke fill; display:block}
.t-nov{font-size:clamp(54px, min(15vw, 18svh), 200px); color:var(--navy); -webkit-text-stroke:.1em var(--white); text-shadow:.07em .07em 0 var(--orange); transform:rotate(-6deg)}
.t-hang{font-size:clamp(46px, min(12vw, 14.5svh), 160px); color:var(--white); -webkit-text-stroke:.09em var(--navy); text-shadow:.06em .06em 0 var(--orange); transform:rotate(-6deg) translateX(.25em); margin-top:.02em}
.hero-line{margin:6px 0 4px; max-width:32ch; font-size:clamp(19px, 2vw, 25px); line-height:1.35; color:var(--navy)}

/* headings */
.h2{margin:0; font:700 clamp(38px, 6.4vw, 86px)/1 Fredoka, sans-serif; color:var(--white); -webkit-text-stroke:.08em var(--navy); paint-order:stroke fill; text-shadow:.06em .06em 0 var(--orange); max-width:16ch}
.lede{margin:0; max-width:30ch; font:700 clamp(21px, 2.4vw, 30px)/1.3 Fredoka, sans-serif; color:var(--white); text-shadow:2px 2px 0 var(--navy)}

/* slate */
.slate{position:relative; width:min(820px, 100%); background:var(--cream); padding:44px clamp(18px, 4vw, 48px); transform:rotate(-1.5deg); box-shadow:9px 9px 0 var(--navy)}
.slate::before,.slate::after{content:""; position:absolute; left:12px; right:12px; height:11px; background:repeating-linear-gradient(90deg, var(--navy) 0 15px, transparent 15px 28px)}
.slate::before{top:14px}.slate::after{bottom:14px}
.slate p{margin:0}
.sl-name{font:700 clamp(24px, 3vw, 36px)/1.1 Fredoka, sans-serif}
.sl-title{margin:.08em 0 .25em; font:700 clamp(42px, 6.6vw, 84px)/.95 Fredoka, sans-serif; text-transform:uppercase; color:var(--navy); text-shadow:.05em .05em 0 var(--orange)}
.sl-venue,.sl-date{font:600 clamp(26px, 3.2vw, 38px)/1.15 Fredoka, sans-serif}
.sl-addr,.sl-time{font-size:clamp(18px, 1.8vw, 21px); margin-bottom:.6em !important}
.caption{margin:8px 0 0; max-width:40ch; font:600 clamp(19px, 1.9vw, 23px)/1.4 Nunito, sans-serif; color:var(--navy)}

/* evening */
#evening{height:calc(100svh + 8 * var(--evstep)); display:block; overflow:visible}
.stage{position:sticky; top:0; height:100svh; overflow:hidden}
.stage-head{position:absolute; z-index:4; left:0; right:0; top:calc(env(safe-area-inset-top) + max(20px, 50svh - var(--fh) / 2 - 150px)); text-align:center; padding:0 70px}
.stage-head .h2{font-size:clamp(36px, 5vw, 64px); max-width:none}
.stage-sub{margin:6px 0 0; font:700 20px/1 Fredoka, sans-serif; color:var(--white); text-shadow:2px 2px 0 var(--navy)}
.strip-mask{position:absolute; inset:0; z-index:2;
  -webkit-mask-image:linear-gradient(transparent 0, transparent calc(50% - var(--fh) / 2 - 110px), #000 calc(50% - var(--fh) / 2 - 2px), #000 calc(50% + var(--fh) / 2 + 2px), transparent calc(50% + var(--fh) / 2 + 110px));
          mask-image:linear-gradient(transparent 0, transparent calc(50% - var(--fh) / 2 - 110px), #000 calc(50% - var(--fh) / 2 - 2px), #000 calc(50% + var(--fh) / 2 + 2px), transparent calc(50% + var(--fh) / 2 + 110px))}
.strip{list-style:none; margin:0; padding:0; position:absolute; left:50%; top:50%; width:var(--fw); margin-left:calc(var(--fw) / -2); margin-top:calc(var(--fh) * -1.5); will-change:transform}
.frame{position:relative; height:var(--fh); background:var(--cream); border-bottom:4px solid #e3d3b2}
.frame::before,.frame::after{content:""; position:absolute; top:6px; bottom:6px; width:14px;
  background:repeating-linear-gradient(180deg, transparent 0 9px, var(--navy) 9px 27px, transparent 27px 36px)}
.frame::before{left:12px}.frame::after{right:12px}
.pic{position:absolute; inset:16px 40px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:12px 12px 14px;
  background:#7cbecb; transition:background .35s}
.frame.lit .pic{background:linear-gradient(180deg, #fff3c8, color-mix(in srgb, var(--sunc) 70%, #fff3c8)); filter:brightness(calc(1 + var(--bass) * .06))}
.pic > *{opacity:0; transition:opacity .22s}
.frame.lit .pic > *{opacity:1}
.ico{position:absolute; z-index:2; top:2px; right:2px; width:clamp(58px, 8.5svh, 76px); height:auto; overflow:visible; padding:7px; background:var(--cream); border:3px solid var(--navy); border-radius:50%; transform:rotate(8deg)}
.pic > .shot{opacity:1; position:relative; width:100%; flex:1 1 auto; min-height:0; display:grid; place-items:center; overflow:hidden; border:3px solid var(--navy); background:linear-gradient(180deg, #123f5c, #1d6f8f); transition:filter .35s}
.frame:not(.lit) .shot{filter:saturate(.35) brightness(.75)}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ph-txt{padding:12px 18px; font:600 clamp(19px, 2.4vw, 24px)/1.2 Fredoka, sans-serif; color:var(--cream); opacity:0; transition:opacity .22s}
.frame.lit .ph-txt{opacity:1}
.time{flex:none; font:700 clamp(38px, 6.2vw, 56px)/1 Fredoka, sans-serif; color:var(--navy)}
.what{flex:none; font:600 clamp(21px, 2.8vw, 27px)/1.12 Fredoka, sans-serif; color:var(--navy); max-width:17ch}
.gate-plate{position:absolute; z-index:3; left:50%; top:50%; width:calc(var(--fw) + 20px); height:calc(var(--fh) + 20px); transform:translate(-50%,-50%); border:7px solid var(--navy); pointer-events:none;
  box-shadow:0 0 0 3px var(--cream), 0 0 calc(30px + var(--bass) * 40px) rgba(255,214,110,.5)}
.flash{position:absolute; inset:0; z-index:6; background:#fff; opacity:0; pointer-events:none}
.flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}

/* icon moments, each played when its frame comes into the gate */
.frame.lit .ico-bee .wing{animation:flutter .14s ease-in-out 8 alternate; transform-origin:50% 60%}
@keyframes flutter{to{transform:scaleY(.6)}}
.frame.lit .ico-ice .c1{animation:knock .5s ease-out .1s}
.frame.lit .ico-ice .c2{animation:knock2 .5s ease-out .1s}
@keyframes knock{40%{transform:translateX(6px) rotate(-4deg)}}
@keyframes knock2{40%{transform:translateX(-6px) rotate(4deg)}}
.ico-ice rect{transform-box:fill-box; transform-origin:center}
.frame.lit .ico-reel{animation:spin 2.6s linear infinite}
.ico-clap .arm{transform-origin:14px 36px}
.frame.lit .ico-clap .arm{animation:clap .6s ease-in .1s}
@keyframes clap{0%{transform:rotate(0)}40%{transform:rotate(-18deg)}70%{transform:rotate(0)}}
.frame.lit .ico-talk .b1{animation:popin .4s ease-out}
.frame.lit .ico-talk .b2{animation:popin .4s ease-out .25s backwards}
.ico-talk path{transform-box:fill-box; transform-origin:center}
@keyframes popin{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.ico-die .die{transform-box:fill-box; transform-origin:center}
.frame.lit .ico-die .die{animation:tumble .8s cubic-bezier(.3,.7,.3,1)}
@keyframes tumble{0%{transform:rotate(-200deg) scale(.6)}100%{transform:none}}
.ico-win .bst{transform-origin:50px 50px}
.frame.lit .ico-win .bst{animation:spin 6s linear infinite}
.ico-mic .m{transform-origin:50px 88px}
.frame.lit .ico-mic .m{animation:tilt .7s ease-in-out}
@keyframes tilt{30%{transform:rotate(-8deg)}70%{transform:rotate(5deg)}}
.frame.lit .ico-cam .fl{animation:camfl .45s ease-out}
@keyframes camfl{12%{fill:#fff}}

.prop{position:absolute; z-index:5; left:calc(var(--x) * .1%); top:calc(var(--y) * .1%); width:calc(var(--s) * .1vmin); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none}
.prop svg{width:100%; height:100%; overflow:visible; display:block}
.prop-dice svg{transform-origin:50% 60%}
.prop-pop .k{transform-box:fill-box; transform-origin:center}

/* crew */
.sheet{display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:clamp(14px, 2vw, 26px); align-items:center; width:min(1040px, 100%); margin:10px 0}
.ph{margin:0; background:var(--cream); padding:26px 10px; position:relative; box-shadow:7px 7px 0 var(--navy)}
.ph::before,.ph::after{content:""; position:absolute; left:8px; right:8px; height:8px; background:repeating-linear-gradient(90deg, var(--navy) 0 10px, transparent 10px 19px)}
.ph::before{top:9px}.ph::after{bottom:9px}
.ph img{width:100%; height:100%; object-fit:cover}
.ph-wide{grid-column:2; grid-row:1; aspect-ratio:3/2.2; transform:rotate(1.5deg)}
.ph-wide img{aspect-ratio:3/2; height:auto}
.ph-a{grid-column:1; grid-row:1; transform:rotate(-4deg)}
.ph-b{grid-column:3; grid-row:1; transform:rotate(3.5deg)}
.ph-a img,.ph-b img{aspect-ratio:4/5; height:auto}
.in .ph-a.rv{transform:rotate(-4deg)}
.in .ph-b.rv{transform:rotate(3.5deg)}
.in .ph-wide.rv{transform:rotate(1.5deg)}

/* yard */
.still{width:min(760px, 100%); background:var(--cream); padding:30px 12px; position:relative; box-shadow:8px 8px 0 var(--navy); transform:rotate(1deg)}
.still::before,.still::after{content:""; position:absolute; left:10px; right:10px; height:9px; background:repeating-linear-gradient(90deg, var(--navy) 0 12px, transparent 12px 23px)}
.still::before{top:10px}.still::after{bottom:10px}
.in .still.rv{transform:rotate(1deg)}
.still-pic{aspect-ratio:16/8; display:grid; place-items:center; padding:16px; background:linear-gradient(180deg, #24527e, #f2582e 120%); border:3px solid var(--navy)}
.still-pic span{font:600 clamp(22px, 3vw, 34px)/1.2 Fredoka, sans-serif; color:var(--cream)}
.lockup{display:flex; flex-direction:column; align-items:center; gap:6px; border:4px solid var(--cream); padding:16px 24px; box-shadow:5px 5px 0 var(--navy)}
.lk-1{font:700 clamp(36px, 5vw, 60px)/1 Fredoka, sans-serif; color:var(--white); text-transform:uppercase; text-shadow:3px 3px 0 var(--navy)}
.lk-2{font:700 clamp(18px, 1.9vw, 22px)/1.3 Nunito, sans-serif; color:var(--white); text-shadow:2px 2px 0 var(--navy)}

/* tickets */
.tix{display:flex; position:relative; background:var(--cream); padding:36px 16px; gap:0; box-shadow:9px 9px 0 var(--navy); transform:rotate(-1.2deg); width:min(780px, 100%)}
.in .tix.rv{transform:rotate(-1.2deg)}
.tix::before,.tix::after{content:""; position:absolute; left:12px; right:12px; height:11px; background:repeating-linear-gradient(90deg, var(--navy) 0 15px, transparent 15px 28px)}
.tix::before{top:13px}.tix::after{bottom:13px}
.tick{flex:1; display:block; text-decoration:none; color:var(--navy); padding:0 10px; position:relative}
.tick + .tick{border-left:4px solid #e3d3b2}
.tk-pic{display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 12px; border:3px solid var(--navy); background:var(--sunc); transition:background .18s, transform .18s}
.tick:hover .tk-pic,.tick:focus-visible .tk-pic{background:var(--white); transform:translateY(-3px)}
.tick:focus-visible{outline:3px solid var(--navy); outline-offset:4px}
.tier{font:600 clamp(26px, 3vw, 34px)/1 Fredoka, sans-serif}
.price{font:700 clamp(40px, 5vw, 58px)/1 Fredoka, sans-serif}
.note{font-size:18px}
.go{margin-top:8px; font:700 20px/1 Fredoka, sans-serif; border-top:3px solid var(--navy); padding-top:12px; width:100%}
.incl{display:flex; align-items:center; gap:16px; max-width:640px; text-align:left}
.incl p{margin:0; font:700 clamp(19px, 2vw, 23px)/1.35 Nunito, sans-serif; color:var(--white); text-shadow:2px 2px 0 var(--navy)}
.glass{width:84px; flex:none; overflow:visible; transform-origin:50% 100%}
.glass .ice{transform-box:view-box}

/* last + footer */
#last{justify-content:space-between}
.last-wrap{flex:1; justify-content:center; padding-top:56px; padding-bottom:40px}
.big{margin:0; font:700 clamp(50px, min(10vw, 11svh), 130px)/.92 Fredoka, sans-serif; text-transform:uppercase; color:var(--sunc); -webkit-text-stroke:.08em var(--navy); paint-order:stroke fill; text-shadow:.06em .06em 0 var(--red); max-width:11ch; transform:rotate(-4deg)}
.in .big.rv{transform:rotate(-4deg)}
.tags{margin:0; font:700 clamp(20px, 2.2vw, 26px)/1.3 Fredoka, sans-serif; color:var(--white); text-shadow:2px 2px 0 var(--navy)}
.foot{position:relative; z-index:2; width:100%; background:var(--navy); color:var(--cream); padding:26px 16px calc(26px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:6px; font-size:17px}
.foot p{margin:0}
.foot a{color:var(--sunc)}
.foot-mark{width:64px; color:var(--cream)}
.foot-name{font:600 19px/1.3 Fredoka, sans-serif}
.credit{font-size:15px; opacity:.85}

/* phone */
@media (max-width: 700px){
  :root{--fw:calc(100vw - 32px); --fh:min(52svh, 420px)}
  .wrap{padding:64px 36px 56px; gap:18px}
  .hero-wrap{padding-left:16px; padding-right:16px}
  .t-hang{transform:rotate(-6deg)}
  .sheet{grid-template-columns:1fr 1fr; gap:14px}
  .ph{padding:20px 7px}
  .ph::before{top:6px}.ph::after{bottom:6px}
  .ph-wide{grid-column:1 / span 2; grid-row:1; aspect-ratio:auto}
  .ph-a{grid-column:1; grid-row:2}
  .ph-b{grid-column:2; grid-row:2}
  .ph-a img,.ph-b img{aspect-ratio:1/1}
  .tix{flex-direction:column; padding:14px 34px}
  .tix::before,.tix::after{left:auto; right:auto; top:12px; bottom:12px; width:11px; height:auto; background:repeating-linear-gradient(180deg, var(--navy) 0 15px, transparent 15px 28px)}
  .tix::before{left:12px}.tix::after{right:12px}
  .tick{padding:10px 0}
  .tick + .tick{border-left:0; border-top:4px solid #e3d3b2}
  .tk-pic{padding:14px 10px; gap:2px}
  .go{margin-top:6px; padding-top:8px}
  .glass{width:62px}
  .stage-head{padding:0 64px}
  .slate{padding:40px 16px}
}

@media (prefers-reduced-motion: reduce){
  .rv{transition:none}
  .snd.on svg,.frame.lit .ico-reel,.frame.lit .ico-win .bst{animation:none}
}