:root{
  --red:#D0142C;
  --crimson:#6E0A14;
  --navy:#22256A;
  --ink:#11133D;
  --cream:#F6E6BE;
  --paper:#FFFCF2;

  --display:'Bangers', 'Impact', sans-serif;
  --hand:'Patrick Hand', 'Comic Sans MS', cursive;

  --hard-shadow:drop-shadow(0 5px 0 rgba(17,19,61,.45));
  --halftone:radial-gradient(rgba(17,19,61,.55) 1.1px, transparent 1.3px) 0 0 / 8px 8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--hand);font-size:1.15rem;line-height:1.5;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:4px solid var(--cream);outline-offset:4px;border-radius:12px}

/* pre-animation state, only when GSAP is driving */
.js.gsap [data-enter]{visibility:hidden}

/* ============ SCENES ============ */
.scene{position:fixed;inset:0;display:none;overflow:hidden}
.scene.is-active{display:block}
.scene--page{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* ============ SHARED TYPE ============ */
.title{
  font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:.92;
  color:var(--paper);
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--red), 8px 8px 0 var(--ink);
  transform:skewX(-6deg);
}
.page__title{font-size:clamp(3rem,9vw,5.6rem)}
.page__lede{font-size:clamp(1.15rem,2.2vw,1.45rem);max-width:34ch;color:var(--cream)}

.sticker img,.sticker-img{filter:var(--hard-shadow)}

/* ============ WIPE ============ */
.wipe{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.wipe__slab{
  position:absolute;top:-10%;bottom:-10%;left:-25vw;width:150vw;
  background:var(--halftone), var(--red);
  border-left:14px solid var(--ink);border-right:14px solid var(--ink);
  transform:translateX(-160vw) skewX(-14deg);
}
.wipe__rider{position:absolute;top:0;left:0;right:0;transform:translateX(-100%)}
.wipe__mascot{width:clamp(120px,18vw,200px);margin:0 auto;transform-origin:50% 0;transform:translateY(-130%)}
.wipe__thread{display:block;width:3px;height:30vh;margin:0 auto;background:var(--paper)}
.wipe__mascot img{margin-top:-6px;filter:var(--hard-shadow)}

/* ============ INTRO ============ */
.scene--intro{background:linear-gradient(#070823 0%, #141748 70%, #22256A 100%)}
.city{position:absolute;inset:0}
.city__stars{position:absolute;inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 28% 9%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 47% 21%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 63% 12%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 81% 24%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 92% 8%,#fff,transparent);
  opacity:.55}
.city__skyline{position:absolute;inset:0;width:100%;height:100%}
.city__glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 110%, rgba(208,20,44,.35), transparent 60%)}
.band{position:absolute;left:0;right:0;height:7vh;background:var(--halftone), var(--red);z-index:2}
.band--top{top:0;border-bottom:4px solid var(--ink)}
.band--bottom{bottom:0;border-top:4px solid var(--ink)}

.intro{position:relative;z-index:3;height:100%;width:min(1180px,94vw);margin:0 auto}
.bubble{
  position:absolute;left:2%;top:30%;
  width:min(520px,52vw);padding:1.3rem 2rem 1.4rem;
  background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:46px;
  box-shadow:8px 8px 0 rgba(17,19,61,.55);
}
.bubble::before,.bubble::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.bubble::before{right:16%;bottom:-38px;border-width:38px 0 0 38px;border-color:var(--ink) transparent transparent transparent}
.bubble::after{right:calc(16% + 5px);bottom:-27px;border-width:28px 0 0 28px;border-color:var(--paper) transparent transparent transparent}
.bubble__title{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1;color:var(--red);transform:skewX(-6deg)}
.bubble__hint{margin-top:.45rem;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--navy)}

