/* ==============================================
   ANIMATIONS — Anime.js helpers + CSS keyframes
   ============================================== */

/* ── Page Preloader ── */
/*
 * Hidden by default so pages work without JS.
 * JS sets display:flex and locks scroll; removes on completion.
 */
#iw-preloader {
  position: fixed;
  inset: 0;
  background: var(--iw-navy);
  z-index: 999999;
  display: none;          /* JS reveals this */
  align-items: center;
  justify-content: center;
}

.iw-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(320px, 85vw);
}

.iw-preloader-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(16px);
}

.iw-preloader-logo span {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.iw-preloader-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}

.iw-preloader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--iw-blue), var(--iw-orange));
  border-radius: 999px;
}

.iw-preloader-dots {
  display: flex;
  gap: 8px;
}

.iw-preloader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  opacity: 0;
}

/* ── Archive page hero / section animations ── */
.iw-archive-hero-featured,
.iw-archive-hero-meta,
.iw-archive-hero-title,
.iw-archive-hero-excerpt,
.iw-archive-hero-arrow { opacity: 0; }

/* ── Transition utilities ── */
.iw-header { transition: transform 0.3s ease, box-shadow 0.3s ease; }

/* Elements that anime.js animates keep smooth transitions for hover */
.iw-hero-card,
.iw-featured-card,
.iw-medium-card,
.iw-purple-card,
.iw-banner-card,
.iw-about-card,
.iw-contact-card,
.iw-archive-card { will-change: transform, opacity; }

/* ── Heart liked state (toggled by JS) ── */
.iw-heart-btn.is-liked,
.iw-purple-heart.is-liked {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

.iw-heart-outline.is-liked {
  border-color: #ef4444;
  color: #ef4444;
}

/* ── CSS Keyframes (pure fallback / supplementary) ── */
@keyframes iw-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes iw-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes iw-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes iw-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

@keyframes iw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Animate helper classes (applied by anime.js via JS) ── */
.iw-anim-fade    { opacity: 0; }
.iw-anim-up      { opacity: 0; transform: translateY(24px); }
.iw-anim-left    { opacity: 0; transform: translateX(-30px); }
.iw-anim-right   { opacity: 0; transform: translateX(30px); }
.iw-anim-scale   { opacity: 0; transform: scale(0.92); }

/* ── Loader spinner ── */
.iw-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--iw-gray-200);
  border-top-color: var(--iw-navy);
  border-radius: 50%;
  animation: iw-spin 0.7s linear infinite;
  display: inline-block;
}

/* ── Skeleton loader ── */
.iw-skeleton {
  background: linear-gradient(90deg, var(--iw-gray-100) 25%, var(--iw-gray-50) 50%, var(--iw-gray-100) 75%);
  background-size: 200% 100%;
  animation: iw-skeleton-wave 1.5s infinite;
  border-radius: var(--iw-radius-xs);
}

@keyframes iw-skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .iw-anim-fade,
  .iw-anim-up,
  .iw-anim-left,
  .iw-anim-right,
  .iw-anim-scale {
    opacity: 1;
    transform: none;
  }

  /* Skip preloader entirely on reduced motion — JS also checks this */
  #iw-preloader { display: none !important; }

  /* Archive hero elements always visible */
  .iw-archive-hero-featured,
  .iw-archive-hero-meta,
  .iw-archive-hero-title,
  .iw-archive-hero-excerpt,
  .iw-archive-hero-arrow { opacity: 1; }
}