/* =============================================================
   Lightbrush Studio Homepage — styles.css
   No Tailwind. No CSS framework. Hand-written design tokens.
   Ports motion/cursor language from phase2-ferrofluid-02.
   ============================================================= */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* --- Palette --- */
  --color-bg-void:          #020408;
  --color-bg-space:         #050810;
  --color-bg-panel:         #060d18;
  --color-bg-elevated:      #0c1a2e;
  --color-primary:          #14d7f2;
  --color-primary-bright:   #06fbfc;
  --color-primary-deep:     #10adc2;
  --color-secondary:        #6366f1;
  --color-text-primary:     #e2e8f0;
  --color-text-muted:       #94a3b8;
  --color-text-dim:         #64748b;

  /* --- Typography --- */
  --font-hero:    'Rajdhani', 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* --- Fluid type scale --- */
  --font-size-xs:   clamp(0.75rem,  0.7rem + 0.25vw,  0.875rem);
  --font-size-sm:   clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem,     0.9rem + 0.5vw,   1.125rem);
  --font-size-md:   clamp(1.125rem, 1rem + 0.625vw,   1.25rem);
  --font-size-lg:   clamp(1.25rem,  1.1rem + 0.75vw,  1.5rem);
  --font-size-xl:   clamp(1.5rem,   1.3rem + 1vw,     2rem);
  --font-size-2xl:  clamp(2rem,     1.6rem + 2vw,     3rem);
  --font-size-3xl:  clamp(2.5rem,   2rem + 2.5vw,     4rem);
  --font-size-4xl:  clamp(3rem,     2.5rem + 3vw,     5rem);
  --font-size-hero: clamp(4.5rem,   3.5rem + 6vw,     8rem);

  /* --- Line heights --- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* --- Spacing (8px base grid) --- */
  --space-4:   4px;
  --space-8:   8px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;

  /* --- Section vertical padding --- */
  --section-pad: clamp(6rem, 10vw, 8rem);

  /* --- Easings --- */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-glow:   cubic-bezier(0.33, 1, 0.68, 1);

  /* --- Durations --- */
  --dur-fast:   200ms;
  --dur-normal: 300ms;
  --dur-slow:   500ms;
  --dur-slower: 700ms;

  /* --- Glow patterns --- */
  --glow-primary:
    0 0 12px rgba(20, 215, 242, 0.4),
    0 0 24px rgba(20, 215, 242, 0.3),
    0 0 36px rgba(20, 215, 242, 0.2);
  --glow-primary-hover:
    0 0 12px rgba(20, 215, 242, 0.5),
    0 0 28px rgba(20, 215, 242, 0.3),
    0 0 48px rgba(20, 215, 242, 0.2);
  --glow-text:
    0 0 10px rgba(20, 215, 242, 0.5),
    0 0 20px rgba(20, 215, 242, 0.3),
    0 0 30px rgba(20, 215, 242, 0.2);

  /* --- Cursor sizes --- */
  --cursor-dot-size:  8px;
  --cursor-ring-size: 28px;
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */

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

html {
  scroll-behavior: auto; /* Lenis owns smooth scroll — native must be off */
  background: var(--color-bg-void);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--color-bg-void);
  cursor: none; /* Custom cursor replaces default globally */
  overflow-x: hidden;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

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

::selection {
  background: var(--color-primary-bright);
  color: var(--color-bg-void);
}


/* ============================================================
   3. CUSTOM CURSOR
   Ported from phase2-ferrofluid-02. Opacity 0 until first mousemove.
   ============================================================ */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  /* Starts invisible — fades in on first mousemove to avoid
     cursor jumping from (0,0) to actual mouse position visibly */
  opacity: 0;
}

.cursor__dot {
  position: absolute;
  width: var(--cursor-dot-size);
  height: var(--cursor-dot-size);
  background: var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.cursor__ring {
  position: absolute;
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* Ring lags — GSAP quickTo handles lag, no CSS transition needed here */
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-normal) var(--ease-out),
    width var(--dur-normal) var(--ease-glow),
    height var(--dur-normal) var(--ease-glow);
  opacity: 0.7;
}

/* State: hovering interactive element */
body.cursor-hover .cursor__dot {
  background: var(--color-bg-void);
  transform: translate(-50%, -50%) scale(1.5);
}

body.cursor-hover .cursor__ring {
  background: var(--color-primary);
  opacity: 1;
  width: 32px;
  height: 32px;
}


