/* ==========================================================================
   FAQ — "Questions before you jump in?" Content (all 10 Q&A pairs) taken
   from schoolofmotion.com's own FAQ section; visual style taken from the
   user's own Figma mockup instead of the reference's actual (flatter,
   divider-only) live styling — rounded "pill" cards, circular +/x toggle,
   purple-tinted active state. Smooth height animation via the CSS
   grid-template-rows 0fr->1fr trick, no JS height measuring needed.
   ========================================================================== */

.faq {
  background-color: #06060f;
  background-image: radial-gradient(circle at 90% 10%, rgba(91, 42, 134, 0.14), transparent 32%),
    radial-gradient(circle at 6% 90%, rgba(255, 122, 26, 0.08), transparent 28%);
  padding-top: 140px;
  padding-bottom: 40px;
}

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

/* --- Intro column --- */

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

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

/* A loose cluster of gradient question marks, sized/placed to match the
   user's own reference layout. js/faq-marks-parallax.js (built after the
   mechanic in the user's old site — parallax.js, a "scene" of elements each
   carrying their own data-depth, moved opposite/with the cursor by that
   amount) writes --px/--py per mark every animation frame via its own
   requestAnimationFrame+lerp loop — no CSS transition on this property, on
   purpose: a transition re-triggered on every mousemove event is always
   mid-flight chasing a target that itself keeps moving, which reads as lag
   rather than smoothness; the JS-side lerp is what actually produces the
   smooth follow. Negative depths (marks 2, 6, 9) drift the opposite way
   from the rest for a bit of visual tension, same as the reference. Three
   nested elements per mark, each owning exactly one kind of motion so none
   of their transitions/animations fight over the same `transform` property:
     .faq__mark        — position + the one-time reveal (opacity/scale, slow easing)
     .faq__mark-inner  — ONLY the live cursor offset (no transition — smoothed in JS)
     .faq__mark-drift  — ONLY the ambient float (an infinite @keyframes loop,
                          own duration/delay per mark so they wander out of
                          sync with each other instead of bobbing in unison)
   Collapsing any two of these into one element/property would make the
   slower one throttle or get stomped by the faster one every update. */
.faq__marks {
  position: relative;
  height: 560px;
  margin-top: var(--space-10);
  user-select: none;
  pointer-events: none;
}

.faq__mark {
  position: absolute;
  transform: translate(-50%, -50%) translateY(28px);
  opacity: 0;
  transition: opacity 1100ms var(--ease-standard), transform 1100ms var(--ease-standard);
}

.faq__marks.is-revealed .faq__mark {
  opacity: 0.94;
  transform: translate(-50%, -50%) translateY(0);
}

/* Cascade, not a simultaneous pop: mark 1 (topmost) leads, each following
   mark starts 15 frames (~250ms @ 60fps) after the previous one, in the
   same top-to-bottom order they already sit in visually. */
.faq__mark--1 { transition-delay: 0ms, 0ms; }
.faq__mark--2 { transition-delay: 250ms, 250ms; }
.faq__mark--3 { transition-delay: 500ms, 500ms; }
.faq__mark--4 { transition-delay: 750ms, 750ms; }
.faq__mark--5 { transition-delay: 1000ms, 1000ms; }
.faq__mark--6 { transition-delay: 1250ms, 1250ms; }
.faq__mark--7 { transition-delay: 1500ms, 1500ms; }
.faq__mark--8 { transition-delay: 1750ms, 1750ms; }
.faq__mark--9 { transition-delay: 2000ms, 2000ms; }

.faq__mark-inner {
  display: inline-block;
  transform: translate(var(--px, 0px), var(--py, 0px));
}

.faq__mark-drift {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: faqMarkDrift 8s ease-in-out infinite;
  animation-play-state: paused;
}

.faq__marks.is-revealed .faq__mark-drift {
  animation-play-state: running;
}

