/* B1 Peak Time. Owned by Agent 6. Side B: warmer, later at night, lilac and deep purple. */

.peak {
  --peak-glow: var(--accent-3);
  --p: var(--progress, 0);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(7rem, 14vw, 11rem);
  view-timeline-name: --peak;
  view-timeline-axis: block;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--accent-3) 7%, var(--bg-deep)) 55%, var(--bg) 100%);
}
@supports (color: oklch(0 0 0)) {
  .peak {
    background:
      radial-gradient(120% 60% at 50% 0%, var(--tint, transparent), transparent 70%),
      linear-gradient(in oklch 180deg, var(--bg) 0%, oklch(0.16 0.05 300) 55%, var(--bg) 100%);
  }
  :root[data-calm="on"] .peak {
    background: radial-gradient(120% 60% at 50% 0%, var(--tint, transparent), transparent 70%), var(--bg);
  }
}

/* Light show (decorative). Intensity follows --progress. Never flashes. */
.peak__lights {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(32rem, 85vh);
  z-index: -1;
  pointer-events: none;
}
.peak__rig { width: 100%; height: 100%; display: block; }
.peak__truss { fill: var(--surface-2); }
.peak__beam circle { fill: var(--text); opacity: .85; }
.peak__beam polygon {
  opacity: calc(.15 + var(--p) * .55);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.peak__beam { transform-box: fill-box; transform-origin: 50% 0; }
.peak__beam--1 { transform: rotate(14deg); }
.peak__beam--2 { transform: rotate(6deg); }
.peak__beam--4 { transform: rotate(-6deg); }
.peak__beam--5 { transform: rotate(-14deg); }

/* Scroll-linked sweep: beams swing slowly as the section passes. No timers, no strobe. */
:root[data-motion="full"]:not([data-calm="on"]) .peak__beam--1 { transform: rotate(calc(24deg - var(--p) * 22deg)); }
:root[data-motion="full"]:not([data-calm="on"]) .peak__beam--2 { transform: rotate(calc(-8deg + var(--p) * 22deg)); }
:root[data-motion="full"]:not([data-calm="on"]) .peak__beam--3 { transform: rotate(calc(10deg - var(--p) * 20deg)); }
:root[data-motion="full"]:not([data-calm="on"]) .peak__beam--4 { transform: rotate(calc(8deg - var(--p) * 22deg)); }
:root[data-motion="full"]:not([data-calm="on"]) .peak__beam--5 { transform: rotate(calc(-24deg + var(--p) * 22deg)); }

/* Preferred path: CSS scroll-driven animation on the section's view timeline.
   The JS --progress rules above remain the fallback. */
@supports (animation-timeline: view()) {
  :root[data-motion="full"]:not([data-calm="on"]) .peak__beam {
    animation: peak-sweep linear both;
    animation-timeline: --peak;
    animation-range: entry 0% exit 60%;
  }
  :root[data-motion="full"]:not([data-calm="on"]) .peak__beam polygon {
    animation: peak-intensity linear both;
    animation-timeline: --peak;
    animation-range: entry 10% contain 40%;
    transition: none;
  }
  .peak__beam--1 { --from: 26deg; --to: 4deg; }
  .peak__beam--2 { --from: -10deg; --to: 12deg; }
  .peak__beam--3 { --from: 12deg; --to: -8deg; }
  .peak__beam--4 { --from: 10deg; --to: -12deg; }
  .peak__beam--5 { --from: -26deg; --to: -4deg; }
}
@keyframes peak-sweep {
  from { transform: rotate(var(--from, 0deg)); }
  to { transform: rotate(var(--to, 0deg)); }
}
@keyframes peak-intensity {
  from { opacity: .12; }
  to { opacity: .75; }
}

.peak__crowd {
  position: absolute;
  inset: auto 0 0 0;
  height: 3.5rem;
  opacity: calc(.35 + var(--p) * .4);
  background:
    radial-gradient(1.1rem 1.4rem at 8% 100%, var(--surface-2) 98%, transparent) 0 0 / 7rem 100% repeat-x,
    radial-gradient(1rem 1.2rem at 55% 100%, var(--surface) 98%, transparent) 0 0 / 5rem 100% repeat-x,
    radial-gradient(1.3rem 1.8rem at 30% 100%, var(--surface-2) 98%, transparent) 0 0 / 9rem 100% repeat-x;
}

:root[data-calm="on"] .peak__lights { opacity: .35; }
:root[data-calm="on"] .peak__beam polygon { opacity: .25; }
:root[data-contrast="high"] .peak__lights { display: none; }
:root[data-contrast="high"] .peak { background: var(--bg); }

/* Header: Side B flip */
.peak__header { position: relative; max-width: var(--measure); }
.peak__flip {
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  background:
    radial-gradient(circle, var(--accent-3) 0 34%, var(--vinyl) 35% 37%, var(--vinyl-groove) 38% 39%, var(--vinyl) 40% 60%, var(--vinyl-groove) 61% 62%, var(--vinyl) 63%);
  box-shadow: var(--shadow);
  transform: perspective(500px) rotateY(0deg);
}
.peak__flip-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--on-accent);
}
:root[data-motion="full"]:not([data-calm="on"]) .peak__flip {
  transition: transform 900ms var(--ease-spring);
}
:root[data-motion="full"]:not([data-calm="on"]) .peak.flip-pending .peak__flip {
  transform: perspective(500px) rotateY(180deg);
}
.peak__side {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-3);
}

