:root{
  --red:#D0142C;
  --band:#8E0B16;
  --crimson:#6E0A14;
  --navy:#22256A;
  --ink:#11133D;
  --cream:#F6E6BE;
  --paper:#FFFCF2;
  --blue:#2340B8;

  --display:'Bangers', 'Impact', sans-serif;
  --hand:'Patrick Hand', 'Comic Sans MS', cursive;
  --lcd:'VT323', ui-monospace, monospace;
  --cinzel:'Cinzel', Georgia, serif;
  --fell:'IM Fell English', Georgia, serif;
  --gothic:'UnifrakturMaguntia', 'Old English Text MT', serif;

  --scarlet:#740001;
  --gold:#D3A625;
  --quill:#3B2412;
  --emerald:#1E5A38;

  --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}
[hidden]{display:none!important}

.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 ============ */
.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.1rem,2vw,1.4rem);max-width:40ch;color:var(--cream)}
.sticker img,.sticker-img{filter:var(--hard-shadow)}
.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))}

.suitweb{position:absolute;inset:0;width:100%;height:100%}
.comicbg{position:fixed;inset:0;pointer-events:none;background-size:cover;background-position:center;background-blend-mode:multiply}
.comicbg--navy{background-image:url(assets/scene/comic.webp);background-color:#4A50B0;opacity:.42}
.comicbg--red{background-image:url(assets/scene/comic.webp);background-color:#E0334A;opacity:.3}

/* ============ GLITCH ============ */
.glitch{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;visibility:hidden}
.glitch__bar{position:absolute;left:-8%;width:116%;opacity:0}
.glitch__bar--pink{background:rgba(255,46,150,.62);mix-blend-mode:screen}
.glitch__bar--cyan{background:rgba(0,229,255,.55);mix-blend-mode:screen}
.glitch__bar--yellow{background:rgba(255,226,0,.55);mix-blend-mode:multiply}
.glitch__bar--invert{-webkit-backdrop-filter:invert(1) hue-rotate(150deg);backdrop-filter:invert(1) hue-rotate(150deg)}
.glitch__bar--dots{background:radial-gradient(rgba(17,19,61,.85) 1.2px, transparent 1.5px) 0 0/6px 6px, rgba(208,20,44,.4)}

/* ============ SWINGER ============ */
.swinger{position:fixed;left:50%;top:-40vh;width:0;height:0;z-index:40;pointer-events:none;visibility:hidden}
.swinger__arm{position:absolute;left:0;top:0;transform-origin:0 0;transform:rotate(-80deg)}
.swinger__web{position:absolute;left:-1px;top:0;width:2px;height:102vh;background:linear-gradient(rgba(255,252,242,.15),rgba(255,252,242,.95))}
.swinger__arm img{position:absolute;left:0;top:102vh;width:clamp(120px,16vw,220px);max-width:none;transform:translate(-38%,-14%) rotate(-8deg);filter:var(--hard-shadow)}

/* ============ LOADER ============ */
.scene--loader{background:#B30F25}
.loader{position:relative;z-index:2;height:100%;display:grid;place-content:center;justify-items:center;gap:1.6rem}
.loader__logo{position:relative;width:clamp(150px,26vmin,250px);filter:drop-shadow(0 0 16px rgba(255,255,255,.4))}
.loader__ghost{opacity:.22}
.loader__fill{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.loader__text{font-size:clamp(.95rem,1.8vw,1.15rem);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.8}
.scene--loader.is-ready{cursor:pointer}
.scene--loader.is-ready .loader__text{opacity:1;animation:pulseText 1.6s ease-in-out infinite}
@keyframes pulseText{0%,100%{opacity:1}50%{opacity:.45}}

/* ============ "HAPPY BIRTHDAY" INTRO (Marvel Studios style, a rendered video) ============ */
.scene--marvel{background:#000}
.mv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .6s ease}
.is-playing .mv__video{opacity:1}
.mv__skip{position:absolute;right:18px;bottom:18px;z-index:2;padding:.35rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);
  color:rgba(255,255,255,.8);font-family:var(--display);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;transition:background .2s}
.mv__skip:hover,.mv__skip:focus-visible{background:rgba(255,255,255,.15)}
.mv__turn{display:none}
.mv__wait{position:absolute;left:0;right:0;top:50%;text-align:center;color:rgba(255,255,255,.55);font-size:.95rem;letter-spacing:.3em;text-transform:uppercase;animation:pulseText 1.6s ease-in-out infinite}
/* the coming-soon countdown, 5 seconds long, in front of the intro */
.cd{position:absolute;inset:0;z-index:3;overflow:hidden;background:#B30F25;color:var(--paper);font-family:var(--hand);transition:opacity .6s ease}
.cd.is-gone{opacity:0;pointer-events:none}
.cd__web{position:absolute;inset:0;width:100%;height:100%}
.cd__stage{position:relative;z-index:2;height:100%;display:grid;place-content:center;justify-items:center;gap:1.2rem;padding:8vh 1.2rem 2rem;text-align:center}
.cd__hang{position:absolute;top:0;right:12vw;width:clamp(80px,11vw,140px);z-index:3;transform-origin:50% 0;animation:cdSway 3.2s ease-in-out infinite}
.cd__hang span{display:block;width:3px;height:14vh;margin:0 auto;background:var(--paper);opacity:.9}
.cd__hang img{width:100%;margin-top:-6px;filter:drop-shadow(0 5px 0 rgba(17,19,61,.45))}
.cd__logo{width:clamp(80px,14vmin,150px);animation:pulse 2.4s ease-in-out infinite}
.cd__logo img{width:100%;filter:drop-shadow(0 8px 0 rgba(60,0,8,.5))}
.cd__title{font-family:var(--display);font-weight:400;font-size:clamp(2rem,6.5vw,4.4rem);line-height:.95;letter-spacing:.02em;color:var(--paper);
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);transform:skewX(-6deg);max-width:14ch;text-wrap:balance}
.cd__lede{font-size:clamp(1.05rem,2.3vw,1.4rem);color:var(--cream);max-width:34ch;text-wrap:balance}
.cd__clock{display:flex;gap:clamp(.5rem,2vw,1.1rem);margin-top:.3rem}
.cd__cell{min-width:clamp(60px,14vw,104px);padding:.45rem .4rem .3rem;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 rgba(17,19,61,.55)}
.cd__cell:nth-child(odd){transform:rotate(-2deg)}
.cd__cell:nth-child(even){transform:rotate(2deg)}
.cd__num{display:block;font-family:var(--display);font-size:clamp(2rem,7.5vw,3.6rem);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.cd__unit{display:block;font-size:clamp(.8rem,2vw,1.05rem)}
.cd__hint{margin-top:.4rem;padding:.35rem 1rem;border-radius:999px;background:rgba(17,19,61,.35);font-size:1rem;letter-spacing:.06em;animation:pulse 1.8s ease-in-out infinite}
@keyframes cdSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@media (max-width:600px){.cd__hang{right:6vw}}
@media (max-height:620px){
  .cd__logo{display:none}
  .cd__stage{gap:.7rem;padding:3vh 1rem 1rem}
  .cd__title{font-size:clamp(1.5rem,9vh,3rem);max-width:none}
  .cd__lede{font-size:1rem}
  .cd__num{font-size:clamp(1.5rem,9vh,2.8rem)}
  .cd__cell{padding:.3rem .4rem .2rem}
  .cd__hint{margin-top:0;font-size:.9rem}
  .cd__hang span{height:8vh}
}
.mv__start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;color:#fff;
  font-family:var(--display);font-size:1.3rem;letter-spacing:.2em;text-transform:uppercase}
.mv__play{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;border:3px solid rgba(255,255,255,.85);box-shadow:0 0 30px rgba(208,20,44,.6);animation:pulse 1.8s ease-in-out infinite}
.mv__play svg{width:38px;height:38px;fill:#fff;margin-left:5px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* phone held upright: play the wide intro full screen, sideways, like a movie */
@media (orientation:portrait){
  .mv__video{inset:auto;left:50%;top:50%;width:100vh;height:100vw;width:100dvh;transform:translate(-50%,-50%) rotate(90deg)}
  .is-playing .mv__turn{position:absolute;left:50%;top:50%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.8rem;transform:translate(-50%,-50%) rotate(90deg);
    color:rgba(255,255,255,.9);font-family:var(--display);font-size:1.4rem;letter-spacing:.08em;white-space:nowrap;pointer-events:none;animation:mvTurn 4.2s ease forwards}
  .mv__turn svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:mvTilt 1.4s ease-in-out infinite}
}
@keyframes mvTurn{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}
@keyframes mvTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-90deg)}}

