/* ============================================================
   MARBE — Estudio de Narrativa Estratégica
   animations.css — Sistema de Animaciones
   Versión 1.0 | Fase 1
   ============================================================ */

/* ==========================================
   1. KEYFRAMES
   ========================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineExpand {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes lineExpandCenter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

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

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 168, 98, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(200, 168, 98, 0.12);
  }
}

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

/* ==========================================
   2. SISTEMA DE REVEAL (IntersectionObserver)
   ========================================== */

/*
  Uso:
  <element class="reveal">...</element>
  JS agrega .is-visible cuando entra al viewport.
  Variantes de dirección: .reveal--up (default), .reveal--left, .reveal--right, .reveal--scale
  Delays de stagger: .reveal--d1 ... .reveal--d6
*/

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  var(--t-slow)  var(--ease-cinematic),
    transform var(--t-slow) var(--ease-cinematic);
  will-change: opacity, transform;
}

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

/* Dirección izquierda */
.reveal--left {
  transform: translateX(-28px) translateY(0);
}
.reveal--left.is-visible {
  transform: translateX(0) translateY(0);
}

/* Dirección derecha */
.reveal--right {
  transform: translateX(28px) translateY(0);
}
.reveal--right.is-visible {
  transform: translateX(0) translateY(0);
}

/* Escala */
.reveal--scale {
  transform: scale(0.95) translateY(0);
}
.reveal--scale.is-visible {
  transform: scale(1) translateY(0);
}

/* Sin transformación (solo opacity) */
.reveal--fade {
  transform: none;
}
.reveal--fade.is-visible {
  transform: none;
}

/* ── Delays de Stagger ── */
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }
.reveal--d5 { transition-delay: 0.42s; }
.reveal--d6 { transition-delay: 0.52s; }

/* Versión más lenta para elementos grandes */
.reveal--slow {
  transition-duration: var(--t-xslow);
}

/* ==========================================
   3. ENTRADA DE PÁGINA (SPA)
   ========================================== */

.page.is-active {
  animation: pageReveal 0.65s var(--ease-cinematic) both;
}

/* ==========================================
   4. LOADING STATE
   ========================================== */

body.is-loading .nav,
body.is-loading .hero__content,
body.is-loading .hero__video-wrap {
  opacity: 0;
}

body.is-loaded .nav {
  animation: navSlideDown 0.6s var(--ease-cinematic) 0.1s both;
}

/* ==========================================
   5. HOVER EFFECTS
   ========================================== */

/* Subrayado animado para links */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-cinematic);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Línea decorativa expandible */
.line-expand {
  display: block;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-cinematic);
}

.line-expand.is-visible {
  transform: scaleX(1);
}

/* Glow en botón primario */
.btn--primary:focus-visible {
  animation: pulseGold 0.6s var(--ease-smooth);
}

/* ==========================================
   6. MICRO-INTERACCIONES
   ========================================== */

/* Número de pilar al hover */
.pilar:hover .pilar__num {
  transform: translateX(4px);
  transition: transform 0.3s var(--ease-cinematic);
}

.pilar .pilar__num {
  transition: transform 0.3s var(--ease-cinematic);
}

/* Card de expertise: bordes animados */
.expertise-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 0;
  z-index: 3;
  transition: border-color 0.4s var(--ease-smooth);
  pointer-events: none;
}

.expertise-card:hover::before {
  border-color: rgba(200, 168, 98, 0.2);
}

/* ==========================================
   7. SKELETON LOADER (para imágenes)
   ========================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-bg-3) 25%,
    var(--c-bg-4) 50%,
    var(--c-bg-3) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s var(--ease-in-out) infinite;
  border-radius: var(--r-sm);
}

/* ==========================================
   8. TRANSICIÓN ENTRE PÁGINAS (overlay)
   ========================================== */

.page-transition {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-in-out);
}

