/* ============================================
   Grafix Studio -- Animation Helpers
   ============================================ */

/* --- Elementen zijn ALTIJD zichtbaar by default --- */
/* JS voegt .anim-ready toe aan body zodra het klaar is */
/* Alleen dan worden de hide-staten actief */

/* --- Fade-up elementen (voor scroll reveal) --- */
.anim-ready [data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-ready [data-animate="fade-left"] {
  transform: translateX(-50px);
}

.anim-ready [data-animate="fade-right"] {
  transform: translateX(50px);
}

.anim-ready [data-animate="scale"] {
  transform: scale(0.94);
}

.anim-ready [data-animate="fade"] {
  transform: none;
}

/* --- Zichtbaar zodra .in-view wordt toegevoegd --- */
.anim-ready [data-animate].in-view {
  opacity: 1;
  transform: none;
}

/* --- Stagger kinderen --- */
.anim-ready [data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-ready [data-stagger] > *.in-view {
  opacity: 1;
  transform: none;
}

/* --- Hero title lines --- */
.hero-title-line {
  display: block;
  overflow: hidden;
}

.hero-title-line > span {
  display: inline-block;
}

/* --- Counter --- */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --- Parallax --- */
[data-parallax] {
  will-change: transform;
}

/* --- Image reveal --- */
.image-reveal {
  position: relative;
  overflow: hidden;
}

.anim-ready .image-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-secondary);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-ready .image-reveal.in-view::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* --- Smooth link underline --- */
.animated-link {
  position: relative;
  display: inline-block;
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base);
}

.animated-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Reduced motion: alles direct zichtbaar --- */
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-animate],
  .anim-ready [data-stagger] > *,
  .anim-ready .hero-title-line span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .anim-ready .image-reveal::after {
    display: none;
  }
}