:root {
  --ink: #e9e2d6;
  --night: #000;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

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

html { background: var(--night); }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Scroll length drives the whole reveal */
.scroller { height: 560vh; position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

/* Square artwork, always at least as tall as the viewport */
.art {
  --size: max(100svh, 72vw);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  /* soften the left/right edges on wide screens */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: 50% 40%;
}

/* lights bloom a little brighter than normal blending */
.layer[data-layer="lights"],
.layer[data-layer="glow"] { mix-blend-mode: normal; }

.flakes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, .85) 100%);
}

.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-6%, -2%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: clamp(.7rem, 1.1vw, .85rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  padding-left: .5em; /* optically recentre the tracking */
  opacity: .75;
}

.intro, .outro {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(8, 10, 14, .6);
  will-change: transform, opacity;
}
.intro { top: 50%; transform: translateY(-50%); }
.outro { bottom: 9vh; opacity: 0; }

h1, h2 {
  font-weight: 400;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 7vw, 5.6rem); }
h2 { font-size: clamp(1.8rem, 4.4vw, 3.4rem); margin-top: .3em; }

.cue {
  margin-top: 5rem;
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  opacity: .55;
}
.cue span {
  display: block;
  width: 1px;
  height: 46px;
  margin: 1rem auto 0;
  background: linear-gradient(var(--ink), transparent);
  transform-origin: top;
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Load-in ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--night);
  pointer-events: none;
  transition: opacity 2.4s ease;
}
body.ready::before { opacity: 0; }

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

/* ---------- Release section ---------- */
.release {
  position: relative;
  z-index: 1;
  background: #000;
  padding: clamp(5rem, 14vh, 9rem) clamp(1.5rem, 6vw, 5rem) 2.5rem;
}
.release-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8), 0 0 80px rgba(232, 150, 80, .07);
}
.info h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-top: .25em; }

.links { display: grid; gap: .8rem; margin-top: 2.6rem; max-width: 22rem; }
.btn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 1.3rem;
  border: 1px solid rgba(233, 226, 214, .28);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  transition: border-color .4s, background .4s, color .4s;
}
.btn em {
  font-size: .68rem;
  letter-spacing: .1em;
  opacity: .5;
  text-transform: none;
}
.btn:hover, .btn:focus-visible {
  border-color: rgba(246, 176, 106, .7);
  background: rgba(246, 176, 106, .06);
  outline: none;
}
.btn[aria-disabled="true"] { cursor: default; }

.credits { margin-top: 3.4rem; display: grid; gap: 1.1rem; }
.credits div { display: grid; gap: .2rem; }
.credits dt { font-size: 1.05rem; letter-spacing: .03em; }
.credits dd {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .5;
}
.credits .art-credit { margin-top: .8rem; padding-top: 1.4rem; border-top: 1px solid rgba(233, 226, 214, .12); }

.release footer {
  margin-top: clamp(4rem, 10vh, 7rem);
  text-align: center;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .3;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }
.info .reveal:nth-child(2) { transition-delay: .12s; }
.info .reveal:nth-child(3) { transition-delay: .24s; }
.info .reveal:nth-child(4) { transition-delay: .36s; }

@media (max-width: 800px) {
  .release-inner { grid-template-columns: 1fr; }
  .info { text-align: center; }
  .links { margin-inline: auto; width: 100%; }
  .credits { justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.sound {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 5;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: .5;
  cursor: pointer;
  transition: opacity .4s;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
.sound:hover, .sound:focus-visible { opacity: 1; outline: none; }
.sound b { font-weight: 400; margin-left: .6em; }
.sound[aria-pressed="true"] { opacity: .85; }

/* tap feedback: a very soft white glow (animated from synth.js) */
.tap {
  position: fixed;
  z-index: 4;
  width: 90px; height: 90px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .18) 35%, rgba(255, 255, 255, 0) 70%);
  filter: blur(6px);
}