/* Manrope (fonts/manrope.woff2, SIL Open Font License), served from the landing itself. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Colors come from each single's single.json (injected as :root in index.html).
   These defaults are ILESO's. */
:root {
  --ink-rgb: 251, 245, 242;
  --accent-rgb: 246, 211, 200;
  --glow-rgb: 255, 230, 220;
  --live-rgb: 255, 59, 78;
  --night-rgb: 12, 10, 16;
  --deep-rgb: 6, 5, 10;
  --panel-rgb: 40, 30, 36;
  --panel-deep-rgb: 16, 12, 18;
  --on-accent-rgb: 18, 12, 18;
  --cover-position-mobile: 50% 0%;

  --ink: rgb(var(--ink-rgb));
  --muted: rgba(var(--ink-rgb), 0.64);
  --soft: rgba(var(--ink-rgb), 0.42);
  --hair: rgba(var(--ink-rgb), 0.1);
  --hair-strong: rgba(var(--ink-rgb), 0.2);
  --surface: rgba(var(--ink-rgb), 0.055);
  --surface-hover: rgba(var(--ink-rgb), 0.1);
  --night: rgb(var(--night-rgb));
  --blush: rgb(var(--accent-rgb));
  --spotify: #1ed760;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --radius-panel: 8px;
  --radius-control: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--night);
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  font-family: "Manrope", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv01";
  color: var(--ink);
  background: var(--night);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Background: the cover, blurred, with grain ---------- */

.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--night);
}

.landing-bg img {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(48px) saturate(1.3) brightness(var(--bg-brightness, 0.24));
}

/* Film grain, kept very faint. */
.landing-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.07;
  mix-blend-mode: overlay;
}

.landing-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 25%, rgba(var(--deep-rgb), 0.8) 100%),
    linear-gradient(180deg, rgba(var(--deep-rgb), 0.15), rgba(var(--deep-rgb), 0.6));
}

/* Optional color wash over the blurred cover ("fondo_tinte" in single.json),
   so the page can lean on one color of the artwork instead of all of it. */
.landing-tint {
  position: absolute;
  inset: 0;
  background: rgb(var(--tint-rgb, 0, 0, 0));
  mix-blend-mode: color;
  opacity: var(--tint-opacity, 0);
}

/* Dannyverse sky (scripts/sky.js): above the vignette so the stars stay crisp. */
.landing-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  animation: fade 2.4s 0.4s var(--ease) both;
}

/* ---------- Page frame ---------- */

.landing-page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100svh;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(14px, 3svh, 30px) clamp(20px, 4vw, 52px);
}

/* Desktop: one centered column as wide as the cover plus the info, so the top bar
   and the footer line up with the artwork and the platform buttons. */
@media (min-width: 861px) {
  .landing-page {
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
  }
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* "DANNY FORNARIS" in the Dannyverse lettering (Avenir Next bold, tight), as an image so it looks the same on every phone. */
.landing-nav__wordmark {
  display: block;
  width: auto;
  height: 20px;
}

.share-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-control);
  background: rgba(var(--ink-rgb), 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.share-chip:hover {
  background: rgba(var(--ink-rgb), 0.12);
  border-color: rgba(var(--ink-rgb), 0.34);
}

.share-chip__icon {
  width: 16px;
  height: 16px;
}

/* ---------- Release: cover + body ---------- */

.release {
  display: grid;
  grid-template-columns: auto minmax(300px, 420px);
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6.5vw, 104px);
  min-height: 0;
}

.cover {
  position: relative;
  width: min(62svh, 44vw, 560px);
  perspective: 1400px;
}

/* Soft light spill from the artwork onto the page. */
.cover::before {
  content: "";
  position: absolute;
  inset: 6%;
  z-index: -1;
  /* background-image is set per single in index.html */
  background-position: center;
  background-size: cover;
  filter: blur(56px) saturate(1.5);
  opacity: calc(0.62 + var(--level, 0) * 0.5);
  transform: translateY(7%) scale(calc(1.02 + var(--level, 0) * 0.1));
}

