@font-face{font-family:"WT Jazz";src:url(/assets/fonts/WTJazz-BoldExpanded.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Helvetica Now";src:url(/assets/fonts/HelveticaNowDisplay-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"GT Mono";src:url(/assets/fonts/GT-America-Mono-Medium.otf) format("opentype");font-weight:500;font-display:swap}

:root{
  --blue:#0B0F9E; --mag:#E5007E; --ink:#06071c; --white:#fff;
  --display:"WT Jazz","Arial Black",sans-serif;
  --bold:"Helvetica Now","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"GT Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,2.2vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:var(--white);font-family:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:var(--mag);color:#fff}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(var(--pad) * .8) var(--pad)}
.top .pill{justify-self:start;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:99px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s}
.top .pill:last-child{justify-self:end}
.top .pill:hover,.top .pill.is-on{background:var(--mag)}
.top .logo img{height:clamp(20px,2.1vw,28px);width:auto}

/* ---------- home ---------- */
.home{overflow:hidden;height:100svh}
.bg{position:fixed;inset:0;z-index:0;background:var(--blue)}
.bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.bg-img.is-on{opacity:1;transform:scale(1)}
.bg-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,7,28,.55) 0%,rgba(6,7,28,.08) 28%,rgba(6,7,28,.15) 55%,rgba(6,7,28,.8) 100%),
  linear-gradient(90deg,rgba(6,7,28,.5) 0%,rgba(6,7,28,0) 55%)}
.bg::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:.22;pointer-events:none}

.stage{position:relative;z-index:2;height:100svh}
.title{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(50% + 8px)}
.big-name{font:700 clamp(54px,9.4vw,168px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;transform-origin:left bottom}
.big-name.swap{animation:grow .55s cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:none}}

.meta{position:absolute;left:32%;right:var(--pad);bottom:calc(50% + 10px);display:flex;justify-content:space-between;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.meta span:first-child{color:var(--white)}
.meta span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mag);margin-right:8px;vertical-align:1px}

.strip{position:absolute;left:0;right:0;top:50%;display:flex;gap:4px;align-items:flex-start;padding:0 4px}
.card{position:relative;flex:1 1 0;min-width:0;height:20vh;overflow:hidden;border-radius:4px;background:#111;transition:height .55s cubic-bezier(.2,.8,.2,1),flex-grow .55s cubic-bezier(.2,.8,.2,1)}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.72);transition:filter .4s,transform .8s cubic-bezier(.2,.8,.2,1)}
.card-name{position:absolute;left:10px;bottom:9px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .3s}
.card.is-active{height:36vh;flex-grow:1.25}
.card.is-active img{filter:none}
.card.is-active .card-name{opacity:0}
.card:focus-visible{outline:2px solid var(--mag);outline-offset:2px}

.counter{position:absolute;left:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.06em;width:min(260px,40vw)}
.counter .bar{flex:1;height:1px;background:rgba(255,255,255,.3);position:relative}
.counter .bar i{position:absolute;left:0;top:-1px;height:3px;background:#fff;width:12.5%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}

@media (max-width:760px){
  .title{bottom:auto;top:auto;left:var(--pad);right:var(--pad);bottom:calc(32vh + 66px)}
  .big-name{font-size:clamp(40px,13.5vw,84px)}
  .meta{left:var(--pad);right:auto;bottom:calc(32vh + 38px);gap:18px}
  .strip{top:auto;bottom:calc(env(safe-area-inset-bottom) + 18px);align-items:flex-end;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(50vw - 18vw);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .strip::-webkit-scrollbar{display:none}
  .card{flex:0 0 36vw;height:24vh;scroll-snap-align:center;transition:height .4s cubic-bezier(.2,.8,.2,1)}
  .card.is-active{height:32vh;flex-grow:0}
  .counter{display:none}
}

/* ---------- inner pages ---------- */
.page{background:var(--blue);min-height:100svh}
.role{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px}
.role::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mag)}

.artist-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.artist-photo{position:sticky;top:0;height:100svh;overflow:hidden}
.artist-photo img{width:100%;height:100%;object-fit:cover;animation:fadeIn .8s ease both}
@keyframes fadeIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.artist-info{display:flex;flex-direction:column;justify-content:center;padding:110px clamp(24px,5vw,88px) 48px;animation:rise .7s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.back{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:auto;padding-bottom:40px;transition:opacity .2s}
.back:hover{opacity:1}
.artist-name{font:700 clamp(46px,6.4vw,112px)/.88 var(--display);text-transform:uppercase;margin:18px 0 20px;overflow-wrap:anywhere}
.origin{font:700 clamp(20px,1.9vw,28px)/1.2 var(--bold);color:#fff;margin-bottom:14px}
.desc{font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:rgba(255,255,255,.82);max-width:46ch}
.links{display:flex;flex-direction:column;margin-top:36px;border-top:1px solid rgba(255,255,255,.25);max-width:520px}
.link-row{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.25);font:700 clamp(17px,1.35vw,21px)/1 var(--bold);transition:color .2s,padding .3s}
.link-row .arr{color:var(--mag);transition:transform .3s}
.link-row:hover{color:var(--mag);padding-left:10px}
.link-row:hover .arr{transform:translate(3px,-3px)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:auto;padding-top:56px;font:700 16px/1.2 var(--bold)}
.pager a{display:flex;flex-direction:column;gap:6px;transition:color .2s}
.pager a.r{text-align:right}
.pager a:hover{color:var(--mag)}
.pager small{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}

@media (max-width:860px){
  .artist-wrap{grid-template-columns:1fr}
  .artist-photo{position:relative;height:72svh}
  .artist-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(11,15,158,0),var(--blue))}
  .artist-info{padding:0 22px 40px;margin-top:-90px;position:relative}
  .back{display:none}
  .link-row{padding:19px 2px}
}

/* ---------- contact ---------- */
.contact{overflow-x:hidden}
.contact-wrap{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 80px}
.mail{font:700 clamp(22px,5.6vw,104px)/1 var(--display);text-transform:uppercase;margin:24px 0 18px;overflow-wrap:anywhere;transition:color .25s}
.mail:hover{color:var(--mag)}
.contact-note{font-size:clamp(16px,1.2vw,19px);color:rgba(255,255,255,.8)}
.contact .links{max-width:420px}
.star-deco{position:fixed;right:-12vw;bottom:-14vw;width:min(62vw,820px);opacity:.9;z-index:0;animation:spin 60s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.foot{position:fixed;left:var(--pad);bottom:var(--pad);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.6;z-index:1}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}