@layer reset, tokens, base, layout, components, motion, grain;

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@view-transition {
  navigation: auto;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, svg, iframe { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  ul, ol { list-style: none; padding: 0; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  figure { margin: 0; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #000;
    --fg: #fff;
    --dim: oklch(72% 0 0);
    --panel: oklch(29% 0 0);
    --file-light: oklch(87% 0 0);
    --file-dark: oklch(22% 0 0);
    --font: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --step--2: 0.625rem;
    --step--1: 0.75rem;
    --step-0: 0.8125rem;
    --step-1: clamp(0.875rem, 0.8rem + 0.3vw, 0.9375rem);
    --gutter: 1rem;
    --colw: min(35rem, 100vw - 2 * var(--gutter));
    --bleed: calc((100vw - var(--colw)) / 2);
    --card: min(var(--colw), 100vw - 4rem);
    --gap-section: clamp(3rem, 2.5rem + 2vw, 4rem);
    --radius: 999px;
    --grain: 0.12;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    background: var(--bg);
    scrollbar-gutter: stable;
  }

  body {
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.55;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  a {
    color: inherit;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  h1, h2 { font-size: inherit; font-weight: 400; }

  p { text-wrap: pretty; }

  :focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: 2px;
  }

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

@layer layout {
  .wrap {
    inline-size: var(--colw);
    margin-inline: auto;
  }

  main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-section);
    padding-block: var(--gap-section);
  }

  .stack {
    display: grid;
    gap: 1.5rem;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
    min-block-size: 1.5rem;
  }
}

@layer components {
  .skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -3rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--fg);
    color: var(--bg);
    border-radius: var(--radius);
    &:focus { inset-block-start: 1rem; }
  }

  .sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .caps {
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
  }

  .small {
    font-size: var(--step--2);
    color: var(--dim);
  }

  .i {
    display: inline-grid;
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
    & svg { inline-size: 100%; block-size: 100%; }
  }

  .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-block-size: 2.5rem;
    padding: 0.45rem 1.15rem;
    border: 2px solid var(--fg);
    border-radius: var(--radius);
    font-size: var(--step-1);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), scale 0.2s var(--ease);

    &.solid { background: var(--fg); color: var(--bg); }

    @media (hover: hover) {
      &:hover { background: var(--fg); color: var(--bg); }
      &.solid:hover { background: transparent; color: var(--fg); }
    }

    &:active { background: var(--fg); color: var(--bg); scale: 0.97; transition-duration: 0s; }
    &.solid:active { background: transparent; color: var(--fg); }
  }

  .icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & a {
      --brand: var(--dim);
      display: grid;
      place-items: center;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      transition: color 0.2s var(--ease), scale 0.2s var(--ease);
      @media (hover: hover) { &:hover { color: var(--brand); } }
      &:focus-visible { color: var(--brand); }
      &:active { color: var(--brand); scale: 0.88; transition-duration: 0s; }

      &[href*="instagram.com"] { --brand: #ff0069; }
      &[href*="music.apple.com"] { --brand: #fa243c; }
      &[href*="spotify.com"] { --brand: #1db954; }
      &[href*="bandcamp.com"] { --brand: #408294; }
      &[href*="music.youtube.com"], &[href*="youtube.com"] { --brand: #ff0000; }
      &[href*="bandsintown.com"] { --brand: #00cec8; }
    }

    & .i { inline-size: 1rem; block-size: 1rem; }
  }

  .logo {
    display: block;
    & svg { inline-size: 100%; block-size: auto; overflow: visible; }
    & #eyes > g { transform-box: fill-box; transform-origin: 50% 0; scale: 1 0; }
  }

  .wordmark {
    display: block;
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
  }

  .hero {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    padding-block-start: clamp(1rem, 4vw, 4rem);
    text-align: center;

    & .photo {
      inline-size: 100%;
      aspect-ratio: 3 / 2;
      overflow: clip;
      mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);

      & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    }

    & h1 {
      inline-size: 60%;
      & .logo { inline-size: 100%; }
    }

    &.has-photo h1 { margin-block-start: -21%; position: relative; }

    & .tagline {
      font-size: var(--step-1);
      line-height: 1.4;
      white-space: pre-line;
      text-wrap: balance;
    }

    & .buttons { margin-block-start: 0.5rem; }
  }

  .bc {
    block-size: 120px;
    background: var(--panel);

    & iframe { inline-size: 100%; block-size: 100%; border: 0; }
  }

  .yt {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--panel);

    & iframe {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      border: 0;
    }
  }

  .shows { display: grid; gap: 1.25rem; text-transform: lowercase; }

  .show {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;

    & .venue { font-size: var(--step-1); }
    & .caps { margin-block-start: 0.35rem; }
    & .venue a { text-decoration: none; &:hover, &:active { text-decoration: underline; } }
    & time { font-size: var(--step-1); white-space: nowrap; }
  }

  .prose {
    display: grid;
    gap: 1.4em;
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .foot {
    display: grid;
    justify-items: center;
    gap: 2rem;
    padding-block: 1rem clamp(3rem, 6vw, 5rem);

    & .icons {
      gap: clamp(1rem, 3vw, 1.5rem);
      & a { inline-size: 2rem; block-size: 2rem; }
      & .i { inline-size: 1.75rem; block-size: 1.75rem; }
    }
  }

  .back {
    display: block;
    inline-size: var(--colw);
    margin: 1.5rem auto 0;
    color: var(--fg);
    text-decoration: underline;
    &:active { color: var(--dim); }

    @media (width >= 60rem) {
      position: absolute;
      inset: 3.5rem auto auto 4rem;
      inline-size: auto;
      margin: 0;
    }
  }

  .top {
    display: grid;
    justify-items: center;
    gap: 2.5rem;
    padding-block-start: clamp(2rem, 5vw, 3.5rem);

    & h1 { inline-size: 60%; & .logo { inline-size: 100%; } }
    & .wordmark { font-size: clamp(2rem, 7vw, 2.75rem); }
    & .btn { font-size: var(--step--1); }
  }

  .bio-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 0.75rem;
  }

  .copy {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    & .i { inline-size: 1rem; block-size: 1rem; color: var(--fg); }
    &:hover { color: var(--fg); }
    &:active { color: var(--fg); scale: 0.97; }
  }

  .bio {
    display: grid;
    gap: 1.4em;
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .tabs {
    display: flex;
    gap: 1.5rem;

    & label {
      position: relative;
      padding-block: 0.35rem;
      cursor: pointer;
      text-decoration: underline transparent;
      text-underline-offset: 0.5em;
      text-decoration-thickness: 1px;
      transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
      &:has(:checked) { color: var(--fg); text-decoration-color: currentColor; }
      &:has(:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
      @media (hover: hover) { &:hover { color: var(--fg); } }
      &:active { color: var(--fg); }
    }

    & input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
  }

  .bios {
    & [data-panel="long"] { display: none; }
    &:has([value="long"]:checked) {
      & [data-panel="short"] { display: none; }
      & [data-panel="long"] { display: grid; }
    }
  }

  .next {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 1.75rem;
    margin-inline-end: -0.5rem;
    & svg { inline-size: 1.6rem; transition: translate 0.25s var(--ease); }
    &:hover svg { translate: 0.25rem 0; }
    &:active svg { translate: 0.5rem 0; transition-duration: 0.08s; }
    &[hidden] { display: none; }
  }

  .row {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card);
    gap: 1.875rem;
    margin-inline-end: calc(-1 * var(--bleed));
    padding-inline-end: var(--bleed);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }

    & > li { scroll-snap-align: start; min-inline-size: 0; }

    & figcaption, & .file + p { margin-block-start: 0.85rem; }

    &:focus-visible { outline-offset: 6px; }
  }

  .frame {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--panel);
    & img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
    &:hover img { transform: scale(1.02); }
  }

  .files {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc(var(--card) * 0.6);
    gap: 1.25rem;
  }

  .file {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 1;
    padding: 1.25rem;
    background: var(--file-light);
    color: var(--bg);
    transition: filter 0.2s var(--ease);
    &.dark { background: var(--file-dark); color: var(--fg); }
    & img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
    & .ext { font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; }
    &:hover { filter: brightness(1.08); }
  }

  html:has(.lightbox[open]) { overflow: hidden; }

  .lightbox {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: oklch(0% 0 0 / 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--fg);
    opacity: 0;
    transition: opacity 0.3s var(--ease), display 0.3s allow-discrete, overlay 0.3s allow-discrete;

    &[open] {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto auto;
      opacity: 1;
      @starting-style { opacity: 0; }
    }

    &::backdrop { background: transparent; }

    & button {
      display: grid;
      place-items: center;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      border-radius: 50%;
      transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
      & svg { inline-size: 1.5rem; }
      @media (hover: hover) { &:hover { background: oklch(100% 0 0 / 0.1); } }
      &:active { background: oklch(100% 0 0 / 0.18); }
      &:disabled { opacity: 0.25; cursor: default; background: none; }
      &[hidden] { display: none; }
    }
  }

  .lb-close {
    position: absolute;
    inset: calc(0.75rem + env(safe-area-inset-top)) 0.75rem auto auto;
    z-index: 1;
  }

  .lb-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  .lb-slide {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 1rem;
    min-block-size: 0;
    padding: calc(3.5rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) 0.5rem;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    & img {
      max-inline-size: 100%;
      max-block-size: 100%;
      inline-size: auto;
      block-size: auto;
      object-fit: contain;
      min-block-size: 0;
    }

    & figcaption { text-align: center; }
  }

  .lb-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 6vw, 2.5rem);
    padding-block: 1rem 0.5rem;
    & .lb-prev svg { rotate: 180deg; }
    & .btn { font-size: var(--step--1); }
  }

  .lb-count {
    text-align: center;
    padding-block-end: calc(1rem + env(safe-area-inset-bottom));
    &[hidden] { display: block; visibility: hidden; }
  }

  .notfound { padding-block: 30vh; text-align: center; }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    #ghost {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: haunt 6s ease-in-out infinite;
    }

    #eyes > g { animation: blink 17.5s linear infinite 2.5s; }

    .hero > *, .top > * {
      animation: rise 0.9s var(--ease) backwards;
      animation-delay: calc(var(--i, 0) * 90ms + 60ms);
    }

    :is(.hero, .top) > :nth-child(2) { --i: 1; }
    :is(.hero, .top) > :nth-child(3) { --i: 2; }
    :is(.hero, .top) > :nth-child(4) { --i: 3; }

    .hero .photo { animation-name: fade; animation-duration: 1.2s; }
    .hero .photo img { animation: zoom 3.2s cubic-bezier(0.16, 1, 0.3, 1) both; }

    .bios [data-panel] { animation: fade 0.45s var(--ease); }

    .back {
      animation: rise 0.9s var(--ease) backwards;
      animation-delay: 360ms;
    }

    @media (scripting: enabled) {
      main > section, .foot {
        opacity: 0;
        translate: 0 0.75rem;
        transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
        &.in { opacity: 1; translate: 0 0; }
      }
    }
  }

  @media (scripting: enabled) {
    :is(.yt, .bc) iframe {
      opacity: 0;
      transition: opacity 0.7s var(--ease);
      &.ready { opacity: 1; }
    }
  }

  @keyframes rise {
    from { opacity: 0; translate: 0 0.75rem; }
  }

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

  @keyframes zoom {
    to { scale: 1.06; }
  }

  @keyframes blink {
    0%, 1.36%, 60%, 61.04%, 62.16%, 100% { scale: 1 0; }
    0.56%, 0.72% { scale: 1 1; }
    60.56%, 60.64% { scale: 1 1; }
    61.6%, 61.68% { scale: 1 1; }
  }

  @keyframes haunt {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(0.6px, -3px) rotate(-1.2deg); }
    55% { transform: translate(0, -5px) rotate(0.4deg); }
    80% { transform: translate(-0.6px, -2px) rotate(1deg); }
  }
}

@layer grain {
  .grain {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
  }

  .grain::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: url("/grain.svg?v=2");
    opacity: var(--grain);
    will-change: transform;
    animation: grain 0.8s steps(1) infinite;
  }

  @keyframes grain {
    0% { transform: translate(0, 0); }
    12% { transform: translate(-3%, 2%); }
    25% { transform: translate(4%, -3%); }
    37% { transform: translate(-2%, -4%); }
    50% { transform: translate(3%, 4%); }
    62% { transform: translate(-4%, 1%); }
    75% { transform: translate(2%, -2%); }
    87% { transform: translate(-1%, 3%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .grain::after { animation: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .grain, .foot, .next, .skip { display: none; }
}