/* =====================================================================
   cockpit-motion.css — JARVIS-grade motion vocabulary for production app.
   Loaded AFTER cockpit-theme.css. CSS-only motion; no Lottie, no GSAP,
   no JS runtime dependency added. Designed per ux-architect Phase 2
   review (CLAUDE.md §10/§12.1 specialist dispatch).

   The 5 keyframes:
     - vfNeuralFlow      — running light along stroke-dasharray paths
                           (Command Center spine + any connector SVG)
     - vfPanelEntrance   — staggered fade-up + scale-from-0.98 on tab
                           switch (the "powering up" feel)
     - vfAmbientBreath   — subtle box-shadow pulse on .glass-panel[data-state="live"]
     - vfTickerScan      — 1px horizontal cyan line traversing activity rails
     - vfPylonPulse      — 3-stage opacity oscillation on focal pylons /
                           vault seals, synced with vfNeuralFlow phase

   Doctrine: prefers-reduced-motion: reduce short-circuits ALL motion
   (CLAUDE.md §6.7). Customer-shell scoping via body[data-shell="vairifeye"]
   so Viaero/Samsung shells keep their own motion vocabulary later.
   ===================================================================== */

/* PR #154: cascade-layer ordering. All motion rules wrapped in @layer motion so they cascade after theme but before transitions/overrides. Keyframes work fine inside @layer per CSS Cascade L5. */
@layer motion {


/* ─────────────────────────────────────────────────────────────────────
   1. NEURAL FLOW — running light along painted lines
   Apply to <path> elements inside a connector SVG. The path needs:
     stroke="..." stroke-dasharray="50 950" stroke-dashoffset="1000"
     pathLength="1000"
   Then add class "vf-neural-flow" — the keyframe slides the dashoffset
   from 1000 → -50 over 2.4s linear, producing a 5%-length lit segment
   that traverses the path on a continuous loop. The "neon shoot" Mat
   asked for explicitly.
   ───────────────────────────────────────────────────────────────────── */
@keyframes vfNeuralFlow {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: -50; }
}
.vf-neural-flow {
  animation: vfNeuralFlow 2.4s linear infinite;
}
.vf-neural-flow--slow   { animation-duration: 3.6s; }
.vf-neural-flow--fast   { animation-duration: 1.6s; }
.vf-neural-flow--orange { animation-duration: 2.0s; } /* paired with secondary accent strokes */

/* ─────────────────────────────────────────────────────────────────────
   2. PANEL ENTRANCE — staggered "powering up" on tab switch / page load
   Apply class "vf-panel-entrance" to .panel / .glass-panel. The parent
   container can carry .vf-stagger; descendants get incrementing delays.
   ───────────────────────────────────────────────────────────────────── */
