:root {

  --bg: #090909;

  --panel: #111113;

  --panel2: #171719;

  --text: #f6f3ec;

  --muted: #8d8d91;

  --line: #28282c;

  --accent: #ff3b16;

  --cream: #e9e2d3;

  --max: 1460px;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-family: "Inter", sans-serif;

  overflow-x: hidden;

}



body.player-open {

  padding-bottom: 104px;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

textarea {

  font: inherit;

}



img {

  display: block;

  max-width: 100%;

}





/* =========================

   PAGE TEXTURE

========================= */



.noise {

  pointer-events: none;

  position: fixed;

  inset: 0;

  opacity: .025;

  z-index: 100;



  background-image:

    repeating-radial-gradient(

      circle at 0 0,

      transparent 0,

      #fff 1px,

      transparent 2px

    );



  background-size: 8px 8px;

}





/* =========================

   HEADER

========================= */



.site-header {

  position: fixed;

  z-index: 50;



  top: 0;

  left: 0;

  right: 0;



  height: 78px;



  display: flex;

  align-items: center;

  justify-content: space-between;



  padding: 0 max(24px, 4vw);



  background: rgba(9, 9, 9, .78);



  backdrop-filter: blur(18px);



  border-bottom:

    1px solid rgba(255, 255, 255, .06);

}



.brand {

  display: flex;

  align-items: center;



  height: 78px;



  overflow: hidden;

}



.brand-logo {

  width: 66px;

  height: 66px;



  object-fit: contain;

}



.site-header nav {

  display: flex;

  align-items: center;



  gap: 28px;

}



.site-header nav a {

  color: #c2c2c5;



  font-size: .82rem;

}



.site-header nav a:hover {

  color: white;

}



.nav-admin {

  border:

    1px solid #343438;



  padding: 9px 13px;



  border-radius: 999px;

}



.menu-button {

  display: none;



  color: white;



  background: none;



  border: 0;



  font-size: 1.4rem;

}





/* =========================

   HERO

========================= */



.hero {

  min-height: 100vh;



  padding:

    150px

    max(24px, 4vw)

    40px;



  position: relative;



  display: flex;

  flex-direction: column;



  justify-content: space-between;



  background:

    radial-gradient(

      circle at 77% 35%,

      rgba(255, 59, 22, .14),

      transparent 28%

    ),

    linear-gradient(

      180deg,

      #0b0b0c 0%,

      #090909 78%

    );

}



.hero-grid {

  width: 100%;

  max-width: var(--max);



  margin: auto;



  display: grid;



  grid-template-columns:

    1.05fr

    .95fr;



  gap: 7vw;



  align-items: center;

}



.kicker {

  margin:

    0

    0

    18px;



  color: var(--accent);



  font-size: .68rem;



  font-weight: 700;



  letter-spacing: .2em;

}



.hero h1 {

  margin: 0;



  font-family:

    "Space Grotesk",

    sans-serif;



  font-size:

    clamp(

      4rem,

      8.7vw,

      9.5rem

    );



  line-height: .84;



  letter-spacing: -.075em;



  font-weight: 600;

}



.hero h1 span {

  color: #77777c;

}



.hero-text {

  max-width: 600px;



  margin:

    30px

    0

    0;



  color: #a6a6aa;



  font-size: 1.05rem;



  line-height: 1.75;

}



.hero-actions {

  display: flex;



  gap: 12px;



  margin-top: 34px;



  flex-wrap: wrap;

}



.button {

  border-radius: 999px;



  padding:

    13px

    19px;



  font-size: .84rem;



  border:

    1px solid #3b3b3e;

}



.button.primary {

  background: var(--cream);



  color: #111;



  border-color: var(--cream);



  font-weight: 700;

}



.button.ghost:hover {

  border-color: #888;

}





/* =========================

   HERO ART

========================= */



.hero-art {

  min-height: 620px;



  position: relative;



  display: grid;



  place-items: center;

}



.hero-cover {

  position: relative;



  z-index: 4;



  width: min(80%, 510px);



  aspect-ratio: 1;



  padding: 16px;



  background:

    linear-gradient(

      135deg,

      #232326,

      #0d0d0e

    );



  border:

    1px solid #2b2b2e;



  box-shadow:

    0

    35px

    100px

    rgba(0, 0, 0, .6);



  transform:

    rotate(2deg);

}



.hero-cover-inner {

  height: 100%;



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  padding: 28px;



  border:

    1px solid

    rgba(255, 255, 255, .08);



  background:

    radial-gradient(

      circle at 68% 28%,

      rgba(255, 59, 22, .55),

      transparent 18%

    ),

    linear-gradient(

      145deg,

      #141416,

      #030303

    );

}



.cover-label {

  font-size: .6rem;



  letter-spacing: .22em;



  color: #999;

}



.hero-cover h2 {

  font-size:

    clamp(

      2.2rem,

      4vw,

      4.3rem

    );



  max-width: 80%;



  margin:

    12px

    0

    7px;



  line-height: .88;



  letter-spacing: -.05em;

}



.hero-cover p {

  color: #9b9b9f;



  margin: 0;

}



.orb {

  position: absolute;



  border-radius: 50%;

}



.orb-one {

  width: 360px;

  height: 360px;



  background:

    rgba(

      255,

      59,

      22,

      .16

    );



  border:

    1px solid

    rgba(

      255,

      59,

      22,

      .18

    );



  right: 5%;



  top: 2%;

}



.orb-two {

  width: 220px;

  height: 220px;



  border:

    1px solid #29292d;



  left: 3%;



  bottom: 5%;

}





/* =========================

   TICKER

========================= */



.ticker {

  overflow: hidden;



  border-top:

    1px solid #202023;



  border-bottom:

    1px solid #202023;



  margin-top: 65px;

}



.ticker-track {

  width: max-content;



  display: flex;



  gap: 24px;



  align-items: center;



  padding:

    14px

    0;



  color: #77777c;



  font-size: .64rem;



  letter-spacing: .18em;

}



.ticker-track i {

  color: var(--accent);



  font-style: normal;

}





/* =========================

   GENERAL SECTIONS

========================= */



.section {

  padding:

    110px

    max(24px, 4vw);

}



.section > * {

  max-width: var(--max);



  margin-left: auto;



  margin-right: auto;

}



.section-top {

  display: grid;



  grid-template-columns:

    1fr

    .7fr;



  align-items: end;



  gap: 50px;



  margin-bottom: 48px;

}



.section-top h2,

.about-section h2 {

  font-family:

    "Space Grotesk",

    sans-serif;



  font-size:

    clamp(

      2.6rem,

      5.2vw,

      5.8rem

    );



  line-height: .94;



  letter-spacing: -.06em;



  margin: 0;

}



.section-top > p {

  margin: 0;



  color: var(--muted);



  line-height: 1.7;



  max-width: 540px;

}





/* =========================

   TURNTABLE

========================= */



.turntable-layout {

  display: flex;



  justify-content: center;



  margin-bottom: 55px;

}



.turntable-area {

  width:

    min(

      100%,

      760px

    );

}



.turntable {

  position: relative;



  background:

    linear-gradient(

      145deg,

      #242427,

      #111113

    );



  border:

    1px solid #353539;



  padding: 32px;



  box-shadow:

    0

    30px

    80px

    rgba(0, 0, 0, .45);



  transition:

    border-color .25s ease,

    transform .25s ease,

    box-shadow .25s ease;

}



.turntable.drag-over {

  border-color: var(--accent);



  transform:

    translateY(-4px);



  box-shadow:

    0

    30px

    90px

    rgba(

      255,

      59,

      22,

      .15

    );

}



.turntable-top {

  position: relative;



  min-height: 520px;



  display: flex;



  align-items: center;



  justify-content: center;



  background:

    linear-gradient(

      145deg,

      #171719,

      #0c0c0d

    );



  border:

    1px solid #29292d;



  overflow: hidden;

}





/* =========================

   VINYL RECORD

========================= */



.vinyl-record {

  position: relative;



  width:

    min(

      68vw,

      420px

    );



  aspect-ratio: 1;



  border-radius: 50%;



  background:

    repeating-radial-gradient(

      circle,

      #080808 0px,

      #080808 3px,

      #121212 4px,

      #070707 6px

    );



  box-shadow:

    0

    22px

    45px

    rgba(0, 0, 0, .55);



  display: grid;



  place-items: center;

}



.vinyl-record::before {

  content: "";



  position: absolute;



  inset: 5%;



  border-radius: 50%;



  border:

    1px solid

    rgba(

      255,

      255,

      255,

      .035

    );

}



.vinyl-record::after {

  content: "";



  position: absolute;



  width: 12px;



  height: 12px;



  border-radius: 50%;



  background: #090909;



  border:

    2px solid #555;



  z-index: 5;

}



.vinyl-label {

  width: 34%;



  aspect-ratio: 1;



  border-radius: 50%;



  background:

    var(--accent)

    center

    /

    cover

    no-repeat;



  display: grid;



  place-items: center;



  font-family:

    "Space Grotesk",

    sans-serif;



  font-weight: 700;



  font-size: .8rem;



  color: white;



  position: relative;



  z-index: 2;

}



.vinyl-record.playing {

  animation:

    vinylSpin

    2.1s

    linear

    infinite;

}



@keyframes vinylSpin {

  from {

    transform:

      rotate(0deg);

  }



  to {

    transform:

      rotate(360deg);

  }

}





/* =========================

   IMPROVED TONEARM

========================= */



.tonearm {

  position: absolute;



  width: 210px;



  height: 350px;



  right: -8px;

  top: 32px;



  pointer-events: none;



  transform-origin:

    150px

    48px;



  transform:

    rotate(0deg);



  transition:

    transform

    .65s

    cubic-bezier(

      .4,

      0,

      .2,

      1

    );

}





/* moves the entire assembly */

    /*gone*/





/* pivot */



.tonearm-base {

  position: absolute;



  right: 0;



  top: 0;



  width: 82px;



  height: 82px;



  border-radius: 50%;



  background:

    radial-gradient(

      circle,

      #343438 0%,

      #202023 55%,

      #111 100%

    );



  border:

    1px solid #555;



  box-shadow:

    inset

    0

    0

    18px

    rgba(0, 0, 0, .8),

    0

    5px

    15px

    rgba(0, 0, 0, .4);

}





/* metal arm */



.tonearm-arm {

  position: absolute;



  width: 13px;



  height: 245px;



  right: 34px;



  top: 54px;



  border-radius: 999px;



  background:

    linear-gradient(

      90deg,

      #555,

      #d9d9d9 45%,

      #7d7d82

    );



  transform:

    rotate(14deg);



  transform-origin:

    top center;



  box-shadow:

    0

    3px

    6px

    rgba(0, 0, 0, .35);

}





/* cartridge */



.tonearm-head {

  position: absolute;



  width: 38px;



  height: 52px;



  right: 82px;



  bottom: 5px;



  background:

    linear-gradient(

      145deg,

      #252528,

      #0f0f10

    );



  border:

    1px solid #666;



  border-radius: 4px;



  transform:

    rotate(14deg);



  box-shadow:

    0

    4px

    8px

    rgba(0, 0, 0, .4);

}





/* visible needle */



.tonearm-head::after {

  content: "";



  position: absolute;



  width: 2px;



  height: 20px;



  left: 6px;



  bottom: -16px;



  background: #cfcfcf;



  transform:

    rotate(10deg);



  transform-origin:

    top center;

}





/* =========================

   TURNTABLE CONTROLS

========================= */



.turntable-controls {

  display: flex;



  align-items: center;



  gap: 18px;



  padding-top: 24px;

}



.turntable-play {

  width: 52px;



  height: 52px;



  border-radius: 50%;



  border: none;



  background: var(--cream);



  color: #111;



  cursor: pointer;



  font-size: 1rem;

}



.now-playing {

  display: grid;



  gap: 4px;

}



.now-playing-label {

  font-size: .58rem;



  letter-spacing: .18em;



  color: var(--accent);



  font-weight: 700;

}



.now-playing strong {

  font-family:

    "Space Grotesk",

    sans-serif;



  font-size: 1rem;

}



.now-playing > span:last-child {

  color: #77777c;



  font-size: .75rem;

}



.drag-instruction {

  text-align: center;



  color: #737378;



  margin:

    -25px

    auto

    45px !important;



  font-size: .78rem;



  letter-spacing: .05em;

}





/* =========================

   RELEASES

========================= */



.release-grid {

  display: grid;



  grid-template-columns:

    repeat(

      3,

      1fr

    );



  gap: 18px;

}



.release-card {

  cursor: grab;



  transition:

    transform .2s ease,

    opacity .2s ease;

}



.release-card:active {

  cursor: grabbing;



  transform:

    scale(.98);

}



.release-card.dragging {

  opacity: .45;

}



.release-art {

  position: relative;



  aspect-ratio: 1;



  overflow: hidden;



  border:

    1px solid #242428;



  background: #141416;

}



.release-art img {

  width: 100%;



  height: 100%;



  object-fit: cover;

}



.demo-art {

  display: grid;



  place-items: center;



  background:

    radial-gradient(

      circle at 75% 25%,

      #7a1b09,

      #101012 43%

    );

}



.demo-disc {

  width: 34%;



  aspect-ratio: 1;



  display: grid;



  place-items: center;



  border-radius: 50%;



  background: #090909;



  border:

    1px solid #3a3a3d;



  color: #666;



  font-size: .7rem;

}



.release-meta {

  display: flex;



  justify-content: space-between;



  gap: 15px;



  padding:

    15px

    1px

    0;

}



.release-meta h3 {

  font-size: .98rem;



  margin:

    0

    0

    5px;

}



.release-meta p,

.release-meta span {

  color: #77777b;



  margin: 0;



  font-size: .78rem;

}





/* =========================

   MANIFESTO

========================= */



.manifesto {

  min-height: 52vh;



  display: grid;



  place-items: center;



  padding:

    70px

    5vw;



  background: var(--cream);



  color: #111;

}



.manifesto p {

  max-width: 1200px;



  margin: 0;



  font-family:

    "Space Grotesk",

    sans-serif;



  font-size:

    clamp(

      3.3rem,

      8vw,

      8rem

    );



  line-height: .9;



  letter-spacing: -.065em;



  text-align: center;

}





/* =========================

   VISUALS

========================= */



.visuals-section {

  background: #0c0c0d;

}



.visual-grid {

  display: grid;



  grid-template-columns:

    repeat(

      12,

      1fr

    );



  gap: 12px;

}



.visual-grid img,

.visual-placeholder {

  min-height: 320px;



  width: 100%;



  height: 100%;



  object-fit: cover;



  background: #151517;



  border:

    1px solid #242427;

}



.visual-placeholder {

  grid-column: span 4;



  display: flex;



  align-items: flex-end;



  padding: 18px;



  color: #4e4e52;



  font-family:

    "Space Grotesk",

    sans-serif;



  font-size: 3rem;

}



.visual-large {

  grid-column: span 6;



  grid-row: span 2;



  min-height: 660px;

}



.visual-wide {

  grid-column: span 8;

}



.visual-grid img:nth-child(4n+1) {

  grid-column: span 6;

}



.visual-grid img:nth-child(4n+2) {

  grid-column: span 3;

}



.visual-grid img:nth-child(4n+3) {

  grid-column: span 3;

}



.visual-grid img:nth-child(4n+4) {

  grid-column: span 8;

}





/* =========================

   MERCH

========================= */



.merch-grid {

  display: grid;



  grid-template-columns:

    repeat(

      3,

      1fr

    );



  gap: 18px;

}



.product-card {

  border:

    1px solid #242427;



  background: #101012;

}



.product-image {

  aspect-ratio: .9;



  display: flex;



  align-items: flex-end;



  padding: 20px;



  color:

    rgba(

      255,

      255,

      255,

      .35

    );



  letter-spacing: .18em;



  font-size: .62rem;

}



.product-one {

  background:

    linear-gradient(

      135deg,

      #19191d,

      #3b0f07

    );

}



.product-two {

  background:

    linear-gradient(

      45deg,

      #090909,

      #2c2c30

    );

}



.product-three {

  background:

    radial-gradient(

      circle at 60% 35%,

      #55200f,

      #0b0b0c 55%

    );

}



.product-info {

  display: flex;



  justify-content: space-between;



  gap: 20px;



  align-items: center;



  padding: 18px;

}



.product-info h3 {

  margin:

    0

    0

    5px;



  font-size: .95rem;

}



.product-info p {

  color: #777;



  margin: 0;



  font-size: .82rem;

}



.product-info button {

  border:

    1px solid #333337;



  background: none;



  color: #666;



  border-radius: 999px;



  padding:

    9px

    12px;

}





/* =========================

   ABOUT

========================= */



.about-section {

  display: grid;



  grid-template-columns:

    .85fr

    1.15fr;



  gap: 9vw;



  background: #111113;

}



.about-copy {

  max-width: 720px;

}



.about-copy p {

  color: #a0a0a5;



  line-height: 1.85;



  font-size: 1.05rem;

}



.social-row {

  display: flex;



  flex-wrap: wrap;



  gap: 18px;



  margin-top: 34px;

}



.social-row a {

  border-bottom:

    1px solid #3d3d40;



  padding-bottom: 5px;



  font-size: .85rem;

}





/* =========================

   FOOTER

========================= */



footer {

  min-height: 180px;



  padding:

    48px

    max(24px, 4vw);



  display: flex;



  justify-content: space-between;



  align-items: flex-end;



  gap: 30px;



  color: #626267;



  border-top:

    1px solid #1d1d20;

}



.footer-logo {

  width: 110px;



  height: auto;

}



footer p {

  margin: 0;



  font-size: .76rem;

}





/* =========================

   PERSISTENT AUDIO PLAYER

========================= */



.player-shell {

  position: fixed;



  z-index: 80;



  left: 18px;



  right: 18px;



  bottom: 18px;



  min-height: 76px;



  display: none;



  grid-template-columns:

    52px

    minmax(140px, .7fr)

    minmax(280px, 1.4fr)

    32px;



  gap: 16px;



  align-items: center;



  padding:

    11px

    14px;



  background:

    rgba(

      21,

      21,

      23,

      .94

    );



  border:

    1px solid #323237;



  backdrop-filter:

    blur(20px);



  box-shadow:

    0

    18px

    50px

    rgba(0, 0, 0, .45);

}



.player-shell.visible {

  display: grid;

}



.player-art {

  width: 52px;



  height: 52px;



  background:

    #29292d

    center

    /

    cover

    no-repeat;

}



.player-track {

  display: grid;



  gap: 4px;



  overflow: hidden;

}



.player-track strong,

.player-track span {

  overflow: hidden;



  white-space: nowrap;



  text-overflow: ellipsis;

}



.player-track strong {

  font-size: .84rem;

}



.player-track span {

  color: #7c7c80;



  font-size: .72rem;

}



.player-shell audio {
  display: block;
  width: 100%;
  min-width: 300px;
  height: 54px;
}



.player-close {

  border: 0;



  background: none;



  color: #999;



  font-size: 1.4rem;



  cursor: pointer;

}





/* =========================

   TABLET / MOBILE

========================= */



@media (max-width: 900px) {



  .menu-button {

    display: block;

  }



  .site-header nav {

    display: none;



    position: absolute;



    top: 78px;



    left: 0;



    right: 0;



    padding:

      20px

      24px;



    background: #101011;



    flex-direction: column;



    align-items: stretch;



    border-bottom:

      1px solid #29292c;

  }



  .site-header nav.open {

    display: flex;

  }



  .hero {

    padding-top: 120px;

  }



  .hero-grid,

  .section-top,

  .about-section {

    grid-template-columns: 1fr;

  }



  .hero-art {

    min-height: 440px;

  }



  .hero-cover {

    width:

      min(

        88%,

        430px

      );

  }



  .release-grid,

  .merch-grid {

    grid-template-columns: 1fr;

  }



  .visual-placeholder,

  .visual-large,

  .visual-wide,

  .visual-grid img {

    grid-column:

      span 12 !important;



    min-height: 340px;

  }



  .player-shell {

    grid-template-columns:

      48px

      1fr

      28px;

  }



  .player-shell audio {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

}





/* =========================

   SMALLER TURNTABLE

========================= */



@media (max-width: 700px) {



  .turntable {

    padding: 18px;

  }



  .turntable-top {

    min-height: 390px;

  }



  .tonearm {

    transform-origin:

      150px

      48px;



    scale: .72;



    right: -18px;



    top: 24px;

  }
}





/* =========================

   PHONE

========================= */



@media (max-width: 560px) {



  .hero h1 {

    font-size:

      clamp(

        3.7rem,

        19vw,

        6rem

      );

  }



  .hero-art {

    min-height: 360px;

  }



  .section {

    padding-top: 78px;



    padding-bottom: 78px;

  }



  .manifesto {

    min-height: 42vh;

  }



  footer {

    flex-direction: column;



    align-items: flex-start;

  }

}



/* =========================

   FLOATING UPLOADED VISUALS

========================= */



#visualGrid {

  position: fixed;



  inset: 0;



  width: 100vw;

  height: 100vh;



  pointer-events: none;



  z-index: 0;



  overflow: hidden;



  margin: 0 !important;



  max-width: none !important;

}





/* keep actual website above images */



main,

.site-header,

footer,

.player-shell {

  position: relative;



  z-index: 2;

}





/* each uploaded image */



#visualGrid .floating-visual {

  position: absolute;



  width: var(--float-size, 130px);

  height: var(--float-size, 130px);



  object-fit: cover;



  left: var(--float-x, 50%);

  top: var(--float-y, 50%);



  opacity: .16;



  filter:

    saturate(.8)

    contrast(1.05);



  transform:

    translate(-50%, -50%)

    rotate(var(--float-rotation, 0deg));



  animation:

    floatingVisual

    var(--float-duration, 18s)

    ease-in-out

    infinite

    alternate;



  animation-delay:

    var(--float-delay, 0s);



  border:

    1px solid

    rgba(255, 255, 255, .08);



  box-shadow:

    0

    20px

    50px

    rgba(0, 0, 0, .35);

}





