:root{
  --bg:#040404;
  --ink:#e9e9e7;
  --muted:#6f6f6f;
  --faint:#3a3a3a;
  --line:#2a2a2a;
  --edge: clamp(18px, 4vw, 56px);
  --nav-h: 64px;
  --serif: "Times New Roman", Times, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

*,
*::before,
*::after{
  -webkit-tap-highlight-color:transparent;
  tap-highlight-color:transparent;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  outline:none;
}

html{scroll-behavior:smooth}

body{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:-6%;
  z-index:-1;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(3px) brightness(.8) saturate(1.04);
  opacity:0;
  transform:translate3d(0, 0, 0) scale(1.04) rotate(0deg);
  transition:opacity .42s ease, transform 8s ease-out;
}

/* ::before is always the "settled" layer; ::after is only the incoming
   layer during a crossfade. Each gets its OWN drift animation driven by
   its own set of custom properties, so re-randomizing the incoming
   layer's motion (--artist-shift-x-2 etc) never touches the transform of
   the layer that's still visible and fading out — that mid-fade jump was
   the "reinicio" / flicker. */
body::before{
  background-image:var(--artist-image, none);
  animation:artistBackDriftFront 12s ease-in-out alternate infinite;
}

body::after{
  background-image:var(--artist-image-next, none);
  animation:artistBackDriftBack 12s ease-in-out alternate infinite;
}

body.is-artist::before{
  opacity:1;
}

body.is-artist::after{
  opacity:1;
}

body.is-crossfading::before{
  opacity:0;
}

body.is-crossfading::after{
  opacity:1;
}

/* Used for a single frame at the exact moment the incoming layer hands
   off to the settled layer at the end of a crossfade. Without this, the
   back layer's image disappears instantly while the front layer's
   opacity is still animating up from 0 — a real, visible dip in how much
   of the photo is showing, seen as a black flash. Suspending the
   transition for that one frame makes the handoff instantaneous instead
   of animated, so total visible opacity never actually drops. */
body.is-instant::before,
body.is-instant::after{
  transition:none;
}

body.is-fading-out::before,
body.is-fading-out::after{
  opacity:0;
}

@keyframes artistBackDriftFront {
  0% {
    transform:translate3d(var(--artist-shift-x, 0px), var(--artist-shift-y, 0px), 0) scale(var(--artist-scale, 1.04)) rotate(var(--artist-rotate, 0deg));
  }
  50% {
    transform:translate3d(calc(var(--artist-shift-x, 0px) * -0.35), calc(var(--artist-shift-y, 0px) * -0.45), 0) scale(calc(var(--artist-scale, 1.04) + 0.012)) rotate(calc(var(--artist-rotate, 0deg) * 0.35));
  }
  100% {
    transform:translate3d(calc(var(--artist-shift-x, 0px) * -0.7), calc(var(--artist-shift-y, 0px) * -0.75), 0) scale(var(--artist-scale, 1.04)) rotate(calc(var(--artist-rotate, 0deg) * -0.55));
  }
}

@keyframes artistBackDriftBack {
  0% {
    transform:translate3d(var(--artist-shift-x-2, 0px), var(--artist-shift-y-2, 0px), 0) scale(var(--artist-scale-2, 1.04)) rotate(var(--artist-rotate-2, 0deg));
  }
  50% {
    transform:translate3d(calc(var(--artist-shift-x-2, 0px) * -0.35), calc(var(--artist-shift-y-2, 0px) * -0.45), 0) scale(calc(var(--artist-scale-2, 1.04) + 0.012)) rotate(calc(var(--artist-rotate-2, 0deg) * 0.35));
  }
  100% {
    transform:translate3d(calc(var(--artist-shift-x-2, 0px) * -0.7), calc(var(--artist-shift-y-2, 0px) * -0.75), 0) scale(var(--artist-scale-2, 1.04)) rotate(calc(var(--artist-rotate-2, 0deg) * -0.55));
  }
}

::selection{background:var(--ink);color:var(--bg)}

a{color:inherit;text-decoration:none}

/* grain overlay */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* scrims that fade the index under the fixed bars */
.scrim{position:fixed;left:0;right:0;z-index:30;pointer-events:none}
.scrim-top{top:0;height:170px;background:linear-gradient(to bottom,var(--bg) 34%,rgba(4,4,4,0) 100%)}
.scrim-bottom{bottom:0;height:200px;background:linear-gradient(to top,var(--bg) 32%,rgba(4,4,4,0) 100%)}

/* top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--edge);
}
.tabs{display:flex;align-items:center;gap:10px}
.tab{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;cursor:pointer;font-family:inherit;padding:6px 2px;
  transition:color .25s ease;position:relative;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink)}
.slash{color:var(--faint);font-size:12px}

.corner{
  position:absolute;top:0;height:var(--nav-h);display:flex;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.corner-left{left:var(--edge);transition:color .25s ease}
.corner-left:hover{color:var(--ink)}
.corner-right{right:var(--edge)}
.clk{display:flex;gap:7px}
.clk em{font-style:normal;color:var(--faint)}

/* hero index */
.hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 40px) var(--edge) 190px;
}
.index{width:100%;max-width:1180px;margin:0 auto;text-align:left}
.panel{display:none;flex-direction:column;align-items:stretch;gap:18px}
.panel.is-active{display:flex;animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.artist-tile{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(120px, 18vw, 180px);
  width:100%;
  padding:0;
  overflow:hidden;
  border:0;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .25s ease, opacity .25s ease;
}
.artist-tile:hover,
.artist-tile:focus-within{
  transform:translateY(-1px);
}
.artist-tile .name{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:inherit;
  text-align:center;
  padding:0;
  color:var(--ink);
  opacity:.9;
  text-shadow:none;
  box-shadow:none;
  -webkit-user-select:none;
  user-select:none;
}
.artist-tile .name:hover,
.artist-tile .name:focus-visible,
.artist-tile .name.is-active{
  opacity:1;
  text-shadow:none;
  box-shadow:none;
}
.artist-garzi,
.artist-gvllow,
.artist-joey,
.artist-kumo{
  background:transparent;
}

.name{
  position:relative;
  z-index:2;
  display:inline-block;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1.85rem,4.7vw,3.25rem);
  line-height:1.32;
  letter-spacing:-.012em;
  color:rgba(255,255,255,.8);
  text-shadow:none;
  transition:opacity .28s ease, transform .28s ease, letter-spacing .28s ease, text-shadow .28s ease, filter .28s ease, color .28s ease;
  will-change:opacity, transform;
  transform:perspective(700px) rotateX(0deg) rotateY(0deg) translateZ(0);
  filter:blur(0);
}
.index:hover .name{opacity:.35; filter:blur(.35px); color:rgba(255,255,255,.45); text-shadow:none;}
.index .name:hover,
.index .name:focus-visible,
.index .name.is-active{
  opacity:1;
  color:#fff;
  letter-spacing:.02em;
  transform:perspective(700px) rotateX(8deg) rotateY(-10deg) translateY(-2px) translateZ(20px);
  text-shadow:none;
  filter:blur(0);
}
@keyframes artistDrift{0%{transform:scale(1.12) translate3d(0,-2%,0)}100%{transform:scale(1.18) translate3d(0,2%,0)}}