.cover__art {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 80px -24px rgba(0, 0, 0, 0.75),
    0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

.cover__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgb(var(--panel-deep-rgb));
}

.cover__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--gx, 28%) var(--gy, 18%), rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.05), transparent 40%);
  mix-blend-mode: screen;
  transition: background-position 0.6s var(--ease);
}

/* Glints sit on the two hand-drawn sparkles in the artwork. */
.cover__glint {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  animation: glint 3.8s ease-in-out infinite;
  pointer-events: none;
}

/* Starlight twinkle: a soft round glow with thin rays that fade toward their tips. */
.cover__glint::before,
.cover__glint::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

.cover__glint::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, 0.55) 40%, rgba(220, 240, 255, 0) 72%);
  box-shadow: 0 0 10px 2px rgba(220, 240, 255, 0.35);
}

.cover__glint::after {
  background: radial-gradient(circle, #fff 0 8%, rgba(255, 255, 255, 0.7) 22%, rgba(255, 255, 255, 0) 62%);
  clip-path: polygon(50% 0, 53.5% 46.5%, 100% 50%, 53.5% 53.5%, 50% 100%, 46.5% 53.5%, 0 50%, 46.5% 46.5%);
}

.cover__glint--one { left: 20.3%; top: 38.8%; }
.cover__glint--two { left: 42.1%; top: 34.7%; animation-delay: 1.6s; }

@keyframes glint {
  0%, 100% { opacity: 0.15; transform: scale(0.45); }
  45% { opacity: 1; transform: scale(1); }
  62% { opacity: 0.65; transform: scale(0.8); }
}

.release__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.release__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(10px, 2svh, 18px);
  color: var(--blush);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.release__kicker::before {
  content: "\2726";
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
}

.release__kicker::after {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.6), transparent);
}

.release__title {
  /* The padding gives the write-on mask room for the lettering's overhang and
     shadow; the negative margins cancel it out in the layout. */
  --title-bleed: 24px;
  margin: calc(-1 * var(--title-bleed)) calc(-1 * var(--title-bleed)) calc(clamp(16px, 3svh, 28px) - var(--title-bleed));
  padding: var(--title-bleed);
  line-height: 0;
}

/* Text title, used when a single has no lettering image. */
.release__wordmark {
  display: block;
  margin-left: -0.04em;
  font-size: clamp(56px, 12svh, 132px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--glow-rgb), 0.18);
}

.release__wordmark small {
  display: block;
  margin-top: 0.5em;
  font-size: max(0.16em, 14px);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-shadow: none;
}

/* The hand lettering lifted straight from the cover. */
.release__lettering {
  display: block;
  width: auto;
  height: clamp(84px, 21svh, 184px);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-left: -3%;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(var(--glow-rgb), 0.18));
}

.player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  min-height: 72px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--hair);
}

.player__toggle {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgb(var(--on-accent-rgb));
  background: var(--ink);
  box-shadow: 0 0 18px -4px rgba(var(--glow-rgb), 0.28);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.player__toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 0 24px -4px rgba(var(--glow-rgb), 0.42);
}

.player__toggle:active { transform: scale(0.95); }

.player__icon {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.player__icon--play { margin-left: 2px; }

.player[data-state="idle"] .player__icon--play,
.player[data-state="paused"] .player__icon--play,
.player[data-state="playing"] .player__icon--pause,
.player[data-state="ended"] .player__icon--replay {
  opacity: 1;
  transform: none;
}

.player__spinner {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--on-accent-rgb), 0.2);
  border-top-color: rgb(var(--on-accent-rgb));
  border-radius: 50%;
  opacity: 0;
  animation: spin 0.8s linear infinite;
}

.player[data-state="loading"] .player__spinner { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Idle: a slow ring invites the first tap. */
.player[data-state="idle"] .player__toggle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb), 0.7);
  animation: ring 2.4s var(--ease) infinite;
  pointer-events: none;
}

@keyframes ring {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Radio tuner ---------- */

.radio {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.radio__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.radio__onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soft);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.radio__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.3);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.player[data-state="playing"] .radio__dot {
  background: rgb(var(--live-rgb));
  box-shadow: 0 0 10px rgb(var(--live-rgb));
  animation: onair 1.6s ease-in-out infinite;
}

