/* ═══════════════════════════════════════════════════════════════════════════
   anim.css — Shared scroll-reveal & motion utilities
   Auto-included by main.css. Used across all Ishmael business sites.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

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

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

@keyframes pulseRing {
  0%, 100% { transform: scale(0.95); opacity: 1; }
  50%       { transform: scale(1.02); opacity: 0.7; }
}

/* ─── Scroll-reveal base ────────────────────────────────────────────────── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — add .delay-N alongside .animate-on-scroll */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* ─── Continuous motion utilities ───────────────────────────────────────── */

/* Gentle up-and-down float */
.anim-float {
  animation: float 4s ease-in-out infinite;
}
.anim-float-slow {
  animation: float 6s ease-in-out infinite;
}
/* Allow per-element delay to stagger floats */
.anim-float-delay-1 { animation-delay: 1s; }
.anim-float-delay-2 { animation-delay: 2s; }

/* Animated gradient background (apply to element with background-size:200%) */
.anim-gradient {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* Shimmer sweep — apply to a ::after pseudo with position:absolute,inset:0 */
.anim-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 3s infinite;
}

/* Pulse ring — subtle breathing scale */
.anim-pulse-ring {
  animation: pulseRing 2.5s ease-in-out infinite;
}

/* ─── Hero mockup card ──────────────────────────────────────────────────── */

.hero-mockup-wrap {
  position: relative;
  padding: 1.5rem 1.5rem 2.5rem 1.5rem;
}

.hero-mockup-card {
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-mockup-wrap:hover .hero-mockup-card {
  transform: rotate(0deg) !important;
}

.hero-mockup-stat {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.hero-mockup-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}