/* hero bottom cluster */
.herobar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-bottom:22px;
  transition:opacity .45s ease, transform .45s ease;
}
.herobar.hide{opacity:0;transform:translateY(16px);pointer-events:none}

.logo{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;padding:8px;
  border:0;
  background:transparent;
  box-shadow:none;
  outline:none;
}
.logo:focus-visible,
.logo:focus{
  outline:none;
  box-shadow:none;
}
.logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}
.logo:hover{background:transparent}
.logo:hover img{filter:none}

.about-link{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  transition:color .25s ease;
}
.about-link:hover{color:var(--ink)}

/* credits / marquees */
.credits{padding:120px 0 40px;border-top:1px solid var(--line)}
.credits-inner{padding:0}
.credits-eyebrow{
  padding:0 var(--edge);margin-bottom:40px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}

.row{margin-bottom:64px}
.row-head{
  display:flex;align-items:baseline;gap:16px;padding:0 var(--edge);margin-bottom:20px;
}
.row-head h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:.01em;
}
.role{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:18px;width:max-content;will-change:transform;animation:scroll-x var(--dur,55s) linear infinite}
.track.reverse{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.cover{
  position:relative;flex:0 0 auto;width:clamp(140px,17vw,220px);aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,.06);overflow:hidden;
  filter:grayscale(.15) contrast(1.02);transition:transform .4s ease, filter .4s ease;
}
.cover:hover{transform:translateY(-6px) scale(1.015);filter:none}
.cover .cat{
  position:absolute;left:10px;bottom:9px;z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);
  mix-blend-mode:difference;
}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 20% 15%,rgba(255,255,255,.14),transparent 55%)}

