/* ============================================================
   kura / pure
   dark inversion of the drain storefront (gtb.sg / gloss.gl)
   receipt monospace · uniform type · raw document
   ============================================================ */

:root{
  --bg:#000;
  --fg:#fff;
  --dim:#767676;
  --line:#1b1b1b;
  --accent:#fff;

  --mono:"DotGothic16", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  --ease:cubic-bezier(.56,.05,.12,1);
  --pad:clamp(20px,4vw,50px);
  --header-h:54px;
}

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

html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-size:inherit; font-weight:400; }
ul{ list-style:none; }
a{
  color:inherit;
  text-decoration:none;
  transition:color .2s var(--ease);
}
a:hover{ color:var(--fg); }

::selection{ background:#fff; color:#000; }

:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

/* ---------- header ---------- */

.header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  z-index:200;
}

.header__logo{ white-space:nowrap; }

.header__nav{
  display:flex;
  gap:clamp(16px,2.2vw,38px);
}
.header__nav a{
  position:relative;
  color:var(--dim);
  transition:color .25s var(--ease);
}
.header__nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.header__nav a:hover,
.header__nav a.is-active{ color:var(--fg); }
.header__nav a:hover::after,
.header__nav a.is-active::after{ transform:scaleX(1); }

/* ---------- root / pages ---------- */

#root{
  padding-top:var(--header-h);
  min-height:calc(100vh - var(--header-h));
}

.view{ display:none; }
.view.is-active{
  display:block;
  animation:viewIn .5s var(--ease) both;
}
.view.is-leaving{
  display:block;
  animation:viewOut .3s var(--ease) forwards;
}
@keyframes viewIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes viewOut{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(-12px); }
}

/* staggered reveal for the incoming page */
.view.is-active .section-title,
.view.is-active .artist-head,
.view.is-active .page-title,
.view.is-active .collection__item,
.view.is-active .links > li,
.view.is-active .releases > li,
.view.is-active .player{
  animation:rowIn .55s var(--ease) both;
}
@keyframes rowIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

.view__inner{
  max-width:1400px;
  margin:0 auto;
  padding:clamp(46px,11vh,150px) var(--pad) 14vh;
}

/* ---------- shared text ---------- */

.section-title{
  color:var(--dim);
  margin:clamp(44px,9vh,110px) 0 1.3em;
}
.section-title:first-child{ margin-top:0; }

.page-title{
  margin-top:16vh;
  text-transform:none;
  color:var(--fg);
}

/* ---------- index: select list (hover reveal) ---------- */

.collection{ display:inline-block; }

.collection__item{ position:relative; }
.collection__item + .collection__item{ margin-top:.55em; }

.collection__link{ display:inline-block; transition:color .25s var(--ease); }
.collection__link .count{ color:var(--dim); margin-left:.5em; }

.chip{
  width:2.2em;
  height:2.2em;
  object-fit:cover;
  vertical-align:-.72em;
  margin-right:.65em;
  border:1px solid var(--line);
  filter:grayscale(1) contrast(1.08) brightness(.9);
  transition:filter .45s var(--ease), border-color .45s var(--ease);
}
.collection__item:hover .chip,
.collection__link:focus-visible .chip{
  filter:grayscale(0) contrast(1.05) brightness(1);
  border-color:#fff;
}
.collection__item:hover .collection__link{ color:var(--fg); }

.collection__sub{
  position:absolute;
  left:100%;
  top:0;
  padding-left:clamp(30px,7vw,110px);
  width:max-content;
  color:var(--dim);
  opacity:0;
  visibility:hidden;
  transform:translateX(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.collection__item:hover .collection__sub,
.collection__item:focus-within .collection__sub{
  opacity:1;
  visibility:visible;
  transform:none;
}

.collection__sub li{
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.collection__item:hover .collection__sub li,
.collection__item:focus-within .collection__sub li{
  opacity:1;
  transform:none;
  transition-delay:calc(var(--i, 0) * 55ms);
}

.sub-link{ display:inline-block; }
.sub-link::before{
  content:"> ";
  color:var(--accent);
  opacity:0;
  transition:opacity .2s var(--ease);
}
.sub-link:hover::before,
.sub-link:focus-visible::before{ opacity:1; }

/* ---------- generic list text ---------- */

.year{ color:var(--dim); }

/* ---------- artist pages ---------- */

.artist-head{
  display:flex;
  align-items:flex-start;
  gap:clamp(20px,3vw,42px);
  margin-bottom:clamp(40px,8vh,92px);
}

.pfp{
  flex:0 0 auto;
  width:clamp(150px,24vw,260px);
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#0a0a0a;
  border:1px solid var(--line);
}
.pfp img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transform:scale(1.02);
  transition:filter .55s var(--ease), transform .7s var(--ease);
}
.pfp:hover img{
  filter:grayscale(0) contrast(1.04) brightness(1);
  transform:scale(1.08);
}

.artist-name{
  display:flex;
  align-items:baseline;
  gap:1em;
  margin-bottom:.4em;
}
.artist-name__num{ color:var(--dim); }

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:.7em;
  color:var(--dim);
}

.stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,120px);
  margin-top:clamp(34px,7vh,90px);
}

