/**
 * Load-in animations for the site.
 * Uses data-animate for scroll-triggered effects. Respects prefers-reduced-motion.
 */

/* Duration and distance */
:root {
  --animate-duration: 0.9s;
  --animate-distance: 1.5rem;
  --animate-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keyframes */
@keyframes animate-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes animate-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--animate-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes animate-fade-down {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--animate-distance)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes animate-fade-left {
  from {
    opacity: 0;
    transform: translateX(var(--animate-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes animate-fade-right {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--animate-distance)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Reduce motion: only fade, no transform */
@media (prefers-reduced-motion: reduce) {
  @keyframes animate-fade-up {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes animate-fade-down {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes animate-fade-left {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes animate-fade-right {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes animate-scale-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  :root {
    --animate-duration: 0.3s;
  }
}

/* Base: elements with data-animate start hidden */
[data-animate] {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: var(--animate-ease);
}

[data-animate].is-visible {
  animation-duration: var(--animate-duration);
}

[data-animate="fade-in"].is-visible {
  animation-name: animate-fade-in;
}

[data-animate="fade-up"].is-visible {
  animation-name: animate-fade-up;
}

[data-animate="fade-down"].is-visible {
  animation-name: animate-fade-down;
}

[data-animate="fade-left"].is-visible {
  animation-name: animate-fade-left;
}

[data-animate="fade-right"].is-visible {
  animation-name: animate-fade-right;
}

[data-animate="scale-in"].is-visible {
  animation-name: animate-scale-in;
}

/* Stagger delay for children */
[data-animate-stagger] > * {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate-stagger] > * {
    animation-name: animate-fade-in;
  }
}

[data-animate-stagger].is-visible > *:nth-child(1) { animation-delay: 0ms; }
[data-animate-stagger].is-visible > *:nth-child(2) { animation-delay: 120ms; }
[data-animate-stagger].is-visible > *:nth-child(3) { animation-delay: 240ms; }
[data-animate-stagger].is-visible > *:nth-child(4) { animation-delay: 360ms; }
[data-animate-stagger].is-visible > *:nth-child(5) { animation-delay: 480ms; }
[data-animate-stagger].is-visible > *:nth-child(6) { animation-delay: 600ms; }
[data-animate-stagger].is-visible > *:nth-child(7) { animation-delay: 720ms; }
[data-animate-stagger].is-visible > *:nth-child(8) { animation-delay: 840ms; }
[data-animate-stagger].is-visible > *:nth-child(9) { animation-delay: 960ms; }
[data-animate-stagger].is-visible > *:nth-child(10) { animation-delay: 1080ms; }

/* Initial page load: header and hero */
.animate-on-load {
  opacity: 0;
  animation: animate-fade-down var(--animate-duration) var(--animate-ease) forwards;
}

.animate-on-load--delay {
  animation-delay: 0.25s;
  animation-fill-mode: both;
}

.animate-on-load--delay-lg {
  animation-delay: 0.45s;
  animation-fill-mode: both;
}

/* Hero content stagger – home, about, page, subpage, product */
.hero[data-animate-hero] .hero__tag {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.15s forwards,
    hero-tag-gradient 4s ease-in-out infinite,
    hero-tag-brightness 2.5s ease-in-out infinite;
}

.hero.hero--page-uitdagingen[data-animate-hero] .hero__tag {
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.15s forwards;
}

.hero[data-animate-hero] .hero__title {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.15s forwards;
}

.hero[data-animate-hero] .hero__rotator,
.hero[data-animate-hero] .hero__text,
.hero[data-animate-hero] .hero__subtitle {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.35s forwards;
}

.hero[data-animate-hero] .hero__cta,
.hero[data-animate-hero] .hero__subpage-buttons {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.55s forwards;
}

.hero[data-animate-hero] .hero__media,
.hero[data-animate-hero] .hero__product-media {
  opacity: 0;
  animation: animate-fade-in var(--animate-duration) var(--animate-ease) 0.3s forwards;
}

.hero[data-animate-hero] .hero__subpage-title {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.15s forwards;
}

.hero[data-animate-hero] .hero__subpage-subtitle {
  opacity: 0;
  animation: animate-fade-up var(--animate-duration) var(--animate-ease) 0.35s forwards;
}

.hero[data-animate-hero] .hero__subpage-media {
  opacity: 0;
  animation: animate-fade-in var(--animate-duration) var(--animate-ease) 0.3s forwards;
}

.hero[data-animate-hero] .hero__product-content .hero__title {
  animation-delay: 0.15s;
}

.hero[data-animate-hero] .hero__product-content .hero__subtitle {
  animation-delay: 0.3s;
}

.hero[data-animate-hero] .hero__product-content .hero__text {
  animation-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-load,
  .hero[data-animate-hero] .hero__title,
  .hero[data-animate-hero] .hero__rotator,
  .hero[data-animate-hero] .hero__text,
  .hero[data-animate-hero] .hero__cta,
  .hero[data-animate-hero] .hero__media {
    animation-duration: 0.2s;
  }
}