/* === BlueGrid Systems — Animations === */

/* Hero char enter — orchestrated by JS but defined here */
@keyframes char-enter {
  to { transform: translateY(0); opacity: 1; }
}

/* Pulse for live indicators */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pulse {
  position: relative;
  width: 10px; height: 10px;
  background: var(--c-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c-cyan);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c-cyan);
  animation: pulse-ring 2.2s var(--ease-out) infinite;
}

/* SVG line draw */
@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}
.draw-on path,
.draw-on line,
.draw-on rect,
.draw-on circle {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: draw-on 1.6s var(--ease-out) forwards;
}
.draw-on--slow path { animation-duration: 2.4s; }
.draw-on--delay path:nth-child(1) { animation-delay: 0.05s; }
.draw-on--delay path:nth-child(2) { animation-delay: 0.18s; }
.draw-on--delay path:nth-child(3) { animation-delay: 0.32s; }
.draw-on--delay path:nth-child(4) { animation-delay: 0.46s; }
.draw-on--delay path:nth-child(5) { animation-delay: 0.6s; }

/* Include-item tick draw */
.include-item__tick svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.include-item.is-in .include-item__tick svg path {
  animation: draw-on 0.6s var(--ease-out) forwards;
}

/* Diagram blueprint blink for service pages */
@keyframes blueprint-scan {
  0%   { transform: translateY(-12%); opacity: 0; }
  20%  { opacity: 0.55; }
  80%  { opacity: 0.55; }
  100% { transform: translateY(110%); opacity: 0; }
}
.svc-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(91, 224, 255, 0.18), transparent);
  height: 30%;
  animation: blueprint-scan 6s var(--ease-in-out) infinite;
  pointer-events: none;
}

/* Float for hero schema */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero__schema { animation: float-y 8s var(--ease-in-out) infinite; }

/* Logo glyph rotate */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.nav__brand-mark svg { transition: transform var(--t-med); }
.nav__brand:hover .nav__brand-mark svg { transform: rotate(45deg); }

/* Underline sweep for foot links */
.foot__col a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease-out), color var(--t-fast);
}
.foot__col a:hover { background-size: 100% 1px; }

/* Subtle shimmer on hero CTA */
@keyframes shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.btn--primary {
  overflow: hidden;
  position: relative;
}
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn--primary:hover::before {
  animation: shimmer 1.2s var(--ease-out);
}

/* Coordinate readout char flicker */
.coords__val { font-variant-numeric: tabular-nums; }

/* Quote mark drop */
@keyframes quote-drop {
  0%   { transform: translateY(-20px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 0.35; }
}
.quote.is-in .quote__mark { animation: quote-drop 1s var(--ease-out) forwards; }
.quote .quote__mark { opacity: 0; }

/* Compare tier subtle glow when current */
.compare__cell.is-current { animation: cur-glow 4s var(--ease-in-out) infinite; }
@keyframes cur-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 224, 255, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(91, 224, 255, 0.12); }
}