/**
 * Cassette Page Styles
 * Uses centralized design system with page-specific overrides
 *
 * ITCSS ARCHITECTURE (page-level layers):
 * 1. SETTINGS    - Page-specific variables (extends design-system.css)
 * 2. ELEMENTS    - Base HTML element styles
 * 3. OBJECTS     - Layout patterns (page-grid)
 * 4. COMPONENTS  - UI components (cassette, tracklist, hero, etc.)
 * 5. OVERRIDES   - Media queries, state classes, accessibility
 *
 * BEM NAMING:
 * - Blocks: .cassette, .tracklist, .hero, .transport, .volume
 * - Elements: .cassette__window, .tracklist__heading
 * - Modifiers: .hero__btn--bandcamp, .hero__btn--streaming, .track--empty
 * - States: .is-playing, .is-muted (JS-controlled)
 *
 * SPACING CONVENTIONS:
 * - All spacing uses design system tokens (--space-*, --gap-*, --pad-*, --margin-*)
 * - Container queries (cqw) are used within .cassette for responsive scaling
 */

/* ==========================================================================
   SETTINGS LAYER - Page-Specific Variables
   ========================================================================== */

:root {
  /* Page-specific color overrides - Neumorphic */
  --bg: var(--neu-bg);
  --accent: var(--color-purple-primary);
  --accent-soft: var(--color-purple-secondary);
  --glow: var(--glow-purple);
  --text: var(--color-text-secondary);
  --muted: var(--color-muted);
  --card: var(--neu-surface);
}

/* ==========================================================================
   OBJECTS LAYER - Layout Patterns
   ========================================================================== */

main.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
}

/* ==========================================================================
   COMPONENTS LAYER - UI Components
   ========================================================================== */

/* --------------------------------------------
   Header Component (cassette-specific overrides)
   -------------------------------------------- */

.header {
  margin-bottom: calc(-1 * var(--gap-md));
}

.hero__text {
  order: 1;
}

.player {
  order: 3;
}

.tracklist {
  order: 4;
}

.studio-banner {
  order: 5;
}

h1 {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
}

h2 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__description {
  color: var(--muted);
  max-width: var(--max-width-narrow);
  margin: 0 auto var(--margin-md) 0;
  line-height: 1.6;
}

.hero__description a {
  color: var(--accent);
  text-decoration: none;
}

.hero__description a:hover {
  text-decoration: underline;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  margin-top: var(--margin-sm);
}

.hero__actions-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
}

/* Uses .neu-btn utility class in HTML */
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 1rem;
  font-family: var(--body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 400px) {
  .hero__btn {
    gap: 0.3em;
    padding: 0.4rem 0.75rem;
    font-size: var(--text-2xs);
  }
}

.hero__btn .material-symbols-outlined {
  font-size: 1.25em;
}

.hero__btn:hover {
  transform: translateY(-1px);
}

.hero__btn:active {
  transform: translateY(0);
}

.hero__btn--bandcamp {
  width: 100%;
  justify-content: center;
  padding: var(--pad-sm) var(--pad-lg);
  border-radius: var(--radius-xl);
  background: var(--accent);
  color: var(--color-white);
  font-size: var(--text-sm);
  --neu-glow: 0 0 20px var(--glow-purple-md);
}

.hero__btn--bandcamp:hover {
  --neu-glow: 0 0 30px var(--glow-purple-lg);
  transform: translateY(-2px);
}

.hero__btn--bandcamp:active {
  --neu-glow: 0 0 15px var(--glow-purple-md);
}

/* Glow states for Bandcamp CTA - neumorphic pulse */
@keyframes bandcampGlowPulse {
  0%,
  100% {
    box-shadow:
      var(--neu-raised),
      var(--neu-edge-highlight),
      0 0 25px var(--glow-cassette-playing),
      0 0 50px var(--glow-purple-subtle);
  }

  50% {
    box-shadow:
      var(--neu-raised),
      var(--neu-edge-highlight),
      0 0 40px var(--glow-purple-lg),
      0 0 80px var(--glow-purple-sm);
  }
}