@keyframes faqMarkDrift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(4px, -7px); }
  50% { transform: translate(-4px, -3px); }
  75% { transform: translate(-3px, 5px); }
  100% { transform: translate(0, 0); }
}

/* animation-delay on each .faq__mark-drift = its own entrance's transition-
   delay + the 1100ms transition-duration (so drift only starts once that
   mark has actually finished fading/sliding in) plus a bit of extra
   per-mark variance on top, so the idle float still wanders out of sync
   between marks instead of all snapping into their loops at once. */
.faq__mark--1 { top: 15.5%; left: 21.5%; }
.faq__mark--1 .faq__mark-drift { font-size: 100px; animation-duration: 7s; animation-delay: 1100ms; }

.faq__mark--2 { top: 26.4%; left: 79.8%; }
.faq__mark--2 .faq__mark-drift { font-size: 100px; animation-duration: 8.5s; animation-delay: 1950ms; }

.faq__mark--3 { top: 32.5%; left: 53.3%; }
.faq__mark--3 .faq__mark-drift { font-size: 45px; animation-duration: 6.5s; animation-delay: 2800ms; }

.faq__mark--4 { top: 41%; left: 28.3%; }
.faq__mark--4 .faq__mark-drift { font-size: 55px; animation-duration: 9s; animation-delay: 2150ms; }

.faq__mark--5 { top: 54.7%; left: 54.9%; }
.faq__mark--5 .faq__mark-drift { font-size: 115px; animation-duration: 7.5s; animation-delay: 3000ms; }

.faq__mark--6 { top: 61.3%; left: 81.9%; }
.faq__mark--6 .faq__mark-drift { font-size: 35px; animation-duration: 8s; animation-delay: 3850ms; }

.faq__mark--7 { top: 70.8%; left: 23.1%; }
.faq__mark--7 .faq__mark-drift { font-size: 65px; animation-duration: 6s; animation-delay: 2800ms; }

.faq__mark--8 { top: 79.6%; left: 71.7%; }
.faq__mark--8 .faq__mark-drift { font-size: 55px; animation-duration: 9.5s; animation-delay: 3950ms; }

.faq__mark--9 { top: 84%; left: 42.2%; }
.faq__mark--9 .faq__mark-drift { font-size: 38px; animation-duration: 7.2s; animation-delay: 3800ms; }

/* --- Accordion list --- */

.faq__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Opening a row grows .faq__row-answer-wrap, which — in normal flow —
   pushes everything after .faq (the divider, footer, ...) down by that
   same amount. js/faq.js sizes this spacer to the tallest answer up front
   (--faq-reserve) and shrinks it by exactly however much the open row grew
   by, on the same transition as the row itself — so the section's own
   total height, and everything below it, never actually moves, while each
   row still visibly collapses/expands normally. */
