/* ============================================
   SUSAN Sense — animations.css
   Scroll reveal & micro-interactions
   ============================================ */

/* ---------- SCROLL REVEAL ---------- */

/* Initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Triggered when element enters viewport */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ---------- FADE IN (no vertical offset) ---------- */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
}

/* ---------- SCALE IN (for icons, badges) ---------- */
.scale-in {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* ---------- HOVER LIFT (applied via JS or directly) ---------- */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(43, 128, 112, 0.15);
}

/* ---------- ANIMATED PULSE (live badge dot) ---------- */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.8); }
}

/* ---------- LIVE BLINK (phone mockup) ---------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ---------- FLOAT (subtle idle animation for phone) ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.float {
  animation: float 4s ease-in-out infinite;
}

/* ---------- REDUCED MOTION OVERRIDE ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .fade-in,
  .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float {
    animation: none;
  }

  .badge-dot {
    animation: none;
  }
}