/* Neon sign headline */
.peak__neon {
  color: var(--text);
  text-shadow:
    0 0 .06em var(--text),
    0 0 .3em color-mix(in srgb, var(--peak-glow) 80%, transparent),
    0 0 .8em color-mix(in srgb, var(--peak-glow) 55%, transparent);
}
@supports (color: oklch(0 0 0)) {
  .peak__neon {
    text-shadow:
      0 0 .05em oklch(0.97 0.03 300),
      0 0 .25em oklch(0.78 0.2 300 / .85),
      0 0 .7em oklch(0.65 0.26 300 / .6),
      0 0 1.4em oklch(0.55 0.25 310 / .35);
  }
}
:root[data-calm="on"] .peak__neon,
:root[data-contrast="high"] .peak__neon { text-shadow: none; }

/* Now playing strip: static, never scrolls. */
.peak__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: var(--content-max);
  margin: var(--space-6) 0 var(--space-7);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--text-muted);
}
.peak__now-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-3);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.peak__now-tag::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 .6rem var(--accent-3);
}
.peak__now-text { flex: 1 1 18rem; color: var(--text); }
.peak__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.1rem; }
.peak__eq i {
  display: block;
  width: 4px;
  border-radius: 1px;
  background: var(--accent-3);
  height: calc(25% + var(--p) * 75% * var(--h, 1));
  transition: height var(--dur-slow) var(--ease-out);
}
.peak__eq i:nth-child(1) { --h: .5; }
.peak__eq i:nth-child(2) { --h: .9; }
.peak__eq i:nth-child(3) { --h: .65; }
.peak__eq i:nth-child(4) { --h: 1; }
.peak__eq i:nth-child(5) { --h: .4; }
:root[data-contrast="high"] .peak__now-tag::before { box-shadow: none; }

/* The wall of flyers */
.peak__wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
}

.flyer {
  --flyer-accent: var(--accent-3);
  --rx: 0deg;
  --ry: 0deg;
  --tilt: 0deg;
  position: relative;
  perspective: 900px;
}
.flyer--speaking { --flyer-accent: var(--accent); --tilt: -1.6deg; }
.flyer--podcast { --flyer-accent: var(--accent-2); --tilt: 1.2deg; }
.flyer--writing { --flyer-accent: var(--accent-3); --tilt: -.8deg; }
.flyer--mentoring { --flyer-accent: color-mix(in srgb, var(--accent) 50%, var(--accent-3)); --tilt: 1.8deg; }
:root[data-calm="on"] .flyer,
:root[data-contrast="high"] .flyer { --tilt: 0deg; }

.flyer__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--flyer-accent) 45%, var(--glass-border, var(--line)));
  border-radius: var(--radius-sm);
  /* Light-box glass: a tinted glow at the top, body text always on --glass-fill-strong. */
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--flyer-accent) 22%, transparent) 0%, transparent 42%),
    var(--glass-fill-strong, var(--surface));
  box-shadow: var(--glass-shadow, var(--shadow)), var(--glass-highlight, 0 0 0 transparent);
  transform: rotate(var(--tilt));
}
:root[data-motion="full"]:not([data-calm="on"]) .flyer__card {
  transform: rotate(var(--tilt)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--dur-slow) var(--spring, var(--ease-spring)), box-shadow var(--dur) var(--ease-out);
}
:root[data-motion="full"]:not([data-calm="on"]) .flyer.is-tilting .flyer__card { transition-duration: 80ms; }
:root[data-motion="full"]:not([data-calm="on"]) .flyer:hover .flyer__card,
:root[data-motion="full"]:not([data-calm="on"]) .flyer:focus-within .flyer__card {
  box-shadow: var(--glass-shadow, var(--shadow)), var(--glass-highlight, 0 0 0 transparent), 0 0 2.4rem color-mix(in srgb, var(--flyer-accent) 32%, transparent);
}
:root[data-contrast="high"] .flyer__card {
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: none;
}

/* Pin at the top of each flyer */
.flyer__pin {
  content: "";
  position: absolute;
  top: .7rem;
  left: 50%;
  width: .8rem;
  height: .8rem;
  margin-left: -.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--text) 0 15%, var(--flyer-accent) 30%);
  box-shadow: 0 2px 4px rgb(0 0 0 / .6);
}

