/* ════════════════════════════════════════════════════════════════
   RIFF — "How it works"
   Three cropped pieces of the real app, alternating down the page and
   wired together with elbow connectors. Not phone frames — just the one
   component that carries each step:

     1 ask     →  QuestionScreen question card + idle mic, on a card deck
     2 record  →  QuestionScreen recording control, floating on a shadow
     3 draft   →  FirstPieceReveal draft card, on the prism glow

   Component values are copied from the app, not re-invented:
     src/app/onboarding/quick_value/QuestionScreen.tsx
     src/app/onboarding/quick_value/FirstPieceReveal.tsx
     src/styles/globals.css  (riff-wave, riff-glow-pulse, riff-ring-ripple,
                              prism-draft)
   Everything is namespaced `hw-` so it can never collide with the landing
   page's own .step-num / .section / .title rules.
   ════════════════════════════════════════════════════════════════ */

.riff-landing #how {
  background: var(--white);
  color: var(--ink);

  /* app-screen palette (matches src/styles/globals.css) */
  --hw-coral: #F24968;
  --hw-white: #FAFAFA;

  /* brand prism palette */
  --p1: #ff6eb4; --p2: #a78bfa; --p3: #60a5fa; --p4: #34d399;
  --p5: #fde68a; --p6: #fb923c; --p7: #f87171; --p8: #ff6eb4;

  --hw-line: rgba(10,10,10,0.38);

  /* Shared by the grid gap and the connector maths, so the elbows stay
     welded to the card edges at every width. --hw-w1/2/3 are the three
     card widths; --hw-drop-* is how far into the next card the line lands. */
  --hw-gap: clamp(28px, 5vw, 72px);
  --hw-w1: 360px;
  --hw-w2: 448px;
  --hw-w3: 320px;
  --hw-drop-a: 160px;
  --hw-drop-b: 140px;
}

/* Wider than the page's 1100px prose measure — the alternating layout
   needs the room to read as a zig-zag rather than a stack. */
.riff-landing #how .container { max-width: 1240px; }

.riff-landing .hw-title {
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 48px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(56px, 8vw, 104px);
}

.riff-landing .hw-flow {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.riff-landing .hw-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--hw-gap);
}
/* Steps 2 flips: visual right, copy left. */
.riff-landing .hw-step--flip .hw-visual { grid-column: 2; grid-row: 1; }
.riff-landing .hw-step--flip .hw-copy   { grid-column: 1; grid-row: 1; }

.riff-landing .hw-visual { position: relative; justify-self: start; width: 100%; }
.riff-landing .hw-copy {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── Elbow connectors ────────────────────────────────────────
   Each join is its own row: the horizontal segment sits flush with the
   bottom of the step above, the vertical drops onto the top of the card
   below. Percentages are of the container, so the elbow holds its shape
   at any width. They draw themselves in when scrolled to. */
.riff-landing .hw-join {
  position: relative;
  height: clamp(88px, 11vw, 168px);
}
.riff-landing .hw-join i {
  position: absolute;
  display: block;
  background: var(--hw-line);
}
.riff-landing .hw-join .hw-join-h { top: 0; height: 1.5px; }
.riff-landing .hw-join .hw-join-v { top: 0; bottom: 0; width: 1.5px; }

/* step 1 → 2 : leaves card 1's right side, steps across, drops onto card 2.
   Lifted 28px so it emerges from the card's flank, not its corner. */
.riff-landing .hw-join--a .hw-join-h,
.riff-landing .hw-join--a .hw-join-v { top: -28px; }
.riff-landing .hw-join--a .hw-join-h {
  left: min(var(--hw-w1), calc(50% - var(--hw-gap) / 2));
  right: calc(50% - var(--hw-gap) / 2 - var(--hw-drop-a));
  transform-origin: left center;
}
.riff-landing .hw-join--a .hw-join-v {
  left: calc(50% + var(--hw-gap) / 2 + var(--hw-drop-a));
  transform-origin: center top;
}
/* step 2 → 3 : back out to the left from card 2's bottom edge, drops onto card 3 */
.riff-landing .hw-join--b .hw-join-h {
  left: var(--hw-drop-b);
  right: calc(50% - var(--hw-gap) / 2);
  transform-origin: right center;
}
.riff-landing .hw-join--b .hw-join-v {
  left: var(--hw-drop-b);
  transform-origin: center top;
}

/* ── Scroll choreography ─────────────────────────────────────
   Hidden state only exists while JS is running; script.js adds .is-in as
   each element reaches the viewport (and adds it to everything at once
   under reduced-motion, so nothing is ever stranded invisible). */
.riff-landing.js #how .hw-title:not(.is-in),
.riff-landing.js #how .hw-closing:not(.is-in),
.riff-landing.js #how .hw-step:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
}
.riff-landing #how .hw-title,
.riff-landing #how .hw-closing,
.riff-landing #how .hw-step {
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.riff-landing #how .is-in { opacity: 1; transform: none; }