.about-modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--edge);
}
.about-modal.is-open{display:flex}
.about-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,4,.28);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.about-dialog{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--edge);
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.about-close{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.02);
  color:var(--ink);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.about-close:hover{background:var(--ink);color:var(--bg)}
.about-inner{
  position:relative;
  z-index:1;
  max-width:min(760px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.about-copy{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1rem,2.4vw,1.75rem);line-height:1.45;letter-spacing:-.01em;
  max-width:26ch;
}
.about-copy strong{font-weight:400;color:#fff}
.mail{
  display:inline-block;
  margin-top:26px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:4px;
  transition:color .25s,border-color .25s;
}
.mail:hover{color:var(--ink);border-color:var(--ink)}
.mail-modal{margin-top:26px !important}

/* responsive */
@media (max-width:720px){
  :root{--edge:16px;--nav-h:56px}
  .topbar{justify-content:center}
  .corner-left,.corner-right{display:none}
  .tabs{
    gap:8px;
    max-width:calc(100vw - (var(--edge) * 2));
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
    justify-content:center;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{font-size:11px;letter-spacing:.12em;padding:4px 1px}
  .slash{font-size:11px}
  .corner{
    gap:10px;
    font-size:10px;
    letter-spacing:.12em;
  }
  .clock{display:none}
  .hero{padding:calc(var(--nav-h) + 22px) var(--edge) 110px}
  .index{max-width:100%}
  .panel{padding:0;gap:6px}
  .panel[data-panel="artists"]{
    position:relative;
    max-height:none;
    overflow:visible;
    scroll-snap-type:none;
    -webkit-overflow-scrolling:auto;
    touch-action:auto;
  }
  .panel[data-panel="artists"] .artist-tile{
    scroll-snap-align:none;
    min-height:clamp(52px, 10vw, 78px);
  }
  .artist-tile{min-height:clamp(52px,10vw,78px)}
  .panel[data-panel="songwriting"]{
    align-items:center;
    text-align:center;
    min-height:clamp(52px, 10vw, 78px);
    justify-content:center;
  }
  .name{font-size:clamp(1.45rem,7vw,2.1rem);line-height:1.2;letter-spacing:-.015em}
  .index:hover .name{opacity:.5}
  .herobar{gap:10px;padding-bottom:16px}
  .logo{width:60px;height:60px;padding:7px}
  .about-link{font-size:11px;letter-spacing:.16em}
  .about-modal{padding:0}
  .about-dialog{padding:20px}
  .about-close{top:12px;right:12px;width:32px;height:32px;font-size:22px}
  .about-inner{max-width:100%}
  .about-copy{font-size:clamp(.95rem,4.7vw,1.2rem);line-height:1.45;max-width:22ch}
  .mail{margin-top:22px;font-size:11px;letter-spacing:.14em}
  .row-head{flex-direction:column;gap:6px}
  .foot{flex-direction:column;gap:12px;text-align:center}
}