/* A2 The Warm-Up. Owned by Agent 3. */

.warm-up {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.warm-up__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ---------- Decorative backdrop: stacked sleeves and a speaker cone ---------- */
.warm-up__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.warm-up__layer {
  position: absolute;
  inset: 0;
}
.warm-up__sleeve {
  position: absolute;
  width: clamp(12rem, 34vw, 26rem);
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, color-mix(in srgb, var(--accent) 8%, transparent) 28.5% 29%, transparent 29.5%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  opacity: .5;
}
.warm-up__sleeve--one { top: 6%; right: -6%; rotate: 8deg; }
.warm-up__sleeve--two {
  top: 12%; right: 4%;
  rotate: -5deg;
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--vinyl) 0 2px, var(--vinyl-groove) 2px 3px);
  border-radius: 50%;
  opacity: .35;
}
.warm-up__sleeve--three {
  top: 22%; right: 14%;
  width: clamp(8rem, 18vw, 14rem);
  rotate: 14deg;
  border-color: color-mix(in srgb, var(--accent-3) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-3) 14%, var(--surface)), var(--bg));
  opacity: .45;
}
.warm-up__cone {
  position: absolute;
  bottom: 4%; left: -8%;
  width: clamp(14rem, 30vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--bg-deep) 0 10%, var(--surface-2) 11% 14%, transparent 15%),
    repeating-radial-gradient(circle, transparent 0 14px, color-mix(in srgb, var(--accent-2) 14%, transparent) 14px 15px);
  border: 1px solid var(--line);
  opacity: .4;
}

/* ---------- Story layout ---------- */
.warm-up__layout {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

@media (min-width: 56rem) {
  .warm-up__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
    gap: var(--space-8);
  }
  .warm-up__portrait-wrap {
    max-width: 22rem;
    position: sticky;
    top: var(--space-8);
    margin-top: var(--space-7);
  }
}

.warm-up__story {
  max-width: var(--measure);
}
.warm-up__story > p {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.warm-up__story > .warm-up__intro {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
}

.warm-up__pull {
  margin: var(--space-7) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 4px solid var(--accent);
}
.warm-up__pull p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 22ch;
}

/* ---------- Portrait frame ---------- */
.warm-up__portrait-wrap {
  max-width: min(22rem, 80%);
  position: relative;
}
.warm-up__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    repeating-radial-gradient(circle at 70% 115%, transparent 0 10px, color-mix(in srgb, var(--accent-2) 10%, transparent) 10px 11px),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow), 14px 14px 0 -1px var(--bg), 14px 14px 0 0 var(--line);
  overflow: hidden;
  text-align: center;
}
.warm-up__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.warm-up__portrait-label {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Rules of the booth: channel strips ---------- */
.warm-up__rules {
  margin-top: var(--space-8);
  padding-bottom: var(--space-4);
}
.warm-up__rules-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  color: var(--text);
}

.warm-up__strips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.strip {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--glass-border, var(--line));
  /* Text sits on the strong glass fill so contrast holds; .glass (base.css) adds blur, highlight and hotspot. */
  background: var(--glass-fill-strong, var(--surface));
  box-shadow: var(--glass-highlight, none), var(--glass-shadow, none);
}
.strip { --strip-accent: var(--accent); }
.strip:nth-child(2) { --strip-accent: var(--accent-2); }
.strip:nth-child(3) { --strip-accent: var(--accent-3); }
.strip:nth-child(4) { --strip-accent: var(--focus-ring); }

.strip__hardware {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  min-height: 11rem;
}
.strip__ch {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.strip__knob {
  --turn: -40deg;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface-2), var(--vinyl));
  border: 1px solid var(--line);
  position: relative;
  transform: rotate(var(--turn));
}
.strip__knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 40%;
  translate: -50% 0;
  border-radius: 1px;
  background: var(--strip-accent, var(--accent));
}
.strip__knob--b { --turn: 30deg; }
.strip__fader {
  position: relative;
  flex: 1;
  width: 4px;
  min-height: 4.5rem;
  border-radius: 2px;
  background: var(--line);
}
.strip__cap {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5rem;
  height: 0.75rem;
  translate: -50% 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--text-muted), var(--surface-2));
  border: 1px solid var(--bg-deep);
  box-shadow: 0 2px 0 var(--bg-deep);
  transform: translateY(2.6rem);
}
.strip__cap::after {
  content: "";
  position: absolute;
  inset: 45% 2px auto;
  height: 2px;
  background: var(--strip-accent, var(--accent));
}