/* Playing state - subtle ambient glow */
.hero__btn--bandcamp.is-playing {
  animation: bandcampGlowPulse 4s ease-in-out infinite;
}

.hero__btn-logo {
  height: 1.75em;
  width: auto;
}

.hero__btn--streaming {
  background: var(--color-blue-primary);
  color: var(--color-white);
  --neu-glow: 0 0 15px var(--glow-blue-sm);
}

.hero__btn--streaming:hover {
  --neu-glow: 0 0 25px var(--glow-blue-lg);
}

.hero__btn--donate {
  background: var(--color-red-primary);
  color: var(--color-white);
  --neu-glow: 0 0 15px var(--glow-red-sm);
}

.hero__btn--donate:hover {
  --neu-glow: 0 0 25px var(--glow-red-lg);
}

.hero__btn--share {
  color: var(--muted);
}

.hero__btn--share:hover {
  color: var(--text);
  --neu-glow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.hero__btn--share.is-copied {
  background: var(--color-success);
  color: var(--color-bg-panel);
  --neu-glow: 0 0 15px var(--glow-success);
}

/* --------------------------------------------
   Album Card Component (Bandcamp Conversion)
   -------------------------------------------- */

/* Uses .neu-card utility class in HTML */
.album-card {
  position: relative;
  order: 2;
  align-self: center;
  padding: var(--pad-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.album-card__artwork {
  position: relative;
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.album-card__artwork img {
  width: 100%;
  display: block;
  border-radius: var(--radius-xl);
}

.album-card__artwork:hover {
  box-shadow: 0 0 20px var(--glow-purple-sm);
}

.album-card__artwork::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 70%,
    transparent 100%
  );
  background-size: 250% 250%;
  background-position: calc(50% + var(--tilt-x, 0) * 80%) calc(50% + var(--tilt-y, 0) * 80%);
  transition: background-position 0.15s ease-out;
  opacity: 0;
}

@media (hover: hover) {
  .album-card__artwork::after {
    opacity: 0.3;
  }

  .album-card__artwork:hover::after {
    opacity: 1;
    transition:
      background-position 0.15s ease-out,
      opacity 0.3s ease-out;
  }
}

@media (hover: hover) {
  .album-card__artwork {
    transform-style: preserve-3d;
  }
}

/* Mobile: gentle rocking animation on touch devices */
@media (hover: none) {
  .album-card__artwork {
    animation: album-tilt-rock 6s ease-in-out infinite;
    transform-style: preserve-3d;
  }
}

@keyframes album-tilt-rock {
  0%,
  100% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(600px) rotateX(1.5deg) rotateY(2deg);
  }
  50% {
    transform: perspective(600px) rotateX(-1deg) rotateY(-1.5deg);
  }
  75% {
    transform: perspective(600px) rotateX(0.5deg) rotateY(-2deg);
  }
}

/* --------------------------------------------
   Player Component (cassette + controls wrapper)
   -------------------------------------------- */

.player {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  width: 100%;
  margin: 0;
}

/* --------------------------------------------
   Cassette Component
   Uses container query units (cqw) for internal scaling
   -------------------------------------------- */

/* Uses .neu-card utility class in HTML */
.cassette {
  --glow-intensity: 0;
  padding: 3cqw;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 158 / 100;
  min-width: 0;
  container-type: inline-size;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);

  /* FROSTED GLASS SURFACE
     Semi-transparent gradient creates depth and allows "light" to show through */
  background: linear-gradient(
    145deg,
    rgba(55, 48, 80, 0.92) 0%,
    rgba(45, 40, 65, 0.85) 50%,
    rgba(52, 45, 75, 0.9) 100%
  );

  /* GLASS EDGE HIGHLIGHT
     Subtle border gives glass edge definition */
  border: 1px solid rgba(180, 140, 220, 0.1);

  /* NEUMORPHIC + LIGHT FROM UNDERNEATH */
  box-shadow:
    /* Neumorphic raised shadows */
    var(--neu-raised),
    var(--neu-edge-highlight),
    /* OUTER GLOW - light escaping from underneath the glass edges */ 0 0 25px
      var(--glow-cassette-ambient),
    0 0 50px var(--glow-cassette-ambient-soft),
    0 0 80px var(--glow-purple-xs),
    /* INNER GLOW - light diffusing UP through the glass surface */ inset 0 0 40px
      var(--glow-cassette-ambient-soft),
    inset 0 0 80px var(--glow-purple-xs);
}

