/* ==========================================================================
   animations.css
   Scroll-reveal utilities, floating shapes, keyframes and micro-interactions.
   Reveal classes stay hidden until .is-visible is added by animations.js.
   ========================================================================== */

/* ---- Scroll reveal base ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Staggered children via inline --delay set by JS */
[data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

/* ---- Hover lift helper ---- */
.hover-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- Image zoom on hover (wrap image in .zoom) ---- */
.zoom { overflow: hidden; }
.zoom img { transition: transform var(--dur-slow) var(--ease); }
.zoom:hover img { transform: scale(1.07); }

/* ---- Floating decorative shapes ---- */
.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
  animation: float 9s var(--ease) infinite;
}
.shape--sq { border-radius: 24px; }
.shape--ring {
  border-radius: 50%;
  background: transparent !important;
  border: 2px solid currentColor;
  opacity: 0.35;
}
.shape--blue { background: rgba(21, 94, 239, 0.5); color: rgba(21, 94, 239, 0.5); }
.shape--green { background: rgba(22, 163, 74, 0.45); color: rgba(22, 163, 74, 0.5); }
.shape--gold { background: rgba(212, 175, 55, 0.55); color: rgba(212, 175, 55, 0.55); }
.shape--white { background: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.6); }

.shape--1 { width: 90px; height: 90px; animation-delay: 0s; }
.shape--2 { width: 140px; height: 140px; animation-delay: 1.2s; animation-duration: 11s; }
.shape--3 { width: 60px; height: 60px; animation-delay: 0.6s; animation-duration: 8s; }
.shape--4 { width: 110px; height: 110px; animation-delay: 2s; animation-duration: 12s; }

/* Placement helpers (avoid inline positioning) */
.shape--tl { top: 20%; left: 6%; }
.shape--tr { top: 18%; right: 9%; }
.shape--mr { top: 30%; right: 12%; }
.shape--bl { bottom: 16%; left: 7%; }
.shape--br { bottom: 18%; right: 10%; }

@keyframes float {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(-22px) translateX(10px) rotate(8deg); }
  100% { transform: translateY(0) translateX(0) rotate(0deg); }
}

/* ---- Slow drift for hero background accents ---- */
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(24px, -18px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ---- Fade / rise used for hero copy on load ---- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-rise { animation: riseIn 0.9s var(--ease-out) both; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }

/* ---- Pulsing scroll cue ---- */
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
}
.scroll-cue { animation: bob 1.8s ease-in-out infinite; }

/* ---- Slider fade ---- */
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}

/* ---- Shimmer used on stat underline ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Reduced motion: honour user preference ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .shape { display: none; }
}