/* ============================================================
   LUXELITE SUITES — Animations Stylesheet
   ============================================================ */

/* ── PAGE FADE IN ───────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageFadeIn 0.45s ease both;
}

/* ── BOUNCE (hero scroll arrow) ─────────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(10px); }
}

/* ── PULSE (used on urgency badges) ─────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── SHIMMER (skeleton loading) ─────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 4px;
}

/* ── SPIN (loader) ──────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-neutral-2, #ebebeb);
  border-top-color: var(--color-primary, #C00000);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── FADE UP (custom, for elements without AOS) ─────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease both;
}

/* ── SCALE IN ────────────────────────────────────────────── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.scale-in {
  animation: scaleIn 0.4s ease both;
}

/* ── STAGGER HELPERS ────────────────────────────────────── */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }

/* ── HERO ENTRANCE ──────────────────────────────────────── */
.hero__eyebrow  { animation: fadeInUp 0.6s 0.1s ease both; }
.hero__title    { animation: fadeInUp 0.7s 0.25s ease both; }
.hero__subtitle { animation: fadeInUp 0.6s 0.4s ease both; }
.hero__actions  { animation: fadeInUp 0.6s 0.55s ease both; }

/* ── FADE RISE (video hero, home) ───────────────────────── */
@keyframes fadeRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-rise         { animation: fadeRise 0.8s ease-out both; }
.animate-fade-rise-delay   { animation: fadeRise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fadeRise 0.8s ease-out 0.4s both; }

/* ── MODAL OPEN ─────────────────────────────────────────── */
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content {
  animation: modalSlideIn 0.3s ease both;
}

/* ── TOAST NOTIFICATION ─────────────────────────────────── */
@keyframes toastSlide {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(100%); }
}

.toast {
  animation: toastSlide 0.35s ease both;
}

.toast.removing {
  animation: toastFadeOut 0.35s ease both;
}

/* ── URGENCY PULSE (flexitime countdown) ─────────────────── */
.badge--urgent {
  animation: pulse 1.2s ease-in-out infinite;
}

/* ── NUMBER COUNT UP ────────────────────────────────────── */
.stat-item__number {
  transition: all 0.3s ease;
}

/* ── AOS SAFETY FALLBACK ────────────────────────────────── */
/* Elements remain visible until AOS JS fires and sets html.aos-initialized.
   This prevents content from shipping blank if JS is slow or blocked. */
html:not(.aos-initialized) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
/* Expressive entrance, slide, and pulse animations replace with an
   instant or near-instant crossfade. Functional indicators (spinner,
   skeleton shimmer) stay — they communicate state, not decoration. */
@media (prefers-reduced-motion: reduce) {
  body,
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .animate-fade-rise,
  .animate-fade-rise-delay,
  .animate-fade-rise-delay-2,
  .fade-in-up,
  .scale-in,
  .modal-content,
  .toast,
  .toast.removing {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  .badge--urgent,
  .hero__scroll {
    animation: none;
  }

  [data-aos] {
    transition-duration: 0.01ms !important;
  }
}