/* Subtle inner highlight for depth */
.cassette::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  pointer-events: none;
}

/* LIGHT HOTSPOT - where the light source concentrates */
.cassette::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Elliptical gradient - brightest at center, positioned slightly below center
     like a light source underneath */
  background: radial-gradient(
    ellipse 70% 55% at 50% 55%,
    rgba(160, 120, 220, 0.12) 0%,
    rgba(140, 100, 200, 0.06) 35%,
    rgba(120, 80, 180, 0.02) 60%,
    transparent 80%
  );
  opacity: 1;
  pointer-events: none;
  transition:
    opacity var(--transition-slower),
    background var(--transition-slower);
}

.cassette.is-playing {
  --glow-intensity: 1;

  /* Light intensifies - shifts toward magenta */
  box-shadow:
    var(--neu-raised),
    var(--neu-edge-highlight),
    /* INTENSIFIED OUTER GLOW - magenta shift */ 0 0 35px var(--glow-cassette-playing),
    0 0 70px var(--glow-cassette-playing-soft),
    0 0 120px var(--glow-purple-xs),
    /* INTENSIFIED INNER GLOW */ inset 0 0 50px var(--glow-cassette-playing-soft),
    inset 0 0 100px var(--glow-purple-xs);
}

.cassette.is-playing::after {
  /* Brighter, more magenta hotspot */
  background: radial-gradient(
    ellipse 75% 60% at 50% 55%,
    rgba(220, 150, 255, 0.15) 0%,
    rgba(200, 130, 240, 0.08) 35%,
    rgba(180, 110, 220, 0.03) 60%,
    transparent 80%
  );
  animation: cassetteGlowPulse 6s ease-in-out infinite;
}

/* ============================================
   CASSETTE INTERNAL ELEMENTS
   Using container query units (cqw) for responsive scaling
   ============================================ */

.cassette__label {
  position: absolute;
  top: 10cqw;
  left: 6cqw;
  right: 6cqw;
  z-index: var(--z-overlay);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 2.5cqw;
  font-family: var(--body);
  padding: 1.5cqw 2.5cqw;
  border-radius: var(--radius-lg);
  background: var(--neu-surface);
  border: none;
  box-shadow: var(--neu-inset-sm);
  gap: 2cqw;
  flex-wrap: wrap;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.cassette__reels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
  flex-wrap: nowrap;
  width: 100%;
  padding-inline: 1cqw;
  flex-grow: 1;
  flex-shrink: 0;
}

.reel {
  flex: 0 0 22cqw;
  width: 22cqw;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  /* Deep inset well for the reel */
  background: var(--neu-bg-dark);
  box-shadow:
    var(--neu-inset-lg),
    0 0 calc(0px + 40px * var(--glow-intensity, 0)) var(--glow-purple);
  position: relative;
  display: grid;
  place-items: center;
  transition: box-shadow var(--transition-slow);
}

/* Playing state - glow via box-shadow */
.cassette.is-playing .reel {
  box-shadow:
    var(--neu-inset-lg),
    0 0 30px var(--glow-cassette-playing),
    inset 0 0 20px var(--glow-purple-xs);
}

/* Gear - raised circular element inside the inset reel well */
.reel__gear {
  width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--neu-surface);
  /* Raised neumorphic effect */
  box-shadow: var(--neu-raised-sm);
}

/* Center hub of the gear */
.reel__gear::before {
  content: '';
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--neu-bg-dark);
  box-shadow: var(--neu-inset-sm);
}

/* 6 gear teeth positioned around the gear */
.gear__tooth {
  position: absolute;
  width: 18%;
  height: 18%;
  top: 50%;
  left: 50%;
  transform-origin: center;
  background: var(--neu-surface-raised);
  border-radius: 2px;
  box-shadow: 1px 1px 2px var(--neu-shadow-dark);
}

.gear__tooth:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-210%);
}

