@keyframes heroStarEnter {
  from {
    opacity: 0;
    transform: translateY(-50%) rotate(-32deg) scale(0.16);
  }
  62% {
    opacity: 1;
    transform: translateY(-50%) rotate(4deg) scale(1.08);
  }
  to {
    opacity: 0.9;
    transform: translateY(-50%) rotate(-12deg) scale(1);
  }
}

/* ============================================
   TICKER LOOP
   ============================================ */

@keyframes tickerLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================
   HERO LINE ENTRANCE
   ============================================ */

.hero-line {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.hero-line[data-dir="left"]   { transform: translateX(-80px); }
.hero-line[data-dir="right"]  { transform: translateX(80px); }
.hero-line[data-dir="bottom"] { transform: translateY(50px); }

body.loaded .hero-line {
  opacity: 1;
  transform: translate(0, 0);
}

body.loaded .hero-line:nth-child(1) { transition-delay: 0.15s; }
body.loaded .hero-line:nth-child(2) { transition-delay: 0.30s; }
body.loaded .hero-line:nth-child(3) { transition-delay: 0.45s; }

body.loaded .hero-icon {
  opacity: 0.9;
  animation: heroStarEnter 1.25s var(--ease-out) 0.25s both;
}

/* ============================================
   SCROLL REVEAL — directional
   ============================================ */

[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-reveal="left"]   { transform: translateX(-50px); }
[data-reveal="right"]  { transform: translateX(50px); }
[data-reveal="bottom"] { transform: translateY(40px); }
[data-reveal="fade"]   { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================
   FILOSOFIA PRINCIPLES
   ============================================ */

.filosofia-principle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.filosofia-principle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   MÉTODO STEPS
   ============================================ */

.metodo-step-num {
  transition: opacity 0.4s ease, color 0.4s ease;
}

/* ============================================
   HERO LABEL & BODY FADE
   ============================================ */

.hero-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}

body.loaded .hero-fade {
  opacity: 1;
}

body.loaded .hero-fade-1 { transition-delay: 0.8s; }
body.loaded .hero-fade-2 { transition-delay: 1.0s; }
body.loaded .hero-fade-3 { transition-delay: 1.2s; }

@media (max-width: 960px) {
  body.loaded .hero-icon {
    opacity: 0.82;
    animation: heroStarEnter 1.1s var(--ease-out) 0.25s both;
  }
}