.player[data-state="playing"] .radio__onair { color: var(--ink); }

@keyframes onair {
  50% { opacity: 0.45; }
}

.radio__station {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.radio__freq {
  flex: 0 0 auto;
  min-width: 3.1em;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.radio__freq::after {
  content: " FM";
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--soft);
}

.radio__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--blush);
  font-size: 0.8rem;
  font-weight: 600;
}

.player.is-tuning .radio__freq,
.player.is-tuning .radio__name {
  animation: tune-flicker 0.5s steps(5, end);
}

@keyframes tune-flicker {
  0%, 40%, 80% { opacity: 0.35; }
  20%, 60%, 100% { opacity: 1; }
}

/* Dial: fine ticks, two station marks, a needle. */
.radio__dial {
  position: relative;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--ink-rgb), 0.32) 0 1px, transparent 1px 10%) 0 100% / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--ink-rgb), 0.16) 0 1px, transparent 1px 2%) 0 100% / 100% 4px no-repeat;
  cursor: pointer;
}

.radio__mark {
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}

.radio__needle {
  position: absolute;
  top: -3px;
  bottom: 0;
  left: var(--needle, 7.8%);
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgb(var(--live-rgb));
  box-shadow: 0 0 10px rgba(var(--live-rgb), 0.9);
  transition: left 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}

.player__time {
  color: var(--soft);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

/* Station names sit under their marks on the dial: small outlined chips, so they read as tappable. */
.radio__presets {
  position: relative;
  height: 24px;
  margin-top: 4px;
}

.radio__preset {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px 0 7px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: var(--radius-control);
  color: var(--muted);
  background: rgba(var(--ink-rgb), 0.03);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

/* Small play triangle in front of each name. */
.radio__preset::before {
  content: "";
  width: 0;
  height: 0;
  border-block: 3.5px solid transparent;
  border-left: 5px solid currentColor;
  opacity: 0.7;
}

.radio__preset:first-child { transform: translateX(-22%); }

.radio__preset:hover {
  color: var(--ink);
  border-color: rgba(var(--ink-rgb), 0.4);
  background: rgba(var(--ink-rgb), 0.07);
}

.radio__preset.is-active {
  color: var(--ink);
  border-color: rgba(var(--live-rgb), 0.55);
  background: rgba(var(--live-rgb), 0.1);
}

.radio__preset.is-active::before {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--live-rgb));
  box-shadow: 0 0 6px rgb(var(--live-rgb));
  opacity: 1;
}

/* Nudge toward the next station while the first one plays. */
.player[data-state="playing"]:not(.has-seeked) .radio__preset.is-next {
  animation: preset-hint 2.8s 5s var(--ease) infinite;
}

@keyframes preset-hint {
  0%, 60%, 100% { border-color: rgba(var(--ink-rgb), 0.16); }
  20% { color: var(--ink); border-color: rgba(var(--accent-rgb), 0.75); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.3); }
}

.radio__dial { touch-action: none; cursor: grab; }
.radio__dial:active { cursor: grabbing; }
.player.is-dragging .radio__needle { transition: none; }

/* When the preview ends, point people to the full song. */
.platforms.is-calling .platform {
  animation: call 1.4s var(--ease) both;
}

.platforms.is-calling .platform:nth-child(2) { animation-delay: 0.06s; }
.platforms.is-calling .platform:nth-child(3) { animation-delay: 0.12s; }
.platforms.is-calling .platform:nth-child(4) { animation-delay: 0.18s; }
.platforms.is-calling .platform:nth-child(5) { animation-delay: 0.24s; }
.platforms.is-calling .platform:nth-child(6) { animation-delay: 0.3s; }

@keyframes call {
  0%, 100% { border-color: var(--hair); }
  35% { border-color: rgba(var(--glow-rgb), 0.55); background: rgba(var(--ink-rgb), 0.12); }
}

.release__label.is-calling { color: var(--blush); }

/* ---------- Cover play + audio reaction ---------- */

.cover__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  background: rgba(var(--night-rgb), 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.25s var(--ease);
}