/* ============================================================
   4. CTA BUTTON — the one component with 4px radius
   Cyan fill, black text. No gradient. Lift + glow on hover.
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 14px 32px;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-bg-void);
  background: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: none;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-glow),
    transform var(--dur-fast) var(--ease-out);
}

.btn-primary:hover {
  background: var(--color-primary-bright);
  box-shadow: var(--glow-primary-hover);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(20, 215, 242, 0.3);
}


/* ============================================================
   5. SECONDARY LINK — plain underlined, muted to cyan on hover
   ============================================================ */

.secondary-link {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  padding-bottom: 1px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.secondary-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ============================================================
   6. SECTION HEADING — shared across sections 2, 3
   ============================================================ */

.section-heading {
  font-family: var(--font-hero);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}


/* ============================================================
   7. SCROLL REVEAL UTILITY
   Elements with .js-reveal start invisible; GSAP drives them in.
   ============================================================ */

.js-reveal {
  opacity: 0;
  transform: translateY(40px);
}


/* ============================================================
   8. SECTION DIVIDER
   ============================================================ */

.section-rule {
  border: none;
  border-top: 1px solid rgba(20, 215, 242, 0.1);
  margin: 0;
}


/* ============================================================
   9. VIDEO PLATE — canonical pattern per style guide
   ============================================================ */

.video-plate {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.video-plate__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Reduced-motion guard — pause handled in main.js JS media query check */
@media (prefers-reduced-motion: reduce) {
  .video-plate__player {
    animation-play-state: paused;
  }
}


/* ============================================================
   10. HERO SECTION — 100vh
   Full-bleed canvas, vignette overlay, wordmark + subhead.
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-void);
}

#signature-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/*
  Hero vignette — deliberately very light now.
  The old implementation stacked a radial (0.55 alpha at edges) + a linear
  fade-to-black (0.88 alpha at bottom), which darkened the photographic
  hero. Revised 2026-04-18: edges feather gently and the bottom-of-hero
  fade is softened — image reads clearly edge-to-edge. Headline legibility
  is now handled by .hero__wordmark text-shadow below, not by this overlay.
*/
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(
      ellipse 100% 80% at 50% 50%,
      transparent 0%,
      rgba(2, 4, 8, 0.18) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 70%,
      rgba(2, 4, 8, 0.55) 100%
    );
  pointer-events: none;
}

/* Content block — centered bottom-third */
.hero__content {
  position: absolute;
  bottom: var(--space-96);
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 var(--space-64);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

/*
  WORDMARK headline — Rajdhani 700, cinematic hero scale.
  SplitType wraps chars in .char spans for the ferro-print reveal.
  .line wrapper uses overflow:hidden to clip chars ascending from below.

  Legibility strategy (2026-04-18): the shader-side headline-band dim was
  removed to let the Rorschach image render at full brightness. Instead we
  paint a localized dark halo behind each glyph via text-shadow — this
  only darkens the letter silhouette, not the image.
*/
.hero__wordmark {
  font-family: var(--font-hero);
  font-size: var(--font-size-hero);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-shadow:
    0 2px 24px rgba(2, 4, 8, 0.85),
    0 0 48px rgba(2, 4, 8, 0.70);
  /* GSAP drives the reveal — chars initially set to y:120% opacity:0 in main.js */
}

.hero__wordmark .line {
  overflow: hidden;
  display: block;
}

.hero__wordmark .char {
  display: inline-block;
  /* Inherit text-shadow from .hero__wordmark — per-letter halo.
     SplitType sometimes re-wraps chars as inline-block which can break
     inheritance; set it here explicitly so the per-char reveal carries
     the halo through the animation. */
  text-shadow:
    0 2px 24px rgba(2, 4, 8, 0.85),
    0 0 48px rgba(2, 4, 8, 0.70);
}

.hero__subhead {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-text-muted);
  max-width: 560px;
  line-height: var(--lh-snug);
  /* Localized halo — same pattern as headline but slightly softer */
  text-shadow:
    0 1px 16px rgba(2, 4, 8, 0.85),
    0 0 32px rgba(2, 4, 8, 0.60);
  /* Initial invisible state — GSAP fades this in after headline */
  opacity: 0;
}


/* ============================================================
   11. RELEASED SECTION — 90vh
   Two product cards side-by-side. No card borders. No shadows.
   Editorial asymmetry via different card widths and media treatment.
   ============================================================ */

.released {
  position: relative;
  z-index: 10;
  background: var(--color-bg-void);
  padding: var(--section-pad) var(--space-64);
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  border-top: 1px solid rgba(20, 215, 242, 0.08);
}

.released__header {
  /* Header sits left-aligned, no center treatment */
}

/* Three-column product grid — GodRays leads, FerroFluidGL mid, PM101 narrow */
.released__grid {
  display: grid;
  grid-template-columns: 5fr 5fr 4fr;
  gap: var(--space-64);
  align-items: start;
  max-width: 1400px;
  width: 100%;
}

/* Product card — no border, no shadow stack, no rounded-2xl */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.product-card__media {
  width: 100%;
  overflow: hidden;
  /* Sharp cut — no radius */
}

/* Video plate inside card — thin cyan border on the frame */
.product-card .video-plate {
  border: 1px solid rgba(20, 215, 242, 0.12);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Solo body (PM101 — no media above) needs more top breathing */
.product-card__body--solo {
  padding-top: var(--space-48);
}

.product-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  text-transform: uppercase;
}

.product-card__name {
  font-family: var(--font-hero);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.product-card__price {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-shadow: var(--glow-text);
}

.product-card__price-sub {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text-muted);
  font-style: italic;
}

.product-card__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 480px;
}