.links{ display:inline-block; }
.links li + li{ margin-top:.2em; }

.releases{ display:inline-block; }
.releases li + li{ margin-top:.2em; }

.release{ position:relative; padding-left:1.5em; }
.release::before{
  content:">";
  position:absolute;
  left:0;
  top:50%;
  color:var(--accent);
  opacity:0;
  transform:translate(-8px,-50%);
  transition:opacity .2s var(--ease), transform .35s var(--ease);
}
.release--discord::before{ content:"+"; }

.link-label{
  display:inline-block;
  white-space:nowrap;
}
.release a{
  display:block;
  color:var(--dim);
  overflow-wrap:anywhere;
  transition:color .25s var(--ease), transform .35s var(--ease);
}
.release:hover::before,
.release:focus-within::before{ opacity:1; transform:translate(.55em,-50%); }
.release:hover a{ color:var(--fg); transform:translateX(.55em); }

.release .year{ margin-right:1.1em; }

/* ---------- playlist / music player ---------- */

.media{
  display:grid;
  grid-template-columns:1.65fr minmax(150px,1fr);
  gap:clamp(24px,4vw,60px);
  align-items:start;
}

.player{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  color:var(--dim);
}

.player__now{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.player__key{ color:var(--dim); opacity:.7; }
.player__title{
  color:var(--fg);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player__title::before{ content:"> "; color:var(--accent); }

.player__bar{
  position:relative;
  height:1px;
  background:var(--line);
  overflow:hidden;
}
.player__fill{
  position:absolute;
  top:0; bottom:0; left:0;
  width:0;
  background:var(--accent);
  transition:width .2s linear;
}

.player__time{ color:var(--dim); font-size:12px; }

.player__controls{
  display:flex;
  align-items:baseline;
  gap:18px;
}
.player__btn{
  font:inherit;
  color:var(--dim);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease);
}
.player__btn:hover,
.player__btn:focus-visible{ color:var(--fg); }
.player__btn--toggle{ color:var(--fg); }

.player__volume{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.player__vol-key{ color:var(--dim); opacity:.7; }
.player__vol-val{
  margin-left:auto;
  color:var(--dim);
  font-size:12px;
}
.player__vol{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:1px;
  background:var(--line);
  cursor:pointer;
}
.player__vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:8px;
  height:8px;
  background:var(--accent);
  border:0;
}
.player__vol::-moz-range-track{ background:var(--line); height:1px; }
.player__vol::-moz-range-thumb{
  width:8px;
  height:8px;
  background:var(--accent);
  border:0;
  border-radius:0;
}

.releases .release.is-playing a{ color:var(--fg); transform:none; }
.releases .release.is-playing::before{
  content:">";
  opacity:1;
  transform:translate(0,-50%);
}
.release--empty a{ opacity:.45; cursor:default; }
.release--empty::before{ display:none; }

/* ---------- status bar ---------- */

.status{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:46px;
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,34px);
  padding:0 var(--pad);
  background:var(--bg);
  color:var(--dim);
  font-size:14px;
  white-space:nowrap;
  z-index:170;
  transition:opacity .3s var(--ease);
  animation:fadeIn .7s var(--ease) backwards;
}
.is-transitioning .status{ opacity:0; }

.status__seg{ display:inline-flex; align-items:center; gap:.5em; }

@keyframes fadeIn{ from{ opacity:0; } }

/* ---------- edge prev/next bars ---------- */

.frame-link{
  position:fixed;
  bottom:0;
  background:var(--bg);
  width:100vh;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:150;
  color:var(--dim);
  transition:color .25s var(--ease), opacity .4s var(--ease);
}
.frame-link:hover{ color:var(--fg); }
.is-transitioning .frame-link{ opacity:0; }

.frame-link.is-prev{
  left:0;
  transform:rotate(-90deg) translateY(100%);
  transform-origin:left bottom;
}
.frame-link.is-next{
  right:0;
  transform:rotate(90deg) translateY(100%);
  transform-origin:right bottom;
}

/* ---------- responsive ---------- */

@media (max-width:760px){
  .frame-link{ display:none; }

  .stack{ grid-template-columns:1fr; }

  .media{ grid-template-columns:1fr; }
  .player{ position:static; }

  .status{ font-size:12px; gap:14px; }

  .collection__link{ pointer-events:none; }
  .collection__sub{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    width:auto;
    padding-left:1.5em;
    margin:.5em 0 1em;
  }
  .collection__sub li{ opacity:1; transform:none; transition:none; }
}

@media (max-width:520px){
  :root{ --header-h:48px; }

  .header{ font-size:13px; }
  .header__logo{ overflow:hidden; text-overflow:ellipsis; }
  .header__nav{ gap:12px; }

  .player__controls{ gap:14px; }
  .view__inner{ padding-top:clamp(34px,9vh,120px); }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
}