/* the visual leads, the copy follows a beat later */
.riff-landing #how .hw-step .hw-copy { transition: opacity 0.7s ease-out 0.22s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s; }
.riff-landing.js #how .hw-step:not(.is-in) .hw-copy { opacity: 0; transform: translateY(14px); }

/* connectors draw: across first, then down */
.riff-landing.js #how .hw-join .hw-join-h { transform: scaleX(0); }
.riff-landing.js #how .hw-join .hw-join-v { transform: scaleY(0); }
.riff-landing #how .hw-join.is-in .hw-join-h { transform: scaleX(1); transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.riff-landing #how .hw-join.is-in .hw-join-v { transform: scaleY(1); transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.45s; }

/* ════════════════════════════════════════════════════════════
   1 · ASK — question card + idle mic, sitting on a deck of cards
   ════════════════════════════════════════════════════════════ */
.riff-landing .hw-visual--ask { max-width: var(--hw-w1); }

/* The deck fans out behind the black card, darkest first, each one tilted a
   little further off true. `translate` and `rotate` are set as their own
   properties (not packed into `transform`) so the drift animation can move
   a card without having to restate its tilt. */
.riff-landing .hw-deck {
  position: absolute;
  inset: 0;
  border-radius: 26px;
}
.riff-landing .hw-deck--2 { z-index: 3; background: #707070; translate: -8px 14px;  rotate: -4.53deg; }
.riff-landing .hw-deck--3 { z-index: 2; background: #A4A4A4; translate: 10px 28px;  rotate: -2.92deg; }
.riff-landing .hw-deck--4 { z-index: 1; background: #D5D5D5; translate: -6px 44px;  rotate: -7.64deg;
  /* one shadow for the whole stack, cast by the card at the back */
  box-shadow: 0 34px 64px -20px rgba(10,10,10,0.42);
}
.riff-landing .hw-step.is-in .hw-deck--2 { animation: hwDeck2 8s ease-in-out infinite; }
.riff-landing .hw-step.is-in .hw-deck--3 { animation: hwDeck3 8s ease-in-out 0.7s infinite; }
.riff-landing .hw-step.is-in .hw-deck--4 { animation: hwDeck4 8s ease-in-out 1.4s infinite; }
@keyframes hwDeck2 {
  0%, 100% { translate: -8px 14px; }
  50%      { translate: -12px 17px; }
}
@keyframes hwDeck3 {
  0%, 100% { translate: 10px 28px; }
  50%      { translate: 14px 32px; }
}
@keyframes hwDeck4 {
  0%, 100% { translate: -6px 44px; }
  50%      { translate: -11px 49px; }
}

.riff-landing .hw-ask {
  position: relative;
  z-index: 4;
  background: var(--ink);
  border-radius: 26px;
  padding: 22px 20px 26px;
}

/* collapsible question card, collapsed state */
.riff-landing .hw-q-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hw-coral);
  border-radius: 16px;
  padding: 16px 18px;
}
.riff-landing .hw-q-row { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.riff-landing .hw-q-text {
  margin: 0;
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.riff-landing .hw-q-chev { flex-shrink: 0; margin-top: 5px; display: inline-flex; }
.riff-landing .hw-q-hint {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--hw-coral);
}

.riff-landing .hw-mic-wrap {
  position: relative;
  width: 100%;
  height: 148px;
  display: grid;
  place-items: center;
}
.riff-landing .hw-mic-glow,
.riff-landing .hw-mic-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.riff-landing .hw-mic-glow {
  width: 132px; height: 132px;
  background: radial-gradient(circle, rgba(242,73,104,0.55) 0%, rgba(242,73,104,0.12) 45%, transparent 70%);
  filter: blur(6px);
  transform: translate(-50%, -50%);
  animation: hwGlowPulse 3s ease-in-out infinite;
}
.riff-landing .hw-mic-ripple {
  width: 106px; height: 106px;
  border: 1.5px solid rgba(242,73,104,0.5);
  transform: translate(-50%, -50%);
  animation: hwRingRipple 3s ease-out infinite;
}
.riff-landing .hw-mic-btn {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--hw-coral);
  box-shadow: 0 0 0 5px rgba(242,73,104,0.12);
  display: grid;
  place-items: center;
}
@keyframes hwGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.4; }
  50%      { transform: translate(-50%, -50%) scale(1.22); opacity: 0.8; }
}
@keyframes hwRingRipple {
  0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   2 · RECORD — the recording control, nothing else
   ════════════════════════════════════════════════════════════ */
.riff-landing .hw-visual--record { max-width: var(--hw-w2); }

.riff-landing .hw-rec-card {
  background: var(--hw-white);
  border: 1px solid rgba(10,10,10,0.05);
  border-radius: 24px;
  padding: 24px 26px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 2px 4px rgba(10,10,10,0.04), 0 34px 60px -26px rgba(10,10,10,0.34);
}
.riff-landing .hw-rec-top { display: flex; align-items: center; gap: 14px; }
.riff-landing .hw-rec-timer {
  font-weight: 700;
  font-size: 1.22rem;
  white-space: nowrap;
  color: var(--hw-coral);
}
.riff-landing .hw-rec-max { color: rgba(10,10,10,0.4); font-weight: 500; font-size: 0.95rem; }

.riff-landing .hw-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* bars spread across the card, as in the app */
  gap: 2px;
  flex: 1;
  height: 38px;
}
.riff-landing .hw-wave span {
  flex: 1;
  max-width: 4px;
  height: 32px;
  border-radius: 2px;
  background: #C9C9C9;
  transform-origin: center;
  transform: scaleY(0.3);
}
/* varied bar heights so the waveform reads as speech, not a test pattern —
   and still looks organic when the animation is suppressed */