/* ============ INTRO ============ */
.scene--intro{background:#0b0a1f}
.intro__city{position:absolute;inset:0;background:url(assets/scene/city.webp) center 40%/cover no-repeat;filter:brightness(.92) saturate(1.05)}
.intro__city::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%, transparent 40%, rgba(5,4,20,.45))}
.band{position:absolute;left:0;right:0;height:11vh;background:var(--band);z-index:4;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.band--top{top:0}
.band--bottom{bottom:0}

.intro{position:relative;z-index:3;height:100%;width:min(1280px,100%);margin:0 auto}
.bubble{position:absolute;left:5%;top:25%;width:min(580px,47vw);aspect-ratio:620/230;z-index:5}
.bubble__shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--paper);stroke:var(--ink);stroke-width:5;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(7px 8px 0 rgba(0,0,0,.45))}
.bubble__text{position:absolute;left:7%;right:6%;top:9%;height:64%;display:flex;flex-direction:column;justify-content:center;gap:.25em}
.bubble__title{font-family:var(--display);font-size:clamp(1.4rem,3.3vw,2.85rem);line-height:1;color:#A3101F;transform:skewX(-8deg);letter-spacing:.01em;text-shadow:2px 2px 0 rgba(17,19,61,.18)}
.bubble__hint{font-size:clamp(.8rem,1.35vw,1.1rem);letter-spacing:.14em;text-transform:uppercase;color:#1A1830}

.bang{position:absolute;z-index:5;fill:var(--red);stroke:var(--ink);stroke-width:4;stroke-linejoin:round;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.45));overflow:visible}
.bang--red{right:33%;top:13%;height:clamp(120px,26vh,240px);transform:rotate(9deg)}
.bang--blue{right:40%;top:24%;height:clamp(80px,17vh,160px);fill:var(--blue);transform:rotate(-20deg)}