.product-card__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-32);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.product-card__links--single {
  margin-top: var(--space-16);
}


/* ============================================================
   12. QUEUED SECTION — 60vh
   Abstract tiles animate subtly. No named plugins.
   ============================================================ */

.queued {
  position: relative;
  z-index: 10;
  background: var(--color-bg-space);
  padding: var(--section-pad) var(--space-64);
  min-height: 60vh;
  border-top: 1px solid rgba(20, 215, 242, 0.06);
}

.queued__inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.queued__copy {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.queued__body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* Three abstract tiles — pure CSS, no shader, no plugin names */
.queued__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  max-width: 900px;
}

/* Breathing-scale tile base */
.queue-tile {
  aspect-ratio: 4 / 3;
  /* No radius — sharp editorial frame */
  border: 1px solid rgba(20, 215, 242, 0.1);
  position: relative;
  overflow: hidden;
}

/* Subtle breathing animation — scale + opacity pulse on the internal gradient */
.queue-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.25;
  animation: tile-breathe 5s ease-in-out infinite;
}

.queue-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.45);
}

/* Three distinct gradient variants — all cool temperature */
.queue-tile--a {
  background: var(--color-bg-panel);
}
.queue-tile--a::before {
  background: radial-gradient(
    ellipse 80% 80% at 30% 60%,
    rgba(20, 215, 242, 0.35) 0%,
    transparent 70%
  );
  animation-delay: 0s;
}

.queue-tile--b {
  background: var(--color-bg-panel);
}
.queue-tile--b::before {
  background: radial-gradient(
    ellipse 60% 90% at 70% 40%,
    rgba(99, 102, 241, 0.3) 0%,
    rgba(20, 215, 242, 0.15) 50%,
    transparent 80%
  );
  animation-delay: 1.6s;
}

.queue-tile--c {
  background: var(--color-bg-panel);
}
.queue-tile--c::before {
  background: linear-gradient(
    135deg,
    rgba(20, 215, 242, 0.2) 0%,
    rgba(6, 251, 252, 0.08) 40%,
    transparent 70%
  );
  animation-delay: 3.2s;
}

@keyframes tile-breathe {
  0%   { opacity: 0.2; transform: scale(1); }
  50%  { opacity: 0.45; transform: scale(1.04); }
  100% { opacity: 0.2; transform: scale(1); }
}

.queued__cta {
  display: flex;
  align-items: flex-start;
}


/* ============================================================
   13. STUDIO BLURB SECTION — 50vh
   Two-column editorial: 7/5 asymmetric.
   Pull-quote left with cyan left-border spark, body right.
   ============================================================ */

.studio {
  position: relative;
  z-index: 10;
  background: var(--color-bg-void);
  padding: var(--section-pad) var(--space-64);
  min-height: 50vh;
  border-top: 1px solid rgba(20, 215, 242, 0.08);
}

/* 7/5 asymmetric grid — pull-quote left, body right */
.studio__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  align-items: start;
  max-width: 1200px;
  width: 100%;
}

.pull-quote {
  font-family: var(--font-hero);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  border: none;
  padding: 0;
  /* Cyan left-border spark — not a full blockquote rule, a concentrated accent */
  padding-left: var(--space-24);
  border-left: 2px solid var(--color-primary);
  font-style: normal; /* Remove blockquote italic default */
}

.studio__body-text {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}


/* ============================================================
   14. FOOTER — 40vh
   Logo centered, 3 mono links, copyright. Nothing else.
   ============================================================ */

.footer {
  position: relative;
  z-index: 10;
  min-height: 40vh;
  background: var(--color-bg-void);
  border-top: 1px solid rgba(20, 215, 242, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-64) var(--space-32);
}

