/* =========================================================
   PREMIUM HERO ANIMATION — APPLE / PANDORA STYLE
========================================================= */
.hero-animate {
  opacity: 0;
  transform: translateY(45px) scale(0.98);
  filter: blur(8px);

  transition: opacity 1.2s ease-out,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease-out;

  will-change: opacity, transform, filter;
}

.hero-animate.hero-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Hero child elements (title, button, subtitle, etc.) */
.hero-child {
  opacity: 0;
  transform: translateY(35px);
  filter: blur(6px);

  transition: opacity 0.9s ease-out,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease-out;

  /* Index set via JS: --hero-i */
  transition-delay: calc(var(--hero-i, 0) * 0.18s);
}

.hero-animate.hero-visible .hero-child {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================================
   GENERIC SCROLL REVEAL (sections + cards)
========================================= */

/* Initial state */
.fade-section,
.scrollElement {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(4px);
  transition: opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease-out;
  will-change: opacity, transform, filter;
}

/* Visible state */
.fade-section.show,
.scrollElement.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
html.preload * {
  transition: none !important;
}