.gear__tooth:nth-child(2) {
  transform: translate(-50%, -50%) rotate(60deg) translateY(-210%);
}

.gear__tooth:nth-child(3) {
  transform: translate(-50%, -50%) rotate(120deg) translateY(-210%);
}

.gear__tooth:nth-child(4) {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-210%);
}

.gear__tooth:nth-child(5) {
  transform: translate(-50%, -50%) rotate(240deg) translateY(-210%);
}

.gear__tooth:nth-child(6) {
  transform: translate(-50%, -50%) rotate(300deg) translateY(-210%);
}

/* ============================================
   CASSETTE WINDOW (BEM: cassette__window)
   ============================================ */

.cassette__window {
  height: 22cqw;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--neu-bg-dark);
  border: none;
  /* Deep inset for the window */
  box-shadow: var(--neu-inset);
  position: relative;
  overflow: hidden;
  padding: 2cqw;
  display: grid;
  gap: 1cqw;
  align-items: center;
  justify-items: stretch;
}

.cassette__track-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cassette__track {
  position: relative;
  height: 3cqw;
  width: 100%;
  border-radius: var(--radius-full);
  margin: 0 auto;
  overflow: hidden;
  background: var(--neu-bg-dark);
  box-shadow: var(--neu-inset-sm);
}

.cassette__scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised);
  cursor: pointer;
  touch-action: none;
}

.cassette__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.cassette__scrub::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: transparent;
}

.cassette__scrub::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.cassette__scrub::-moz-range-track {
  width: 100%;
  height: 100%;
  background: transparent;
}

