/* ==========================================================================
   Pitch — two alternating text/visual rows making the case for the studio,
   written for SEO (real body copy, not just headings). Visual language
   (bordered "glass" panels, chip grid, scroll-reveal) follows the same
   structural idea as schoolofmotion.com's jobs-board panel and skills-chip
   grid, recolored to brand with original naming.

   Section background matches the reference's actual technique (checked
   computed styles across ~10 of their sections): each section is a near-
   black solid color, its own slightly different shade, plus 1-2 SMALL
   static radial-gradient accent spots at low alpha (their range: ~0.08-
   0.18) — not large blurred/animated DOM blobs. Reuse this same recipe
   (own near-black shade + 1-2 small static accent spots) for future
   sections, varying position/color/alpha per section like they do.
   ========================================================================== */

.pitch {
  position: relative;
  background-color: #0c0c10;
  background-image: radial-gradient(circle at 14% 12%, rgba(91, 42, 134, 0.16), transparent 34%),
    radial-gradient(circle at 86% 84%, rgba(255, 122, 26, 0.1), transparent 32%);
  padding-block: 140px;
}

.pitch__row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  align-items: start;
  gap: 80px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.pitch__row + .pitch__row {
  margin-top: 72px;
}

.pitch__row--reverse .pitch__copy {
  order: 2;
}

.pitch__row--reverse .pitch__visual {
  order: 1;
}

/* --- Copy column --- */

.pitch__title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.pitch__text {
  margin-top: var(--space-5);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.pitch__text + .pitch__text {
  margin-top: var(--space-4);
}

/* --- Visual column: shared "glass" surface base --- */

.pitch__visual {
  min-height: 1px;
}

/* --- Reviews panel (row 1) --- */

.pitch__panel {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Bottom padding is short by the reviews ticker's own internal buffer
     (js/pitch-reviews.js BOTTOM_BUFFER_PX, currently 18px — empty space
     reserved purely so the mask has room to fade into, see
     .pitch__reviews) so the LAST CARD's own edge to the panel's outer
     edge (buffer + this padding) ends up the same as the top/left/right
     padding, not that plus the buffer stacked on top. */
  padding: var(--space-5) var(--space-5) 7px;
}

.pitch__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2) var(--space-4);
}

.pitch__panel-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Idle "twinkle": every star shares one 6s cycle (quick scale-pulse, then
   flat for the rest of the cycle) so they stay in a fixed relative phase
   forever — --i (0-4) shifts each star's start via animation-delay, giving
   a left-to-right ripple, a long still hold, then the ripple again. */
.pitch__rating-stars {
  display: flex;
  gap: 3px;
}

.pitch__rating-star {
  width: 16px;
  height: 16px;
  fill: #ffb800;
  animation: pitchStarTwinkle 6000ms ease-in-out infinite;
  animation-delay: calc(var(--i) * 160ms);
}

@keyframes pitchStarTwinkle {
  0%,
  100% {
    transform: scale(1);
  }
  2.5% {
    transform: scale(1.45);
  }
  5% {
    transform: scale(1);
  }
}

/* Fixed-height window onto the track below: VISIBLE cards plus a small
   buffer (locked in px by js/pitch-reviews.js on load, from the real
   rendered height) that exists ONLY so the bottom mask below has empty
   space to live in — without it the fade would land right on the 4th
   card's own edge and read as clipping it. The mask itself stays smaller
   than that buffer (with a couple px to spare) and is never toggled, so a
   resting card is never touched by it; it only softens the hard
   overflow:hidden edge for a card sliding past it mid-transition. The
   real enter/exit motion is each card's own opacity+scale (see
   js/pitch-reviews.js). */
.pitch__reviews {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent 100%);
}

.pitch__reviews-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Outer: a bare positioning wrapper (see js/pitch-reviews.js) — carries
   only the translateY that cancels the track's own slide for an entering
   card, no visual styling of its own. */