.phone{--ph:84vh;position:absolute;right:8%;bottom:-16vh;height:var(--ph);width:calc(var(--ph) * 388 / 718);z-index:3;transform-origin:60% 90%}
.phone__body{position:relative;width:100%;height:100%;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.4));transition:transform .25s ease}
.phone:hover .phone__body{transform:scale(1.02)}
.phone__screen{
  position:absolute;left:calc(62.4% - 18%);top:calc(29.8% - 15%);width:36%;height:30%;transform:rotate(10.5deg);
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 40% 30%, #FF6B7A, #D0142C 60%, #8E0B16);
  color:#FFE9E9;font-family:var(--lcd);font-size:calc(var(--ph) * .021);line-height:1.05;text-align:center;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;padding:16% 14%;
}
.phone__bar{padding:0 .35em;background:rgba(255,233,233,.9);color:#8E0B16;letter-spacing:.04em}
.phone__env{width:44%;aspect-ratio:3/2;border:2px solid #FFE9E9;position:relative;margin:.15em 0}
.phone__env::before{content:"";position:absolute;inset:0;background:linear-gradient(32deg, transparent 49%, #FFE9E9 50%, transparent 52%) left/50% 100% no-repeat, linear-gradient(-32deg, transparent 49%, #FFE9E9 50%, transparent 52%) right/50% 100% no-repeat}
.phone__line{letter-spacing:.04em}

/* ============ 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(108px,14vw,196px);aspect-ratio:1;display:grid;place-items:center}
.pick--mid{margin-top:3.2rem}
.pick .burst{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pick__img,.pick__badge{position:relative;width:76%;filter:var(--hard-shadow);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pick__badge{display:grid;place-items:center;width:70%}
.pick__badge svg{width:100%;height:auto;display:block}
.pick__badge img{position:absolute;width:52%}
.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 .burst,.pick:focus-visible .burst{transform:rotate(18deg) scale(1.08)}
.pick:hover .pick__img,.pick:hover .pick__badge,.pick:focus-visible .pick__img,.pick:focus-visible .pick__badge{transform:translateY(-6px) rotate(-5deg) scale(1.07)}
.pick:active .pick__img,.pick:active .pick__badge{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)}
.tape-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.paper__sticker{position:absolute}
.paper__sticker--a{right:-12%;bottom:-8%;width:44%;transform:rotate(8deg)}
.paper__sticker--b{right:2%;top:-7%;width:24%;transform:rotate(-12deg)}
.paper__sticker--c{left:-12%;bottom:16%;width:26%;transform:rotate(-10deg)}
.paper__note{position:absolute;left:16%;bottom:8%;font-size:1.5rem;color:var(--red);transform:rotate(-4deg)}

/* ============ PLAYLIST ============ */
.scene--playlist{background:#1E2160}
.plband{position:absolute;top:0;left:0;right:0;height:clamp(170px,30vh,290px);z-index:1;border-bottom:6px solid var(--ink);
  background:url(assets/scene/comic.webp) center/cover, var(--red);background-blend-mode:multiply}
.page{position:relative;z-index:2;width:min(1060px,92vw);margin:0 auto;padding:clamp(1.2rem,4vh,2.6rem) 0 7rem}
.page--playlist{display:flex;flex-direction:column;align-items:center;text-align:center}
.disc{position:relative;width:clamp(190px,26vw,290px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:url(assets/scene/comic.webp) center/220%, #E33A50;background-blend-mode:multiply;border:6px solid var(--ink);box-shadow:8px 8px 0 rgba(17,19,61,.55)}
.disc .burst{inset:12%;width:76%;height:76%}
.disc img{position:relative;width:70%;filter:var(--hard-shadow)}
.scene--playlist .page__title{margin-top:-2.4rem;position:relative;z-index:3}
.scene--playlist .page__lede{margin:1rem auto 2rem}
.tracks{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.1rem;text-align:left}
.tracks iframe{width:100%;border:0;border-radius:14px;background:var(--ink);box-shadow:6px 6px 0 rgba(17,19,61,.6);display:block}
.tracks__main iframe{height:100%;min-height:520px}
.tracks__list{display:grid;gap:8px;align-content:start}
.tracks__list iframe{height:80px}
.tracks__main .sp{height:100%;min-height:520px}
.tracks__list .sp{height:80px}

.toy{position:fixed;z-index:6;transition:filter .2s}
.toy:hover,.toy:focus-visible{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,252,242,.45))}
.toy--web{left:1vw;top:42vh;width:clamp(120px,14vw,210px)}
.toy--text{right:1.2vw;bottom:5vh;width:clamp(140px,16vw,240px)}
.toy--star{right:3vw;top:clamp(190px,33vh,320px);width:clamp(80px,9vw,140px)}
.toy--pavitr{left:2vw;top:3vh;width:clamp(150px,17vw,270px)}

.webshot{position:fixed;inset:0;z-index:55;pointer-events:none}
.webshot line{stroke:var(--paper);stroke-width:3;stroke-linecap:round}
.thwip{position:fixed;z-index:56;pointer-events:none;font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);color:var(--paper);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--red)}
.sparkle{position:fixed;z-index:56;pointer-events:none;width:22px;height:22px;background:var(--cream);clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);filter:drop-shadow(0 0 4px #fff)}

.toast{position:fixed;left:50%;bottom:6vh;z-index:70;max-width:min(90vw,460px);padding:.8rem 1.3rem;transform:translateX(-50%);
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 rgba(17,19,61,.55);font-size:1.2rem;text-align:center}
.sms{position:fixed;top:3vh;left:50%;z-index:70;width:min(92vw,400px);transform:translateX(-50%);padding:1rem 1.1rem 1.1rem;
  background:rgba(255,252,242,.97);color:var(--ink);border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 rgba(17,19,61,.55)}
.sms__from{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.3rem;letter-spacing:.03em}
.sms__from img{width:34px}
.sms__from span{margin-left:auto;font-family:var(--hand);font-size:.95rem;opacity:.6}
.sms__body{margin:.4rem 0 .8rem;font-size:1.15rem;line-height:1.4}
.sms__ok{display:block;margin-left:auto;padding:.35rem 1.1rem;border-radius:999px;background:var(--red);color:var(--paper);border:3px solid var(--ink);font-family:var(--display);font-size:1.15rem;letter-spacing:.04em}

/* ============ ALBUM ============ */
.scene--album{background:#C2102A}
.album{position:relative;z-index:2;min-height:100%;width:min(1320px,95vw);margin:0 auto;display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);align-items:center;gap:2vw;padding:3vh 0 5rem}
.album__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.album__badge{position:relative;width:clamp(130px,14vw,190px);aspect-ratio:1;display:grid;place-items:center}
.album__badge img{position:relative;width:80%;filter:var(--hard-shadow)}
.album__intro .page__lede{margin-top:.5rem;color:var(--paper)}
.cam{position:relative;width:100%;max-width:290px;margin-top:.6rem}
.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}

.book{position:relative;min-width:0}
.book__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;border-radius:10px}
.book__track::-webkit-scrollbar{display:none}
.book__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.spread{position:relative;flex:0 0 100%;scroll-snap-align:start;height:min(70vh,620px);overflow:hidden}
.spread__cap{position:absolute;left:1%;top:0;z-index:6;max-width:62%;padding:.3rem .8rem;background:#FFD23F;color:var(--ink);border:3px solid var(--ink);
  font-family:var(--display);font-size:clamp(1.05rem,1.8vw,1.45rem);letter-spacing:.03em;box-shadow:4px 4px 0 rgba(17,19,61,.55);transform:rotate(-1.5deg)}
.spread__grid{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:4/5;object-fit:cover;background:#1a1c4a}
.frame:hover,.frame:focus-visible{transform:rotate(0deg) scale(1.06);z-index:5;box-shadow:12px 12px 0 rgba(17,19,61,.55)}
.spread__hero{position:absolute;bottom:0;width:30%;z-index:4;filter:var(--hard-shadow);cursor:pointer;transition:filter .2s}
.spread__hero:hover,.spread__hero:focus-visible{filter:var(--hard-shadow) brightness(1.08)}
.spread__pow{cursor:pointer;user-select:none}
.album__badge{cursor:pointer}
.quip{position:absolute;z-index:9;padding:.25em .8em;background:var(--paper);color:var(--red);border:3px solid var(--ink);border-radius:16px;
  font-family:var(--display);font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.03em;white-space:nowrap;box-shadow:4px 4px 0 rgba(17,19,61,.5);pointer-events:none}
.sp{width:100%}
.spread--a .spread__hero{right:0}
.spread--b .spread__hero{left:0}
.spread__pow{position:absolute;z-index:7;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.6rem);color:var(--red);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:.05em .7em;box-shadow:5px 5px 0 rgba(17,19,61,.5);transform:rotate(-6deg)}
.spread--a .spread__pow{right:24%;top:6%}
.spread--b .spread__pow{left:24%;top:6%}

.book__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.book__btn{width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--red);border:3px solid var(--ink);font-family:var(--display);font-size:2.2rem;line-height:1;box-shadow:4px 4px 0 rgba(17,19,61,.55);transition:transform .2s}
.book__btn:hover{transform:scale(1.08)}
.book__btn:disabled{opacity:.4;cursor:default;transform:none}
.book__dots{display:flex;gap:.5rem}
.book__dot{width:12px;height:12px;border-radius:999px;background:rgba(255,252,242,.45);border:2px solid var(--ink);transition:width .3s, background .3s}
.book__dot[aria-selected="true"]{width:30px;background:var(--paper)}
.book__hint{text-align:center;margin-top:.4rem;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

.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__frame{justify-self:center;max-width:min(88vw,900px);padding:10px 10px 6px;background:var(--paper);transform:rotate(-1.2deg);box-shadow:12px 12px 0 rgba(0,0,0,.5)}
.lightbox__frame img{max-height:78vh;width:auto;margin:0 auto}
.lightbox__frame figcaption{text-align:center;color:var(--ink);font-size:1rem;padding-top:4px}
.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)}
.scene--letter.is-active{display:flex;flex-direction:column}
.scene--letter .suitweb{position:fixed}
.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:3vh 0 1.2rem;flex:1 0 auto}
.scene--letter .letter{min-height:0}
.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}
.wishbtn{display:block;margin:20px 0 0 auto;padding:.2rem 1.2rem;border-radius:999px;background:var(--red);color:var(--paper);border:3px solid var(--ink);font-family:var(--display);font-size:1.4rem;letter-spacing:.04em;box-shadow:4px 4px 0 rgba(17,19,61,.5);transition:background .2s}
.wishbtn:hover,.wishbtn:focus-visible{background:var(--navy)}

