/* ============================================================
   DevLyon Web - Transiciones y animaciones de scroll
   ============================================================
   Reveal de secciones al hacer scroll, fade in, slide up.
   Usa IntersectionObserver desde JS para añadir la clase .is-visible.
   ============================================================ */

/* ── Estado inicial (oculto) ──────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="slide-left"] {
  transform: translateX(-60px);
}

[data-reveal="slide-right"] {
  transform: translateX(60px);
}

[data-reveal="scale"] {
  transform: scale(0.9);
}

[data-reveal="flip"] {
  transform: perspective(800px) rotateX(15deg);
  transform-origin: top;
}

/* ── Estado visible ───────────────────────────────────────── */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Delay escalonado para hijos ──────────────────────────── */
[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal-delay="5"] { transition-delay: 500ms; }
[data-reveal-delay="6"] { transition-delay: 600ms; }

/* ── Transición de página al cargar ───────────────────────── */
.page-enter {
  animation: page-enter var(--duration-slower) var(--ease-out);
}

@keyframes page-enter {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── Transición entre secciones (cambio de nav activa) ────── */
.section--entering {
  animation: section-focus var(--duration-slow) var(--ease-out);
}

@keyframes section-focus {
  0% {
    filter: brightness(0.7);
  }
  100% {
    filter: brightness(1);
  }
}

/* ── Tabs: transición de contenido ────────────────────────── */
.tab-content {
  animation: tab-fade var(--duration-normal) var(--ease-out);
}

@keyframes tab-fade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Hero: entrada escalonada ─────────────────────────────── */
.hero__greeting { animation: hero-rise var(--duration-slow) var(--ease-out) both; animation-delay: 200ms; }
.hero__name { animation: hero-rise var(--duration-slower) var(--ease-spring) both; animation-delay: 400ms; }
.hero__role { animation: hero-rise var(--duration-slow) var(--ease-out) both; animation-delay: 700ms; }
.hero__summary { animation: hero-rise var(--duration-slow) var(--ease-out) both; animation-delay: 900ms; }
.hero__cta { animation: hero-rise var(--duration-slow) var(--ease-out) both; animation-delay: 1100ms; }
.hero__scroll { animation: hero-rise var(--duration-slow) var(--ease-out) both; animation-delay: 1400ms; }

@keyframes hero-rise {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── Reduce motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-enter,
  .section--entering,
  .tab-content,
  .hero__greeting,
  .hero__name,
  .hero__role,
  .hero__summary,
  .hero__cta,
  .hero__scroll {
    animation: none;
  }
}