.cover__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
  fill: currentColor;
}

.cover:hover .cover__play,
.cover__play:focus-visible {
  opacity: 1;
  transform: none;
}

.cover__play:hover { background: rgba(var(--night-rgb), 0.5); }

.cover.is-playing .cover__play {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.cover.is-playing .cover__art {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 80px -24px rgba(0, 0, 0, 0.75),
    0 0 calc(30px + var(--level, 0) * 70px) rgba(var(--glow-rgb), calc(var(--level, 0) * 0.35));
}

.cover.is-playing .cover__image {
  filter: brightness(calc(1 + var(--level, 0) * 0.1)) saturate(calc(1 + var(--level, 0) * 0.15));
}

.cover.is-playing .cover__glint {
  animation: none;
  opacity: calc(0.35 + var(--level, 0) * 0.65);
  transform: scale(calc(0.6 + var(--level, 0) * 1.1));
}

/* Radio glitch between the two moments. */
.cover.is-glitching .cover__image { animation: glitch-img 0.6s steps(1, end) both; }
.cover.is-glitching .cover__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(255, 0, 80, 0.18), transparent 35%, transparent 65%, rgba(0, 220, 255, 0.18));
  mix-blend-mode: screen;
  animation: glitch-scan 0.6s steps(1, end) both;
}
.cover.is-glitching ~ .release__body .release__lettering,
.cover.is-glitching ~ .release__body .release__wordmark { animation: glitch-type 0.6s steps(1, end) both; }

@keyframes glitch-img {
  0% { transform: translate(0); filter: none; clip-path: inset(0); }
  12% { transform: translate(-6px, 2px) skewX(6deg); filter: hue-rotate(-30deg) saturate(2) contrast(1.4); clip-path: inset(18% 0 52% 0); }
  24% { transform: translate(8px, -3px); filter: hue-rotate(40deg) contrast(1.6); clip-path: inset(62% 0 8% 0); }
  36% { transform: translate(-3px, 0) skewX(-10deg); filter: grayscale(1) contrast(2) brightness(1.3); clip-path: inset(0); }
  48% { transform: translate(5px, 1px); filter: saturate(3) hue-rotate(90deg); clip-path: inset(30% 0 30% 0); }
  62% { transform: translate(-2px, -1px); filter: contrast(1.3) brightness(0.8); clip-path: inset(0 0 70% 0); }
  76% { transform: translate(1px, 0); filter: none; clip-path: inset(0); }
  100% { transform: none; filter: none; clip-path: inset(0); }
}

@keyframes glitch-scan {
  0%, 100% { opacity: 0; transform: none; }
  10% { opacity: 1; transform: translateX(-4px); }
  30% { opacity: 0.6; transform: translateX(6px); }
  50% { opacity: 1; transform: translateX(-2px); }
  75% { opacity: 0.4; transform: none; }
}

@keyframes glitch-type {
  0%, 100% { transform: none; filter: none; }
  15% { transform: translate(-4px, 1px) skewX(10deg); filter: drop-shadow(3px 0 0 rgba(255, 0, 80, 0.8)) drop-shadow(-3px 0 0 rgba(0, 220, 255, 0.8)); }
  35% { transform: translate(5px, -2px); filter: drop-shadow(-4px 0 0 rgba(255, 0, 80, 0.8)) drop-shadow(4px 0 0 rgba(0, 220, 255, 0.8)); }
  55% { transform: translate(-2px, 0) skewX(-6deg); }
  75% { transform: translate(1px, 0); filter: none; }
}

.release__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(14px, 2.6svh, 24px) 0 10px;
  color: var(--soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.release__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}

/* ---------- Platforms ---------- */

.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.platform {
  --brand: #fff;
  --brand-rgb: 255, 255, 255;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: clamp(44px, 6.4svh, 54px);
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-control);
  background: rgba(var(--ink-rgb), 0.025);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.platform__logo {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: var(--brand);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.platform__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(var(--ink-rgb), 0.9);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.platform__arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--soft);
  opacity: 0.6;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}