@keyframes floatingVisual {



  0% {



    transform:

      translate(

        -50%,

        -50%

      )

      translate(

        0,

        0

      )

      rotate(

        var(

          --float-rotation,

          0deg

        )

      );



  }



  50% {



    transform:

      translate(

        -50%,

        -50%

      )

      translate(

        var(

          --float-move-x,

          30px

        ),

        var(

          --float-move-y,

          -35px

        )

      )

      rotate(

        calc(

          var(

            --float-rotation,

            0deg

          )

          + 4deg

        )

      );



  }



  100% {



    transform:

      translate(

        -50%,

        -50%

      )

      translate(

        calc(

          var(

            --float-move-x,

            30px

          )

          * -1

        ),

        calc(

          var(

            --float-move-y,

            -35px

          )

          * -1

        )

      )

      rotate(

        calc(

          var(

            --float-rotation,

            0deg

          )

          - 4deg

        )

      );



  }



}





/* remove old large gallery styling */



.visuals-section {

  background: transparent;

}



.visual-grid {

  display: block;

}





  /* phone version */



  @media (max-width: 700px) {



    #visualGrid .floating-visual {



      opacity: .11;



      width:

        var(

          --float-size-mobile,

          90px

        );



      height:

        var(

          --float-size-mobile,

          90px

        );



    }



  }



  /* ========================================

   FLOATING NWC VISUALS

======================================== */



