/* ==========================================================================
   Ollie Dental Clinic — ANIMATIONS
   Scroll Reveal · Infinite Marquee · Shimmer & Glow · Micro-interactions
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes scrollX {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollXRev {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes goldShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseOut {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scanLine {
  0% { left: 0%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ---------- Entrance Animations ---------- */
.anim-up {
  opacity: 0;
  transform: translateY(24px);
  animation: animUp 0.8s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes animUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade {
  opacity: 0;
  animation: animFade 1s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes animFade {
  to { opacity: 1; }
}

/* ---------- Scroll Reveal (.reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Safety fallback: wcard is always visible */
.wcard {
  opacity: 1;
}

/* Before & After Scan effect */
.ba__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(207, 167, 75, 0.8), transparent);
  pointer-events: none;
  opacity: 0;
}
.ba:not(.is-interacted) .ba__scan {
  animation: scanLine 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.5s;
}