/* ============================================================
   SCROLL ANIMATIONS
   Works with js/components/scrollAnimations.js
   Elements start hidden and animate in when [data-animate]
   is paired with the .is-visible class (added by JS).
   ============================================================ */

/* ── Base hidden state ───────────────────────────────────── */
/* All animated elements start invisible */

[data-animate] {
  will-change: transform, opacity;
}

[data-animate="fade-up"],
[data-animate="stagger"] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.75s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.75s cubic-bezier(0.0, 0.0, 0.2, 1);
}

[data-animate="fade-left"] {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity  0.75s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.75s cubic-bezier(0.0, 0.0, 0.2, 1);
}

[data-animate="fade-right"] {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity  0.75s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.75s cubic-bezier(0.0, 0.0, 0.2, 1);
}

[data-animate="fade"] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.0, 0.0, 0.2, 1);
}

[data-animate="scale"] {
  opacity: 0;
  transform: scale(0.93);
  transition:
    opacity  0.7s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stagger children — each child also starts hidden */
[data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.6s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ── Visible state ───────────────────────────────────────── */
/* JS adds .is-visible to trigger the animation */

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

[data-animate="stagger"].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ── Hero parallax ───────────────────────────────────────── */
/* These are set inline by scrollAnimations.js but we prepare them */

.hero__content {
  transition: none; /* parallax is driven by JS, no CSS transition */
}

#hero-canvas {
  transition: none;
}

/* ── Section label animated underline ────────────────────── */
/* Decorative reveal on the accent label line */

.section-label {
  position: relative;
  display: inline-block;
}

.section-label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.8s cubic-bezier(0.0, 0.0, 0.2, 1) 0.3s;
}

[data-animate].is-visible .section-label::after,
.is-visible.section-label::after {
  width: 100%;
}