/* ── KEYFRAMES ───────────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .3; transform: scale(.5); }
}

@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes orb-slow {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.06); }
  66%  { transform: translate(-25px, 40px) scale(.96); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes spin-slow {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* ── HERO CLIP REVEALS ───────────────────────────────────── */
.reveal-clip { opacity: 0; }
.reveal-clip.go { animation: clip-up .9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dc-1 { animation-delay: .05s !important; }
.dc-2 { animation-delay: .18s !important; }
.dc-3 { animation-delay: .32s !important; }
.dc-4 { animation-delay: .48s !important; }
.dc-5 { animation-delay: .64s !important; }

@keyframes clip-up {
  from { opacity: 0; transform: translateY(24px) skewY(.5deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}

/* h1 rows use a wipe-from-below */
.h1-row { overflow: hidden; }
.h1-inner { display: block; }
.h1-row.reveal-clip { opacity: 1 !important; }
.h1-inner.reveal-clip { opacity: 0; }
.h1-inner.reveal-clip.go {
  animation: wipe-up .95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes wipe-up {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── SVC ROW STAGGER (applied in JS) ────────────────────── */
.svc-row { opacity: 0; transform: translateY(20px); transition: none; }
.svc-row.vis { opacity: 1; transform: translateY(0); transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* override the hover transition so it still works */
.svc-row.vis { transition: opacity .6s var(--ease), transform .6s var(--ease), padding .35s var(--ease); }
.svc-row.vis:hover { transform: translateX(0) translateY(0); }

/* The ::before pseudo (orange bar) always works since it's separate */