.letter__side{position:relative;min-height:min(84vh,660px)}
.letter__title{font-size:clamp(3rem,6.6vw,5.4rem);max-width:7ch;position:relative;z-index:3}
.powerbadge{position:absolute;right:2%;top:0;width:clamp(130px,15vw,200px);aspect-ratio:1;display:grid;place-items:center;z-index:4}
.powerbadge__ring{position:relative;width:74%;display:grid;place-items:center;filter:var(--hard-shadow)}
.powerbadge__ring svg{width:100%;height:auto;display:block}
.powerbadge__ring img{position:absolute;width:52%}
.dangle{--w:clamp(140px,12vw,190px);position:absolute;left:calc(50% - var(--w) / 2);top:-6vh;width:var(--w);transform-origin:73.6% 0;z-index:2}
.dangle__thread{display:block;width:3px;height:calc(6vh + 345px);margin:0 0 0 calc(73.6% - 1.5px);background:var(--paper);opacity:.9}
.dangle img{margin-top:-8px;filter:var(--hard-shadow)}
.variant{position:absolute;filter:var(--hard-shadow);z-index:1}
.variant--a{left:3%;top:34%;width:clamp(70px,7.5vw,105px);transform:rotate(-12deg)}
.variant--b{right:3%;top:34%;width:clamp(90px,8.5vw,130px);transform:rotate(8deg)}
.variant--c{left:2%;bottom:2%;width:clamp(90px,8.5vw,130px);transform:rotate(-6deg)}
.variant--d{right:2%;bottom:2%;width:clamp(100px,9.5vw,150px);transform:rotate(4deg)}

