/* v3 — in-page animated versions of the brag-video beats.
   Loaded after site_v2.css; only touches the v3 sections. */

/* Muted red for "wait" — from our palette family, not a stoplight red */
:root { --v3-red: #b5533c; }

/* ---------- shared card language (matches the app UI in the video) ---------- */

.v3-qcard,
.v3-composite,
.v3-gauge-card {
  font-family: var(--font-sans);
  color: var(--brand-brown-dark);
  background: #fff;
  border: 1px solid var(--shadow-line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

/* ======================================================================
   1 · Pinned, scroll-scrubbed: the weeds -> the landscape -> scored
   --p (0..1) is set from scroll by the script in index_v3.html
   ====================================================================== */

.v3-s1 {
  --p: 0;
  display: block;
  padding: 0;
  height: 190vh;
}

.v3-s1__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.v3-s1.narrative--reverse .v3-s1__sticky {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
}

.v3-stage {
  position: relative;
  height: min(34rem, 78vh);
  overflow: hidden;
  border: 1px solid var(--shadow-line);
  border-radius: 32px;
  background: var(--brand-bg);
  box-shadow: var(--shadow-soft);
}

.v3-stage__terrain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: clamp(0, calc((var(--p) - 0.18) * 3), 1);
  transform: scale(calc(1.15 - clamp(0, calc((var(--p) - 0.18) * 1.6), 1) * 0.15));
}

.v3-stage__compass {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 52px;
  height: 52px;
  opacity: clamp(0, calc((var(--p) - 0.5) * 4), 1);
  transform: rotate(calc((1 - clamp(0, calc((var(--p) - 0.5) * 2.5), 1)) * -50deg));
}

/* Captions share the top band; one at a time */
.v3-stage__captions {
  position: absolute;
  inset: 2.1rem 1.5rem auto;
  height: 4.6rem;
  text-align: center;
}

.v3-cap {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  color: var(--brand-brown-mid);
}

.v3-cap--a {
  opacity: clamp(0, calc((0.42 - var(--p)) * 10), 1);
}

.v3-cap--b {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 600;
  color: var(--brand-brown-dark);
  opacity: min(clamp(0, calc((var(--p) - 0.5) * 10), 1), clamp(0, calc((0.82 - var(--p)) * 10), 1));
}

.v3-cap--c {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 600;
  color: var(--brand-green-dark);
  opacity: clamp(0, calc((var(--p) - 0.86) * 12), 1);
}

/* The question card: too close at first, then it settles into the landscape */
.v3-qcard {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(13rem, 46%);
  padding: 1rem 1.15rem 0.9rem;
  transform: translate(-50%, -50%) scale(calc(2.1 - clamp(0, calc(var(--p) * 2.4), 1) * 1.1));
  transform-origin: 50% 40%;
}

.v3-qcard__eyebrow {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-brown-light);
}

.v3-qcard__title {
  margin: 0.25rem 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
}

.v3-qcard__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.5rem;
  border-top: 1px solid var(--shadow-line);
  font-size: 0.72rem;
  color: var(--brand-brown-light);
}

.v3-qcard__row strong {
  font-size: 0.9rem;
  color: var(--brand-brown-dark);
}

.v3-qcard__row--scored {
  margin-top: 0.5rem;
  opacity: clamp(0, calc((var(--p) - 0.86) * 12), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.86) * 12), 1)) * 6px));
}

.v3-qcard__row--scored strong {
  color: var(--brand-green-dark);
}

.v3-qcard__row--scored i {
  font-style: normal;
}

/* The landscape: neighbouring questions fly out from the one you were staring at */
.v3-mini {
  --k: clamp(0, calc((var(--p) - var(--at)) * 9), 1);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7.4rem;
  padding: 0.5rem 0.6rem 0.45rem;
  font-family: var(--font-sans);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--shadow-line);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(61, 50, 37, 0.14);
  opacity: var(--k);
  transform: translate(-50%, -50%)
    translate(calc((1 - var(--k)) * var(--dx)), calc((1 - var(--k)) * var(--dy)))
    scale(calc(0.6 + var(--k) * 0.4));
}

.v3-mini p {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-brown-dark);
}

.v3-mini span {
  display: block;
  font-size: 0.5rem;
  color: var(--brand-brown-light);
  opacity: clamp(0, calc((var(--p) - 0.86) * 12), 1);
}

.v3-mini b {
  color: var(--brand-green-dark);
  font-weight: 600;
}

/* ======================================================================
   2 · Composite: analysts predict in turn, the composite moves and settles.
   Values are driven by the script (rAF); CSS only handles entrances.
   ====================================================================== */

.v3-composite {
  padding: 1.6rem 1.6rem 1.5rem;
  max-width: 30rem;
  margin-inline: auto;
}