.footer__logo-link {
  display: block;
  line-height: 0;
}

.footer__logo {
  height: 32px;
  width: auto;
  opacity: 0.75;
  filter: drop-shadow(0 0 8px rgba(20, 215, 242, 0.25));
  transition:
    opacity var(--dur-normal) var(--ease-out),
    filter var(--dur-slow) var(--ease-glow);
}

.footer__logo-link:hover .footer__logo {
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(20, 215, 242, 0.5));
}

/* Three small mono links in a row */
.footer__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__link {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.footer__link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Separator between links */
.footer__sep {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  user-select: none;
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}


/* ============================================================
   15. GODRAYS CARD — amber accent differentiator
   Amber #f0a040 signals "free hook" vs. the cyan paid products.
   ============================================================ */

/* Amber-tinted video plate border for GodRays card */
.product-card--godrays .video-plate {
  border-color: rgba(240, 160, 64, 0.25);
  position: relative;
}

/* FREE ribbon — top-right badge on the media block */
.product-card__media {
  position: relative;
}

.product-card__ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #020408;
  background: #f0a040;
  padding: 4px 10px;
  border-radius: 2px;
  line-height: 1;
}

/* Amber eyebrow for GodRays */
.product-card__eyebrow--rays {
  color: #f0a040;
}

/* Amber price/sub line for GodRays */
.product-card__price-rays {
  color: #f0a040;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Amber CTA button for GodRays card */
.btn-rays-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #020408;
  background: #f0a040;
  border: none;
  border-radius: 4px;
  cursor: none;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-glow),
    transform var(--dur-fast) var(--ease-out);
}

.btn-rays-card:hover {
  background: #ffb855;
  box-shadow:
    0 0 12px rgba(240, 160, 64, 0.5),
    0 0 28px rgba(240, 160, 64, 0.3),
    0 0 48px rgba(240, 160, 64, 0.15);
  transform: translateY(-2px);
}

.btn-rays-card:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(240, 160, 64, 0.3);
}


/* ============================================================
   16. RESPONSIVE — mobile adjustments
   ============================================================ */

@media (max-width: 1100px) {
  /* Collapse 3-col to 2-col: GodRays + FerroFluidGL full width, PM101 below */
  .released__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }

  /* PM101 spans full width on the second row at this breakpoint */
  .product-card--pm101 {
    grid-column: 1 / -1;
  }

  .product-card--pm101 .product-card__body--solo {
    padding-top: 0;
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  .hero__content {
    padding: 0 var(--space-32);
    bottom: var(--space-64);
  }

  .released {
    padding: var(--section-pad) var(--space-32);
  }

  /* Stack all product cards on medium-small screens */
  .released__grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .product-card--pm101 {
    grid-column: auto;
  }

  .product-card__body--solo {
    padding-top: 0;
  }

  .queued {
    padding: var(--section-pad) var(--space-32);
  }

  .queued__tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .queued__tiles .queue-tile--c {
    display: none; /* Drop third tile on medium screens — 2-col looks cleaner */
  }

  .studio {
    padding: var(--section-pad) var(--space-32);
  }

  .studio__grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}

@media (max-width: 600px) {
  .hero__content {
    padding: 0 var(--space-24);
    bottom: var(--space-48);
  }

  .released {
    padding: var(--section-pad) var(--space-24);
  }

  .queued {
    padding: var(--section-pad) var(--space-24);
  }

  .queued__tiles {
    grid-template-columns: 1fr;
  }

  .queued__tiles .queue-tile--b,
  .queued__tiles .queue-tile--c {
    display: none; /* One tile on mobile — cleaner than a tall column */
  }

  .studio {
    padding: var(--section-pad) var(--space-24);
  }

  .product-card__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .footer__links {
    flex-direction: column;
    gap: var(--space-8);
  }

  .footer__sep {
    display: none;
  }
}


/* ============================================================
   17. PREFERS-REDUCED-MOTION
   Zero all animation durations. Make animated elements visible.
   Shader: main.js skips initSignature. Tiles: static.
   ============================================================ */

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

  /* Restore cursor ring visibility for users who may want it */
  .cursor__ring {
    display: none;
  }

  /* Any element hidden by GSAP setup should be visible */
  .hero__subhead,
  .js-reveal,
  .pull-quote,
  #studio-body {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Signature canvas hidden under reduced motion — dark bg shows */
  #signature-canvas {
    display: none;
  }

  /* Queue tiles static — no breathing animation */
  .queue-tile::before {
    animation: none;
    opacity: 0.3;
  }
}