/* ══════════════════════════════════════════════════════
   NOSOTROS.CSS — Animaciones y microinteracciones
   O-Vié · Mayo 2026
   Solo animaciones. No altera diseño existente.
   Prefijos: n-, z1-, z2-, z3-, z4-, z5-
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════ */

/* Glow suave para slogans dorados */
@keyframes n-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0  0px rgba(201,170,114,0),
      0 0  0px rgba(240,220,170,0);
  }
  50% {
    text-shadow:
      0 0 22px rgba(201,170,114,0.20),
      0 0 55px rgba(201,170,114,0.08),
      0 0 90px rgba(240,220,170,0.05);
  }
}

/* Shimmer de luz cruzando imagen */
@keyframes n-shimmer {
  0%   { transform: translateX(-110%) skewX(-14deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(210%)  skewX(-14deg); opacity: 0; }
}

/* ══════════════════════════════════════
   GLOW ANIMADO EN SLOGANS
   Activado con clase .n-glowing via JS
══════════════════════════════════════ */
.z1-slogan.n-glowing {
  animation: n-glow-pulse 5.5s ease-in-out infinite;
}

.z5-title.n-glowing {
  animation: n-glow-pulse 5.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* ══════════════════════════════════════
   SHIMMER EN IMÁGENES
   ::after libre en z2/z3/z4 visual
   Se activa cuando la zona recibe .n-in-view
══════════════════════════════════════ */
.z2-visual::after,
.z3-visual::after,
.z4-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                  /* entre imagen y marco ::before */
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent            32%,
    rgba(255,255,255,0.00) 40%,
    rgba(255,255,255,0.11) 50%,
    rgba(201,170,114,0.07) 52%,
    rgba(255,255,255,0.00) 60%,
    transparent            68%
  );
  opacity: 0;
  /* NO animar aquí: la animación se lanza con JS (.n-in-view) */
}

.n-zone--2.n-in-view .z2-visual::after {
  animation: n-shimmer 2.8s ease-in-out 0.6s 1 forwards;
}

.n-zone--3.n-in-view .z3-visual::after {
  animation: n-shimmer 2.8s ease-in-out 0.8s 1 forwards;
}

.n-zone--4.n-in-view .z4-visual::after {
  animation: n-shimmer 2.8s ease-in-out 0.6s 1 forwards;
}

/* ══════════════════════════════════════
   WILL-CHANGE — optimización de parallax
   Solo en los imgs que reciben transform de GSAP
══════════════════════════════════════ */
.z2-img,
.z3-img,
.z4-img {
  will-change: transform;
}

/* ══════════════════════════════════════
   HOVER EN PILARES — solo desktop
   Micro-movimiento sin cambiar tamaño ni posición
══════════════════════════════════════ */
@media (hover: hover) {
  .z3-pillar {
    transition:
      border-left-color 0.30s ease,
      padding-left      0.28s ease,
      transform         0.28s ease;
    transform-origin: left center;
  }

  .z3-pillar:hover {
    border-left-color: rgba(180,150,105,0.70);
    padding-left: 16px;
    transform: translateX(2px);
  }

  .z3-pillar-title {
    transition: color 0.25s ease;
  }

  .z3-pillar:hover .z3-pillar-title {
    color: rgba(90,60,30,1);
  }

  .z3-pillar-text {
    transition: color 0.25s ease;
  }

  .z3-pillar:hover .z3-pillar-text {
    color: rgba(70,48,28,0.85);
  }
}

/* ══════════════════════════════════════
   REGLA Y DIVISOR — transform-origin
   Necesario para la animación scaleX de GSAP
══════════════════════════════════════ */
.z1-rule,
.z2-rule,
.z3-rule,
.z4-rule,
.z5-rule {
  transform-origin: left center;
}

.z5-rule {
  transform-origin: center center;
}

.z3-divider {
  transform-origin: left center;
}