/* SHAWN SAPRA — fusion DJ one-pager */

@font-face{font-family:"Clash Display";src:url("assets/fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Clash Display";src:url("assets/fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("assets/fonts/instrument-serif-italic.woff2") format("woff2");font-style:italic;font-display:swap}

:root{
  --bg:#0a0a14;
  --bg-2:#111022;
  --ink:#f4f3ff;
  --ink-dim:#b9b6d4;
  --violet:#8b5cf6;
  --cyan:#22d3ee;
  --magenta:#e879f9;
  --grad:linear-gradient(92deg,var(--violet),var(--magenta) 50%,var(--cyan));
  --display:"Clash Display",system-ui,sans-serif;
  --body:"Satoshi",system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(2rem,5.5vw,3.5rem);margin-bottom:.5em}
.accent{font-family:"Instrument Serif",serif;font-style:italic;text-transform:none;letter-spacing:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}

.skip-link{position:absolute;left:-999px;top:0;background:var(--violet);color:#fff;padding:.5rem 1rem;z-index:99}
.skip-link:focus{left:0}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-radius:999px;padding:.85rem 1.7rem;font-size:.95rem;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--grad);color:#0b0618;box-shadow:0 6px 24px rgba(139,92,246,.45)}
.btn--primary:hover{box-shadow:0 10px 32px rgba(34,211,238,.5)}
.btn--ghost{border:2px solid rgba(244,243,255,.5);color:var(--ink)}
.btn--ghost:hover{border-color:var(--cyan)}
.btn--nav{background:var(--grad);color:#0b0618;padding:.5rem 1.2rem;font-size:.85rem}
.btn--big{font-size:1.1rem;padding:1.1rem 2.4rem}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(rgba(10,10,20,.92),rgba(10,10,20,.75) 70%,transparent);backdrop-filter:blur(8px)}
.nav nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem var(--pad);max-width:1200px;margin:0 auto}
.nav__wordmark{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.08em;text-decoration:none}
.nav__links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav__links a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink-dim)}
.nav__links a:hover{color:var(--ink)}
.nav__links a.btn{color:#0b0618}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;width:2.2rem;height:2rem}
.nav__toggle span{display:block;height:2px;background:var(--ink);margin:.45rem .2rem;transition:transform .2s}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 22%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,20,.55) 0%,rgba(10,10,20,.28) 40%,rgba(10,10,20,.94) 88%),
  linear-gradient(100deg,rgba(10,10,20,.72) 0%,rgba(10,10,20,.3) 45%,transparent 70%),
  radial-gradient(120% 60% at 20% 100%,rgba(139,92,246,.35),transparent 60%)}
.hero__content{padding:0 var(--pad) clamp(3rem,8vh,5.5rem);max-width:1200px;margin:0 auto;width:100%}
.hero__kicker{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(.75rem,1.6vw,.95rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.4rem}
.hero__name{font-size:clamp(3.2rem,12vw,8.5rem);line-height:.92}
.hero__name span{display:block}
.hero__genres{color:var(--ink-dim);font-size:clamp(.95rem,2vw,1.2rem);margin-top:.8rem;font-weight:500}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}

/* equalizer bars */
.hero__eq{display:flex;gap:.35rem;align-items:flex-end;height:2rem;margin-top:1.2rem}
.hero__eq span{width:.45rem;border-radius:2px;background:var(--grad);animation:eq 1s ease-in-out infinite alternate}
.hero__eq span:nth-child(1){animation-delay:0s;height:40%}
.hero__eq span:nth-child(2){animation-delay:.15s;height:70%}
.hero__eq span:nth-child(3){animation-delay:.3s;height:100%}
.hero__eq span:nth-child(4){animation-delay:.1s;height:55%}
.hero__eq span:nth-child(5){animation-delay:.25s;height:85%}
.hero__eq span:nth-child(6){animation-delay:.05s;height:45%}
.hero__eq span:nth-child(7){animation-delay:.2s;height:75%}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.hero__eq span{animation:none}}

/* about */
.about{padding:clamp(4rem,10vw,7rem) var(--pad);background:var(--bg-2)}
.about__grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(2rem,5vw,4rem);max-width:1100px;margin:0 auto;align-items:center}
.about__photo img{border-radius:1.2rem;box-shadow:0 20px 60px rgba(139,92,246,.25)}
.about__text p{margin-bottom:1rem;color:var(--ink-dim);font-size:1.05rem}
.about__text strong{color:var(--ink)}
.about__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.about__facts li{border:1px solid rgba(139,92,246,.5);border-radius:999px;padding:.45rem 1rem;font-size:.9rem;font-weight:500;background:rgba(139,92,246,.08)}

/* watch */
.watch{padding:clamp(4rem,10vw,7rem) var(--pad);max-width:1100px;margin:0 auto;text-align:center}
.watch__sub{color:var(--ink-dim);margin-bottom:2.2rem}
.watch__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;text-align:left}
@media(max-width:640px){.watch__grid{grid-template-columns:1fr}}
.yt{position:relative;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;background:#000}
.yt iframe,.yt img{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt img{object-fit:cover;opacity:.85;transition:opacity .2s,transform .3s}
.yt button{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75));border:0;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:1rem;gap:.4rem}
.yt button:hover img{opacity:1}
.yt button:hover .yt__play{transform:scale(1.1)}
.yt__play{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#0b0618;font-size:1.2rem;transition:transform .15s;position:absolute;top:50%;left:50%;translate:-50% -50%}
.yt__title{color:#fff;font-family:var(--display);font-weight:600;font-size:1rem;text-align:left;position:relative;z-index:1}
.watch__cta{margin-top:2.4rem}

/* book */
.book{padding:clamp(4rem,10vw,7rem) var(--pad);text-align:center;background:
  radial-gradient(70% 90% at 50% 110%,rgba(139,92,246,.28),transparent 70%),var(--bg-2)}
.book p{max-width:34rem;margin:0 auto 1.8rem;color:var(--ink-dim);font-size:1.1rem}
.book__note{font-size:.9rem !important;margin-top:1.4rem !important;color:var(--ink-dim)}

/* footer */
.footer{padding:2.5rem var(--pad) 3rem;text-align:center;color:var(--ink-dim);font-size:.95rem;border-top:1px solid rgba(244,243,255,.08)}
.footer__wordmark{font-family:var(--display);font-weight:700;letter-spacing:.1em;color:var(--ink);font-size:1.1rem}
.footer__links{margin-top:.5rem}
.footer__links a{color:var(--ink-dim)}
.footer__links a:hover{color:var(--cyan)}
.footer__copy{margin-top:.8rem;font-size:.8rem;opacity:.7}

/* mobile */
@media(max-width:760px){
  .nav__toggle{display:block}
  .nav__links{position:absolute;top:100%;right:0;left:0;flex-direction:column;background:rgba(10,10,20,.97);padding:1.4rem;display:none}
  .nav__links.open{display:flex}
  .about__grid{grid-template-columns:1fr}
  .about__photo{max-width:420px;margin:0 auto}
  .hero__media img{object-position:60% 15%}
}