.strip__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--text);
}
.strip__body p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}
.strip__body::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin-bottom: var(--space-3);
  border-radius: 2px;
  background: var(--strip-accent, var(--accent));
}

/* Micro-interaction: faders push up and knobs turn on hover, focus-within,
   and when the section is the active track. Decorative only, motion OK only. */
:root[data-motion="full"]:not([data-calm="on"]) .strip {
  transition:
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--spring),
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--spring),
    scale var(--dur-slow) var(--spring);
}
:root[data-motion="full"]:not([data-calm="on"]) .strip__cap {
  transition: transform var(--dur-slow) var(--spring);
}
:root[data-motion="full"]:not([data-calm="on"]) .strip__knob {
  transition: transform var(--dur-slow) var(--spring);
}
:root[data-motion="full"]:not([data-calm="on"]) .warm-up.is-active .strip__cap {
  transform: translateY(1.6rem);
}
:root[data-motion="full"]:not([data-calm="on"]) .strip:is(:hover, :focus-within) {
  border-color: var(--strip-accent, var(--accent));
  transform: translateY(-3px);
}
:root[data-motion="full"]:not([data-calm="on"]) .strip:is(:hover, :focus-within) .strip__cap {
  transform: translateY(0.2rem);
}
:root[data-motion="full"]:not([data-calm="on"]) .strip:is(:hover, :focus-within) .strip__knob {
  --turn: 50deg;
}
:root[data-motion="full"]:not([data-calm="on"]) .strip:is(:hover, :focus-within) .strip__knob--b {
  --turn: -20deg;
}

/* Scroll-driven backdrop (CSS). Where supported, the JS parallax on the outer
   layers is neutralised and each shape drifts on its own view() timeline.
   The end state is simply the resting position, so nothing depends on it. */
@supports (animation-timeline: view()) {
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__layer {
    transform: none !important;
    translate: none !important;
  }
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__sleeve,
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__cone {
    animation: warm-up-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__sleeve--one { --drift: 3rem; --spin: 6deg; }
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__sleeve--two { --drift: 7rem; --spin: -14deg; }
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__sleeve--three { --drift: 11rem; --spin: 10deg; }
  :root[data-motion="full"]:not([data-calm="on"]) .warm-up__cone { --drift: -5rem; --spin: 0deg; }
}
@keyframes warm-up-drift {
  from { transform: translateY(calc(var(--drift, 4rem) * -1)) rotate(calc(var(--spin, 0deg) * -1)); }
  to { transform: translateY(var(--drift, 4rem)) rotate(var(--spin, 0deg)); }
}

/* Ambient amber glow behind the story, following the active track hue. */
.warm-up__backdrop::before {
  content: "";
  position: absolute;
  inset: 10% 30% 30% -10%;
  background: radial-gradient(closest-side, var(--tint, transparent), transparent);
  filter: blur(20px);
}

/* Calm mode: quieter backdrop. */
:root[data-calm="on"] .warm-up__backdrop { opacity: .5; }

/* High contrast: solid surfaces, clear borders. */
:root[data-contrast="high"] .warm-up__sleeve,
:root[data-contrast="high"] .warm-up__cone { opacity: .25; }
:root[data-contrast="high"] .strip,
:root[data-contrast="high"] .warm-up__portrait { background: var(--surface); }

@media (max-width: 30rem) {
  .strip { grid-template-columns: 2.75rem 1fr; padding: var(--space-4); }
  .strip__hardware { min-height: 9.5rem; }
  .warm-up__pull { padding-left: var(--space-4); }
}