/* ==========================================================================
   TAMMUZ DENTAL — Animations
   animations.css: Micro-animations, transitions, scroll effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REVEAL ON SCROLL (IntersectionObserver driven)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }
.reveal-delay-6 { transition-delay: 0.60s; }

/* Fade only (no translate) */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.reveal-fade.revealed {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2. HERO ENTRANCE ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__badge {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.2s;
}

.hero__headline {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.4s;
}

.hero__subheadline {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.55s;
}

.hero__actions {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.70s;
}

.hero__scroll-hint {
  animation: heroFadeIn 1s ease both;
  animation-delay: 1.2s;
}

/* --------------------------------------------------------------------------
   3. TRUST STRIP ITEMS
   -------------------------------------------------------------------------- */
.trust-strip__item {
  animation: heroFadeIn 0.6s ease both;
}

.trust-strip__item:nth-child(1) { animation-delay: 0.8s; }
.trust-strip__item:nth-child(2) { animation-delay: 0.9s; }
.trust-strip__item:nth-child(3) { animation-delay: 1.0s; }
.trust-strip__item:nth-child(4) { animation-delay: 1.1s; }
.trust-strip__item:nth-child(5) { animation-delay: 1.2s; }

/* --------------------------------------------------------------------------
   4. PRODUCT CARD HOVER
   -------------------------------------------------------------------------- */
.product-card {
  will-change: transform;
}

.product-card .product-card__footer .btn {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-spring);
}

/* --------------------------------------------------------------------------
   5. FILTER BUTTON TRANSITIONS
   -------------------------------------------------------------------------- */
.filter-btn {
  position: relative;
  overflow: hidden;
}

.filter-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* --------------------------------------------------------------------------
   6. MODAL ANIMATION
   -------------------------------------------------------------------------- */
@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. BLUE SHIMMER (decorative accent element)
   -------------------------------------------------------------------------- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.text-gold-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-navy-800) 0%,
    var(--color-navy-600) 40%,
    var(--color-navy-800) 60%,
    var(--color-navy-700) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* --------------------------------------------------------------------------
   8. PULSE DOT (B2B Only / Active badge)
   -------------------------------------------------------------------------- */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-sky);
  border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   9. SKELETON LOADING (while products load from JSON)
   -------------------------------------------------------------------------- */
@keyframes skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-cream-200) 25%,
    var(--color-cream-100) 50%,
    var(--color-cream-200) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite linear;
  border-radius: var(--radius-md);
}

.skeleton-card {
  background-color: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 4/3;
}

.skeleton-line {
  height: 14px;
  margin: var(--space-3) var(--space-6);
}

.skeleton-line--short {
  width: 40%;
}

.skeleton-line--medium {
  width: 70%;
}

/* --------------------------------------------------------------------------
   10. NAV TRANSITION
   -------------------------------------------------------------------------- */
.nav {
  will-change: background-color, backdrop-filter;
}

/* --------------------------------------------------------------------------
   11. BUTTON RIPPLE (optional enhancement)
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.15);
  transform: scale(0);
  border-radius: inherit;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.btn:active::after {
  transform: scale(2);
  opacity: 0;
  transition: 0s;
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION (accessibility)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}