.wish{position:fixed;inset:0;z-index:65;display:grid;place-items:center;padding:4vh 4vw;background:var(--halftone), rgba(17,19,61,.94)}
.wish__box{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;max-width:520px}
.wish__title{font-size:clamp(2.6rem,8vw,4.4rem)}
.wish__hint{color:var(--cream);font-size:1.2rem;max-width:34ch}
.cake{width:min(78vw,340px);height:auto;overflow:visible}
.candle{cursor:pointer}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .45s ease-in-out infinite alternate}
.candle.is-out .flame{animation:none;opacity:0;transform:scale(.2)}
.wish__close{padding:.3rem 1.2rem;border-radius:999px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);font-family:var(--display);font-size:1.25rem;letter-spacing:.04em}
@keyframes flicker{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.12,.92) rotate(3deg)}}

/* ============ HARRY POTTER: OWL POST ============ */
.scene--owl{background:#070617}
.owl__sky{position:absolute;inset:0;background:url(assets/scene/city.webp) center 40%/cover no-repeat;filter:brightness(.5) saturate(.85)}
.owl__sky::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%, rgba(211,166,37,.22), transparent 55%), linear-gradient(rgba(7,6,23,.6), rgba(7,6,23,.15) 45%, rgba(7,6,23,.75))}
.owl__stars{position:absolute;inset:0 0 45% 0;opacity:.85;background-image:
  radial-gradient(1.6px 1.6px at 8% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 21% 32%, #fff 50%, transparent 52%),
  radial-gradient(2px 2px at 33% 9%, #FFE9A8 50%, transparent 52%), radial-gradient(1.2px 1.2px at 46% 26%, #fff 50%, transparent 52%),
  radial-gradient(1.6px 1.6px at 58% 12%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 69% 38%, #fff 50%, transparent 52%),
  radial-gradient(2px 2px at 81% 18%, #FFE9A8 50%, transparent 52%), radial-gradient(1.4px 1.4px at 92% 30%, #fff 50%, transparent 52%),
  radial-gradient(1.2px 1.2px at 14% 52%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 88% 56%, #fff 50%, transparent 52%)}
.owl__bird{position:absolute;left:0;right:0;top:4vh;margin:0 auto;width:clamp(210px,30vw,380px);z-index:5;pointer-events:none;filter:drop-shadow(0 10px 0 rgba(0,0,0,.35))}
.owlpost{position:relative;z-index:3;height:100%;display:grid;place-content:center;justify-items:center;gap:1.4rem;padding:18vh 1rem 2rem}
.envelope{position:relative;width:min(86vw,520px);aspect-ratio:3/2;perspective:1400px;
  background:linear-gradient(rgba(70,40,10,.35),rgba(70,40,10,.35)), url(assets/hp/parchment.webp) center/cover;border-radius:6px;box-shadow:0 22px 40px rgba(0,0,0,.55), 8px 8px 0 rgba(0,0,0,.3)}
.envelope__peek{position:absolute;left:7%;right:7%;top:8%;height:84%;z-index:1;border-radius:3px;background:url(assets/hp/parchment.webp) center/cover;box-shadow:0 -2px 6px rgba(0,0,0,.25)}
.envelope__peek::after{content:"";position:absolute;left:14%;right:14%;top:12%;height:30%;background:repeating-linear-gradient(transparent 0 9px, rgba(59,36,18,.28) 9px 10px)}
.envelope__pocket{position:absolute;inset:0;z-index:2;border-radius:6px;clip-path:polygon(0 0,50% 47%,100% 0,100% 100%,0 100%);
  background:linear-gradient(to top right, transparent calc(50% - 1px), rgba(90,55,20,.35) 50%, transparent calc(50% + 1px)) left bottom/50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(90,55,20,.35) 50%, transparent calc(50% + 1px)) right bottom/50% 100% no-repeat,
    url(assets/hp/parchment.webp) center/cover}
.envelope__addr{position:absolute;left:0;right:0;bottom:7%;z-index:3;text-align:center;font-family:var(--fell);font-style:italic;font-size:clamp(.85rem,2.4vw,1.25rem);line-height:1.3;color:var(--emerald)}
.envelope__flap{position:absolute;left:0;right:0;top:0;height:50%;z-index:4;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(rgba(255,240,200,.15),rgba(90,55,20,.25)), url(assets/hp/parchment.webp) center top/cover}
.seal{--s:clamp(74px,17vw,112px);position:absolute;z-index:6;left:calc(50% - var(--s) / 2);top:calc(50% - var(--s) * .62);width:var(--s);height:var(--s);filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}
.seal__half{position:absolute;inset:0}
.seal__half img{position:absolute;inset:0;width:100%;height:100%}
.seal__half--l{clip-path:polygon(0 0,54% 0,46% 30%,57% 55%,44% 78%,52% 100%,0 100%)}
.seal__half--r{clip-path:polygon(54% 0,100% 0,100% 100%,52% 100%,44% 78%,57% 55%,46% 30%)}
.seal__half img.seal__mark,.hogletter__crest img.seal__mark{inset:24%;width:52%;height:52%;object-fit:contain;filter:invert(1) drop-shadow(1px 1px 0 rgba(255,170,170,.7));opacity:.5}
.owlpost__hint{font-family:var(--cinzel);font-weight:600;font-size:clamp(.85rem,1.8vw,1.05rem);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-align:center}
.js.gsap .owl__bird,.js.gsap .envelope,.js.gsap .owlpost__hint{visibility:hidden}

.hogletter{position:absolute;inset:0;margin:auto;height:-webkit-fit-content;height:fit-content;z-index:8;width:min(92vw,560px);max-height:92vh;overflow-y:auto;
  padding:clamp(1.3rem,4vw,2.4rem);border-radius:4px;background:url(assets/hp/parchment.webp) center/cover, #EBD9AE;color:var(--quill);
  font-family:var(--fell);box-shadow:0 24px 50px rgba(0,0,0,.6), inset 0 0 50px rgba(110,70,20,.35)}
.hogletter__crest{position:relative;display:block;width:64px;height:64px;margin:0 auto .4rem}
.hogletter__crest img{position:absolute;inset:0;width:100%;height:100%}
.hogletter__school{font-family:var(--cinzel);font-weight:800;font-size:clamp(1.35rem,4vw,2rem);line-height:1.1;color:var(--scarlet);text-align:center}
.hogletter__school small{display:block;margin-top:.2rem;font-size:.5em;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--quill)}
.hogletter__body{margin-top:1rem}
.hogletter__body p{font-size:clamp(1rem,2.2vw,1.18rem);line-height:1.45;margin-top:.55em}
.hogletter__sign{margin-top:1rem;font-size:1rem}
.hogletter__sign span{display:block;font-style:italic;font-size:1.6rem;line-height:1.2;color:var(--emerald)}
.hogletter__sign small{display:block;font-size:.85rem;letter-spacing:.06em}
.hogletter__go,.snitchbox__ok{display:block;margin:1.3rem auto 0;padding:.55rem 1.5rem;border-radius:999px;background:var(--scarlet);color:#FFE9A8;border:3px solid var(--gold);
  font-family:var(--cinzel);font-weight:800;font-size:clamp(.95rem,2vw,1.15rem);letter-spacing:.06em;box-shadow:0 5px 0 rgba(0,0,0,.35);transition:transform .2s, background .2s}
.hogletter__go:hover,.hogletter__go:focus-visible,.snitchbox__ok:hover,.snitchbox__ok:focus-visible{transform:translateY(-2px) scale(1.04);background:#8F0A0F}

/* ============ HARRY POTTER: SORTING HAT ============ */
.hat{position:absolute;left:-6%;top:3%;width:clamp(100px,12vw,170px);z-index:4;transform:rotate(-12deg);transition:filter .2s}
.hat img{filter:var(--hard-shadow)}
.hat:hover,.hat:focus-visible{filter:brightness(1.1) drop-shadow(0 0 12px rgba(211,166,37,.6))}
.say{position:fixed;z-index:75;max-width:min(80vw,280px);padding:.55rem .9rem;background:#FBF0D2;color:var(--quill);border:3px solid var(--quill);border-radius:16px;
  font-family:var(--fell);font-style:italic;font-size:1.15rem;line-height:1.3;box-shadow:5px 5px 0 rgba(0,0,0,.35);pointer-events:none}
.say--shout{font-family:var(--cinzel);font-style:normal;font-weight:800;font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:.04em;color:var(--scarlet);border-color:var(--gold);background:#FFF6DA}

/* ============ HARRY POTTER: GOLDEN SNITCH ============ */
.snitch{position:fixed;left:0;top:0;z-index:58;width:clamp(78px,8vw,104px);padding:12px;margin:-12px 0 0 -12px}
.snitch img{filter:drop-shadow(0 0 10px rgba(255,214,90,.75)) drop-shadow(0 3px 0 rgba(0,0,0,.35));transform-origin:50% 60%}
.webnet{position:fixed;z-index:57;pointer-events:none}
.webnet__shade{fill:none;stroke:rgba(17,19,61,.55);stroke-width:3.4;stroke-linecap:round}
.webnet__silk{fill:none;stroke:var(--paper);stroke-opacity:.92;stroke-width:1.4;stroke-linecap:round}
.snitchbox{position:fixed;inset:0;z-index:66;display:grid;place-items:center;padding:4vh 5vw;background:radial-gradient(circle at 50% 40%, rgba(116,0,1,.55), transparent 60%), var(--halftone), rgba(17,19,61,.94)}
.snitchbox__card{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;max-width:460px}
.snitchbox__title{font-size:clamp(2.3rem,7.5vw,3.8rem);text-shadow:4px 4px 0 var(--scarlet), 8px 8px 0 var(--ink)}
.snitchbox__orb{width:min(60vw,220px);filter:drop-shadow(0 0 22px rgba(255,214,90,.8))}
.snitchbox__engr{font-family:var(--fell);font-style:italic;font-size:1.5rem;color:var(--gold)}
.snitchbox__msg{font-size:1.3rem;color:var(--cream);max-width:30ch}

/* ============ HARRY POTTER: DAILY PROPHET ============ */
.spread--prophet{display:grid;place-items:center;padding:3.1rem .6rem .6rem}
.prophet{position:relative;width:min(96%,840px);height:100%;display:flex;flex-direction:column;overflow:hidden;padding:clamp(.8rem,2vw,1.3rem);color:#2A2118;
  background:linear-gradient(rgba(236,229,212,.6),rgba(236,229,212,.6)), url(assets/hp/parchment.webp) center/cover;border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(17,19,61,.5);transform:rotate(-.8deg)}
.prophet__mast{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem;padding-bottom:.25rem;border-bottom:4px double #2A2118}
.prophet__mast h3{font-family:var(--gothic);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1;text-align:center;white-space:nowrap}
.prophet__ear{justify-self:start;max-width:9rem;padding:.2rem .4rem;border:1px solid #2A2118;font-family:var(--fell);font-size:.7rem;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.prophet__ear:last-child{justify-self:end}
.prophet__rule{padding:.15rem 0;border-bottom:1px solid #2A2118;font-family:var(--fell);font-style:italic;font-size:.8rem;text-align:center}
.prophet__head{margin:.45rem 0 .5rem;font-family:var(--cinzel);font-weight:800;font-size:clamp(1.05rem,2.5vw,1.8rem);line-height:1.05;text-align:center;text-transform:uppercase}
.prophet__body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(.6rem,1.6vw,1.1rem)}
.prophet__photo{position:relative;display:block;width:100%;overflow:hidden;border:2px solid #2A2118;background:#2A2118}
.prophet__photo--main{height:100%}
.prophet__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.5) contrast(1.08);opacity:0;transition:opacity 1.2s ease}
.prophet__photo img.is-on{opacity:1;animation:wizard 6s ease-in-out infinite alternate}
@keyframes wizard{from{transform:scale(1.03)}to{transform:scale(1.15) translate(-2%,-1.5%)}}
.prophet__col{display:flex;flex-direction:column;gap:.5rem;min-height:0;overflow:hidden}
.prophet__col p{font-family:var(--fell);font-size:clamp(.82rem,1.2vw,.97rem);line-height:1.35;text-align:justify;hyphens:auto}
.prophet__col p:first-child::first-letter{float:left;padding:.04em .08em 0 0;font-family:var(--gothic);font-size:2.7em;line-height:.8}
.prophet__photo--small{flex:1;min-height:70px}
.prophet__cap{font-family:var(--fell);font-style:italic;font-size:.75rem;text-align:center}
.spread--prophet .spread__hero{width:20%;left:-1%;bottom:-2%}
.spread--prophet .spread__pow{left:auto;right:1%;top:.2rem}

/* ============ SOUND TOGGLE ============ */
.soundbtn{position:fixed;right:16px;top:calc(11vh + 12px);z-index:56;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(17,19,61,.5);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.soundbtn:hover,.soundbtn:focus-visible{transform:scale(1.08) rotate(-6deg)}
.soundbtn svg{width:24px;height:24px;fill:var(--red);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.soundbtn .wave{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.soundbtn__off{display:none}
.soundbtn[aria-pressed="false"] .soundbtn__on{display:none}
.soundbtn[aria-pressed="false"] .soundbtn__off{display:block}
@media (max-width:700px){.soundbtn{top:calc(7vh + 10px);right:10px;width:42px;height:42px}}

/* ============ HOME + CREDITS ============ */
.home{position:fixed;left:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:.5rem}
.home__face{width:62px;height:62px;border-radius:50%;border:4px solid var(--paper);background:url(assets/spidey/maskemoji.webp) 50% 45%/86% 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}
.credits{position:relative;z-index:2;flex:none;margin:0 auto;padding:0 1rem 1rem;max-width:60ch;font-size:.8rem;opacity:.55;text-align:center}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .album{grid-template-columns:minmax(0,1fr);padding:2vh 0 6rem}
  .album__head{flex-direction:row;flex-wrap:wrap;justify-content:center;text-align:left;gap:1rem}
  .album__intro{max-width:46ch}
  .cam{display:none}
  .spread{height:auto;min-height:0;padding:3.2rem 0 1rem}
  .spread__cap{left:2%;max-width:90%}
  .spread__grid{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;padding:0 .4rem}
  .frame{position:relative;left:auto;top:auto;width:auto}
  .spread__hero{width:22%;bottom:auto;top:.2rem}
  .spread--a .spread__hero,.spread--b .spread__hero{right:1%;left:auto}
  .spread__pow{display:none}
  .spread--prophet{padding:3.2rem .4rem 1rem}
  .prophet{height:auto;transform:none}
  .prophet__body{grid-template-columns:minmax(0,1fr)}
  .prophet__photo--main{height:auto;aspect-ratio:4/5}
  .prophet__photo--small{flex:none;aspect-ratio:4/3}
  .spread--prophet .spread__hero{width:22%;left:auto;right:1%;bottom:auto;top:.2rem}
}

@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 3rem}
  .paper{width:min(74vw,340px)}

  .tracks{grid-template-columns:minmax(0,1fr)}
  .tracks__main iframe,.tracks__main .sp{min-height:380px}

  .letter{grid-template-columns:minmax(0,1fr);gap:0;padding-top:2vh}
  .letter__side{order:-1;min-height:clamp(370px,96vw,440px)}
  .dangle{--w:clamp(110px,27vw,150px);right:auto;top:-3vh}
  .dangle__thread{height:calc(3vh + 262px)}
  .variant--a{display:none}
  .variant--b{display:none}
  .variant--c{left:auto;right:4%;bottom:2%}
  .variant--d{right:auto;left:2%;bottom:10px;width:clamp(90px,24vw,130px)}
  .credits{padding-bottom:5.5rem}
  .sheet{min-height:0;padding:36px 1.2rem 36px 2.4rem}

  .toy--web{left:auto;right:2vw;top:auto;bottom:10vh;width:96px}
  .toy--text{right:auto;left:2vw;bottom:auto;top:1.5vh;width:110px;position:absolute}
  .toy--star{right:3vw;top:17vh;width:66px;position:absolute}
  .toy--pavitr{display:none}
  .hat{left:0;top:0;width:96px}
}

@media (max-width:700px){
  body{font-size:1.05rem}
  .band{height:7vh}
  .bubble{left:4vw;right:4vw;top:12%;width:auto}
  .bubble__title{font-size:clamp(1.25rem,6.2vw,1.8rem)}
  .bubble__hint{font-size:clamp(.72rem,3.2vw,.9rem)}
  .bang--red{right:auto;left:10%;top:36%;height:16vh}
  .bang--blue{right:auto;left:22%;top:41%;height:10vh}
  .prophet__ear{display:none}
  .prophet__mast{grid-template-columns:minmax(0,1fr)}
  .owlpost{padding-top:22vh}
  .phone{--ph:62vh;right:auto;left:calc(58% - var(--ph) * 388 / 718 / 2);bottom:-10vh}
  .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}
  .spread__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spread__hero{width:28%}
}

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