#visualGrid {

  position: fixed !important;



  inset: 0 !important;



  width: 100vw !important;

  height: 100vh !important;



  max-width: none !important;



  margin: 0 !important;



  pointer-events: none;



  overflow: hidden;



  z-index: 1;



  display: block !important;

}





/* uploaded image */



#visualGrid .floating-visual {

  position: absolute !important;



  left:

    var(

      --float-x,

      50%

    );



  top:

    var(

      --float-y,

      50%

    );



  width:

    var(

      --float-size,

      100px

    ) !important;



  height:

    var(

      --float-size,

      100px

    ) !important;



  min-height: 0 !important;



  object-fit: cover;



  opacity: .22;



  border:

    1px solid

    rgba(

      255,

      255,

      255,

      .1

    );



  box-shadow:

    0

    20px

    45px

    rgba(

      0,

      0,

      0,

      .45

    );



  animation:

    nwcFloat

    var(

      --float-duration,

      20s

    )

    ease-in-out

    infinite

    alternate;



  animation-delay:

    var(

      --float-delay,

      0s

    );



  transform:

    translate(

      -50%,

      -50%

    )

    rotate(

      var(

        --float-rotation,

        0deg

      )

    );

}





/* FLOATING MOVEMENT */



@keyframes nwcFloat {



  0% {



    transform:

      translate(

        -50%,

        -50%

      )

      translate(

        0px,

        0px

      )

      rotate(

        var(

          --float-rotation,

          0deg

        )

      );



  }





  50% {



    transform:

      translate(

        -50%,

        -50%

      )

      translate(

        var(

          --float-move-x,

          40px

        ),

        var(

          --float-move-y,

          -30px

        )

      )

      rotate(

        calc(

          var(

            --float-rotation,

            0deg

          )

          +

          5deg

        )

      );



  }





  100% {



    transform:

      translate(

        -50%,

        -50%

      )

      translate(

        calc(

          var(

            --float-move-x,

            40px

          )

          *

          -1

        ),

        calc(

          var(

            --float-move-y,

            -30px

          )

          *

          -1

        )

      )

      rotate(

        calc(

          var(

            --float-rotation,

            0deg

          )

          -

          5deg

        )

      );



  }



}





