/* ── v2/styles/v2-probability.css ──────────────────────────────────────────
   Animation vocabulary for the "Thinking in Probabilities" charts
   (v2/js/views/prob-charts.js). The storyboard engine swaps innerHTML on every
   scene paint, so these keyframes replay each time a probability chart mounts —
   the lines draw on, the bars rise, the regions and cells fade/pop in. Pure CSS;
   no JS animation loop. Honours prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */

/* Line / path draw-on. Charts set pathLength="1" so a single dash spans the
   whole path regardless of its real length. */
.pc-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pcDraw 1.15s cubic-bezier(.45, .05, .2, 1) forwards;
}
@keyframes pcDraw { to { stroke-dashoffset: 0; } }

/* Bars / columns grow from their baseline. fill-box origin so scaleY pins to
   the bottom edge of each rect. */
.pc-rise {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pcRise .7s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes pcRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Soft fade-in for shaded regions, guide lines and labels. Opacity lives on the
   wrapping <g>; child fill-opacity sets the final tint. */
.pc-fade {
  opacity: 0;
  animation: pcFade .8s ease forwards;
}
@keyframes pcFade { to { opacity: 1; } }

/* Pop-in for discrete marks (streak cells, the single "draw" dot). */
.pc-pop {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pcPop .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes pcPop {
  from { transform: scale(0); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-draw, .pc-rise, .pc-fade, .pc-pop {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
}

/* ── Vision launch-pad cards ────────────────────────────────────────────────
   Woven between the Vision sections (js/views/vision.js). Each is a glowing,
   gradient-edged "shift" card that bridges the dream above it to one of the 8
   probability modules and launches it on tap. */
.v2-vprob {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 22px;
  padding: 18px 20px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(var(--wot-bg-1, #111114), var(--wot-bg-1, #111114)) padding-box,
    linear-gradient(120deg, rgba(255,107,31,.55), rgba(255,31,143,.55) 55%, rgba(255,200,90,.5)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 16px 40px rgba(255,31,143,.10), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s cubic-bezier(.2,.85,.25,1), box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.v2-vprob:hover,
.v2-vprob:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(255,31,143,.22), inset 0 1px 0 rgba(255,255,255,.06);
  outline: none;
}
.v2-vprob:active { transform: translateY(-1px); }

/* radial glow blob, drifts on hover */
.v2-vprob-glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,31,143,.22), transparent 62%);
  pointer-events: none;
  transition: transform .5s ease, opacity .3s ease;
  opacity: .8;
}
.v2-vprob:hover .v2-vprob-glow { transform: translate(-24px, 14px) scale(1.08); opacity: 1; }

/* decorative bell glyph, lower-right watermark */
.v2-vprob-glyph {
  position: absolute;
  right: 14px; bottom: 10px;
  width: 96px; height: 56px;
  opacity: .22;
  pointer-events: none;
}

/* big module number in a gradient ring */
.v2-vprob-num {
  position: relative;
  flex: 0 0 auto;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 26px; font-weight: 900; letter-spacing: -1px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,107,31,.28), rgba(255,31,143,.14)),
    var(--wot-bg-2, #16161b);
  border: 1.5px solid rgba(255,200,90,.5);
  box-shadow: 0 0 22px rgba(255,107,31,.25);
}
.v2-vprob-num i { font-size: 12px; font-weight: 800; color: var(--wot-text-2, #7a7a85); font-style: normal; margin-left: 1px; align-self: flex-end; padding-bottom: 12px; }

.v2-vprob-main { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; z-index: 1; }
.v2-vprob-k {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #FFC85A;
}
.v2-vprob-k svg { width: 13px; height: 13px; }
.v2-vprob-hook {
  font-size: 15.5px; line-height: 1.42; font-weight: 600;
  color: var(--wot-text-0, #fff);
}
.v2-vprob-cta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px;
}
.v2-vprob-cta b {
  font-size: 13px; font-weight: 800;
  background: linear-gradient(120deg, #FF6B1F, #FF1F8F);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v2-vprob-go {
  font-size: 12.5px; font-weight: 800; color: #0a0a0a;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(120deg, #FF6B1F, #FF1F8F);
  box-shadow: 0 6px 18px rgba(255,31,143,.3);
  transition: transform .18s ease;
}
.v2-vprob:hover .v2-vprob-go { transform: translateX(3px); }

@media (max-width: 560px) {
  .v2-vprob { gap: 13px; padding: 16px; }
  .v2-vprob-num { width: 50px; height: 50px; font-size: 22px; }
  .v2-vprob-hook { font-size: 14.5px; }
  .v2-vprob-glyph { width: 76px; opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-vprob, .v2-vprob-glow, .v2-vprob-go { transition: none; }
}