/* ============================================================
   DriveShield Insurance — Animations & Effects
   ============================================================ */

/* === COUNTER ANIMATION === */
@keyframes countUp { from { opacity: 0; } to { opacity: 1; } }

/* === SKELETON LOADER === */
.skeleton {
  background: linear-gradient(90deg, var(--light-gray) 25%, var(--mid-gray) 50%, var(--light-gray) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === PULSE RING === */
.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--accent);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* === GRADIENT TEXT === */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === HERO PARTICLES === */
.particles-container {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.particle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

/* === CARD SHINE EFFECT === */
.shine-effect {
  position: relative; overflow: hidden;
}
.shine-effect::after {
  content: '';
  position: absolute; top: -50%; left: -100%;
  width: 60%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-15deg);
  transition: left 0.7s ease;
}
.shine-effect:hover::after { left: 150%; }

/* === TOOLTIP === */
.tooltip-wrapper { position: relative; }
.tooltip-text {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--dark); color: white; padding: 6px 12px;
  border-radius: 6px; font-size: 0.78rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: var(--transition);
  z-index: 100;
}
.tooltip-text::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--dark);
}
.tooltip-wrapper:hover .tooltip-text { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === PROGRESS BAR === */
.page-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 10001;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.2s ease;
}

/* === SMOOTH REVEAL === */
.reveal { opacity: 0; transform: translateY(40px); }
.reveal.animated { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-left { opacity: 0; transform: translateX(-40px); }
.reveal-left.animated { opacity: 1; transform: translateX(0); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-right { opacity: 0; transform: translateX(40px); }
.reveal-right.animated { opacity: 1; transform: translateX(0); transition: opacity 0.8s ease, transform 0.8s ease; }