.pitch__review {
  flex-shrink: 0;
}

/* Inner: the actual visible card body — everything (background, border,
   shadow) lives here so scaling it (entrance animation) scales the whole
   card as one piece, not just its text. Top-anchored so it grows from its
   top edge rather than its center. */
.pitch__review-inner {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform-origin: 50% 0%;
}

.pitch__review-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
}

.pitch__review-text {
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Tablet/mobile only: fixed 3-line box (1.6 line-height x 3) rather than
   just a 3-line CAP. Reviews vary in length, so a card that only filled
   1-2 lines was shorter than a 3-line one — the 4 visible cards then
   summed to a different total every rotation and width, so the measured
   panel height and the buffer below the last card kept changing. A
   constant text height makes every card identical → equal gap below at
   any width. Desktop keeps its original variable-height behaviour. */
@media (max-width: 1024px) {
  .pitch__review-text {
    height: 4.8em;
  }
}

/* --- Chip grid (row 2) --- */

.pitch__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Bare reveal wrapper: .pitch__chip's own hover transition already claims
   `transform` (its lift-on-hover), and a same-specificity rule can't merge
   with [data-reveal]'s — it fully replaces it, which silently dropped the
   fade/slide/delay entirely. Carrying the reveal on this outer span
   instead keeps the two transforms (reveal slide-up vs hover lift) from
   ever fighting over the same property. */
.pitch__chip-wrap {
  display: inline-flex;
}

/* True glass: backdrop-filter blurs the ambient color blobs behind it, so
   the tint genuinely comes from what's behind the chip, not a flat fill.
   ::before carries a diagonal "shine" bar that sweeps across on hover —
   the alternate, more distinctly "glass" hover idea (in addition to the
   usual brighten/lift) instead of just a plain border/shadow change. */
.pitch__chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  border-radius: var(--radius-sm);
  /* Matches the reference's actual chip fill exactly: a plain top-to-bottom
     white-opacity gradient (12% down to 5%) over the dark page — reads as
     light-gray at the top fading to near-black at the bottom. Backdrop-
     blur is layered underneath it (this project's own addition) so it's
     still true glass over the section's accent-color background. */
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: border-color 650ms var(--ease-standard), color 650ms var(--ease-standard),
    transform 650ms var(--ease-standard), box-shadow 650ms var(--ease-standard);
}

/* Shine bar: transition lives ONLY on the :hover rule, not the resting
   rule, so entering hover sweeps it across (animated) but leaving hover
   snaps it back to start instantly instead of re-playing the sweep in
   reverse — the shine should only ever be seen running once, on the way
   in, never on the way out. */
.pitch__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
}

.pitch__chip:hover,
.pitch__chip:focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 22px rgba(192, 41, 139, 0.22);
}

.pitch__chip:hover::before,
.pitch__chip:focus-visible::before {
  transform: translateX(120%);
  transition: transform 1750ms var(--ease-standard);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .pitch {
    padding-block: var(--space-20);
  }
  .pitch__row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .pitch__row--reverse .pitch__copy,
  .pitch__row--reverse .pitch__visual {
    order: initial;
  }
  .pitch__row + .pitch__row {
    margin-top: var(--space-12);
  }
  /* Touch (≤1024): no hover animation on the chips — a tap fires :hover and
     would play the lift + shine sweep on every press. Keep them static
     (tap-only), matching the site-wide no-ambient-motion rule on mobile. */
  .pitch__chip {
    transition: none;
  }
  .pitch__chip:hover,
  .pitch__chip:focus-visible {
    transform: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  }
  .pitch__chip:hover::before,
  .pitch__chip:focus-visible::before {
    transform: translateX(-120%);
    transition: none;
  }
}

@media (max-width: 767px) {
  .pitch {
    padding-block: var(--space-16);
  }
  .pitch__title {
    font-size: 26px;
  }
  .pitch__text {
    font-size: var(--fs-body);
  }
}