/* =========================================================
   MWB Editorial — Ambient Animation Decal System
   E-DECAL1 / S1 — Foundation
   =========================================================
   All keyframes prefixed dc- (no collision with page-level
   glowPulse / scanMove / fadeUp / flowLine keyframes).
   All animations use transform + opacity only.
   Decal base: position:absolute; pointer-events:none; z-index:0
   CSS interface: --decal-x, --decal-y, --decal-delay,
                  --decal-color, --decal-size, --decal-speed,
                  --decal-opacity
   ========================================================= */

/* ── Keyframes ─────────────────────────────────────────── */

@keyframes dc-orbitalBreathe {
  0%,100% { transform: scale(1);    opacity: var(--decal-opacity, 0.07); }
  50%     { transform: scale(1.05); opacity: calc(var(--decal-opacity, 0.07) * 1.5); }
}

@keyframes dc-orbitalSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dc-radarPing {
  0%   { transform: translate(-50%,-50%) scale(0.08); opacity: var(--decal-opacity, 0.45); }
  75%  { opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(1);    opacity: 0; }
}

@keyframes dc-dataLineDraw {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: scaleX(1); opacity: 0.9; }
  72%  { opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes dc-glyphDrift {
  0%   { transform: translateY(0);     opacity: 0; }
  12%  { opacity: var(--decal-opacity, 0.07); }
  88%  { opacity: var(--decal-opacity, 0.07); }
  100% { transform: translateY(-28px); opacity: 0; }
}

@keyframes dc-shardBreathe {
  0%,100% { opacity: var(--decal-opacity, 0.05); }
  50%     { opacity: calc(var(--decal-opacity, 0.05) * 2); }
}

/* SVG path draw-in via pathLength="1" normalisation */
@keyframes dc-svgDraw {
  from { stroke-dashoffset: 1; opacity: 0; }
  8%   { opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 0.9; }
  80%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* SVG slow-reveal — draws once, stays visible */
@keyframes dc-svgReveal {
  from { stroke-dashoffset: 1; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ── Canvas (node network — JS-driven) ─────────────────── */

.dc-canvas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Orbital ring ──────────────────────────────────────── */

.dc-orbital {
  position: absolute;
  left:   var(--decal-x, 80%);
  top:    var(--decal-y, 15%);
  width:  var(--decal-size, 160px);
  height: var(--decal-size, 160px);
  border-radius: 50%;
  border: 1px solid var(--decal-color, rgba(0,232,160,0.08));
  pointer-events: none;
  z-index: 0;
  transform-origin: center;
  animation: dc-orbitalBreathe var(--decal-speed, 10s) ease-in-out
             var(--decal-delay, 0s) infinite;
}

.dc-orbital.dc-spin {
  animation: dc-orbitalSpin var(--decal-speed, 90s) linear
             var(--decal-delay, 0s) infinite;
}

/* ── Slow-spin modifier (applies to any element) ───────── */

.dc-spin-slow {
  animation: dc-orbitalSpin 110s linear infinite;
  transform-origin: center;
}

/* ── Radar ping (3 staggered rings via el + ::before + ::after) */

.dc-radar {
  position: absolute;
  left:   var(--decal-x, 50%);
  top:    var(--decal-y, 50%);
  width:  var(--decal-size, 80px);
  height: var(--decal-size, 80px);
  pointer-events: none;
  z-index: 0;
}

.dc-radar::before,
.dc-radar::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--decal-color, rgba(0,232,160,0.4));
  opacity: 0;
  animation: dc-radarPing var(--decal-speed, 4s) cubic-bezier(0.16,1,0.3,1)
             var(--decal-delay, 0s) infinite;
}
.dc-radar::before { animation-delay: calc(var(--decal-delay, 0s) + 1.5s); }
.dc-radar::after  { animation-delay: calc(var(--decal-delay, 0s) + 3.0s); }

/* ── Data line ─────────────────────────────────────────── */

.dc-line {
  position: absolute;
  left:   var(--decal-x, 0%);
  top:    var(--decal-y, 50%);
  width:  var(--decal-size, 140px);
  height: 1px;
  background: var(--decal-color, rgba(0,245,212,0.22));
  pointer-events: none;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: dc-dataLineDraw var(--decal-speed, 12s) ease-in-out
             var(--decal-delay, 0s) infinite;
}

.dc-line.dc-rtl {
  transform-origin: right center;
}

/* ── Ghost glyph ───────────────────────────────────────── */

.dc-glyph {
  position: absolute;
  left:      var(--decal-x, 80%);
  top:       var(--decal-y, 20%);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: var(--decal-size, 11px);
  letter-spacing: 0.15em;
  color: var(--decal-color, rgba(212,146,42,0.07));
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
  animation: dc-glyphDrift var(--decal-speed, 16s) ease-in-out
             var(--decal-delay, 0s) infinite;
}

/* ── Gradient shard ────────────────────────────────────── */

.dc-shard {
  position: absolute;
  left:   var(--decal-x, 70%);
  top:    var(--decal-y, 60%);
  width:  var(--decal-size, 180px);
  height: var(--decal-size, 180px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--decal-color, rgba(123,47,190,0.10)) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: dc-shardBreathe var(--decal-speed, 8s) ease-in-out
             var(--decal-delay, 0s) infinite;
}

/* ── Accessibility: prefers-reduced-motion ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .dc-orbital,
  .dc-spin-slow,
  .dc-radar::before,
  .dc-radar::after,
  .dc-line,
  .dc-glyph,
  .dc-shard {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── Mobile: hide GPU-heavy effects at ≤600px ──────────── */

@media (max-width: 600px) {
  .dc-canvas,
  .dc-radar::before,
  .dc-radar::after {
    display: none !important;
  }
}