/* ==============================================
   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); }

/* ── Clip-path text reveal (section titles) ── */
.iw-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.72s cubic-bezier(0.77, 0, 0.175, 1);
}

.iw-reveal.is-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── Card hover glow ring ── */
.iw-article-card,
.iw-blog-card,
.iw-archive-card {
  transition: box-shadow var(--iw-t), transform var(--iw-t);
}

.iw-article-card:hover,
.iw-blog-card:hover,
.iw-archive-card:hover {
  box-shadow: 0 8px 32px rgba(30,27,75,0.12), 0 0 0 1px rgba(30,27,75,0.06);
}

/* ── Glow badge on featured card ── */
.iw-archive-hero-featured {
  box-shadow: 0 2px 16px rgba(234,88,12,0.40);
}

/* ── Smooth number counter element ── */
[data-count] { display: inline-block; }

/* ── Shimmer effect on card images ── */
.iw-article-card-img::after,
.iw-blog-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.5s ease;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 2;
}

.iw-article-card-img,
.iw-blog-card-img { position: relative; overflow: hidden; }

.iw-article-card:hover .iw-article-card-img::after,
.iw-blog-card:hover .iw-blog-card-img::after {
  opacity: 1;
  transform: translateX(100%);
  transition: opacity 0s, transform 0.5s ease;
}

/* ── 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; }
}