.cassette__timecodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  font-family: var(--mono);
  font-size: 2.5cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.cassette__track-label {
  justify-self: center;
  width: 100%;
  text-align: center;
  letter-spacing: 0.12em;
  color: var(--text);
  text-transform: uppercase;
  font-size: 2.5cqw;
  font-family: var(--body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================
   CASSETTE TRAPEZOID
   ============================================ */

.cassette__trapezoid {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: 22cqw;
  z-index: var(--z-dropdown);
  /* Decorative only - don't capture touch events over slider */
  pointer-events: none;

  /* Rounded corners on the base rectangle */
  border-radius: 1.2cqw;

  /* CSS 3D transform: perspective + rotateX creates trapezoid effect
     - transform-origin at bottom keeps bottom edge in place
     - rotateX tilts top edge away, making it appear narrower */
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transform: translateX(-50%) perspective(180px) rotateX(30deg);

  /* Smoked glass with subtle top highlight for depth */
  background:
    linear-gradient(180deg, rgba(80, 70, 110, 0.12) 0%, transparent 40%), rgba(37, 37, 54, 0.92);
  /* Neumorphic inset shadow */
  box-shadow: var(--neu-inset);
}

/* Trapezoid cutout holes - now positioned relative to cassette, not trapezoid */
.cassette__hole {
  position: absolute;
  background: rgba(5, 5, 12, 1);
  box-shadow:
    var(--neu-inset-sm),
    inset 0 0 3px rgba(0, 0, 0, 0.6);
  border: none;
  z-index: calc(var(--z-dropdown) + 1);
}

.cassette__hole--circle-left,
.cassette__hole--circle-right {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  bottom: 4cqw;
}

.cassette__hole--circle-left {
  left: 34%;
}

.cassette__hole--circle-right {
  right: 34%;
}

.cassette__hole--square-left,
.cassette__hole--square-right {
  width: 3.3cqw;
  height: 2.1cqw;
  border-radius: 0.75cqw;
  bottom: 10cqw;
  background: radial-gradient(ellipse at 30% 30%, rgba(20, 22, 30, 1), rgba(5, 6, 8, 1));
}

.cassette__hole--square-left {
  left: 38%;
}

.cassette__hole--square-right {
  right: 38%;
}

/* ============================================
   SCREWS
   ============================================ */

.screw {
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: var(--neu-surface-raised);
  border: none;
  /* Reduced shadow for subtle screw appearance */
  box-shadow:
    1.5px 1.5px 3px var(--neu-shadow-dark),
    -1.5px -1.5px 3px var(--neu-shadow-light);
  position: relative;
  display: grid;
  place-items: center;
}

/* Plus head (Phillips) - inset cross */
.screw::before,
.screw::after {
  content: '';
  position: absolute;
  background: var(--neu-bg-dark);
  border-radius: 1px;
}

.screw::before {
  width: 50%;
  height: 10%;
  /* Neumorphic inset - dark top-left, light bottom-right */
  box-shadow:
    inset 1px 1px 1px var(--neu-shadow-dark),
    inset -1px -1px 1px var(--neu-shadow-light);
}

.screw::after {
  width: 10%;
  height: 50%;
  /* Neumorphic inset - dark top-left, light bottom-right */
  box-shadow:
    inset 1px 1px 1px var(--neu-shadow-dark),
    inset -1px -1px 1px var(--neu-shadow-light);
}

.cassette__trapezoid .screw {
  width: 2.5cqw;
  height: 2.5cqw;
  margin-top: 1.5cqw;
}

.screw--top-left {
  position: absolute;
  top: 4cqw;
  left: 4cqw;
  z-index: var(--z-overlay);
}

.screw--top-right {
  position: absolute;
  top: 4cqw;
  right: 4cqw;
  z-index: var(--z-overlay);
}

.screw--bottom-left {
  position: absolute;
  bottom: 4cqw;
  left: 4cqw;
  z-index: var(--z-overlay);
}

.screw--bottom-right {
  position: absolute;
  bottom: 4cqw;
  right: 4cqw;
  z-index: var(--z-overlay);
}

/* ============================================
   CONTROLS SECTION
   ============================================ */

/* Uses .neu-inset utility class in HTML */
.controls {
  display: flex;
  gap: var(--gap-lg);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  padding: var(--pad-md) var(--pad-xl);
}

/* ============================================
   TRANSPORT BUTTONS
   ============================================ */

.transport {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* Uses .neu-btn utility class in HTML */
.transport__btn {
  width: 3.5rem;
  height: 3.5rem;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--muted);
  transition:
    box-shadow var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
  position: relative;
  overflow: visible;
  /* Prevent iOS touch callout on long press */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Play button is larger - purple only when active */
.transport__btn#playBtn {
  width: 4.5rem;
  height: 4.5rem;
}

.transport__btn#playBtn .material-symbols-outlined {
  font-size: 2rem;
}

.transport__btn:not(:last-child)::after {
  display: none;
}

/* Only apply hover effects on devices that support hover (not touch) */
@media (hover: hover) {
  .transport__btn:hover {
    --neu-glow: 0 0 15px var(--glow-purple-sm);
    color: var(--accent);
    transform: translateY(-1px);
  }

  .transport__btn#playBtn:hover {
    --neu-glow: 0 0 30px var(--glow-purple-lg);
    transform: translateY(-2px);
  }
}

/* State: active (toggle buttons like play when playing) */
.transport__btn.is-active {
  --neu-glow: 0 0 25px var(--glow-purple-lg);
  background: var(--accent);
  color: var(--color-white);
}

/* Play button active state needs higher specificity */
.transport__btn#playBtn.is-active {
  --neu-glow: 0 0 35px var(--glow-purple-xl);
}

/* Pressed state - inset (handled by .neu-btn:active) */
.transport__btn:active {
  transform: translateY(0);
}

.transport__btn#playBtn:active {
  box-shadow:
    var(--neu-pressed),
    0 0 15px var(--glow-purple-md);
}

/* Ripple effect removed - neumorphic uses shadow transitions */
.transport__btn::before {
  display: none;
}

.transport__btn.ripple-active::before {
  display: none;
}

.transport__btn > * {
  position: relative;
  z-index: var(--z-raised);
}

.transport__btn .material-symbols-outlined {
  font-size: 1.5rem;
}

/* ============================================
   VOLUME CONTROL
   ============================================ */

.volume {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.volume__icon {
  width: 2.75rem;
  /* 44px - minimum touch target size */
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: var(--neu-surface);
  /* Neumorphic raised button */
  box-shadow: var(--neu-raised-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition:
    box-shadow var(--transition-fast),
    color var(--transition-fast);
  /* Prevent iOS touch callout on long press */
  -webkit-touch-callout: none;
}

.volume__icon .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--text);
}