@keyframes vfPanelEntrance {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}
.vf-panel-entrance {
  animation: vfPanelEntrance 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vf-stagger > *:nth-child(1)  { animation-delay: 60ms;  }
.vf-stagger > *:nth-child(2)  { animation-delay: 120ms; }
.vf-stagger > *:nth-child(3)  { animation-delay: 180ms; }
.vf-stagger > *:nth-child(4)  { animation-delay: 240ms; }
.vf-stagger > *:nth-child(5)  { animation-delay: 300ms; }
.vf-stagger > *:nth-child(6)  { animation-delay: 360ms; }
.vf-stagger > *:nth-child(7)  { animation-delay: 420ms; }
.vf-stagger > *:nth-child(8)  { animation-delay: 480ms; }
.vf-stagger > *:nth-child(9)  { animation-delay: 540ms; }
.vf-stagger > *:nth-child(10) { animation-delay: 600ms; }

/* ─────────────────────────────────────────────────────────────────────
   3. AMBIENT BREATH — subtle box-shadow opacity oscillation on live
   panels. 4-6s cycle so it never dominates. Applied automatically to
   any .glass-panel[data-state="live"] inside the Vairifeye shell.
   ───────────────────────────────────────────────────────────────────── */
@keyframes vfAmbientBreath {
  0%, 100% {
    box-shadow:
      var(--shadow-panel),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 22px rgba(91, 184, 255, 0.16);
  }
  50% {
    box-shadow:
      var(--shadow-panel),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 28px rgba(91, 184, 255, 0.24);
  }
}
body[data-shell="vairifeye"] .glass-panel[data-state="live"],
body:not([data-shell]) .glass-panel[data-state="live"] {
  animation: vfAmbientBreath 4.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   4. TICKER SCAN — 1px horizontal cyan line traversing an activity-rail
   container every ~6s. Reads as data flowing. Apply to any container
   with class "vf-ticker-scan" (typically a wide horizontal strip).
   ───────────────────────────────────────────────────────────────────── */
.vf-ticker-scan {
  position: relative;
  isolation: isolate;
}
.vf-ticker-scan::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 184, 255, 0.85) 50%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(91, 184, 255, 0.65);
  pointer-events: none;
  z-index: 2;
  transform-origin: left center;
  animation: vfTickerScan 6s linear infinite;
}
@keyframes vfTickerScan {
  0%   { transform: scaleX(0)   translateX(0%);    opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: scaleX(0.4) translateX(60%);   opacity: 0.95; }
  90%  { opacity: 0.4; }
  100% { transform: scaleX(0)   translateX(110%);  opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   5. PYLON PULSE — 3-stage opacity oscillation for focal pylons / vault
   seals. Synced timing with vfNeuralFlow so the system reads as a
   heartbeat, not random twinkles. Apply class "vf-pylon-pulse" to a
   focal SVG group or wrapper.
   ───────────────────────────────────────────────────────────────────── */
@keyframes vfPylonPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(91, 184, 255, 0.32))
            drop-shadow(0 0 18px rgba(91, 184, 255, 0.12));
    opacity: 0.95;
  }
  33% {
    filter: drop-shadow(0 0 14px rgba(91, 184, 255, 0.55))
            drop-shadow(0 0 30px rgba(91, 184, 255, 0.22));
    opacity: 1;
  }
  66% {
    filter: drop-shadow(0 0 6px rgba(91, 184, 255, 0.40))
            drop-shadow(0 0 16px rgba(91, 184, 255, 0.18));
    opacity: 0.92;
  }
}
.vf-pylon-pulse {
  animation: vfPylonPulse 2.4s ease-in-out infinite;
}
.vf-pylon-pulse--orange {
  /* Override drop-shadow chain for human-required pylons / blockers */
  animation-name: vfPylonPulseOrange;
}
@keyframes vfPylonPulseOrange {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 122, 58, 0.32))
            drop-shadow(0 0 18px rgba(255, 122, 58, 0.12));
    opacity: 0.95;
  }
  33% {
    filter: drop-shadow(0 0 14px rgba(255, 122, 58, 0.55))
            drop-shadow(0 0 30px rgba(255, 122, 58, 0.22));
    opacity: 1;
  }
  66% {
    filter: drop-shadow(0 0 6px rgba(255, 122, 58, 0.40))
            drop-shadow(0 0 16px rgba(255, 122, 58, 0.18));
    opacity: 0.92;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   6. RETICLE ROTATION — slow continuous rotation for ring reticles
   wrapping focal CTAs / photo viewports. Used by Phase E partials.
   ───────────────────────────────────────────────────────────────────── */
@keyframes vfReticleRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.vf-reticle-rotate {
  animation: vfReticleRotate 24s linear infinite;
  transform-origin: center;
}
.vf-reticle-rotate--reverse {
  animation: vfReticleRotate 32s linear infinite reverse;
  transform-origin: center;
}

/* =====================================================================
   CINEMATIC PRESENCE — VFX moves dispatched per Mat's "bring in a
   cinematics expert" ask. References: Iron Man Mk III HUD boot, Tron
   Legacy Identity Disc, Blade Runner 2049 holograms, Vision OS hero
   shots, Severance opening titles. CSS-only, calibration-honoring
   (peak alpha 0.045α — well below the 0.07 ceiling Mat set).
   ===================================================================== */

/* — MOVE 1 — Focal scan-lock. Single horizontal cyan line traverses
     the focal panel ONCE on entrance (Iron Man Mk III boot). Uses
     background-position-y animation so it doesn't conflict with the
     existing ::before top-edge spine OR the ::after bracket corners. */
@keyframes vfFocalScanLock {
  0%   { background-position-y: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position-y: 110%; opacity: 0; }
}
.panel[data-panel-weight="focal"].vf-scan-lock,
.glass-panel[data-panel-weight="focal"].vf-scan-lock {
  position: relative;
  isolation: isolate;
}
.panel[data-panel-weight="focal"].vf-scan-lock > .vf-scan-lock-line,
.glass-panel[data-panel-weight="focal"].vf-scan-lock > .vf-scan-lock-line {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(180deg,
    transparent 0%,
    rgba(91, 184, 255, 0.55) 49%,
    rgba(91, 184, 255, 0.85) 50%,
    rgba(91, 184, 255, 0.55) 51%,
    transparent 100%);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position-y: -10%;
  filter: drop-shadow(0 0 6px rgba(91, 184, 255, 0.55));
  animation: vfFocalScanLock 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s 1 both;
}

/* — MOVE 2 — Topbar spine flow. Running cyan light along the topbar's
     bottom hairline, infinite slow drift. Tron Legacy Identity Disc rim. */
body[data-shell="vairifeye"] .topbar.glass-panel,
body:not([data-shell]) .topbar.glass-panel {
  /* Replace static border-bottom with traversing-light gradient hairline.
     12s cycle = barely-perceptible drift. */
  border-bottom: 1px solid transparent !important;
}
body[data-shell="vairifeye"] .topbar.glass-panel,
body:not([data-shell]) .topbar.glass-panel {
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 184, 255, 0.20) 35%,
    rgba(91, 184, 255, 0.62) 50%,
    rgba(91, 184, 255, 0.20) 65%,
    transparent 100%) !important;
  background-size: 240% 1px !important;
  background-position: 0% 100% !important;
  background-repeat: no-repeat !important;
  animation: vfSpineFlow 12s linear infinite;
}
@keyframes vfSpineFlow {
  from { background-position: -120% 100%; }
  to   { background-position: 240% 100%; }
}

