/* Shared motion; all content remains visible without animation. */
.v2-hero-visual { position: relative; }
.v2-hero-visual::after { content: ''; position: absolute; inset: 0 0 32px; border-radius: 20px; pointer-events: none; background: radial-gradient(circle at var(--v2-light-x, 50%) var(--v2-light-y, 50%), rgba(137, 217, 240, .16), transparent 55%); opacity: 0; transition: opacity .4s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .v2-hero-visual { transform: perspective(1200px) translate3d(var(--v2-shift-x, 0px), var(--v2-shift-y, 0px), 0) rotateX(var(--v2-rotate-x, 0deg)) rotateY(var(--v2-rotate-y, 0deg)); transition: transform .4s cubic-bezier(.2,.65,.3,1); }
    .v2-hero-visual.is-pointer-active::after { opacity: 1; }
}
html[data-motion-paused="true"] .v2-hero-visual { transform: none; transition: none; }
html[data-motion-paused="true"] .v2-hero-visual::after { opacity: 0; transition: none; }
.v2-hero, .v2-cta { position: relative; isolation: isolate; overflow: hidden; }
.v2-hero > .container, .v2-cta > .container { position: relative; z-index: 1; }
.v2-ambient-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: .32; }
.v2-hero .v2-ambient-paths { mask-image: linear-gradient(90deg, transparent 20%, #000 70%); }
.v2-ambient-tracks { stroke: #7fb9ca; stroke-width: 1; }
.v2-ambient-signals { stroke: #329cbe; stroke-width: 2; stroke-linecap: round; }
.v2-ambient-signals path { stroke-dasharray: 3 97; animation: v2-ambient-travel 18s linear infinite; animation-play-state: paused; }
.v2-ambient-signals path:nth-child(2) { animation-delay: -6s; stroke: #997bc8; }
.v2-ambient-signals path:nth-child(3) { animation-delay: -12s; }
.v2-cta .v2-ambient-paths { opacity: .22; }
.v2-cta .v2-ambient-tracks { stroke: #a0d4e4; }
.v2-motion-visible .v2-ambient-signals path { animation-play-state: running; }
@keyframes v2-ambient-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.v2-motion-toggle { display: inline-block; min-height: 44px; padding: 8px 0; margin-top: 8px; border: 0; background: transparent; color: #557082; text-decoration: underline; text-underline-offset: 4px; font: inherit; font-size: 12px; cursor: pointer; }
.v2-motion-toggle[hidden] { display: none; }
.v2-motion-toggle:focus-visible { outline: 2px solid #2488aa; outline-offset: 4px; }
.v2-gather { display: grid; grid-template-columns: 130px minmax(40px, 200px) minmax(190px, 260px); justify-content: center; align-items: center; max-width: 680px; margin: 36px auto 0; padding: 22px; }
.v2-gather-inputs { display: grid; gap: 10px; }
.v2-gather-inputs span { border: 1px solid #d8e4ec; background: #fff; color: #4f6b7d; padding: 10px 14px; border-radius: 8px; font-size: 12px; box-shadow: 0 4px 12px #19344706; }
.v2-gather-inputs span:nth-child(2) { border-color: #e4daef; }
.v2-gather-inputs span:nth-child(3) { border-color: #dfebd4; }
.v2-gather svg { width: 100%; height: 140px; color: #8ebccb; }
.v2-gather-record { background: #fff; border: 1px solid #a5cbd9; padding: 22px; border-radius: 12px; box-shadow: 0 10px 28px #234c6010; }
.v2-gather-record span { font-size: 11px; color: #267b97; }
.v2-gather-record strong { display: block; margin: 8px 0 18px; font-size: 14px; line-height: 1.5; color: #294b60; }
.v2-gather-record i { display: block; width: 85%; height: 5px; background: #dcecf2; border-radius: 4px; margin-top: 7px; }
.v2-gather-record i:last-child { width: 60%; }
.v2-story-steps button { transition: background-color .25s, border-color .25s, box-shadow .25s; }
.v2-story-steps button[data-step-visited="true"] .v2-story-number { border-color: #6cb1c6; background: #e4f4f8; color: #246b82; }
.v2-story-steps button[data-step-visited="true"]::after { color: #247b99; }
.v2-story-steps button[aria-pressed="true"] .v2-story-number { background: #247b99; color: #fff; }
.v2-actor-card.is-on::after { border-color: #51acc6; background: #eaf7fb; }
.v2-after-state-arrow { text-shadow: 0 0 12px #a6d36560; }
/* Pause the existing ambient effects outside the viewport, too. */
.v2-hero:not(.v2-motion-visible) *, .v2-hero:not(.v2-motion-visible) *::before, .v2-hero:not(.v2-motion-visible) *::after,
.v2-eco:not(.v2-motion-visible)::before, .v2-eco:not(.v2-motion-visible)::after,
.v2-eco:not(.v2-motion-visible) .pulse { animation-play-state: paused !important; }
/* A lane pulse now represents a successful submission. */
.v2-eco.is-interactive .v2-flow .pulse { animation: none !important; opacity: .18; }
html[data-motion-paused="true"] .v2-hero *, html[data-motion-paused="true"] .v2-hero *::before, html[data-motion-paused="true"] .v2-hero *::after,
html[data-motion-paused="true"] .v2-eco *, html[data-motion-paused="true"] .v2-eco::before, html[data-motion-paused="true"] .v2-eco::after,
html[data-motion-paused="true"] .v2-cta * { animation-play-state: paused !important; }
html[data-motion-paused="true"] .v2-anat * { transition: none !important; }
@media (max-width: 600px) {
    .v2-gather { grid-template-columns: 92px 32px minmax(0, 1fr); padding: 4px; gap: 0; }
    .v2-gather-inputs span { font-size: 10px; padding: 10px 8px; }
    .v2-gather-record { padding: 14px; }
    .v2-gather-record strong { font-size: 12px; }
    .v2-ambient-paths { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
    .v2-ambient-signals path { animation: none !important; }
    .v2-story-steps button { transition: none; }
}
