/* ==========================================================================
   LIRIEN — PAGE-LOAD ANIMATION SYSTEM
   Elegant, staggered CSS animations for initial render.
   The JS-driven scroll system (components.css) handles card/section entrances.
   ========================================================================== */

/* ── Keyframes ──────────────────────────────────────────────────────────── */

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

@keyframes lirien-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lirien-rise-soft {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lirien-photo-settle {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(var(--lirien-enter-rotate, 0deg)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* ── Timing function — editorial spring ─────────────────────────────────── */
/* cubic-bezier(.22,.6,.36,1): smooth deceleration, natural stop */

/* ── Header ─────────────────────────────────────────────────────────────── */
.lirien-motion-ready .lirien-header {
  animation: lirien-fade-in 380ms cubic-bezier(.22,.6,.36,1) both;
}

/* ── Hero copy ───────────────────────────────────────────────────────────── */
.lirien-motion-ready .lirien-hero-copy {
  animation: lirien-rise 560ms cubic-bezier(.22,.6,.36,1) 80ms both;
}

.lirien-motion-ready .lirien-hero-copy .lirien-hero-title {
  animation: lirien-rise 600ms cubic-bezier(.22,.6,.36,1) 100ms both;
}

.lirien-motion-ready .lirien-hero-copy .lirien-hero-lead {
  animation: lirien-rise 560ms cubic-bezier(.22,.6,.36,1) 160ms both;
}

.lirien-motion-ready .lirien-hero-copy .lirien-hero-button,
.lirien-motion-ready .lirien-hero-copy .lirien-button {
  animation: lirien-rise-soft 500ms cubic-bezier(.22,.6,.36,1) 220ms both;
}

/* ── Category strip ─────────────────────────────────────────────────────── */
.lirien-motion-ready .lirien-category-strip {
  animation: lirien-rise-soft 520ms cubic-bezier(.22,.6,.36,1) 140ms both;
}

/* ── Section headings — staggered via nth-of-type ───────────────────────── */
.lirien-motion-ready .lirien-section-heading {
  animation: lirien-rise 480ms cubic-bezier(.22,.6,.36,1) both;
}

/* ── Footer columns — cascade left to right ─────────────────────────────── */
.lirien-motion-ready .lirien-footer-column:nth-child(1) {
  animation: lirien-rise-soft 500ms cubic-bezier(.22,.6,.36,1) 0ms   both;
}
.lirien-motion-ready .lirien-footer-column:nth-child(2) {
  animation: lirien-rise-soft 500ms cubic-bezier(.22,.6,.36,1) 60ms  both;
}
.lirien-motion-ready .lirien-footer-column:nth-child(3) {
  animation: lirien-rise-soft 500ms cubic-bezier(.22,.6,.36,1) 120ms both;
}
.lirien-motion-ready .lirien-footer-column:nth-child(4) {
  animation: lirien-rise-soft 500ms cubic-bezier(.22,.6,.36,1) 180ms both;
}

/* ── Photo hero stack — settle with rotation ────────────────────────────── */
.lirien-motion-ready .lirien-photo-stack-item {
  will-change: transform, opacity;
  animation: lirien-photo-settle 680ms cubic-bezier(.22,.6,.36,1) both;
}

.lirien-motion-ready .lirien-photo-stack-item-1 {
  --lirien-enter-rotate: -2.5deg;
  animation-delay: 60ms;
}

.lirien-motion-ready .lirien-photo-stack-item-2 {
  --lirien-enter-rotate: 1.5deg;
  animation-delay: 130ms;
}

.lirien-motion-ready .lirien-photo-stack-item-3 {
  --lirien-enter-rotate: -1deg;
  animation-delay: 200ms;
}

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

  .lirien-photo-stack-item,
  .lirien-card:hover,
  .lirien-button:hover {
    transform: none !important;
  }
}