.faq__reserve {
  height: var(--faq-reserve, 0px);
  transition: height 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveal is driven off .faq__list (one scroll trigger, at the first row),
   not each row's own [data-reveal] — the old per-row setup gave each row
   its own IntersectionObserver, so a row below the fold only started
   animating once independently scrolled to, and every row from #7 down
   shared the same 240ms delay (a copy-paste ceiling, not a deliberate
   cascade) — both together read as "several rows just snap in at once"
   rather than one clean top-to-bottom cascade. Now: the whole list decides
   to reveal the moment its first row is in view, and every row's own
   entrance is queued from that single moment via transition-delay (see the
   nth-child rules below) — a row still off-screen at that point keeps
   counting down and animates in when scrolled to, instead of waiting for
   its own separate trigger.
   opacity/transform get their own entry in the transition-delay list
   (positions 4-5, after background/border-color/box-shadow) so the
   per-row stagger only affects the entrance, not hover feedback. */
.faq__row {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  opacity: 0;
  transform: translateY(24px);
  transition: background 800ms var(--ease-standard), border-color 800ms var(--ease-standard),
    box-shadow 1625ms var(--ease-standard), opacity 1100ms var(--ease-standard), transform 1100ms var(--ease-standard);
}

.faq__list.is-revealed .faq__row {
  opacity: 1;
  transform: translateY(0);
}

.faq__list.is-revealed .faq__row:nth-child(1) { transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms; }
.faq__list.is-revealed .faq__row:nth-child(2) { transition-delay: 0ms, 0ms, 0ms, 250ms, 250ms; }
.faq__list.is-revealed .faq__row:nth-child(3) { transition-delay: 0ms, 0ms, 0ms, 500ms, 500ms; }
.faq__list.is-revealed .faq__row:nth-child(4) { transition-delay: 0ms, 0ms, 0ms, 750ms, 750ms; }
.faq__list.is-revealed .faq__row:nth-child(5) { transition-delay: 0ms, 0ms, 0ms, 1000ms, 1000ms; }
.faq__list.is-revealed .faq__row:nth-child(6) { transition-delay: 0ms, 0ms, 0ms, 1250ms, 1250ms; }
.faq__list.is-revealed .faq__row:nth-child(7) { transition-delay: 0ms, 0ms, 0ms, 1500ms, 1500ms; }
.faq__list.is-revealed .faq__row:nth-child(8) { transition-delay: 0ms, 0ms, 0ms, 1750ms, 1750ms; }
.faq__list.is-revealed .faq__row:nth-child(9) { transition-delay: 0ms, 0ms, 0ms, 2000ms, 2000ms; }
.faq__list.is-revealed .faq__row:nth-child(10) { transition-delay: 0ms, 0ms, 0ms, 2250ms, 2250ms; }

.faq__row:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 18px 2px rgba(139, 92, 246, 0.22);
}

.faq__row[aria-expanded="true"] {
  background: rgba(139, 92, 246, 0.07);
  border-color: rgba(139, 92, 246, 0.55);
}

.faq__row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.faq__row-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.faq__row-icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--color-text-muted);
  transition: transform 800ms var(--ease-standard), border-color 800ms var(--ease-standard),
    background 800ms var(--ease-standard), color 800ms var(--ease-standard);
}

.faq__row-icon::before,
.faq__row-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq__row-icon::before {
  width: 10px;
  height: 1.5px;
}

.faq__row-icon::after {
  width: 1.5px;
  height: 10px;
}

.faq__row[aria-expanded="true"] .faq__row-icon {
  transform: rotate(45deg);
  border-color: rgba(139, 92, 246, 0.6);
  background: rgba(139, 92, 246, 0.2);
}

/* Height (not the grid-template-rows 0fr->1fr trick) so this animates
   with the exact same property/timing as .faq__reserve's own height
   transition below — js/faq.js sets both explicitly, in px, from the same
   measured number. A grid-track interpolation and a plain height
   interpolation don't necessarily land on the identical pixel every frame
   even with matching duration/easing, so the two were drifting apart by a
   pixel or so mid-transition — enough for the content below to visibly
   flicker/reflow as the sum briefly wasn't quite constant. Same property
   type on both sides removes that mismatch entirely. */
.faq__row-answer-wrap {
  display: block;
  height: 0px;
  overflow: hidden;
  transition: height 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__row-answer {
  display: block;
  min-height: 0;
  overflow: hidden;
}

.faq__row-answer-text {
  display: block;
  padding-top: var(--space-4);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 700ms var(--ease-standard);
}

.faq__row[aria-expanded="true"] .faq__row-answer-text {
  opacity: 1;
  transition: opacity 950ms var(--ease-standard) 300ms;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .faq {
    padding-top: var(--space-20);
  }
  .faq__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  /* Cursor-parallax question marks are decorative and have no touch
     equivalent — drop them on stacked layouts to keep the intro tidy. */
  .faq__marks {
    display: none;
  }
}

@media (max-width: 767px) {
  .faq {
    padding-top: var(--space-16);
  }
  .faq__title {
    font-size: 28px;
  }
  .faq__desc {
    font-size: var(--fs-body);
  }
}