/* Motion layer. Every rule here is transform/opacity/clip-path only and is
   disabled wholesale under prefers-reduced-motion at the bottom. */

/* 1. Acquisition sweep: the hero console is "scanned in" once on load. */
.console-viewport.acquiring img { clip-path: inset(0 0 100% 0); animation: acquire 1.6s cubic-bezier(.2,.8,.2,1) forwards; }
.console-viewport.acquiring .scanline { opacity: 1; top: -3%; animation: acquireLine 1.6s cubic-bezier(.2,.8,.2,1) forwards, scanline 6.5s linear 1.9s infinite; }
@keyframes acquire { to { clip-path: inset(0 0 0 0); } }
@keyframes acquireLine { to { top: 100%; } }
.acquire-fizz { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* 2. Probe reticle follows the pointer and reports a return. */
.console-viewport { cursor: crosshair; }
.target-reticle { transition: left .12s cubic-bezier(.2,.8,.2,1), top .12s cubic-bezier(.2,.8,.2,1), opacity .2s, border-color .2s; }
.target-reticle.noreturn { border-color: rgba(255,107,122,.7); border-style: dashed; }
.probe-readout { position: absolute; z-index: 7; display: grid; gap: 2px; padding: 7px 9px; border: 1px solid rgba(31,228,255,.25); border-radius: 6px; background: rgba(3,8,18,.86); backdrop-filter: blur(8px); font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; color: var(--dim); opacity: 0; transform: translate(14px, 14px); transition: opacity .15s; pointer-events: none; white-space: nowrap; }
.probe-readout b { color: var(--ink); }
.probe-readout .ret { color: var(--teal); }
.probe-readout .ret.no { color: var(--red); }
.console-viewport:hover .probe-readout { opacity: 1; }

/* 3. Section rail: one indicator glides between items. */
.section-rail nav { position: relative; }
.rail-indicator { position: absolute; left: 0; width: 100%; height: 38px; border-radius: 8px; background: rgba(31,228,255,.08); box-shadow: inset 2px 0 0 var(--cyan); transform: translateY(var(--y, 0)); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s; pointer-events: none; opacity: 0; }
.rail-indicator.on { opacity: 1; }
.section-rail nav a.active { background: transparent; box-shadow: none; }
.section-rail nav a { position: relative; z-index: 1; }

/* 4. Workflow line fills to the active step. */
.workflow-line::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--fill, .08)); background: linear-gradient(90deg, var(--electric), var(--cyan), var(--teal)); box-shadow: 0 0 10px var(--cyan); opacity: 1; transition: transform .6s cubic-bezier(.2,.8,.2,1); }

/* 5. Readiness gate: the verdict is stamped. */
.permit-result { position: relative; overflow: hidden; }
.permit-result strong { display: inline-block; transform-origin: left center; }
.permit-result.stamp strong { animation: stampIn .42s cubic-bezier(.2,.8,.2,1); }
.permit-result::after { content: attr(data-stamp); position: absolute; right: 14px; top: 10px; padding: 4px 8px; border: 2px solid currentColor; border-radius: 4px; font: 800 10px/1 var(--mono); letter-spacing: .18em; color: var(--teal); opacity: 0; transform: rotate(-8deg) scale(1.6); }
.permit-result.preview::after { color: var(--amber); }
.permit-result.blocked::after { color: var(--red); }
.permit-result.stamp::after { animation: stampMark .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes stampIn { 0% { transform: scale(1.25); opacity: 0; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
@keyframes stampMark { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 60% { opacity: .9; transform: rotate(-8deg) scale(.96); } 100% { opacity: .75; transform: rotate(-8deg) scale(1); } }
.permit-outputs div { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.permit-outputs.pulse div { animation: rowPulse .45s cubic-bezier(.2,.8,.2,1); animation-delay: calc(var(--i) * 45ms); }
@keyframes rowPulse { 0% { transform: translateX(6px); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* 6. Trust badge demo: a tiny measurement that lands on data, or doesn't. */
.badge-demo .b { grid-template-columns: 14px 1fr 96px; }
.badge-demo svg { width: 96px; height: 34px; overflow: visible; }
.badge-demo svg line { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 90; stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.badge-demo svg circle.pt { fill: rgba(146,176,214,.45); }
.badge-demo svg circle.end { fill: var(--teal); transition: transform .45s cubic-bezier(.2,.8,.2,1), fill .3s; }
.badge-demo svg text { font: 600 9px var(--mono); fill: var(--ink); transition: opacity .3s; }
.badge-demo .b.y svg circle.end.b2 { fill: var(--amber); }
.badge-demo .b.r svg circle.end.b2 { fill: var(--red); }
.badge-demo .b.r:hover svg circle.end.b2, .badge-demo .b.r:focus-within svg circle.end.b2 { transform: translate(6px, -12px); }
.badge-demo .b.r:hover svg text, .badge-demo .b.r:focus-within svg text { opacity: .35; }
.badge-demo .b.r:hover svg line, .badge-demo .b.r:focus-within svg line { opacity: .35; }
.badge-demo .b.y:hover svg text::after { content: " ?"; }

/* 7. Format grid: cards settle in with a stagger instead of popping. */
.format-grid article { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, border-color .3s; }
.format-grid.settling article:not(.hidden) { animation: settle .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes settle { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* 8. Command palette results cascade. */
.command-results .command-item { animation: cmdIn .28s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes cmdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 9. Evidence ladder: the E3 to E4 boundary draws itself when E4 lights. */
.rung.boundary::after { content: ""; position: absolute; left: 20px; right: 20px; top: -9px; height: 0; border-top: 1px dashed rgba(31,228,255,.55); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.rung.boundary.active::after { transform: scaleX(1); }
.rung.boundary .boundary-label { position: absolute; left: 20px; top: -8px; padding: 0 6px; background: var(--bg-deep); font: 600 10px/1.2 var(--mono); letter-spacing: .18em; color: var(--cyan); opacity: 0; transition: opacity .3s .5s; }
.rung.boundary.active .boundary-label { opacity: 1; }

/* 10. Counters: digits roll in. */
.stat strong span[data-count] { display: inline-block; }
.stat strong span.rolled { animation: roll .5s cubic-bezier(.2,.8,.2,1); }
@keyframes roll { from { transform: translateY(.35em); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: blur(0); } }

/* 11. Header brand mark: a slow scanner sweep on hover. */
.brand img { transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s; }
.brand:hover img { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 16px rgba(31,228,255,.6)); }

/* 12. 404: pulses that find nothing. */
.nf-pulse { position: fixed; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 1px solid var(--cyan); border-radius: 50%; pointer-events: none; animation: nfPulse 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes nfPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(14); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .console-viewport.acquiring img { clip-path: none; animation: none; }
  .console-viewport.acquiring .scanline, .permit-result.stamp strong, .permit-result.stamp::after, .permit-outputs.pulse div, .format-grid.settling article, .command-results .command-item, .stat strong span.rolled, .nf-pulse { animation: none !important; }
  .permit-result::after { opacity: .75; transform: rotate(-8deg); }
  .rail-indicator, .workflow-line::after, .rung.boundary::after, .badge-demo svg circle.end { transition: none; }
  .rung.boundary::after { transform: none; }
}