.platform:hover {
  background: rgba(var(--brand-rgb), 0.06);
  border-color: rgba(var(--brand-rgb), 0.32);
}

.platform:hover .platform__logo {
  transform: scale(1.08);
}

.platform:hover .platform__arrow {
  opacity: 1;
  color: var(--ink);
  transform: translate(2px, -2px);
}

.platform:active {
  transform: scale(0.98);
}

.platform--spotify { --brand: var(--spotify); --brand-rgb: 30, 215, 96; }
.platform--apple { --brand: #fa2d48; --brand-rgb: 250, 45, 72; }
.platform--youtube { --brand: #ff0033; --brand-rgb: 255, 0, 51; }
.platform--amazon { --brand: #25d1da; --brand-rgb: 37, 209, 218; }
.platform--deezer { --brand: #a238ff; --brand-rgb: 162, 56, 255; }
.platform--tidal { --brand: #ffffff; --brand-rgb: 255, 255, 255; }

/* The platform this visitor most likely uses (set per device in landing.js). */
.platform.is-primary {
  border-color: rgba(var(--brand-rgb), 0.42);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.1), rgba(var(--brand-rgb), 0.02) 70%);
}

.platform.is-primary .platform__name { color: var(--ink); font-weight: 600; }

.platform.is-primary:hover {
  border-color: rgba(var(--brand-rgb), 0.6);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.16), rgba(var(--brand-rgb), 0.04) 70%);
}

/* ---------- Footer ---------- */

.landing-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.footer-link span {
  transition: transform 0.25s var(--ease);
}

.footer-link:hover { color: var(--ink); }
.footer-link:hover span { transform: translateX(-3px); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.8em;
  min-width: 0;
  color: var(--soft);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-legal__sep { opacity: 0.6; }

.footer-privacy {
  padding: 4px 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.footer-privacy:hover { color: var(--ink); }

/* "© 2026 Danny Fornaris | The Optix Music. All rights reserved." in the main site's style. */
.footer-label { white-space: nowrap; }

.footer-label__mark {
  margin-right: 0.2em;
  color: rgb(142, 240, 255);
  font-size: 1.15em;
}

/* Wide screens: the copyright line sits centered in the footer. */
@media (min-width: 1180px) {
  .landing-footer { position: relative; }

  .footer-legal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: nowrap;
  }
}

/* Phones: back link and socials on one row; copyright and privacy under them. */
@media (max-width: 860px) {
  .landing-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "link social"
      "legal legal";
    align-items: center;
    gap: 0 12px;
  }

  .footer-link { grid-area: link; }
  .footer-social { grid-area: social; }
  .footer-legal {
    grid-area: legal;
    display: block;
    font-size: 0.54rem;
    letter-spacing: 0.03em;
    line-height: 1.4;
  }
  .footer-label { white-space: normal; }
  .footer-legal__sep { margin: 0 0.6em; }
  .footer-privacy { padding: 0; }
}

@media (max-width: 400px) {
  .landing-footer { gap: 0 8px; }
  .radio__preset { gap: 4px; padding: 0 6px 0 5px; font-size: 0.6rem; letter-spacing: 0.03em; }
  .footer-legal { font-size: 0.5rem; letter-spacing: 0.01em; }
  .footer-legal__sep { margin: 0 0.4em; }
  .footer-social { gap: 0; }
  .footer-social a { width: 34px; height: 34px; }
}

.footer-social {
  display: flex;
  margin-left: auto;
  gap: 4px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.footer-social a:hover {
  color: var(--ink);
  background: var(--surface);
}

.footer-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ---------- Share sheet ---------- */

.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
}

.share-sheet[hidden] { display: none; }

.share-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--deep-rgb), 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade 0.3s var(--ease) both;
}

.share-sheet__panel {
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: min(560px, 100%);
  padding: 22px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, rgba(var(--panel-rgb), 0.96), rgba(var(--panel-deep-rgb), 0.97));
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  animation: sheet-in 0.45s var(--ease) both;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.share-sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.share-sheet__close:hover { color: var(--ink); background: var(--surface); }
.share-sheet__close svg { width: 18px; height: 18px; }