.bang{position:absolute;font-family:var(--display);font-size:clamp(4rem,9vw,8rem);line-height:1;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.bang--red{color:var(--red);right:31%;top:14%;transform:rotate(14deg)}
.bang--blue{color:#2F5BFF;right:36%;top:22%;transform:rotate(-8deg);font-size:clamp(3rem,6vw,5.5rem)}

.intro__phone{position:absolute;right:0;bottom:9vh;width:clamp(280px,44vw,600px);transform-origin:70% 80%}
.intro__phone:hover img{transform:scale(1.03)}
.intro__phone img{transition:transform .25s ease}

/* ============ GATE ============ */
.scene--gate{background:var(--red)}
.suitweb{position:absolute;inset:0;width:100%;height:100%}
.gate{position:relative;z-index:2;height:100%;display:grid;place-content:center;justify-items:center;gap:1.4rem;padding:1rem}
.gate__gift{position:relative;width:clamp(240px,50vmin,460px)}
.gate__gift::before{content:"";position:absolute;left:-20%;right:-20%;top:50%;aspect-ratio:1;translate:0 -50%;border-radius:50%;background:radial-gradient(circle, rgba(255,252,242,.45), transparent 62%);z-index:-1}
.gate__hint{font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:.06em;color:var(--paper);opacity:.85}

/* ============ HUB ============ */
.scene--hub{background:radial-gradient(ellipse at 30% 30%, #2C3080 0%, var(--navy) 45%, var(--ink) 100%)}
.scene--hub::after{content:"";position:absolute;inset:0;background:var(--halftone);opacity:.25;pointer-events:none}
.cornerweb{position:absolute;left:-2%;top:-4%;width:min(70vw,780px);height:auto;aspect-ratio:1;opacity:.5}
.hub__star{position:absolute;left:-1.5%;top:-2%;width:clamp(110px,15vw,220px);z-index:3}

.hub{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;
  width:min(1240px,94vw);margin:0 auto;gap:3vw;
}
.hub__main{padding-left:clamp(0px,6vw,90px)}
.hub__title{font-size:clamp(2.9rem,6.6vw,6rem);max-width:9ch}
.hub__lede{margin-top:1.2rem;max-width:36ch;font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--cream)}

.hub__nav{display:flex;gap:clamp(.6rem,2vw,2rem);margin-top:2.2rem}
.pick{position:relative;width:clamp(104px,13.5vw,190px);aspect-ratio:1;display:grid;place-items:center}
.pick--mid{margin-top:3.2rem}
.pick__burst{position:absolute;inset:0;width:100%;height:100%;fill:var(--cream);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;
  filter:drop-shadow(0 6px 0 rgba(17,19,61,.5));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pick__img{position:relative;width:74%;filter:var(--hard-shadow);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pick__label{
  position:absolute;bottom:-14%;left:50%;transform:translateX(-50%) rotate(-6deg);
  font-family:var(--display);font-size:clamp(1.25rem,2.2vw,2rem);letter-spacing:.03em;white-space:nowrap;
  color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--red);
}
.pick:hover .pick__burst,.pick:focus-visible .pick__burst{transform:rotate(18deg) scale(1.08)}
.pick:hover .pick__img,.pick:focus-visible .pick__img{transform:translateY(-6px) rotate(-5deg) scale(1.06)}
.pick:active .pick__img{transform:scale(.94)}

.hub__board{position:relative;height:min(78vh,640px);display:grid;place-items:center}
.paper{
  position:relative;width:min(100%,420px);aspect-ratio:3/3.6;
  background:
    linear-gradient(90deg, transparent 52px, rgba(208,20,44,.35) 52px 54px, transparent 54px),
    repeating-linear-gradient(transparent 0 30px, rgba(34,37,106,.18) 30px 31px),
    var(--paper);
  border-radius:4px;transform:rotate(3deg);
  box-shadow:10px 12px 0 rgba(0,0,0,.35);
  -webkit-mask:radial-gradient(circle 9px at 26px 50px,#0000 98%,#000) 0 0/100% 70px;
          mask:radial-gradient(circle 9px at 26px 50px,#0000 98%,#000) 0 0/100% 70px;
}
.tape-photo{position:absolute;top:9%;left:22%;width:58%;padding:9px 9px 34px;background:#fff;transform:rotate(-5deg);box-shadow:0 8px 16px rgba(17,19,61,.3)}
.tape-photo::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:28px;transform:translateX(-50%) rotate(3deg);background:rgba(246,230,190,.85);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tape-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.paper__cake{position:absolute;right:-14%;bottom:-6%;width:58%;transform:rotate(8deg)}
.paper__note{position:absolute;left:16%;bottom:9%;font-size:1.5rem;color:var(--red);transform:rotate(-4deg)}

/* ============ PLAYLIST ============ */
.scene--playlist{background:var(--navy)}
.halftone-bg{position:fixed;inset:0;background:var(--halftone);opacity:.35;pointer-events:none}
.band--hero{position:absolute;top:0;height:clamp(150px,26vh,240px);border-bottom:5px solid var(--ink);
  background:repeating-linear-gradient(-45deg, rgba(110,10,20,.35) 0 12px, transparent 12px 24px), var(--red)}
.page{position:relative;z-index:2;width:min(1000px,92vw);margin:0 auto;padding:clamp(1.5rem,5vh,3rem) 0 7rem}
.page--playlist{display:flex;flex-direction:column;align-items:center;text-align:center}
.disc{position:relative;width:clamp(170px,24vw,260px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, var(--paper) 0 30%, transparent 30.5%), var(--halftone), var(--red);
  border:6px solid var(--ink);box-shadow:8px 8px 0 rgba(17,19,61,.5);display:grid;place-items:center}
.disc__ring{position:absolute;inset:10%;border-radius:50%;border:3px dashed rgba(255,252,242,.5)}
.disc img{position:relative;width:82%;filter:var(--hard-shadow)}
.scene--playlist .page__title{margin-top:-.5rem}
.scene--playlist .page__lede{margin:.8rem auto 2rem}
.tracks{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:1.1rem}
.tracks iframe{width:100%;border:0;border-radius:14px;background:var(--ink);box-shadow:6px 6px 0 rgba(17,19,61,.6)}
.deco{position:fixed;z-index:1;pointer-events:none}
.deco--playlist-l{left:2vw;bottom:4vh;width:clamp(120px,15vw,220px);transform:rotate(-12deg)}
.deco--playlist-r{right:2vw;top:30vh;width:clamp(100px,12vw,180px);transform:rotate(14deg)}

/* ============ ALBUM ============ */
.scene--album{background:var(--red)}
.album{position:relative;z-index:2;min-height:100%;width:min(1240px,94vw);margin:0 auto;
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;align-items:center;gap:2vw;padding:3vh 0}
.album__intro{text-align:center;display:flex;flex-direction:column;align-items:center}
.album__badge{position:relative;width:clamp(140px,15vw,200px);aspect-ratio:1;display:grid;place-items:center}
.album__badge img{position:relative;width:80%;filter:var(--hard-shadow)}
.album__intro .page__title{margin-top:.2rem}
.album__intro .page__lede{margin-top:.6rem;color:var(--paper)}

.album__stage{position:relative;height:min(86vh,700px)}
.blob{position:absolute;border-radius:50%;background:rgba(110,10,20,.75);filter:blur(1px)}
.blob--a{left:8%;top:6%;width:58%;height:52%}
.blob--b{right:0;bottom:4%;width:60%;height:50%}

.collage{position:absolute;inset:0}
.frame{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  padding:7px;background:var(--navy);border:3px solid var(--ink);
  transform:rotate(var(--r));box-shadow:7px 7px 0 rgba(17,19,61,.5);
  transition:transform .3s cubic-bezier(.3,1.5,.5,1), box-shadow .3s;
}
.frame img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover}
.frame:hover,.frame:focus-visible{transform:rotate(0deg) scale(1.06);z-index:5;box-shadow:12px 12px 0 rgba(17,19,61,.55)}

.cam{position:absolute;right:-1%;bottom:0;width:min(52%,520px);z-index:6}
.cam__body{position:relative;filter:var(--hard-shadow)}
.cam__screen{position:absolute;left:10.4%;top:22.8%;width:55.6%;height:61.6%;overflow:hidden;background:#000}
.cam__screen img{width:100%;height:100%;object-fit:cover}
.cam__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

.speech{
  position:absolute;right:44%;bottom:44%;z-index:7;
  font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);color:var(--red);
  background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:.15em .8em;
  transform:rotate(-6deg);box-shadow:5px 5px 0 rgba(17,19,61,.5);
}
.whaam{
  position:absolute;right:2%;top:0;z-index:7;
  font-family:var(--display);font-size:clamp(3rem,7vw,6rem);line-height:1;color:var(--cream);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);
  transform:rotate(8deg);
}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:4vh 3vw;
  background:var(--halftone), rgba(17,19,61,.94)}
.lightbox[hidden]{display:none}
.lightbox__frame{justify-self:center;max-width:min(88vw,900px);padding:10px;background:var(--paper);transform:rotate(-1.2deg);box-shadow:12px 12px 0 rgba(0,0,0,.5)}
.lightbox__frame img{max-height:80vh;width:auto;margin:0 auto}
.lightbox__btn{width:54px;height:54px;border-radius:50%;background:var(--red);border:3px solid var(--paper);font-family:var(--display);font-size:2rem;line-height:1;color:var(--paper);box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.lightbox__close{position:fixed;top:2.5vh;right:3vw}

/* ============ LETTER ============ */
.scene--letter{background:var(--crimson)}
.letter{position:relative;z-index:2;min-height:100%;width:min(1180px,94vw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:3vw;padding:4vh 0 6rem}
.cover{position:relative;padding:22px 22px 22px 46px;border-radius:18px;
  background:radial-gradient(ellipse at 30% 20%, #9C1424, #5A0710 75%);box-shadow:10px 12px 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(0,0,0,.25)}
.rings{position:absolute;left:18px;top:28px;bottom:28px;width:44px;z-index:3;
  background:radial-gradient(ellipse 20px 8px at 22px 50%, #E9E2D0 45%, #8D8573 58%, transparent 62%) 0 0/44px 34px repeat-y}
.sheet{position:relative;background:repeating-linear-gradient(var(--paper) 0 35px, #E6D9BC 35px 36px);
  color:var(--ink);border-radius:8px;padding:36px 2rem 36px 3rem;min-height:min(72vh,600px);
  font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:36px}
.sheet__hi{font-family:var(--display);font-size:1.7rem;line-height:36px;color:var(--red);letter-spacing:.02em}
.sheet__body p+p{margin-top:36px}
.sheet__sign{margin-top:36px;text-align:right;color:var(--red);font-size:1.5rem}

.letter__side{position:relative;min-height:min(80vh,620px)}
.letter__title{font-size:clamp(3rem,7vw,5.4rem);max-width:7ch;position:relative;z-index:2}
.dangle{position:absolute;right:8%;top:-4vh;width:clamp(160px,22vw,290px);transform-origin:50% 0}
.dangle__thread{display:block;width:3px;height:22vh;margin:0 auto;background:var(--paper);opacity:.9}
.dangle img{margin-top:-10px;filter:var(--hard-shadow)}
.letter__star{position:absolute;left:6%;bottom:2%;width:clamp(110px,14vw,190px);transform:rotate(-14deg)}

/* ============ HOME BUTTON ============ */
.home{position:fixed;left:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:.5rem}
.home[hidden]{display:none}
.home__face{width:62px;height:62px;border-radius:50%;border:4px solid var(--paper);
  background:url(assets/stickers/headphones.webp) 50% 40%/190% no-repeat, var(--red);
  box-shadow:0 0 0 3px var(--ink), 5px 5px 0 3px rgba(17,19,61,.5);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.home__label{font-family:var(--display);font-size:1.3rem;letter-spacing:.04em;color:var(--paper);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--ink);opacity:0;transform:translateX(-6px);transition:opacity .2s, transform .2s}
.home:hover .home__face,.home:focus-visible .home__face{transform:rotate(-12deg) scale(1.08)}
.home:hover .home__label,.home:focus-visible .home__label{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hub{grid-template-columns:1fr;align-content:center;gap:1rem;height:auto;min-height:100%;padding:12vh 0 8vh}
  .scene--hub{overflow-y:auto}
  .hub__main{padding-left:0;text-align:center;display:flex;flex-direction:column;align-items:center}
  .hub__title{max-width:none}
  .hub__nav{justify-content:center}
  .hub__board{height:auto;padding:2rem 0}
  .paper{width:min(78vw,340px)}

  .album{grid-template-columns:minmax(0,1fr);padding:3vh 0 8rem}
  .album__stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
  .blob{display:none}
  .collage{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;width:100%}
  .frame{position:relative;left:auto;top:auto;width:auto}
  .cam{position:relative;right:auto;bottom:auto;width:min(92vw,460px)}
  .speech{position:relative;right:auto;bottom:auto;align-self:flex-start;margin:-1rem 0 0 6vw}
  .whaam{top:31%;right:-2%;font-size:clamp(2.6rem,12vw,4rem)}

  .letter{grid-template-columns:minmax(0,1fr);gap:0;padding-top:2vh}
  .letter__side{order:-1;min-height:clamp(230px,48vw,330px)}
  .dangle{top:-2vh;width:clamp(130px,30vw,200px)}
  .dangle__thread{height:9vh}
  .letter__star{display:none}
  .sheet{min-height:0;padding:1.6rem 1.2rem 1.8rem 2.4rem}

  .deco{display:none}
}

@media (max-width:640px){
  body{font-size:1.05rem}
  .band{height:5vh}
  .bubble{left:0;right:0;top:15%;width:auto;padding:1rem 1.3rem}
  .bang--red{right:8%;top:39%}
  .bang--blue{right:22%;top:44%}
  .intro__phone{left:0;right:0;bottom:8vh;width:auto}
  .hub__star{width:96px;left:-14px;top:-10px}
  .pick--mid{margin-top:1.6rem}
  .home{left:12px;bottom:12px}
  .home__face{width:52px;height:52px}
  .cover{padding:14px 12px 14px 34px}
  .rings{left:10px;width:36px;background-size:36px 30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .wipe{display:none}
}