/* ═══════════════════════════════════════════════
   YING GROUP — EXTRA ANIMATIONS
   Delete animations.css + animations.js to remove
   ═══════════════════════════════════════════════ */

/* ─── 1. KEYFRAMES ───────────────────────────── */

@keyframes yingFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes yingBounce {
  0%, 100% { transform: translateY(0); animation-timing-function: ease-in; }
  45%       { transform: translateY(-14px); animation-timing-function: ease-out; }
  65%       { transform: translateY(-6px); animation-timing-function: ease-in; }
}

@keyframes yingGlowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,229,255,0.2), inset 0 0 0 transparent; }
  50%       { box-shadow: 0 0 28px rgba(0,229,255,0.55), inset 0 0 12px rgba(0,229,255,0.08); }
}

@keyframes yingShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes yingWordUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes yingRevealLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yingRevealRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yingScaleUp {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}


/* ─── 2. FLOAT & BOUNCE CLASSES ──────────────── */

.float-anim {
  animation: yingFloat 4s ease-in-out infinite;
}
.bounce-anim {
  animation: yingBounce 2.4s ease infinite;
}
/* Applied by JS to section-num watermarks */
.section-num-float {
  animation: yingFloat 6s ease-in-out infinite;
}


/* ─── 3. SCROLL REVEAL VARIANTS ──────────────── */

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}


/* ─── 4. BUTTON HOVER EFFECTS ────────────────── */

/* Glow — applied to .nav-cta and .btn-dark */
.nav-cta,
.btn-dark {
  transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-cta:hover,
.btn-dark:hover {
  box-shadow: 0 0 22px rgba(0,229,255,0.45);
  transform: translateY(-2px) scale(1.03);
}

/* Scale + glow for outline buttons */
.btn-outline,
.btn-white {
  transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-outline:hover,
.btn-white:hover {
  box-shadow: 0 0 18px rgba(255,255,255,0.2);
  transform: translateY(-2px) scale(1.02);
}

/* Subtle rotate + glow on the hamburger spans */
.nav-hamburger:hover span {
  box-shadow: 0 0 6px rgba(0,229,255,0.6);
}

/* Pulse glow on the GET A QUOTE cta-band button */
.cta-band .btn-dark {
  animation: yingGlowPulse 3s ease-in-out infinite;
}
.cta-band .btn-dark:hover {
  animation: none;
  box-shadow: 0 0 32px rgba(0,229,255,0.6);
}


/* ─── 5. WORD-BY-WORD TEXT ANIMATION ─────────── */

/* Container */
[data-words] {
  overflow: visible;
}

/* Each word span injected by animations.js */
[data-words] .w-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Trigger: when body gets .loaded (existing mechanism) */
body.loaded [data-words] .w-word {
  opacity: 1;
  transform: translateY(0);
}

/* Trigger for scroll-triggered word elements */
[data-words].words-visible .w-word {
  opacity: 1;
  transform: translateY(0);
}


/* ─── 6. PARALLAX HEADER ─────────────────────── */

.page-header {
  will-change: transform;
  /* JS sets transform: translateY() based on scroll */
}

/* Slightly slow down the big section number */
.page-header .section-num {
  will-change: transform;
  transition: transform 0.05s linear;
}


/* ─── 7. PRODUCT ROW HOVER ENHANCEMENT ───────── */

.product-row {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.product-row:hover {
  box-shadow: 0 0 30px rgba(0,229,255,0.1);
  transform: translateY(-3px);
}


/* ─── 8. STAT ITEMS STAGGER ──────────────────── */

.stat-item:nth-child(1) { transition-delay: 0.05s; }
.stat-item:nth-child(2) { transition-delay: 0.15s; }
.stat-item:nth-child(3) { transition-delay: 0.25s; }
.stat-item:nth-child(4) { transition-delay: 0.35s; }