/* =========================================================
   OPENDOOR — ANIMATION SYSTEM
   ========================================================= */

/* ---- Scroll reveal base states ---- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}

[data-reveal="fade-up"] { transform: translateY(34px); }
[data-reveal="fade-left"] { transform: translateX(-34px); }
[data-reveal="fade-right"] { transform: translateX(34px); }
[data-reveal="scale-in"] { transform: scale(0.94); }
[data-reveal="fade"] { transform: none; }

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

/* Staggering via inline delay set by JS, fallback classes */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

/* ---- Hero load sequence ---- */
.hero-load {
  opacity: 0;
  animation: heroUp 0.9s var(--ease) forwards;
}
.hero-load-1 { animation-delay: 0.05s; }
.hero-load-2 { animation-delay: 0.2s; }
.hero-load-3 { animation-delay: 0.35s; }
.hero-load-4 { animation-delay: 0.5s; }
.hero-load-5 { animation-delay: 0.65s; }

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

/* ---- Floating decorative elements ---- */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.float-anim { animation: floatSlow 6s ease-in-out infinite; }

@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -18px) scale(1.06); }
}
.blob { animation: floatBlob 14s ease-in-out infinite; }

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.arc-line { animation: spinSlow 40s linear infinite; }

/* ---- Counter number pop ---- */
.stat-number.counted,
.story-stat-float .num.counted {
  animation: numPop 0.4s var(--ease);
}
@keyframes numPop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---- Card lift already handled inline in style.css via transitions ---- */

/* ---- Image reveal wipe ---- */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--light);
  transform: scaleX(0);
  transform-origin: right;
  z-index: 2;
  transition: transform 0.9s var(--ease);
}
.img-reveal.is-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Loader for page (subtle fade-in on load) ---- */
body.page-ready main,
body.page-ready .site-header,
body.page-ready .site-footer {
  animation: pageFade 0.6s var(--ease);
}
@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .blob, .arc-line, .float-anim, .hero-img-float, .hero-stat-card {
    animation: none !important;
  }
}