/* ============================================================
   SkyClean — Animations
   ============================================================ */

/* Initial hidden states for scroll reveal */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-animate='fade-up'] {
  transform: translateY(36px);
}

[data-animate='fade-left'] {
  transform: translateX(-36px);
}

[data-animate='fade-right'] {
  transform: translateX(36px);
}

[data-animate='scale'] {
  transform: scale(0.92);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease),
    transform var(--duration-slow) var(--ease);
}

/* Stagger delays */
[data-delay='1'].is-visible {
  transition-delay: 0.08s;
}
[data-delay='2'].is-visible {
  transition-delay: 0.16s;
}
[data-delay='3'].is-visible {
  transition-delay: 0.24s;
}
[data-delay='4'].is-visible {
  transition-delay: 0.32s;
}
[data-delay='5'].is-visible {
  transition-delay: 0.4s;
}
[data-delay='6'].is-visible {
  transition-delay: 0.48s;
}

/* Hero：首屏立即可見，不做彈入／飛入 */
.hero__fly,
.hero__slogan,
.hero__jump,
.hero__pill,
.hero__photo,
.hero__actions,
.hero-card {
  opacity: 1;
  transform: none;
  animation: none;
}

/* 內頁標題飛入吸睛 */
.page-hero__eyebrow,
.page-hero__title,
.page-hero__desc {
  opacity: 0;
  animation: page-hero-fly 0.75s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}

.page-hero__eyebrow {
  animation-delay: 0.08s;
}

.page-hero__title {
  animation-delay: 0.2s;
}

.page-hero__desc {
  animation-delay: 0.36s;
}

@keyframes page-hero-fly {
  from {
    opacity: 0;
    transform: translate3d(-2.5rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-animate],
  .hero__fly,
  .hero__slogan,
  .hero__jump,
  .hero__pill,
  .hero__photo,
  .hero__actions,
  .hero-card,
  .page-hero__eyebrow,
  .page-hero__title,
  .page-hero__desc {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .btn .ripple {
    display: none;
  }
}