/* ============================================================
   SmartClinity — Animations & Scroll Reveals
   ============================================================ */

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* ── Fade only (no translate) ── */
.reveal-fade {
  opacity: 0;
  transition: opacity 800ms ease;
}
.reveal-fade.visible { opacity: 1; }

/* ── Scale reveal ── */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Line draw (SVG stroke animation) ── */
.svg-draw path,
.svg-draw line,
.svg-draw polyline,
.svg-draw rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.svg-draw.visible path,
.svg-draw.visible line,
.svg-draw.visible polyline,
.svg-draw.visible rect {
  stroke-dashoffset: 0;
}

/* ── Gradient text ── */
.text-gradient-green {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-blue {
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Accent line ── */
.accent-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gradient-green);
  margin-bottom: var(--space-24);
  border-radius: var(--radius-full);
}

/* ── Blink cursor ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Float subtle ── */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.float-anim { animation: float-gentle 5s ease-in-out infinite; }

/* ── Gradient shift (hero bg) ── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Pulse dot ── */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.4; }
}