/* ============================================================
   4Tex GmbH — animations.css
   Scroll reveals + hero motion. Fully gated by reduced-motion.
   ============================================================ */

/* Reveal-on-scroll base state (JS adds .is-visible via IntersectionObserver) */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal].is-visible { transform: none; }

/* Stagger children */
[data-reveal-group] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: .00s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .07s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .14s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .21s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .35s; }

/* Home hero entrance */
.hero__eyebrow, .hero__title, .hero__lead, .hero__cta, .hero__stats {
  opacity: 0; transform: translateY(24px);
  animation: heroIn .9s var(--ease) forwards;
}
.hero__eyebrow { animation-delay: .05s; }
.hero__title   { animation-delay: .15s; }
.hero__lead    { animation-delay: .30s; }
.hero__cta     { animation-delay: .42s; }
.hero__stats   { animation-delay: .54s; }
.hero__media   { opacity: 0; animation: heroMediaIn 1.1s var(--ease) .2s forwards; }

@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroMediaIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* Subtle ambient ripple drift in hero backdrop */
@keyframes rippleDrift {
  0%,100% { transform: translateY(-50%) scale(1); opacity: .10; }
  50% { transform: translateY(-50%) scale(1.04); opacity: .14; }
}
.page-hero__ripple { animation: rippleDrift 14s ease-in-out infinite; }

/* Image hover zoom (product/media) */
.media--zoom img { transition: transform .8s var(--ease); }
.media--zoom:hover img { transform: scale(1.045); }

/* Kill everything for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important;
    transition: none !important; }
  .hero__eyebrow, .hero__title, .hero__lead, .hero__cta, .hero__stats, .hero__media {
    opacity: 1 !important; transform: none !important; animation: none !important; }
  .page-hero__ripple { animation: none !important; }
  .media--zoom img { transition: none !important; }
}