/* =========================================================
   Chakradhari — Motion system
   Scroll reveals, shared keyframes, and the vocabulary used by
   js/core/motion-controller.js and js/viz/*.
   ========================================================= */
@layer motion {

  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
  }
  [data-reveal].in { opacity: 1; transform: none; }
  [data-reveal-stagger] > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  [data-reveal-stagger].in > * { opacity: 1; transform: none; }

  /* Assemble-on-scroll: elements draw/resolve like the hero graph does,
     used sparingly at a few set-piece transitions. */
  [data-assemble] {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  [data-assemble].in { opacity: 1; transform: none; }
  [data-assemble-line] {
    stroke-dasharray: var(--len, 300);
    stroke-dashoffset: var(--len, 300);
    transition: stroke-dashoffset 1.1s var(--ease);
  }
  [data-assemble-line].in { stroke-dashoffset: 0; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal-stagger] > *, [data-assemble] { opacity: 1 !important; transform: none !important; }
    [data-assemble-line] { stroke-dashoffset: 0 !important; }
  }

  /* Section divider: a thin signal waveform used between a couple of
     bands as a scientific transition motif instead of a plain border. */
  .signal-divider {
    position: relative;
    height: clamp(40px, 6vw, 64px);
    overflow: hidden;
  }
  .signal-divider svg { width: 100%; height: 100%; display: block; }
  .signal-divider path {
    fill: none;
    stroke: var(--line-blue);
    stroke-width: 1.2;
  }
  .signal-divider .trace {
    stroke: var(--blue);
    stroke-width: 1.4;
    opacity: 0.55;
  }

  /* ---------- Divider variants ----------
     Three more transition motifs alongside the wave, each distinct
     rather than repeating the same effect: nodes pulsing in sequence,
     a mesh strip that unfolds once (via the existing [data-assemble]
     reveal, no extra JS), and a scanning dot tracing the divider like
     a radar sweep. .is-visible is toggled by js/viz/dividers.js. */
  .signal-divider--nodes .base-line { stroke: var(--line); stroke-width: 1; opacity: .35; }
  .signal-divider--nodes .node-dot {
    fill: var(--blue); opacity: .4;
    transform-box: fill-box; transform-origin: center;
  }
  .signal-divider--nodes.is-visible .node-dot { animation: dividerNodePulse 2.2s var(--ease) infinite; }
  .signal-divider--nodes .node-dot:nth-of-type(2) { animation-delay: .25s; }
  .signal-divider--nodes .node-dot:nth-of-type(3) { animation-delay: .5s; }
  .signal-divider--nodes .node-dot:nth-of-type(4) { animation-delay: .75s; }
  .signal-divider--nodes .node-dot:nth-of-type(5) { animation-delay: 1s; }
  .signal-divider--nodes .node-dot:nth-of-type(6) { animation-delay: 1.25s; }
  .signal-divider--nodes .node-dot:nth-of-type(7) { animation-delay: 1.5s; }
  @keyframes dividerNodePulse { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.7); } }

  .signal-divider--mesh path { stroke: var(--line-blue); stroke-width: 1; fill: none; }
  .signal-divider--mesh .mesh-v { opacity: .55; }
  .signal-divider--mesh .mesh-h { opacity: .3; }

  /* Angular panel-seam zigzag, drawn in once via the existing
     [data-assemble-line] mechanic — no continuous motion, a sharp
     counterpoint to the smooth wave divider elsewhere on the page. */
  .signal-divider--facet .facet-zigzag { stroke: var(--blue-bright); stroke-width: 1.3; fill: none; opacity: .6; }

  .signal-divider--radar .base-line { stroke: var(--line); stroke-width: 1; opacity: .3; }
  .signal-divider--radar .scan-dot {
    fill: var(--blue-bright);
    offset-path: path('M0 30 L1200 30');
    offset-rotate: 0deg;
    opacity: 0;
  }
  .signal-divider--radar.is-visible .scan-dot { animation: dividerScan 4s ease-in-out infinite; }
  @keyframes dividerScan {
    0% { offset-distance: 0%; opacity: 0; }
    8%, 92% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .signal-divider--nodes .node-dot, .signal-divider--radar .scan-dot { animation: none !important; opacity: .5 !important; }
  }

  /* Generic ambient particle canvas used behind a couple of content
     bands — always paused off-screen by motion-controller.js. */
  .field-canvas {
    position: absolute; inset: 0;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
  }
  .field-host { position: relative; isolation: isolate; }
  .field-host > .wrap { position: relative; z-index: 1; }

  @keyframes spinSlow { to { transform: rotate(360deg); } }
  @keyframes spinSlowReverse { to { transform: rotate(-360deg); } }
  @keyframes pulseGlow { 50% { opacity: .55; } }
  @keyframes driftY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}