.share-sheet__preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px var(--hair), 0 20px 40px -12px rgba(0, 0, 0, 0.7);
}

.share-sheet__kicker {
  margin: 0 0 6px;
  color: var(--blush);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.share-sheet__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.share-sheet__hint {
  margin: 6px 0 18px;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.share-sheet__actions {
  display: grid;
  gap: 8px;
}

.share-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}

.share-action[hidden] { display: none; }
.share-action--instagram { text-decoration: none; }
.share-action--instagram svg { fill: currentColor; }
.share-action svg { width: 18px; height: 18px; flex: 0 0 auto; }
.share-action:hover { background: var(--surface-hover); border-color: var(--hair-strong); }
.share-action:active { transform: scale(0.98); }

.share-action--primary {
  border-color: transparent;
  color: rgb(var(--on-accent-rgb));
  background: var(--ink);
}

.share-action--primary:hover { background: #fff; border-color: transparent; }

/* Text-only sheet (privacy note). */
.share-sheet__panel--text {
  grid-template-columns: minmax(0, 1fr);
  width: min(460px, 100%);
}

.share-sheet__text {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.share-sheet__text + .share-sheet__text { margin-top: 8px; }

@media (max-width: 560px) {
  .share-sheet__panel--text { grid-template-columns: minmax(0, 1fr); }

  .share-sheet {
    place-items: end stretch;
    padding: 0;
  }

  .share-sheet__panel {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    border-bottom: 0;
    animation-name: sheet-up;
  }

  .share-sheet__title { font-size: 1.15rem; }
  .share-sheet__hint { margin-bottom: 12px; font-size: 0.76rem; }
  .share-action { min-height: 42px; padding: 0 12px; font-size: 0.84rem; }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-panel);
  color: var(--ink);
  background: rgba(var(--night-rgb), 0.88);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  font-size: 0.86rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Entrance ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

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

/* Opening: cover and kicker, then the title writes itself left to right,
   then the player and the platforms. About a second in all. */
.landing-nav,
.landing-footer { animation: fade 0.9s 0.5s var(--ease) both; }
.cover { animation: rise 1s var(--ease) both; }
.release__kicker { animation: rise 0.7s 0.1s var(--ease) both; }

/* On the h1 (not the image), so the glitch animation on the image can't restart it. */
.release__title {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: write 0.95s 0.2s cubic-bezier(0.55, 0.1, 0.35, 1) both;
}

@keyframes write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.player { animation: rise 0.7s 0.7s var(--ease) both; }
.release__label { animation: rise 0.7s 0.78s var(--ease) both; }
.platforms { animation: rise 0.7s 0.84s var(--ease) both; }

/* ---------- Tablet / mobile: artwork becomes the hero ---------- */

@media (max-width: 860px) {
  .landing-page {
    grid-template-rows: minmax(0, 1fr) auto;
    max-width: none;
    padding: 0;
  }

  .landing-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: calc(12px + env(safe-area-inset-top)) 14px 0;
  }

  .landing-nav__wordmark { height: 13px; }

  .release {
    grid-template-columns: 1fr;
    align-content: start;
    justify-content: stretch;
    gap: 0;
  }

  .cover {
    width: 100%;
    height: min(80vw, 48svh);
    perspective: none;
  }

  .cover::before { display: none; }

  .cover__art {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
  }

  .cover__art::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 120px;
    background: linear-gradient(180deg, rgba(var(--deep-rgb), 0.5), transparent);
    pointer-events: none;
  }

  .cover__image { object-position: var(--cover-position-mobile); }

  .cover__glint { display: none; }

  .cover__play {
    top: 44%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    opacity: 1;
    transform: none;
  }

  .cover__play svg { width: 24px; height: 24px; }

  .cover.is-playing .cover__image {
    filter: brightness(calc(0.95 + var(--level, 0) * 0.2)) saturate(calc(1 + var(--level, 0) * 0.2));
  }

  .player {
    min-height: 70px;
    padding: 10px;
    gap: 10px 12px;
  }

  .player__toggle { width: 44px; height: 44px; }

  .release__body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    margin: calc(-1 * clamp(64px, 12svh, 120px)) auto 0;
    padding: 0 16px;
    align-items: center;
  }

  .release__kicker {
    justify-content: center;
    margin-bottom: 4px;
  }

  .release__kicker::after { display: none; }

  .release__title {
    margin-bottom: calc(clamp(12px, 2.8svh, 28px) - var(--title-bleed));
  }

  .release__wordmark { margin: 0 auto; text-align: center; font-size: clamp(48px, 9svh, 96px); }

  .release__lettering {
    height: clamp(72px, 15svh, 140px);
    margin: 0 auto;
    object-position: center;
  }

  .player,
  .platforms {
    width: 100%;
  }

  .release__label {
    width: 100%;
    margin: clamp(12px, 3.2svh, 32px) 0 clamp(8px, 1.4svh, 12px);
  }

  .release__label::before {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hair);
  }

  .platforms { gap: 7px; }

  .platform {
    min-height: clamp(42px, 6.2svh, 56px);
    padding: 0 12px;
    gap: 10px;
  }

  .platform__logo { width: 18px; height: 18px; }
  .platform__name { font-size: 0.84rem; }
  .platform__arrow { display: none; }

  .landing-footer {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) 16px;
  }
}