/* WEBSITE ABOVE FLOATING ART */



.site-header {

  z-index: 50;

}



main {

  position: relative;

  z-index: 2;

}



footer {

  position: relative;

  z-index: 2;

}



.player-shell {

  z-index: 80;

}





/*

  Allow floating images to actually

  be visible through site sections.

*/



.releases-section,

.visuals-section,

.merch-section {

  position: relative;

  background-color:

    rgba(

      9,

      9,

      9,

      .84

    );

}





/* REMOVE OLD VISUAL GRID IMAGE RULES */



#visualGrid img {

  min-height: 0 !important;

  grid-column: auto !important;

}





/* MOBILE */



@media (max-width: 700px) {



  #visualGrid .floating-visual {



    width: 72px !important;



    height: 72px !important;



    opacity: .15;



  }



}



/* =========================

   FIX PAGE SCROLLING

========================= */



html {

  min-height: 100%;

  overflow-x: hidden;

  overflow-y: auto !important;

}



body {

  min-height: 100vh;

  overflow-x: hidden;

  overflow-y: auto !important;

}


/* =========================================
   CUSTOM AUDIO SEEK BAR
========================================= */

.custom-audio-controls {
  width: 100%;

  display: grid;

  grid-template-columns:
    42px
    minmax(150px, 1fr)
    42px;

  gap: 10px;

  align-items: center;
}

