/* ═══════════════════════════════════════════════════════════
   BT1 — Professional Scroll Animations
   Inspired by GreenIQ: subtle fade-up, stagger, clip-reveal
   ═══════════════════════════════════════════════════════════ */

/* ── Base: all animated elements start hidden ── */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}

/* ── Slider children: do NOT hide via stagger
   (slider JS manages their visibility & transforms) ── */
.capabilities-slider-track>.capability-card,
.changes-slider-track>.change-item {
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease !important;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  [data-anim],
  [data-anim].is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  [data-stagger]>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════
   FADE UP  (default)
   ══════════════════════════════════ */
[data-anim="fade-up"] {
  transform: translateY(38px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════
   FADE IN  (no movement)
   ══════════════════════════════════ */
[data-anim="fade-in"] {
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade-in"].is-visible {
  opacity: 1;
}

/* ══════════════════════════════════
   FADE LEFT
   ══════════════════════════════════ */
[data-anim="fade-left"] {
  transform: translateX(-42px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════
   FADE RIGHT
   ══════════════════════════════════ */
[data-anim="fade-right"] {
  transform: translateX(42px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════
   SCALE UP  (cards, panels)
   ══════════════════════════════════ */
[data-anim="scale-up"] {
  transform: scale(0.94) translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="scale-up"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ══════════════════════════════════
   STAGGER DELAYS (children)
   ══════════════════════════════════ */
[data-stagger]>* {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger].is-visible>*:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(2) {
  transition-delay: 90ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(3) {
  transition-delay: 180ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(4) {
  transition-delay: 270ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(5) {
  transition-delay: 360ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(6) {
  transition-delay: 450ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(7) {
  transition-delay: 540ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(8) {
  transition-delay: 630ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(9) {
  transition-delay: 720ms;
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible>*:nth-child(n+10) {
  transition-delay: 800ms;
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════
   STAGGER WAVE  (discipline tags)
   ══════════════════════════════════ */
[data-stagger="wave"]>* {
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger="wave"].is-visible>*:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(2) {
  transition-delay: 60ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(3) {
  transition-delay: 120ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(4) {
  transition-delay: 180ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(5) {
  transition-delay: 240ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(6) {
  transition-delay: 300ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(7) {
  transition-delay: 360ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(8) {
  transition-delay: 420ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(9) {
  transition-delay: 480ms;
  opacity: 1;
  transform: none;
}

[data-stagger="wave"].is-visible>*:nth-child(n+10) {
  transition-delay: 540ms;
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════
   DELAY UTILITIES
   ══════════════════════════════════ */
[data-delay="100"] {
  transition-delay: 100ms !important;
}

[data-delay="200"] {
  transition-delay: 200ms !important;
}

[data-delay="300"] {
  transition-delay: 300ms !important;
}

[data-delay="400"] {
  transition-delay: 400ms !important;
}

[data-delay="500"] {
  transition-delay: 500ms !important;
}

[data-delay="600"] {
  transition-delay: 600ms !important;
}

/* ══════════════════════════════════
   HERO — page-load entrance animations
   ══════════════════════════════════ */
@keyframes heroEyebrowIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    letter-spacing: 6px;
  }

  to {
    opacity: 0.85;
    transform: translateY(0);
    letter-spacing: 2px;
  }
}

@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(22px) skewY(1.5deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
  }
}

@keyframes heroDescIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes heroCtaIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.97);
  }

  to {
    opacity: 0.95;
    transform: translateX(0) scale(1);
  }
}

@keyframes statPanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes floatSlow1 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -7px, 0);
  }
}

@keyframes floatSlow2 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes floatSlow3 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -8px, 0);
  }
}

.hero-eyebrow {
  animation: heroEyebrowIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hero-title {
  animation: heroTitleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both;
}

.hero-description {
  animation: heroDescIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both;
}

.hero-cta {
  animation: heroCtaIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both;
}

.hero-main-image {
  animation: heroImageIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* Stat panels: entrance + continuous ultra-smooth slow float */
.stat-panel-1 {
  animation:
    statPanelIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both,
    floatSlow1 7.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.7s infinite;
}

.stat-panel-2 {
  animation:
    statPanelIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both,
    floatSlow2 8.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.9s infinite;
}

.stat-panel-3 {
  animation:
    statPanelIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both,
    floatSlow3 7.0s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2.1s infinite;
}

/* logos-container stagger removed — replaced by smooth slider (see styles.css + animations.js) */


/* ══════════════════════════════════
   HIGHLIGHT TEXT — colour sweep on enter
   ══════════════════════════════════ */
@keyframes highlightSweep {
  from {
    background-size: 0% 100%;
  }

  to {
    background-size: 100% 100%;
  }
}

.text-highlight.is-animated {
  background-position: left center;
  animation: highlightSweep 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  border-radius: 3px;
  padding: 0 3px;
}

/* ══════════════════════════════════
   SECTION DIVIDER  — slide-in line
   ══════════════════════════════════ */
@keyframes lineGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}