/* Short phones (iPhone SE, small Android). */
@media (max-width: 860px) and (max-height: 700px) {
  .cover { height: min(80vw, 40svh); }

  .release__body { margin-top: calc(-1 * clamp(48px, 10svh, 80px)); }

  .release__lettering { height: clamp(60px, 13svh, 96px); }

  .release__wordmark { font-size: clamp(40px, 8svh, 64px); }

  .release__label { display: none; }

  .player { margin-top: 2px; min-height: 62px; padding-block: 7px; }

  .radio__dial { height: 10px; }

  .player__toggle { width: 40px; height: 40px; }

  .platforms { margin-top: 10px; gap: 6px; }

  .platform { min-height: 40px; }

  .landing-nav { padding-top: calc(8px + env(safe-area-inset-top)); }

  .share-chip { min-height: 34px; }

  .share-chip { padding: 0 12px; font-size: 0.76rem; }
}

/* Phones in landscape: side by side again. */
@media (max-height: 520px) and (orientation: landscape) {
  .landing-page {
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-width: none;
    padding: 10px 18px;
  }

  .landing-nav {
    position: static;
    padding: 0;
  }

  .landing-nav__brand,
  .share-chip { min-height: 32px; }

  .release {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    gap: 22px;
  }

  .cover {
    width: min(64svh, 38vw);
    height: auto;
  }

  .cover__art {
    aspect-ratio: 1;
    height: auto;
    border-radius: 3px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cover__art::before { display: none; }

  .cover__play { top: 50%; }

  .player { min-height: 54px; padding-block: 5px; }

  .radio__top { display: none; }

  .player__toggle { width: 38px; height: 38px; }

  .release__body {
    max-width: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
  }

  .release__kicker,
  .release__label { display: none; }

  .release__title { margin-bottom: calc(8px - var(--title-bleed)); }

  .release__wordmark { margin: 0; text-align: left; font-size: clamp(32px, 12svh, 56px); }
  .release__wordmark small { display: none; }

  .release__lettering {
    height: clamp(48px, 17svh, 84px);
    margin: 0;
    object-position: left center;
  }

  .platforms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
  }

  .platform { min-height: 34px; padding: 0 9px; gap: 8px; }
  .platform__logo { width: 15px; height: 15px; }
  .platform__name { font-size: 0.74rem; }

  .landing-footer {
    max-width: none;
    padding: 0;
    min-height: 32px;
  }
}

/* Pointer tilt only where there is a real mouse. */
@media (hover: none) {
  .platform:hover { background: rgba(var(--ink-rgb), 0.025); border-color: var(--hair); }
  .platform.is-primary:hover {
    border-color: rgba(var(--brand-rgb), 0.42);
    background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.1), rgba(var(--brand-rgb), 0.02) 70%);
  }
}

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

@media (max-width: 340px) {
  .radio__preset:not(.is-active)::before { display: none; }
}