.custom-audio-controls span {
  color: #8b8b90;

  font-size: .68rem;

  font-variant-numeric:
    tabular-nums;
}

#audioSeek {
  width: 100%;

  min-width: 0;

  height: 4px;

  padding: 0;

  margin: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 0;

  border-radius: 999px;

  background:
    linear-gradient(
      to right,
      var(--cream) 0%,
      var(--cream) var(--seek-progress, 0%),
      #444448 var(--seek-progress, 0%),
      #444448 100%
    );

  cursor: pointer;
}


/* Chrome / Safari */

#audioSeek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  width: 13px;
  height: 13px;

  border-radius: 50%;

  background: var(--cream);

  cursor: pointer;
}


/* Firefox */

#audioSeek::-moz-range-thumb {
  width: 13px;
  height: 13px;

  border: 0;

  border-radius: 50%;

  background: var(--cream);

  cursor: pointer;
}


/* hide browser's audio element itself */

#audioPlayer {
  display: none;
}


/* =========================================
   FLOATING TRACK COVERS
========================================= */

.floating-tracks {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  pointer-events: none;

  z-index: 1;
}


.floating-track-cover {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: var(--size);
  height: var(--size);

  object-fit: cover;

  opacity: .18;

  border:
    1px solid
    rgba(255,255,255,.08);

  box-shadow:
    0
    18px
    45px
    rgba(0,0,0,.4);

  transform:
    translate(-50%, -50%)
    rotate(var(--rotation));

  animation:
    floatingTrackMovement
    var(--speed)
    ease-in-out
    infinite
    alternate;

  animation-delay:
    var(--delay);
}


@keyframes floatingTrackMovement {

  from {
    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotate(var(--rotation));
  }


  to {
    transform:
      translate(-50%, -50%)
      translate(
        var(--move-x),
        var(--move-y)
      )
      rotate(
        calc(
          var(--rotation) + 8deg
        )
      );
  }

}


/*
   keep content above covers
*/

.site-header {
  z-index: 50;
}

main {
  position: relative;
  z-index: 2;
}

footer {
  position: relative;
  z-index: 2;
}

.player-shell {
  z-index: 80;
}


/*
   slightly transparent music section
   so covers can show behind it
*/

.releases-section {
  background:
    rgba(
      9,
      9,
      9,
      .78
    );
}


/* MOBILE */

@media (max-width: 700px) {

  .floating-track-cover {
    opacity: .12;
  }


  .custom-audio-controls {
    grid-template-columns:
      36px
      1fr
      36px;
  }

}