.v3-composite__q {
  margin: 0 0 1.1rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.v3-forecasts {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.v3-forecasts li {
  display: grid;
  grid-template-columns: 9.5rem 1fr 2.4rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.v3-forecasts li.is-in {
  opacity: 1;
  transform: none;
}

.v3-forecasts__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.v3-forecasts .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.dot--you { background: var(--brand-brown-dark); }
.dot--ai { background: var(--brand-green); }
.dot--invite { background: var(--brand-orange-dark); }

.v3-forecasts__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--brand-cream-dark);
  overflow: hidden;
}

.v3-forecasts__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand-sand);
}

.v3-forecasts li.is-in .v3-forecasts__bar i { background: var(--brand-green); }
.v3-forecasts li.is-done .v3-forecasts__bar i { background: var(--brand-sand); }

.v3-forecasts em {
  font-style: normal;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.v3-score {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--shadow-line);
  border-radius: 12px;
  background: var(--brand-bg);
}

.v3-score__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.v3-score__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.v3-score__sub {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  color: var(--brand-brown-light);
}

.v3-score__big {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

.v3-score.is-settled .v3-score__big { color: var(--brand-green-dark); }

.v3-score__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}

.v3-score__row em {
  font-style: normal;
  color: var(--brand-brown-light);
  font-variant-numeric: tabular-nums;
}

.v3-score__track {
  height: 8px;
  border-radius: 999px;
  background: var(--brand-cream-dark);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.v3-score__track:last-child { margin-bottom: 0; }

.v3-score__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
}

.v3-score__track .yes { background: var(--brand-green-dark); }
.v3-score__track .no { background: var(--brand-sand); }

/* ======================================================================
   3 · Readiness gauge: watch it develop, know when to act
   ====================================================================== */

.v3-gauge-card {
  max-width: 26rem;
  margin-inline: auto;
  padding: 1.6rem 1.6rem 1.5rem;
  text-align: center;
}

.v3-gauge-card__label {
  margin: 0 0 0.6rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-brown-light);
}

.v3-gauge {
  display: block;
  width: min(100%, 20rem);
  margin: 0 auto;
  overflow: visible;
}

.v3-gauge__bg,
.v3-gauge__fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.v3-gauge__bg { stroke: var(--brand-sand); }

.v3-gauge__fill {
  stroke: var(--v3-red);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 99;
  transition: stroke 220ms ease;
}

.v3-gauge__value {
  margin: -3.2rem 0 1.4rem;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
}

.v3-gauge__value span { font-variant-numeric: tabular-nums; }

.v3-postures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.v3-postures li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--shadow-line);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brand-brown-light);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.v3-postures li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip);
  opacity: 0.55;
}

.v3-postures li[data-posture="wait"] { --chip: var(--v3-red); }
.v3-postures li[data-posture="prepare"] { --chip: var(--brand-orange-dark); }
.v3-postures li[data-posture="act"] { --chip: var(--brand-green-dark); }

.v3-postures li.is-on {
  background: var(--chip);
  border-color: var(--chip);
  color: #fff;
  transform: scale(1.06);
}

.v3-postures li[data-posture="prepare"].is-on { color: var(--brand-brown-dark); }
.v3-postures li.is-on::before { background: currentColor; opacity: 0.9; }

/* ---------- reduced motion + small screens: no pinning, finished states ---------- */

@media (prefers-reduced-motion: reduce) {
  .v3-s1 { --p: 1 !important; height: auto; }
  .v3-s1__sticky { position: static; height: auto; padding: 4rem 0; }
  .v3-forecasts li { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .v3-s1 { height: auto; padding: 2.75rem 0; }

  .v3-s1__sticky {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .v3-stage { height: 33rem; }
  .v3-mini { width: 4.9rem; padding: 0.35rem 0.4rem; }
  .v3-mini p { font-size: 0.52rem; }
  .v3-mini span { font-size: 0.4rem; }
  .v3-qcard { width: 8.4rem; padding: 0.7rem 0.75rem 0.6rem; }
  .v3-qcard__title { font-size: 0.82rem; }
  .v3-qcard__row { font-size: 0.62rem; }
  .v3-qcard__row strong { font-size: 0.75rem; white-space: nowrap; }

  .v3-forecasts li { grid-template-columns: 8rem 1fr 2.2rem; }
}

/* ---------- quicker copy/visual entrances on the v3 sections ---------- */

.js-enhanced .v3-s1 .section__copy :is(.eyebrow, h2, p),
.js-enhanced .v3-s2 .section__copy :is(.eyebrow, h2, p),
.js-enhanced .v3-s3 .section__copy :is(.eyebrow, h2, p) {
  transition-duration: 480ms;
}

.js-enhanced .v3-s1 .section__visual,
.js-enhanced .v3-s2 .section__visual,
.js-enhanced .v3-s3 .section__visual {
  transition-duration: 520ms;
  transition-delay: 80ms;
}

.js-enhanced .narrative.is-revealed:is(.v3-s1, .v3-s2, .v3-s3) .section__copy h2 { transition-delay: 90ms; }
.js-enhanced .narrative.is-revealed:is(.v3-s1, .v3-s2, .v3-s3) .section__copy p { transition-delay: 190ms; }