/* ──────────────────────────────────────────────────────────────────
   unit-anims.css
   Thematic motion layer for each AKINT unit.
   Used on subpage heros (.sp-hero-anim) and inside cc-viz cards.
   ────────────────────────────────────────────────────────────────── */

/* keep .sp-header as positioning context for ambient */
.sp-header { position: relative; overflow: hidden; }

.sp-hero-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.sp-header > .sp-header-inner { position: relative; z-index: 1; }

/* full-bleed svg sits behind text */
.sp-hero-anim svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── shared utility keyframes ─────────────────────────────────── */
@keyframes uan-dash {
  to { stroke-dashoffset: -1200; }
}
@keyframes uan-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes uan-pulse {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.7;  }
}
@keyframes uan-pulse-strong {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1;    }
}
@keyframes uan-scan {
  0%   { transform: translateY(0%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes uan-radar {
  to { transform: rotate(360deg); }
}
@keyframes uan-rise {
  0%   { transform: translateY(20px); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes uan-tick {
  0%, 5%   { opacity: 0; transform: scale(0.6); }
  10%, 100%{ opacity: 1; transform: scale(1); }
}
@keyframes uan-flow {
  to { stroke-dashoffset: -120; }
}
@keyframes uan-flicker {
  0%, 100% { opacity: 0.6; }
  47%      { opacity: 0.6; }
  48%      { opacity: 0.15; }
  49%      { opacity: 0.85; }
  50%      { opacity: 0.4; }
}
@keyframes uan-drift {
  to { transform: translateX(-60px); }
}

/* ── SERVICES — oscilloscope sweep + radar ─────────────────────── */
.uan-services .uan-grid line { stroke: rgba(0,162,255,0.08); stroke-width: 0.6; }
.uan-services .uan-wave {
  stroke: rgba(0,162,255,0.9);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(0,162,255,0.5));
  fill: none;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: uan-draw 6s linear infinite;
}
.uan-services .uan-wave.w2 { animation-delay: -2s; opacity: 0.5; }
.uan-services .uan-wave.w3 { animation-delay: -4s; opacity: 0.3; }
.uan-services .uan-radar {
  transform-origin: center;
  animation: uan-radar 7s linear infinite;
}
.uan-services .uan-blip {
  fill: #00a2ff;
  animation: uan-pulse-strong 1.6s ease-in-out infinite;
}
.uan-services .uan-readout text {
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(0,162,255,0.55);
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* ── ARCHI — self-drawing isometric/plan lines ─────────────────── */
.uan-archi path,
.uan-archi line {
  fill: none;
  stroke: rgba(0,162,255,0.85);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px rgba(0,162,255,0.4));
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: uan-draw 5s ease-in-out infinite;
}
.uan-archi .a-d1 { animation-delay: 0s; }
.uan-archi .a-d2 { animation-delay: 0.3s; }
.uan-archi .a-d3 { animation-delay: 0.6s; }
.uan-archi .a-d4 { animation-delay: 0.9s; }
.uan-archi .a-d5 { animation-delay: 1.2s; }
.uan-archi .a-d6 { animation-delay: 1.5s; }
.uan-archi .a-d7 { animation-delay: 1.8s; }
.uan-archi .a-d8 { animation-delay: 2.1s; }
.uan-archi .a-dim {
  stroke: rgba(255,255,255,0.18);
  stroke-dasharray: 2 4;
  animation: none;
  stroke-dashoffset: 0;
  opacity: 0.4;
}
.uan-archi .a-node { fill: rgba(0,162,255,0.7); stroke: none; animation: uan-pulse 2.4s ease-in-out infinite; }

/* ── ENGINEERING — building scan + annotations ─────────────────── */
.uan-engineering .e-building path,
.uan-engineering .e-building line,
.uan-engineering .e-building rect {
  fill: none;
  stroke: rgba(180,120,255,0.85);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 3px rgba(138,43,226,0.4));
}
.uan-engineering .e-floor { stroke: rgba(138,43,226,0.3); }
.uan-engineering .e-scan {
  stroke: rgba(138,43,226,0.95);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(138,43,226,0.7));
  animation: uan-scan 5s linear infinite;
}
.uan-engineering .e-annot {
  opacity: 0;
  animation: uan-rise 5s linear infinite;
}
.uan-engineering .e-annot text {
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(220,180,255,0.85);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.uan-engineering .e-annot .leader { stroke: rgba(138,43,226,0.6); stroke-width: 0.8; fill: none; }
.uan-engineering .e-annot .dot { fill: rgba(220,180,255,0.95); }
.uan-engineering .e-annot.a1 { animation-delay: 0.2s; }
.uan-engineering .e-annot.a2 { animation-delay: 1.2s; }
.uan-engineering .e-annot.a3 { animation-delay: 2.4s; }
.uan-engineering .e-annot.a4 { animation-delay: 3.5s; }
.uan-engineering .e-stamp {
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(138,43,226,0.6);
  font-size: 10px;
  letter-spacing: 0.15em;
  animation: uan-flicker 4s steps(1) infinite;
}

/* ── ENERGY — particle flow / solar ────────────────────────────── */
.uan-energy .en-flow {
  stroke: rgba(61,240,164,0.9);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(61,240,164,0.5));
  fill: none;
  stroke-dasharray: 3 8;
  animation: uan-flow 3s linear infinite;
}
.uan-energy .en-flow.s { stroke-dasharray: 2 14; animation-duration: 4.5s; opacity: 0.6; }
.uan-energy .en-flow.t { animation-duration: 2.2s; opacity: 0.9; }
.uan-energy .en-sun {
  fill: none;
  stroke: rgba(61,240,164,0.7);
  stroke-width: 1;
  animation: uan-pulse-strong 3s ease-in-out infinite;
}
.uan-energy .en-ray {
  stroke: rgba(61,240,164,0.6);
  stroke-width: 1;
  transform-origin: center;
  animation: uan-pulse 2.4s ease-in-out infinite;
}
.uan-energy .en-particle {
  fill: rgba(61,240,164,0.9);
  filter: drop-shadow(0 0 4px rgba(61,240,164,0.6));
}

/* ── AI — neural graph traversal ───────────────────────────────── */
.uan-ai .ai-edge {
  stroke: rgba(255,45,146,0.55);
  stroke-width: 1;
  fill: none;
}
.uan-ai .ai-edge.hot {
  stroke: rgba(255,45,146,0.85);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
  animation: uan-flow 1.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,45,146,0.55));
}
.uan-ai .ai-node {
  fill: rgba(255,45,146,0.6);
  animation: uan-pulse-strong 2.2s ease-in-out infinite;
}
.uan-ai .ai-node.hot { fill: #ff2d92; filter: drop-shadow(0 0 5px rgba(255,45,146,0.9)); }
.uan-ai .ai-tokens text {
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(255,127,191,0.55);
  font-size: 9px;
  letter-spacing: 0.15em;
  animation: uan-drift 9s linear infinite;
}

/* ── HERO DATA RAIN (index.html) ───────────────────────────────── */
.hero-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, #000 80%);
          mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 30%, #000 80%);
}
.hero-rain text {
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(0,162,255,0.7);
  font-size: 10px;
  letter-spacing: 0.1em;
  animation: rain-fall 10s linear infinite;
}
@keyframes rain-fall {
  from { transform: translateY(-100px); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  to   { transform: translateY(900px); opacity: 0; }
}

/* Animations run regardless of OS reduced-motion preference —
   they are core brand identity, not decorative. */

/* ── Mobile: keep but soften ───────────────────────────────────── */
@media (max-width: 760px) {
  .sp-hero-anim { opacity: 0.35; }
}