.riff-landing .hw-wave span:nth-child(3n)   { height: 22px; }
.riff-landing .hw-wave span:nth-child(4n+1) { height: 36px; }
.riff-landing .hw-wave span:nth-child(5n+2) { height: 16px; }
.riff-landing .hw-step.is-in .hw-wave span { animation: hwWave 0.9s ease-in-out infinite; }
.riff-landing .hw-wave .hw-head {
  flex: 0 0 auto;
  width: 2.5px;
  max-width: none;
  margin-left: 3px;
  border-radius: 0;
  background: var(--hw-coral);
  transform: none;
  animation: none !important;
}
@keyframes hwWave {
  0%, 100% { transform: scaleY(0.28); }
  50%      { transform: scaleY(1); }
}

.riff-landing .hw-cap-track { height: 4px; border-radius: 2px; background: rgba(10,10,10,0.1); overflow: hidden; }
.riff-landing .hw-cap-fill  { height: 100%; border-radius: 2px; background: var(--hw-coral); width: 35%; }
.riff-landing.js #how .hw-step:not(.is-in) .hw-cap-fill { width: 0; }
.riff-landing #how .hw-step.is-in .hw-cap-fill { transition: width 2.6s cubic-bezier(0.33, 1, 0.68, 1) 0.3s; }

.riff-landing .hw-ctrl-row { display: flex; align-items: center; justify-content: space-between; }
.riff-landing .hw-ctrl { padding: 8px; display: flex; }
.riff-landing .hw-ctrl-confirm {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px -8px rgba(10,10,10,0.5);
}

/* ════════════════════════════════════════════════════════════
   3 · DRAFT — the finished piece, on the prism
   ════════════════════════════════════════════════════════════ */
.riff-landing .hw-visual--draft { max-width: var(--hw-w3); }

/* the prism glow, lifted from globals.css .prism-draft and pushed harder —
   on white it is the whole point of this step, so it spills well past the
   card and stays fully saturated. */
