:root{
  --bg:#050505;
  --paper:#efeee9;
  --pad:clamp(20px,3.5vw,58px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.055;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor{position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:4;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);filter:blur(8px)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1000}
.progress span{display:block;height:100%;width:0;background:#fff}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;padding:20px var(--pad);mix-blend-mode:difference}
.brand{font-family:"Space Grotesk";font-size:18px;font-weight:600;letter-spacing:-.1em}
.nav nav{display:flex;gap:24px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.hero-scroll{height:360vh}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-black{position:absolute;inset:0;background:#050505}
.hero-slogan{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:3}
.hero-slogan span{display:block;font-family:"Space Grotesk";font-size:clamp(105px,22vw,360px);line-height:.67;letter-spacing:-.11em;font-weight:600}
.hero-photo{position:absolute;inset:0;opacity:0;transform:scale(1.22)}
.hero-photo picture,.hero-photo img{display:block;width:100%;height:100%}.hero-photo img{object-fit:cover;object-position:center center}
.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.52))}
.hero-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.55);font-family:"Space Grotesk";font-size:7vw;letter-spacing:-.08em;opacity:0;mix-blend-mode:difference;text-transform:lowercase}
.hero-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:26px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;opacity:0}
.scroll-cue{position:absolute;left:50%;bottom:18px;width:1px;height:46px;background:rgba(255,255,255,.18)}
.scroll-cue span{display:block;width:1px;height:13px;background:#fff;animation:cue 1.8s infinite}


.about{
  min-height:100vh;
  background:#050505;
  color:#fff;
  padding:var(--pad);
  display:grid;
  grid-template-columns:1fr 4fr 1fr;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.about:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:100%;
  background:rgba(255,255,255,.12);
}
.about-index,.about-note{
  font-size:9px;
  letter-spacing:.18em;
  position:relative;
  z-index:1;
}
.about-note{text-align:right}
.about-lead{
  margin:0;
  font-family:"Space Grotesk";
  font-size:clamp(42px,7vw,112px);
  line-height:.92;
  letter-spacing:-.065em;
  text-align:center;
  position:relative;
  z-index:1;
}

.releases{position:relative;min-height:120vh;background:var(--paper);color:#111;padding:14vh var(--pad) 16vh;overflow:hidden}
.releases-head{display:flex;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.18);padding-bottom:18px;font-size:10px;letter-spacing:.18em}
.release-list{position:relative;z-index:3}
.release{position:relative;display:grid;grid-template-columns:48px 1fr 55px;align-items:center;gap:16px;padding:24px 0;border-bottom:1px solid rgba(0,0,0,.16);cursor:pointer}
.release .number,.release time{font-size:10px;color:#777}
.release h2{margin:0;font-family:"Space Grotesk";font-size:clamp(34px,5.5vw,86px);font-weight:400;letter-spacing:-.06em;transition:.35s}
.release:hover h2{transform:translateX(18px)}
.disc{position:absolute;right:5vw;top:50%;width:160px;height:160px;border-radius:50%;transform:translateY(-50%) scale(.3);opacity:0;box-shadow:0 18px 45px rgba(0,0,0,.22);transition:.35s}
.release:hover .disc{opacity:1;transform:translateY(-50%) scale(1) rotate(20deg)}
.disc:after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%)}
.disc-blue{background:radial-gradient(circle at 35% 30%,#3b7ea2,#061923 60%,#020202)}
.disc-cream{background:radial-gradient(circle at 35% 30%,#eee6cf,#99917e 60%,#2c2c28)}
.disc-steel{background:radial-gradient(circle at 35% 30%,#7b8fa1,#263847 62%,#0c1116)}
.disc-red{background:radial-gradient(circle at 35% 30%,#e31b23,#6e0d11 62%,#151515)}
.disc-violet{background:radial-gradient(circle at 35% 30%,#e41b8e,#42145f 62%,#09112a)}
.release-stage{position:absolute;right:-4vw;bottom:-3vw;opacity:.08}
.stage-word{font-family:"Space Grotesk";font-size:21vw;letter-spacing:-.1em}


.film{
  background:#050505;
  padding:12vh var(--pad) 14vh;
}
.film-head{
  display:flex;
  justify-content:space-between;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-size:10px;
  letter-spacing:.18em;
}
.film-poster{
  appearance:none;
  border:0;
  padding:0;
  margin:7vh 0 0;
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  display:block;
  overflow:hidden;
  background:#111;
  color:#fff;
  cursor:pointer;
  text-align:left;
}
.film-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.015);
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;
}
.film-poster:hover img{transform:scale(1.07);filter:contrast(1.08)}
.film-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.04) 70%);
}
.film-title{
  position:absolute;
  left:3vw;
  bottom:2.2vw;
  font-family:"Space Grotesk";
  font-size:clamp(78px,15vw,230px);
  line-height:.7;
  letter-spacing:-.1em;
}
.film-play{
  position:absolute;
  right:3vw;
  bottom:2.8vw;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:10px;
  letter-spacing:.18em;
}
.film-play i{
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  position:relative;
}
.film-play i:after{
  content:"";
  position:absolute;
  left:21px;
  top:17px;
  border-left:12px solid #fff;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.video-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(0,0,0,.96);
  padding:clamp(20px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.35s;
}
.video-modal.open{opacity:1;visibility:visible}
.video-frame{width:min(1320px,100%);aspect-ratio:16/9}
.video-frame iframe{width:100%;height:100%;border:0}
.video-close{
  position:absolute;
  top:22px;
  right:var(--pad);
  border:0;
  background:none;
  color:#fff;
  font:inherit;
  font-size:10px;
  letter-spacing:.18em;
  cursor:pointer;
}
body.modal-open{overflow:hidden}

.transition{position:relative;height:120vh;overflow:hidden}
.transition-image{position:absolute;inset:0}
.transition-image picture,.transition-image img{display:block;width:100%;height:100%}.transition-image img{object-fit:cover;object-position:center center;transform:scale(1.08)}
.transition:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.08))}
.transition-copy{position:absolute;left:var(--pad);bottom:7vh;z-index:2}
.transition-copy span{font-size:10px;letter-spacing:.18em}
.transition-copy h2{font-family:"Space Grotesk";font-size:clamp(95px,16vw,250px);line-height:.7;letter-spacing:-.1em;margin:24px 0 0}

.album{display:grid;grid-template-columns:1fr 1.12fr;gap:7vw;background:var(--paper);color:#111;padding:12vh var(--pad) 16vh}
.album-cover-wrap{position:relative}
.cover{position:sticky;top:8vh;aspect-ratio:1;background:#8b1b05;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.22)}
.cover-text{position:absolute;inset:-8%;font-family:"Space Grotesk";font-size:5vw;line-height:.8;font-weight:600;color:rgba(255,94,31,.5);transform:rotate(-5deg)}
.frog{position:absolute;inset:18% 14% 9%}
.frog .body{position:absolute;left:18%;right:18%;top:28%;bottom:0;border-radius:45% 45% 18% 18%;background:radial-gradient(circle at 50% 38%,#a7a225 0 13%,#526f18 45%,#203712 78%)}
.frog .eye{position:absolute;top:8%;z-index:2;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#060606 0 16%,#e7a118 17% 34%,#667a22 35% 64%,#1f3211 65%);border:6px solid #456018}
.frog .left{left:8%}.frog .right{right:8%}
.cover>strong{position:absolute;left:18px;right:18px;bottom:14px;text-align:center;font-family:"Space Grotesk";font-size:4vw;color:#f0a13a}
.album-kicker{font-size:10px;letter-spacing:.18em;margin-bottom:20px}
.tracklist{list-style:none;counter-reset:t;margin:0;padding:0}
.tracklist li{counter-increment:t;display:grid;grid-template-columns:44px 1fr auto;align-items:center;border-bottom:1px solid rgba(0,0,0,.16);padding:18px 0}
.tracklist li:before{content:counter(t,decimal-leading-zero);font-size:9px;color:#777}
.tracklist span{font-family:"Space Grotesk";font-size:clamp(22px,2.3vw,38px);letter-spacing:-.04em}
.tracklist time,.tracklist small{font-size:9px;color:#777}


.moments{position:relative;background:#050505;padding:12vh 0 14vh;overflow:hidden;isolation:isolate}
.moments:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.055),transparent 42%);pointer-events:none}
.moments-head{margin:0 var(--pad);display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.16);font-size:10px;letter-spacing:.18em;position:relative;z-index:4}
.moments-word{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);white-space:nowrap;font-family:"Space Grotesk";font-size:clamp(110px,18vw,290px);line-height:.72;letter-spacing:-.11em;color:rgba(255,255,255,.055);pointer-events:none;transition:opacity .22s,transform .6s cubic-bezier(.2,.7,.2,1);z-index:0}
.moments-viewport{position:relative;z-index:2;overflow:hidden;padding:6vh 0 4vh}
.moments-track{display:flex;gap:3.2vw;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:17vw;padding:2vh 17vw 4vh;overscroll-behavior-inline:contain;scrollbar-width:none;cursor:grab}
.moments-track::-webkit-scrollbar{display:none}.moments-track:active{cursor:grabbing}
.moment{flex:0 0 66vw;height:min(72vh,780px);margin:0;scroll-snap-align:center;overflow:hidden;position:relative;background:#111;opacity:.32;transform:perspective(1400px) rotateY(5deg) scale(.86);filter:saturate(.55) contrast(.92);transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .6s,filter .6s;box-shadow:0 45px 100px rgba(0,0,0,.42)}
.moment:nth-child(odd){transform:perspective(1400px) rotateY(-5deg) scale(.86)}
.moment.active{opacity:1;transform:perspective(1400px) rotateY(0) scale(1);filter:saturate(1) contrast(1)}
.moment picture,.moment img{display:block;width:100%;height:100%}
.moment img{object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .7s}
.moment.active img{transform:scale(1.025)}
.moment:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 45%);pointer-events:none}
.moment figcaption{position:absolute;left:28px;right:28px;bottom:24px;z-index:2;display:flex;align-items:end;justify-content:space-between}
.moment figcaption span{font-family:"Space Grotesk";font-size:clamp(28px,3vw,52px);letter-spacing:-.055em}
.moment figcaption small{font-size:9px;letter-spacing:.18em}
.moments-nav{position:absolute;z-index:5;top:54%;width:58px;height:58px;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(5,5,5,.22);backdrop-filter:blur(10px);color:#fff;font-size:22px;cursor:pointer;transition:.3s}
.moments-nav:hover{background:#fff;color:#050505;transform:scale(1.08)}
.moments-prev{left:calc(var(--pad) - 4px)}.moments-next{right:calc(var(--pad) - 4px)}
.moments-bottom{margin:0 var(--pad);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:4}
.moments-counter{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.18em}
.moments-counter i{display:block;width:110px;height:1px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.moments-counter i b{display:block;width:33.333%;height:100%;background:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.moments-hint{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.52)}

.socials{background:#050505}
.social{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48vh;padding:0 var(--pad);border-top:1px solid rgba(255,255,255,.14);overflow:hidden}
.social span{font-family:"Space Grotesk";font-size:clamp(70px,13vw,210px);letter-spacing:-.08em;transition:.4s}
.social em{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.social:before{content:"";position:absolute;inset:0;transform:scaleY(0);transform-origin:bottom;transition:.45s}
.social>*{position:relative;z-index:1}
.social:hover:before{transform:scaleY(1)}
.social:hover span{transform:translateX(2vw)}
.instagram:before{background:linear-gradient(135deg,#6a11cb,#d71974,#f2a100)}
.youtube:before{background:#e10600}
.spotify:before{background:#1ed760}
.tiktok:before{background:linear-gradient(90deg,#09f0ea,#050505 35% 65%,#ff145a)}

footer{min-height:88vh;background:var(--paper);color:#111;display:flex;align-items:center;justify-content:center;position:relative}
.footer-word{font-family:"Space Grotesk";font-size:25vw;letter-spacing:-.12em}
footer small{position:absolute;left:var(--pad);bottom:22px;font-size:9px;letter-spacing:.16em}

@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(31px);opacity:0}}

@media(max-width:700px){
  .nav nav{display:none}
  .cursor{display:none}
  .hero-slogan span{font-size:30vw}
  .hero-photo{background:#050505}
  .hero-photo picture,.hero-photo img{width:100%;height:100%}
  .hero-photo img{object-fit:cover;object-position:center center}
  .hero-logo{font-size:15vw}
  .hero-meta{font-size:8px}
  .about{grid-template-columns:1fr;align-content:center;gap:42px}.about:before{left:var(--pad)}.about-index,.about-note{text-align:left}.about-lead{text-align:left;font-size:12vw}.releases{padding-top:11vh}
  .release{grid-template-columns:30px 1fr 38px}
  .release h2{font-size:10vw}
  .disc{width:92px;height:92px;right:2vw}

  .film{padding-top:9vh;padding-bottom:10vh}
  .film-poster{aspect-ratio:9/16;margin-top:4vh}
  .film-poster img{object-fit:cover;object-position:center}
  .film-title{left:20px;bottom:26px;font-size:24vw}
  .film-play{right:20px;bottom:28px}
  .film-play i{width:44px;height:44px}
  .film-play i:after{left:18px;top:14px}
  .video-modal{padding:14px}
  .video-frame{width:100%;aspect-ratio:16/9}

  .transition{height:100svh}
  .transition-image{background:#050505}
  .transition-image picture,.transition-image img{width:100%;height:100%}
  .transition-image img{object-fit:cover;object-position:center center}
  .transition-copy h2{font-size:22vw}
  .album{grid-template-columns:1fr;padding-top:8vh}
  .cover{position:relative;top:auto}
  .cover-text{font-size:11vw}
  .cover>strong{font-size:9vw}
  .tracklist span{font-size:6vw}
  .moments{padding-top:9vh;padding-bottom:10vh}
  .moments-head span:last-child{display:none}
  .moments-viewport{padding-top:3vh;padding-bottom:2vh}
  .moments-track{gap:16px;padding:2vh 6vw 3vh;scroll-padding-inline:6vw}
  .moment{flex-basis:88vw;height:68svh;transform:scale(.91);border-radius:2px}
  .moment:nth-child(odd){transform:scale(.91)}
  .moment.active{transform:scale(1)}
  .moment img{object-fit:cover}
  .moment figcaption{left:18px;right:18px;bottom:18px}
  .moment figcaption span{font-size:8vw}
  .moments-word{font-size:29vw;top:51%}
  .moments-nav{display:none}
  .moments-counter i{width:74px}
  .moments-hint{font-size:8px}


  .social{min-height:35vh}
  .social span{font-size:17vw}
  .social em{font-size:8px}
  .footer-word{font-size:29vw}
}