:root{
  --black:#030304;
  --charcoal:#0c0d11;
  --panel:#11131a;
  --white:#f7f7f3;
  --muted:#b9b8b4;
  --pink:#ff006d;
  --pink2:#ff2f91;
  --gold:#ffd05a;
  --teal:#55d4c7;
  --line:rgba(255,255,255,.12);
  --shadow:0 30px 80px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', system-ui, sans-serif;
  background:var(--black);
  color:var(--white);
  letter-spacing:.02em;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-3;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,0,109,.18), transparent 24rem),
    radial-gradient(circle at 84% 30%, rgba(85,212,199,.10), transparent 24rem),
    linear-gradient(180deg,#000 0%,#050506 45%,#0a0a0d 100%);
}
.noise{position:fixed; inset:0; pointer-events:none; opacity:.28; z-index:-1; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:3px 3px; mix-blend-mode:overlay;}
.page-flash{position:fixed; inset:0; background:#fff; z-index:9999; pointer-events:none; opacity:0; mix-blend-mode:screen}
.page-flash.active{animation:flash .18s ease-out both}
a{color:inherit}
.hero{min-height:100vh; position:relative; display:grid; place-items:center; padding:3rem 1rem; overflow:hidden; border-bottom:1px solid var(--line)}
.hero__bg{position:absolute; inset:-20%; z-index:-2; background:url('assets/logo-card.jpg') center/cover no-repeat; opacity:.13; filter:blur(2px) saturate(1.1); transform:scale(1.05); animation:slowDrift 18s ease-in-out infinite alternate}
.hero__content{width:min(1160px,92vw); text-align:center; display:grid; place-items:center; gap:1rem}
.hero__banner{width:min(1100px,95vw); border-radius:18px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.13)}
.slash{display:block; height:8px; width:min(680px,72vw); margin:.25rem auto .15rem; border-radius:999px; background:linear-gradient(90deg,transparent 0%,var(--pink) 12%,var(--pink2) 50%,var(--pink) 88%,transparent 100%); box-shadow:0 0 25px rgba(255,0,109,.65); transform-origin:left center; animation:slashDraw .85s cubic-bezier(.2,.9,.25,1.2) .2s both}
.tagline{font-size:clamp(1.3rem,3vw,2.6rem); margin:.5rem 0 0; text-transform:uppercase; text-shadow:3px 3px 0 rgba(255,0,109,.5)}
h1,h2{margin:0; text-transform:uppercase; line-height:.95; text-shadow:4px 4px 0 rgba(255,0,109,.35)}
h1{font-size:clamp(3.2rem,10vw,9rem)}
h2{font-size:clamp(2.6rem,7vw,6rem)}
h3{font-size:1.65rem; margin:.9rem 0 .25rem; text-transform:uppercase}
p{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:0; line-height:1.55}
.release{font-size:1.1rem; color:var(--muted); margin:0 0 .5rem}
.cta-row{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 1.4rem; border-radius:999px; text-decoration:none; font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.07em; font-size:1.12rem; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--pink2)); color:#fff; box-shadow:0 18px 42px rgba(255,0,109,.35); animation:pulse 2.7s ease-in-out infinite}
.btn-ghost{border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06)}
.section{padding:6rem 1rem; border-bottom:1px solid var(--line)}
.section__inner{width:min(1120px,92vw); margin:0 auto}
.eyebrow{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif; color:var(--pink); text-transform:uppercase; font-size:1.35rem; margin:0 0 .35rem; letter-spacing:.07em}
.section-lede{font-size:1.35rem; color:var(--muted); margin:.4rem 0 0; max-width:42rem}
.album__grid{display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:4rem; align-items:center}
.album__cover{width:100%; display:block; border-radius:16px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.16); transform:rotate(-1.2deg)}
.album__cover-wrap{position:relative}
.album__cover-wrap:after{content:""; position:absolute; inset:7% -4% -5% 9%; border:3px solid var(--pink); border-radius:16px; z-index:-1; transform:rotate(2.5deg); opacity:.85}
.album__blurb{font-size:1.18rem; color:#ddd; max-width:54ch}
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
.vertical-grid{align-items:start}
.video-card{display:block; color:inherit; text-decoration:none; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1rem; box-shadow:0 16px 40px rgba(0,0,0,.35); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease}
.video-card:hover{transform:translateY(-8px) scale(1.02); border-color:rgba(255,0,109,.75); background:rgba(255,0,109,.075); box-shadow:0 24px 70px rgba(255,0,109,.18)}
.video-card p{margin:.25rem 0 0; color:var(--muted)}
.video-card__thumb{aspect-ratio:9/16; width:100%; border-radius:14px; display:grid; place-items:center; overflow:hidden; background:#111; position:relative; border:1px solid rgba(255,255,255,.12)}
.video-card__thumb:before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,0,109,.45),rgba(0,0,0,.35)), url('assets/album-cover.jpg') center/cover no-repeat; filter:saturate(1.15); transition:transform .35s ease, filter .35s ease}
.video-card:hover .video-card__thumb:before{transform:scale(1.07); filter:saturate(1.25) contrast(1.05)}
.video-card__thumb:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));}
.video-card__thumb.trust:before{background:linear-gradient(135deg,rgba(255,0,109,.5),rgba(0,0,0,.38)), url('assets/end-card.jpg') center/cover no-repeat;}
.video-card__thumb.hopscotch:before{background:linear-gradient(135deg,rgba(255,0,109,.45),rgba(0,0,0,.35)), url('assets/banner.jpg') center/cover no-repeat;}
.video-card__thumb.shibuya:before{background:linear-gradient(135deg,rgba(255,0,109,.35),rgba(0,0,0,.5)), url('assets/logo-card.jpg') center/cover no-repeat;}