/* — MOVE 3 — Depth-of-field defocus. When a focal panel exists on the
     page, all OTHER panels softly desaturate + dim + sub-pixel blur.
     Cinematic shallow DoF — eye is told where to look.
     Reference: Blade Runner 2049 holograms, Vision OS hero shots. */
body[data-shell="vairifeye"]:has(.panel[data-panel-weight="focal"]) .panel:not([data-panel-weight="focal"]),
body[data-shell="vairifeye"]:has(.glass-panel[data-panel-weight="focal"]) .glass-panel:not([data-panel-weight="focal"]),
body:not([data-shell]):has(.panel[data-panel-weight="focal"]) .panel:not([data-panel-weight="focal"]),
body:not([data-shell]):has(.glass-panel[data-panel-weight="focal"]) .glass-panel:not([data-panel-weight="focal"]) {
  filter: saturate(0.72) brightness(0.92) blur(0.4px);
  transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.86;
}
.panel[data-panel-weight="focal"],
.glass-panel[data-panel-weight="focal"] {
  transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────────
   REDUCED MOTION — short-circuit per CLAUDE.md §6.7.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vf-neural-flow,
  .vf-panel-entrance,
  .vf-ticker-scan::after,
  .vf-pylon-pulse,
  .vf-reticle-rotate,
  .vf-reticle-rotate--reverse,
  body[data-shell="vairifeye"] .glass-panel[data-state="live"],
  body:not([data-shell]) .glass-panel[data-state="live"],
  body[data-shell="vairifeye"] .topbar.glass-panel,
  body:not([data-shell]) .topbar.glass-panel,
  .panel[data-panel-weight="focal"].vf-scan-lock > .vf-scan-lock-line,
  .glass-panel[data-panel-weight="focal"].vf-scan-lock > .vf-scan-lock-line {
    animation: none !important;
  }
  body:has(.panel[data-panel-weight="focal"]) .panel:not([data-panel-weight="focal"]),
  body:has(.glass-panel[data-panel-weight="focal"]) .glass-panel:not([data-panel-weight="focal"]) {
    transition: none !important;
  }
}

}