.volume__bar {
  position: relative;
  width: 11.875rem;
  /* 190px */
}

.volume__icon:hover,
.volume__icon:focus-visible {
  box-shadow:
    var(--neu-raised),
    0 0 15px var(--glow-purple-sm);
  outline: none;
}

.volume__icon:active {
  box-shadow: var(--neu-pressed);
}

.volume.is-muted .volume__icon {
  box-shadow: var(--neu-inset-sm);
}

.volume.is-muted .material-symbols-outlined {
  color: var(--muted);
  opacity: 0.6;
}

/* ============================================
   GLOW TRACK (Volume Bar)
   ============================================ */

.glow-track {
  position: relative;
  height: 0.75rem;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--neu-bg-dark);
  border: none;
  /* Inset track */
  box-shadow: var(--neu-inset-sm);
  overflow: hidden;
}

.glow-track__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--accent);
  /* Subtle glow on the fill */
  box-shadow: 0 0 10px var(--glow-purple);
}

.glow-track__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: var(--z-raised);
  touch-action: none;
}

.glow-track__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.glow-track__input::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: transparent;
}

.glow-track__input::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.glow-track__input::-moz-range-track {
  width: 100%;
  height: 100%;
  background: transparent;
}

/* State: muted */
.volume.is-muted .glow-track {
  opacity: 0.5;
}

.volume.is-muted .glow-track__fill {
  background: var(--muted);
  box-shadow: none;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  border: none;
  padding: var(--pad-sm) var(--pad-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  color: var(--color-white);
  background: var(--accent);
  /* Neumorphic raised with accent glow */
  box-shadow:
    var(--neu-raised),
    0 0 20px var(--glow-purple-md);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.btn:hover {
  box-shadow:
    var(--neu-raised),
    0 0 30px var(--glow-purple-lg);
  transform: translateY(-2px);
}

.btn:active,
.btn.is-pressed {
  transform: translateY(0);
  box-shadow:
    var(--neu-pressed),
    0 0 15px var(--glow-purple-md);
}

.btn.is-active {
  box-shadow:
    var(--neu-raised),
    0 0 35px var(--glow-purple-lg),
    0 0 60px var(--glow-purple-sm);
}

/* ============================================
   STUDIO BANNER
   Inset well with time-based glow, breathing
   aura, and ambient page wash.

   CONFIG: Tune --_banner-* properties below to
   adjust effects. Inspect .studio-banner in
   DevTools and edit values live.
   ============================================ */

.studio-banner {
  /* === GLOW CONFIG ================================
     Sizes & timings: edit values directly.
     Color refs: point to design-system glow tokens.
     Day overrides swap all color refs to red.
     ================================================ */
  --_banner-glow-color: var(--color-blue-primary);
  --_banner-border: var(--glow-blue-sm);
  --_banner-aura: var(--glow-blue-subtle);
  --_banner-aura-strong: var(--glow-blue-md);
  --_banner-hover-border: var(--glow-blue-lg);
  --_banner-hover-aura: var(--glow-blue-sm);
  --_banner-aura-spread: 45px;
  --_banner-aura-hover-spread: 65px;
  --_banner-pulse-from: 35px;
  --_banner-pulse-to: 55px;
  --_banner-pulse-speed: 3.5s;
  --_banner-wash-width: 140%;
  --_banner-wash-height: 200px;
  --_banner-wash-opacity: 0.07;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--pad-lg);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-xl);
  background: #0c0c16;
  box-shadow: var(--neu-inset);
  border: 1px solid var(--_banner-border);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Day: swap color refs to red */
.studio-banner[data-time='day'] {
  --_banner-glow-color: var(--color-red-primary);
  --_banner-border: var(--glow-red-sm);
  --_banner-aura: var(--glow-red-subtle);
  --_banner-aura-strong: var(--glow-red-md);
  --_banner-hover-border: var(--glow-red-lg);
  --_banner-hover-aura: var(--glow-red-sm);
}

/* Ambient page wash — colored radiance around the banner */
.studio-banner::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--_banner-wash-width);
  height: var(--_banner-wash-height);
  background: radial-gradient(ellipse at center, var(--_banner-glow-color), transparent 70%);
  opacity: var(--_banner-wash-opacity);
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: -1;
}