:root[data-contrast="high"] .flyer__pin { display: none; }
.flyer__card > :not(.flyer__pin):not(.flyer__peel) { position: relative; z-index: 1; }

.flyer__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--flyer-accent);
}
:root[data-contrast="high"] :root[data-contrast="high"] .flyer__pin { display: none; }
.flyer__card > :not(.flyer__pin):not(.flyer__peel) { position: relative; z-index: 1; }

.flyer__kicker { color: var(--text); }
.flyer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 1.2vw, 2.3rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: anywhere;
}
:root:not([data-calm="on"]):not([data-contrast="high"]) .flyer__title {
  text-shadow: 0 0 .5em color-mix(in srgb, var(--flyer-accent) 45%, transparent);
}
.flyer__body { margin: 0; color: var(--text); line-height: 1.55; max-width: var(--measure); }
.flyer__venue {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: .95rem;
  color: var(--text-muted);
}
.flyer__venue-key {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--text);
}
.flyer a {
  color: var(--text);
  text-decoration-color: var(--flyer-accent);
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
}
.flyer a:hover { color: var(--flyer-accent); }
:root[data-contrast="high"] .flyer a:hover { color: var(--accent); }

/* View transition for the backstage reveal (names set by JS, prefixed peak-). */
::view-transition-group(peak-flyer-1),
::view-transition-group(peak-flyer-2),
::view-transition-group(peak-flyer-3),
::view-transition-group(peak-flyer-4) {
  animation-duration: 520ms;
  animation-timing-function: var(--spring, var(--ease-spring));
}
::view-transition-new(peak-pass-1), ::view-transition-new(peak-pass-2),
::view-transition-new(peak-pass-3), ::view-transition-new(peak-pass-4) {
  animation: 360ms var(--ease-out) 80ms both peak-pass-vt-in;
}
@keyframes peak-pass-vt-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
}

/* Backstage disclosure */
.flyer__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--flyer-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.flyer__toggle:hover { background: color-mix(in srgb, var(--flyer-accent) 18%, transparent); }
.flyer__toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.flyer__toggle[aria-expanded="true"] { background: var(--flyer-accent); color: var(--on-accent); }
:root[data-contrast="high"] .flyer__toggle { border-color: var(--text); }
:root[data-contrast="high"] .flyer__toggle[aria-expanded="true"] { background: var(--text); color: var(--bg); }
.flyer__toggle-icon {
  width: .6rem;
  height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.flyer__toggle[aria-expanded="true"] .flyer__toggle-icon { transform: translateY(2px) rotate(-135deg); }
:root[data-motion="full"]:not([data-calm="on"]) .flyer__toggle-icon { transition: transform var(--dur) var(--ease-out); }

.flyer__pass {
  position: relative;
  z-index: 1;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--flyer-accent) 50%, var(--line));
  border-left: 4px solid var(--flyer-accent);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.55;
}
.flyer__pass[hidden] { display: none; }
.flyer__pass p { margin: 0; }
.flyer__pass p + p { margin-top: var(--space-2); }
:root[data-contrast="high"] .flyer__pass { border-color: var(--text); }
:root[data-motion="full"]:not([data-calm="on"]) .flyer__pass.is-opening {
  animation: flyer-pass-in var(--dur) var(--ease-out);
}
@keyframes flyer-pass-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Peel-back corner: grows on hover or focus, stays curled while the pass is open. */
.flyer__peel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.4rem;
  height: 1.4rem;
  pointer-events: none;
  background:
    linear-gradient(315deg, var(--bg) 0 50%, transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--flyer-accent) 70%, var(--text)) 0 49%, transparent 50%);
  background-blend-mode: normal;
  border-top-left-radius: 4px;
  box-shadow: -3px -3px 6px rgb(0 0 0 / .35);
}
.flyer:hover .flyer__peel,
.flyer:focus-within .flyer__peel,
.flyer.is-open .flyer__peel { width: 3.2rem; height: 3.2rem; }
:root[data-motion="full"]:not([data-calm="on"]) .flyer__peel {
  transition: width var(--dur) var(--ease-spring), height var(--dur) var(--ease-spring);
}
:root[data-contrast="high"] .flyer__peel { display: none; }

@media (min-width: 64rem) {
  .peak__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flyer:nth-child(even) { margin-top: var(--space-6); }
}

/* Podcast cover art on the Sprint Zero flyer. */
.flyer__art { display: block; margin: var(--space-3) 0 var(--space-4); }
.flyer__art img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--glass-border), 0 8px 24px rgb(0 0 0 / .4);
}
:root[data-contrast="high"] .flyer__art img { box-shadow: 0 0 0 2px var(--line); }