.video-card.coming-card h3{font-size:clamp(1.55rem,2.3vw,2.35rem); line-height:.95; margin:.95rem 0 0; letter-spacing:.04em}
.video-card__thumb.coming:before{background:linear-gradient(135deg,rgba(255,0,109,.55),rgba(0,0,0,.44)), url('assets/end-card.jpg') center/cover no-repeat;}
.play{position:relative; z-index:1; display:grid; place-items:center; width:76px; height:76px; background:var(--pink); border-radius:50%; font-size:2rem; box-shadow:0 0 0 10px rgba(255,0,109,.18); opacity:.92; transform:scale(.96); transition:transform .22s ease, opacity .22s ease}
.video-card:hover .play{transform:scale(1.08); opacity:1}
.tiny-note{font-size:.9rem; color:var(--muted); margin-top:1rem}
.chauncey__grid{display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:center; background:linear-gradient(135deg,rgba(255,0,109,.12),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:2rem; box-shadow:var(--shadow)}
.chauncey__grid img{width:100%; border-radius:50%; box-shadow:0 15px 45px rgba(255,0,109,.22)}
.chauncey__grid p:not(.eyebrow){font-size:1.3rem; color:#ddd; max-width:46ch}
.tracks__grid{display:grid; grid-template-columns:320px 1fr; gap:2rem; align-items:start}
.track-list{margin:0; padding:0; list-style:none; counter-reset:tracks; columns:2; column-gap:2rem}
.track-list li{counter-increment:tracks; break-inside:avoid; display:flex; gap:.8rem; align-items:baseline; padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.08); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-weight:800}
.track-list li:before{content:counter(tracks, decimal-leading-zero); color:var(--pink); font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif; font-size:1.2rem; min-width:2.2rem}
.merch__grid{display:grid; grid-template-columns:1fr 420px; gap:3rem; align-items:center}
.merch__box{border:1px solid rgba(255,255,255,.13); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border-radius:22px; min-height:320px; display:grid; place-items:center; text-align:center; padding:2rem; box-shadow:var(--shadow)}
.merch__box img{width:220px; border-radius:50%; box-shadow:0 20px 60px rgba(255,0,109,.15)}
.merch__box p{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif; text-transform:uppercase; color:var(--white); font-size:2rem; line-height:1.05; max-width:12ch; margin:1rem 0 0}
.follow__inner{text-align:center; display:grid; place-items:center; gap:1rem}
.socials{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin:1rem 0}
.socials a{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif; text-decoration:none; text-transform:uppercase; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); border-radius:999px; padding:.7rem 1rem; color:#fff; transition:transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease}
.socials a:hover{transform:translateY(-2px); border-color:var(--pink); color:var(--pink); box-shadow:0 12px 30px rgba(255,0,109,.18)}
.footer{text-align:center; padding:3rem 1rem 4rem; color:var(--muted); background:#000}
.footer img{width:86px; height:86px; border-radius:50%; display:block; margin:0 auto 1rem}
.footer p{font-size:.9rem;margin:0}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform:none}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes slashDraw{0%{transform:scaleX(0); opacity:0}100%{transform:scaleX(1); opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 18px 42px rgba(255,0,109,.35)}50%{box-shadow:0 18px 58px rgba(255,0,109,.65)}}
@keyframes slowDrift{from{transform:scale(1.05) translate3d(-1%,0,0)}to{transform:scale(1.09) translate3d(1%,1%,0)}}
@keyframes flash{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
@media (max-width:850px){
 .hero{min-height:auto; padding:2rem 1rem 4rem}.hero__banner{width:100%}h1{font-size:clamp(3rem,15vw,5.4rem)}
 .album__grid,.tracks__grid,.merch__grid,.chauncey__grid{grid-template-columns:1fr; gap:2rem}.video-grid{grid-template-columns:1fr}.track-list{columns:1}.section{padding:4rem 1rem}.video-card__thumb{max-height:520px}
 .cta-row .btn{width:100%}.chauncey__grid img{width:180px; justify-self:center}.merch__box{min-height:260px}.merch__box img{width:170px}
}
@media (prefers-reduced-motion: reduce){
 *{animation:none !important; transition:none !important; scroll-behavior:auto !important}.reveal{opacity:1; transform:none}
}