/* Breathing aura — animated glow halo */
.studio-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 var(--_banner-aura-spread) var(--_banner-aura);
  animation: banner-breathe var(--_banner-pulse-speed) ease-in-out infinite;
  pointer-events: none;
}

@keyframes banner-breathe {
  0%,
  100% {
    box-shadow: 0 0 var(--_banner-pulse-from) var(--_banner-aura);
  }

  50% {
    box-shadow: 0 0 var(--_banner-pulse-to) var(--_banner-aura-strong);
  }
}

/* Hover: intensify border + add glow layer on element */
@media (hover: hover) {
  .studio-banner:hover {
    border-color: var(--_banner-hover-border);
    box-shadow:
      var(--neu-inset),
      0 0 var(--_banner-aura-hover-spread) var(--_banner-hover-aura);
  }

  .studio-banner:hover::before {
    opacity: calc(var(--_banner-wash-opacity) * 2);
  }
}

.studio-banner__tagline {
  font-family: var(--body);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.studio-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.studio-banner[data-time='day'] .studio-banner__cta {
  color: var(--color-red-primary);
  text-shadow:
    0 0 8px var(--glow-red-sm),
    0 0 20px var(--glow-red-xs);
}

.studio-banner[data-time='night'] .studio-banner__cta {
  color: var(--color-blue-primary);
  text-shadow:
    0 0 8px var(--glow-blue-sm),
    0 0 20px var(--glow-blue-xs);
}

.studio-banner__arrow {
  font-size: 1.2em;
  transition: transform var(--transition-base);
}

@media (hover: hover) {
  .studio-banner:hover .studio-banner__arrow {
    transform: translateX(3px);
  }
}

/* ============================================
   TRACKLIST
   ============================================ */

/* Uses .neu-inset utility class in HTML */
.tracklist {
  padding: var(--pad-xl);
}

.tracklist__heading {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: var(--margin-md);
  margin-top: var(--margin-xl);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.tracklist__heading:first-child {
  margin-top: 0;
}

.tracklist__status {
  margin-top: var(--margin-sm);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tracklist__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-top: var(--margin-md);
}

.track {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  gap: var(--gap-sm);
  align-items: center;
  padding: var(--pad-sm) var(--pad-md);
  border-radius: var(--radius-xl);
  background: var(--neu-surface);
  border: none;
  /* Subtle raised effect */
  box-shadow: var(--neu-raised-sm);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
  cursor: pointer;
  font-size: var(--text-sm);
  /* Prevent iOS touch callout on long press */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.track__number {
  font-family: var(--mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--muted);
}

.track__title {
  font-size: var(--text-sm);
}

.track__duration {
  font-family: var(--mono);
  text-align: right;
  font-size: var(--text-sm);
  color: var(--muted);
}

.track--empty {
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

/* State: hover */
.track:hover {
  box-shadow:
    var(--neu-raised),
    0 0 15px var(--glow-purple-xs);
  transform: translateY(-1px);
}

/* State: playing (highlighted track) */
.track.is-playing {
  background: var(--neu-surface-raised);
  box-shadow:
    var(--neu-raised),
    0 0 20px var(--glow-purple-sm),
    inset 0 0 0 1px var(--glow-purple-md);
}

.track.is-playing:hover {
  box-shadow:
    var(--neu-raised),
    0 0 25px var(--glow-cassette-playing),
    inset 0 0 0 1px var(--glow-purple);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes cassetteGlowPulse {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }

  50% {
    filter: brightness(1.15);
    transform: scale(1.02);
  }
}

@keyframes ripple-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    width: 8.75rem;
    height: 8.75rem;
    opacity: 0.7;
  }
}

.spin {
  animation: spin 2.4s linear infinite;
  animation-play-state: paused;
}

.spin.is-running.spin-fast {
  animation-duration: 0.9s;
}

.spin.is-running.spin-reverse {
  animation-direction: reverse;
}

.spin.is-running {
  animation-play-state: running;
}

/* During scrubbing, disable CSS animation so inline transform takes over */
.spin.scrubbing {
  animation: none;
}

@keyframes spin {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

/* ==========================================================================
   OVERRIDES LAYER - Media Queries, States, Accessibility
   ========================================================================== */

/* --------------------------------------------
   Responsive Breakpoints
   -------------------------------------------- */

/* Mobile - Reduce reel size for better mobile UX */
@media (max-width: 47.9375rem) {
  /* 767px */
  .reel {
    flex: 0 0 18cqw;
    width: 18cqw;
  }

  .cassette__reels {
    gap: 3cqw;
    justify-content: center;
  }

  .cassette__window {
    max-width: 52cqw;
  }

  /* Adjust trapezoid hole positions for better alignment on mobile
     All holes use bottom-based positioning to stay constrained within trapezoid */
  .cassette__hole--circle-left,
  .cassette__hole--circle-right {
    bottom: 3cqw;
  }

  .cassette__hole--square-left,
  .cassette__hole--square-right {
    bottom: 9cqw;
  }

  .transport__btn {
    width: 3rem;
    height: 3rem;
  }

  .transport__btn#playBtn {
    width: 4rem;
    height: 4rem;
  }
}

/* 768px - iPad portrait, tablet - 2x2 grid */
@media (min-width: 48rem) {
  main.page-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .hero__text {
    order: 1;
  }

  .album-card {
    order: 2;
    justify-self: end;
  }

  .player {
    order: 3;
  }

  .tracklist {
    order: 4;
  }

  .studio-banner {
    grid-column: 1 / -1;
  }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   Respects user's motion preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none !important;
  }

  .cassette::after {
    animation: none !important;
  }

  .studio-banner::after {
    animation: none !important;
  }

  .album-card__artwork {
    animation: none !important;
    transform: none !important;
  }

  .album-card__artwork::after {
    display: none !important;
  }
}

/* ============================================
   ACCESSIBILITY - Focus Indicators
   Visible focus states for keyboard navigation
   ============================================ */

/* Transport button focus */
.transport__btn:focus-visible {
  outline: none;
  box-shadow:
    var(--neu-raised),
    0 0 0 3px var(--accent),
    0 0 20px var(--glow-purple);
}

/* Track list item focus */
.track:focus-visible {
  outline: none;
  box-shadow:
    var(--neu-raised),
    0 0 0 2px var(--accent),
    0 0 15px var(--glow-purple-md);
}

/* Slider focus */
.cassette__scrub:focus-visible,
.glow-track__input:focus-visible {
  outline: none;
}

.cassette__track-wrapper:has(.cassette__scrub:focus-visible) .glow-track__fill {
  box-shadow: 0 0 1.5rem var(--glow-purple-xl);
}

/* Hero CTA button focus */
.hero__btn--bandcamp:focus-visible,
.hero__btn--streaming:focus-visible {
  outline: none;
  box-shadow:
    var(--neu-raised),
    var(--neu-edge-highlight),
    0 0 0 3px var(--color-white),
    0 0 25px var(--glow-purple-lg);
}

/* Album card artwork focus */
.album-card__artwork:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent);
}

/* Studio banner focus */
.studio-banner:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    var(--neu-inset),
    0 0 0 3px var(--accent),
    0 0 15px var(--glow-purple-md);
}

.studio-banner:focus-visible::after {
  animation: none;
  box-shadow: 0 0 25px var(--glow-purple-sm);
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   Optimize for touch-only devices
   ============================================ */

/* Touch device optimizations */
@media (pointer: coarse) {
  .transport__btn,
  .volume__icon,
  .cassette__scrub,
  .glow-track__input,
  .track,
  .btn {
    cursor: default;
  }

  /* Ensure minimum touch target on tracks */
  .track {
    min-height: 2.75rem;
    /* 44px */
  }
}

/* ============================================
   SAFARI/WEBKIT SPECIFIC FIXES
   ============================================ */

/* Legacy support - neumorphic doesn't need backdrop-filter fallbacks */