.page-transition.is-entering {
  opacity: 1;
  pointer-events: all;
}

.page-transition.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================
   9. LOGO CLIENTS TICKER (opcional, Fase futura)
   ========================================== */

/* Reservado para animación de carrusel de logos si se implementa */

/* ==========================================
   10. SCROLL INDICATOR HERO
   ========================================== */

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.25;
    transform: scaleY(0.95);
  }
  50% {
    opacity: 0.6;
    transform: scaleY(1.05);
  }
}

.hero__scroll-line {
  animation: scrollPulse 2.2s var(--ease-smooth) infinite;
}

/* ==========================================
   11. NÚMERO DE PROCESO (count-up visual)
   ========================================== */

.proceso__step-num {
  transition: color var(--t-med) var(--ease-smooth);
}

.proceso__step:hover .proceso__step-num {
  color: var(--c-border-md);
}

/* ==========================================
   12. REDUCCIÓN DE MOVIMIENTO
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--fade {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .page.is-active {
    animation: none;
    opacity: 1;
  }

  .page-transition {
    transition: none;
  }

  .hero__scroll-line {
    animation: none;
    opacity: 0.4;
  }

  .hero__eyebrow,
  .hero__headline,
  .hero__subhead,
  .hero__ctas,
  .hero__scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }

  body.is-loaded .nav {
    animation: none;
    opacity: 1;
  }

  .skeleton {
    animation: none;
    background: var(--c-bg-3);
  }

  .link-underline::after {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }

  .expertise-card:hover .expertise-card__media img,
  .case-card:hover .case-card__media img,
  .expertise-thumb:hover img,
  .bts-grid__item:hover img {
    transform: none;
  }
}

/* ==========================================
   FASE 4 — Estudio: Animaciones Cinematográficas
   ========================================== */

/* ── Filosofía: reveal lento con desenfoque ── */

.reveal--cinematic {
  transform: translateY(24px);
  filter: blur(5px);
  will-change: opacity, transform, filter;
  transition:
    opacity   1.3s var(--ease-cinematic),
    transform 1.3s var(--ease-cinematic),
    filter    1.0s var(--ease-cinematic);
}

.reveal--cinematic.is-visible {
  transform: translateY(0);
  filter: blur(0px);
}

/* ── Cascade stagger para proceso (pasos 1–4, 120ms entre c/u) ── */

.reveal--s1 { transition-delay: 0.10s; }
.reveal--s2 { transition-delay: 0.22s; }
.reveal--s3 { transition-delay: 0.34s; }
.reveal--s4 { transition-delay: 0.46s; }

/* ── Valores: reveal con accent-line izquierda animada ── */

.reveal--valor {
  position: relative;
  padding-left: 16px;
}

.reveal--valor::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--c-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease-cinematic);
}

.reveal--valor.is-visible::before {
  transform: scaleY(1);
}

/* Sincronizar delay del accent-line con el stagger del elemento */
.reveal--d1.reveal--valor::before { transition-delay: 0.08s; }
.reveal--d2.reveal--valor::before { transition-delay: 0.16s; }

/* ── Retrato: parallax CSS scroll-driven (sin JS) ── */
/*
  Soportado en Chrome 115+, Firefox 119+, Safari 18+.
  Fallback en browsers antiguos: img estática, sin efecto.
*/

@keyframes parallaxPortrait {
  from { transform: scale(1.08) translateY(20px); }
  to   { transform: scale(1.08) translateY(-20px); }
}

@supports (animation-timeline: view()) {
  .parallax-portrait img {
    animation: parallaxPortrait linear both;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
}

/* ── Reducción de movimiento: desactivar todo lo de Fase 4 ── */

@media (prefers-reduced-motion: reduce) {
  .reveal--cinematic {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal--valor::before {
    transform: scaleY(1);
    transition: none;
  }

  .parallax-portrait img {
    animation: none;
    transform: none;
  }
}