@property --hw-prism-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.riff-landing .hw-prism { position: relative; z-index: 0; border-radius: 18px; }
.riff-landing .hw-prism::before,
.riff-landing .hw-prism::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--hw-prism-angle),
    var(--p1), var(--p2), var(--p3), var(--p4),
    var(--p5), var(--p6), var(--p7), var(--p8));
  pointer-events: none;
}
/* wide, soft bloom */
.riff-landing .hw-prism::after {
  inset: -9%;
  filter: blur(44px);
  opacity: 0.95;
  animation: hwPrismSwirl 9s linear infinite, hwPrismBreathe 6s ease-in-out infinite;
}
/* tight, saturated edge so the colour reads right at the card border */
.riff-landing .hw-prism::before {
  inset: 2%;
  filter: blur(16px);
  opacity: 0.7;
  animation: hwPrismSwirl 9s linear infinite reverse;
}
@keyframes hwPrismSwirl   { to { --hw-prism-angle: 360deg; } }
@keyframes hwPrismBreathe { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

.riff-landing .hw-draft-card {
  position: relative;
  z-index: 1;
  background: var(--hw-white);
  color: var(--ink);
  border-radius: 18px;
  padding: 22px 20px 20px;
  box-shadow: 0 20px 44px -24px rgba(10,10,10,0.4);
}
.riff-landing .hw-draft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.riff-landing .hw-draft-label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #9A9A9A;
  line-height: 1.4;
}
.riff-landing .hw-draft-prose { font-size: 0.95rem; line-height: 1.6; color: #1A1A1A; margin: 0 0 14px; }
/* the draft writes itself in, line by line */
.riff-landing.js #how .hw-step:not(.is-in) .hw-draft-prose { opacity: 0; transform: translateY(8px); }
.riff-landing #how .hw-draft-prose { transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.riff-landing #how .hw-step.is-in .hw-draft-prose:nth-of-type(1) { transition-delay: 0.35s; }
.riff-landing #how .hw-step.is-in .hw-draft-prose:nth-of-type(2) { transition-delay: 0.65s; }

.riff-landing .hw-draft-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #9A9A9A;
  margin: 2px 0 0;
}
.riff-landing .hw-draft-dash { width: 16px; height: 1px; background: #C9C9C9; display: inline-block; }

/* ── Closing line ────────────────────────────────────────── */
.riff-landing .hw-closing {
  text-align: center;
  margin: clamp(64px, 9vw, 120px) auto 0;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  color: var(--ink);
}

/* ── Responsive: below the fold-out width the zig-zag becomes a stack ── */
@media (max-width: 860px) {
  .riff-landing .hw-step {
    grid-template-columns: 1fr;
    gap: clamp(30px, 7vw, 44px);
    justify-items: center;
    text-align: center;
  }
  .riff-landing .hw-step--flip .hw-visual,
  .riff-landing .hw-step--flip .hw-copy { grid-column: 1; grid-row: auto; }
  .riff-landing .hw-visual { justify-self: center; }
  .riff-landing .hw-copy { max-width: 34ch; }

  /* Side by side the copy sat beside the artwork, so anything spilling out
     of a card's box was harmless. Stacked, it lands on the text. None of
     this spill is in the layout — the deck is absolutely positioned, and
     the prism and shadows are filters — so the room has to be booked by
     hand. Deck: 31px drop + ~13px from the tilt + shadow. */
  .riff-landing .hw-visual--ask { margin-bottom: 54px; }
  .riff-landing .hw-visual--record { margin-bottom: 16px; }   /* soft shadow */
  .riff-landing .hw-visual--draft { margin-bottom: 26px; }    /* prism bloom */

  /* a single straight drop replaces the elbow */
  .riff-landing .hw-join { height: clamp(56px, 12vw, 80px); }
  .riff-landing .hw-join .hw-join-h { display: none; }
  .riff-landing .hw-join .hw-join-v { left: 50%; }
  /* the desktop elbow starts 28px above the card's base to leave its flank;
     stacked there is no flank to leave, and the lift pushes the line up
     into the copy. */
  .riff-landing .hw-join--a .hw-join-v { top: 0; }

  /* pull the fan in — a centred card has less room either side */
  .riff-landing .hw-deck--2 { translate: -5px 10px; rotate: -3deg; }
  .riff-landing .hw-deck--3 { translate: 7px 20px;  rotate: -2deg; }
  .riff-landing .hw-deck--4 { translate: -4px 31px; rotate: -5deg; }
  .riff-landing .hw-step.is-in .hw-deck--2,
  .riff-landing .hw-step.is-in .hw-deck--3,
  .riff-landing .hw-step.is-in .hw-deck--4 { animation: none; }
}