/* ============================================
   Ile des Fleurs - Animations & Transitions
   ============================================ */

/* --- Page Load --- */
body {
  opacity: 0;
  animation: page-load 400ms ease forwards;
}

@keyframes page-load {
  to { opacity: 1; }
}

/* --- Scroll Animation Base --- */
[data-animate] {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate].visible {
  opacity: 1;
  transform: none !important;
}

/* Fade Up (default) */
[data-animate="fade-up"] {
  transform: translateY(30px);
}

/* Fade Down */
[data-animate="fade-down"] {
  transform: translateY(-30px);
}

/* Fade Left */
[data-animate="fade-left"] {
  transform: translateX(-40px);
}

/* Fade Right */
[data-animate="fade-right"] {
  transform: translateX(40px);
}

/* Scale In */
[data-animate="scale-in"] {
  transform: scale(0.92);
}

/* Zoom In */
[data-animate="zoom-in"] {
  transform: scale(0.8);
}

/* --- Stagger Delays --- */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

/* --- Hero Animations --- */
.hero__title {
  opacity: 0;
  transform: translateY(40px);
  animation: hero-title 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms forwards;
}

@keyframes hero-title {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-subtitle 600ms ease 500ms forwards;
}

@keyframes hero-subtitle {
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.hero__actions {
  opacity: 0;
  transform: translateY(15px);
  animation: hero-actions 500ms ease 700ms forwards;
}

@keyframes hero-actions {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Nav Item Stagger on Load --- */
.nav__link {
  opacity: 0;
  transform: translateY(-10px);
  animation: nav-slide-in 300ms ease forwards;
}

.nav__link:nth-child(1) { animation-delay: 100ms; }
.nav__link:nth-child(2) { animation-delay: 150ms; }
.nav__link:nth-child(3) { animation-delay: 200ms; }
.nav__link:nth-child(4) { animation-delay: 250ms; }
.nav__link:nth-child(5) { animation-delay: 300ms; }
.nav__link:nth-child(6) { animation-delay: 350ms; }

@keyframes nav-slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Mobile Nav Item Stagger --- */
@media (max-width: 1024px) {
  .nav--open .nav__link {
    opacity: 0;
    transform: translateX(20px);
    animation: mobile-nav-in 300ms ease forwards;
  }

  .nav--open .nav__link:nth-child(1) { animation-delay: 50ms; }
  .nav--open .nav__link:nth-child(2) { animation-delay: 100ms; }
  .nav--open .nav__link:nth-child(3) { animation-delay: 150ms; }
  .nav--open .nav__link:nth-child(4) { animation-delay: 200ms; }
  .nav--open .nav__link:nth-child(5) { animation-delay: 250ms; }
  .nav--open .nav__link:nth-child(6) { animation-delay: 300ms; }

  @keyframes mobile-nav-in {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* --- Stagger Children (for grids/lists) --- */
[data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate="stagger"].visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate="stagger"].visible > *:nth-child(2) { transition-delay: 80ms; }
[data-animate="stagger"].visible > *:nth-child(3) { transition-delay: 160ms; }
[data-animate="stagger"].visible > *:nth-child(4) { transition-delay: 240ms; }
[data-animate="stagger"].visible > *:nth-child(5) { transition-delay: 320ms; }
[data-animate="stagger"].visible > *:nth-child(6) { transition-delay: 400ms; }
[data-animate="stagger"].visible > *:nth-child(7) { transition-delay: 480ms; }
[data-animate="stagger"].visible > *:nth-child(8) { transition-delay: 560ms; }
[data-animate="stagger"].visible > *:nth-child(9) { transition-delay: 640ms; }
[data-animate="stagger"].visible > *:nth-child(10) { transition-delay: 720ms; }
[data-animate="stagger"].visible > *:nth-child(11) { transition-delay: 800ms; }
[data-animate="stagger"].visible > *:nth-child(12) { transition-delay: 880ms; }
[data-animate="stagger"].visible > *:nth-child(n+13) { transition-delay: 960ms; }

[data-animate="stagger"].visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- Page Transition (for internal links) --- */
body.page-exit {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* --- Counter Animation --- */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Success Checkmark --- */
@keyframes checkmark-draw {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes circle-fill {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.form__success-icon {
  animation: circle-fill 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Parallax hint (subtle) --- */
@media (min-width: 768px) {
  .hero__bg {
    transition: transform 0.1s linear;
  }
}

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

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    opacity: 1;
    animation: none;
  }

  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .nav__link {
    opacity: 1;
    transform: none;
    animation: none;
  }
}