/* ---------------------------------------------------------------------------
   Área 4 - Animaciones
   Todo el movimiento de la página vive acá y en motion.js, aparte del HTML de
   Next.js. Se engancha a clases que ya existen (sobre todo .reveal / .reveal-in,
   que pone React cuando cada bloque entra en pantalla), así que no hace falta
   tocar el payload.
   Si alguien tiene activado "reducir movimiento" en su teléfono o compu, no se
   anima nada: todo está dentro de prefers-reduced-motion: no-preference.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* ============================================================ PORTADA === */

  /* Foto: entra con un zoom lento hacia atrás */
  #top > img[data-nimg="fill"] {
    animation: a4-hero-img 2.6s cubic-bezier(.16, 1, .3, 1) both;
    will-change: scale, translate;
  }

  /* Resplandor celeste de la izquierda: flota despacio */
  #top > .blur-\[130px\] {
    animation: a4-flotar 14s ease-in-out infinite alternate;
  }

  /* Línea y texto chico de arriba del título */
  #top .eyebrow {
    animation: a4-subir .8s cubic-bezier(.16, 1, .3, 1) .15s both;
  }
  #top .eyebrow > span.h-px {
    transform-origin: left center;
    animation: a4-linea .9s cubic-bezier(.16, 1, .3, 1) .3s both;
  }

  /* Título: cada renglón sube desde abajo, uno detrás del otro */
  #top h1 > span {
    display: block;
    animation: a4-renglon 1s cubic-bezier(.16, 1, .3, 1) both;
  }
  #top h1 > span:nth-child(1) { animation-delay: .3s; }
  #top h1 > span:nth-child(2) { animation-delay: .42s; }

  /* "Tu identidad." además tiene un brillo que la cruza cada tanto */
  #top h1 > span.text-brand {
    background: linear-gradient(100deg, var(--color-brand) 0 40%, #e9fcff 50%, var(--color-brand) 60% 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: a4-renglon 1s cubic-bezier(.16, 1, .3, 1) .54s both,
               a4-brillo-texto 6s ease-in-out 1.8s infinite;
  }

  #top h1 + p {
    animation: a4-subir .9s cubic-bezier(.16, 1, .3, 1) .8s both;
  }
  #top h1 + p + div > a {
    animation: a4-subir .9s cubic-bezier(.16, 1, .3, 1) .95s both;
  }
  #top h1 + p + div > a + a { animation-delay: 1.05s; }

  /* Franja de datos de abajo (Desde 10, Producción propia...) */
  #top > .border-t li {
    animation: a4-subir .8s cubic-bezier(.16, 1, .3, 1) both;
  }
  #top > .border-t li:nth-child(1) { animation-delay: 1.1s; }
  #top > .border-t li:nth-child(2) { animation-delay: 1.18s; }
  #top > .border-t li:nth-child(3) { animation-delay: 1.26s; }
  #top > .border-t li:nth-child(4) { animation-delay: 1.34s; }

  /* Luz que sigue al mouse sobre la portada (solo compu; la prende motion.js) */
  #top::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(640px circle at var(--a4-mx, 50%) var(--a4-my, 50%), rgb(0 212 255 / .14), transparent 60%);
    opacity: var(--a4-luz, 0);
    transition: opacity .6s ease;
  }

  /* Links del menú: caen de a uno al cargar */
  header nav li {
    animation: a4-bajar .7s cubic-bezier(.16, 1, .3, 1) both;
  }
  header nav li:nth-child(1) { animation-delay: .1s; }
  header nav li:nth-child(2) { animation-delay: .16s; }
  header nav li:nth-child(3) { animation-delay: .22s; }
  header nav li:nth-child(4) { animation-delay: .28s; }
  header nav li:nth-child(5) { animation-delay: .34s; }

  /* ============================================= BOTONES PRINCIPALES ====== */

  /* Un reflejo de luz cruza los botones grandes cada algunos segundos */
  a.bg-brand.h-14,
  a.bg-whatsapp.h-14 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  a.bg-brand.h-14::after,
  a.bg-whatsapp.h-14::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%);
    translate: -130% 0;
    animation: a4-reflejo 5s ease-in-out 2.2s infinite;
  }

  /* ================================================ TÍTULOS DE SECCIÓN ==== */

  /* La rayita celeste de arriba de cada título se dibuja al aparecer */
  .reveal .eyebrow > span.h-px {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1) .25s;
  }
  .reveal-in .eyebrow > span.h-px { transform: none; }

  /* La palabra celeste del título se subraya sola */
  .reveal h2 .text-brand {
    background: linear-gradient(currentColor, currentColor) 0 96% / 0% .07em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 1s cubic-bezier(.16, 1, .3, 1) .45s;
  }
  .reveal-in h2 .text-brand { background-size: 100% .07em; }

  /* ========================================================= PRODUCTOS ==== */

  /* La foto de cada tarjeta entra con zoom y se asienta */
  #productos .reveal:not(.reveal-in) img { scale: 1.18; }
  #productos .reveal img { transition-duration: 1.1s; }
  #productos .reveal a.group:hover img { transition-duration: .7s; }
  /* Las fotos del carrusel (visor-productos.js) traen su propio transition con
     !important: se le suma el zoom para que no salte */
  #productos .a4c-slide {
    transition: opacity .7s ease, transform .7s cubic-bezier(0, 0, .2, 1), scale 1.1s cubic-bezier(.16, 1, .3, 1) !important;
  }
  #productos .a4c-slide.a4c-instant {
    transition: transform .7s cubic-bezier(0, 0, .2, 1), scale 1.1s cubic-bezier(.16, 1, .3, 1) !important;
  }

  /* Tarjeta con inclinación 3D y luz que sigue al mouse (motion.js) */
  #productos a.group {
    transition: border-color .3s ease, transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s ease;
    transform-style: preserve-3d;
  }
  #productos a.group[data-a4-tilt] {
    transition: border-color .3s ease, transform .12s linear, box-shadow .6s ease;
    box-shadow: 0 30px 60px -30px rgb(0 212 255 / .35);
  }
  #productos a.group::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(380px circle at var(--a4-mx, 50%) var(--a4-my, 50%), rgb(0 212 255 / .16), transparent 55%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .4s ease;
  }
  #productos a.group[data-a4-tilt]::after { opacity: 1; }

  /* =================================================== PERSONALIZACIÓN ==== */

  #personalizacion .reveal:not(.reveal-in) img { scale: 1.12; }
  #personalizacion .reveal img { transition: scale 1.4s cubic-bezier(.16, 1, .3, 1) .1s; }

  /* ========================================================== PROCESO ===== */

  /* Las fotos de cada paso se descubren de arriba hacia abajo */
  #proceso li.reveal img {
    transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1) .15s, scale 1.6s cubic-bezier(.16, 1, .3, 1) .15s;
  }
  #proceso li.reveal:not(.reveal-in) img {
    clip-path: inset(0 0 100% 0);
    scale: 1.12;
  }

  /* El paso que está en el medio de la pantalla se ilumina (motion.js) */
  #proceso li.reveal > div > span.display {
    transition: color .5s ease, text-shadow .5s ease, translate .5s cubic-bezier(.16, 1, .3, 1);
  }
  #proceso li[data-a4-activo] > div > span.display {
    color: var(--color-brand);
    text-shadow: 0 0 40px rgb(0 212 255 / .35);
  }
  #proceso li[data-a4-activo] .rounded-xl { border-color: rgb(0 212 255 / .4); }
  #proceso li[data-a4-activo] > div { border-top-color: rgb(0 212 255 / .4); }

  /* ========================================================= TRABAJOS ===== */

  /* Cada foto de la galería se destapa desde abajo */
  #trabajos .reveal > button {
    transition: border-color .3s ease, clip-path 1.1s cubic-bezier(.77, 0, .18, 1) var(--reveal-delay, 0s);
  }
  #trabajos .reveal:not(.reveal-in) > button { clip-path: inset(100% 0 0 0 round 8px); }
  #trabajos .reveal:not(.reveal-in) img { scale: 1.2; }
  #trabajos .reveal img { transition-duration: 1.3s; }
  #trabajos .reveal > button:hover img { transition-duration: .7s; }

  /* ===================================================== POR QUÉ ÁREA 4 === */

  /* Los íconos aparecen con un rebote y se mueven al pasar el mouse */
  .reveal article span.size-11 {
    transition: background-color .3s ease, color .3s ease,
                scale .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--reveal-delay, 0s) + .25s),
                rotate .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--reveal-delay, 0s) + .25s),
                opacity .4s ease calc(var(--reveal-delay, 0s) + .25s);
  }
  .reveal:not(.reveal-in) article span.size-11 {
    scale: .3;
    rotate: -30deg;
    opacity: 0;
  }
  .reveal-in article:hover span.size-11 { animation: a4-saludo .7s ease; }

  /* ========================================================= SHOWROOM ===== */

  #showroom .reveal:not(.reveal-in) img { scale: 1.15; }
  #showroom .reveal img { transition: scale 1.8s cubic-bezier(.16, 1, .3, 1); }

  /* ======================================================== CTA FINAL ===== */

  /* El resplandor del fondo "respira" y la grilla se desplaza despacio */
  .blur-\[140px\] { animation: a4-respirar 7s ease-in-out infinite; }
  .grid-noise { animation: a4-grilla 20s linear infinite; }

  /* ============================================ FRANJA EN MOVIMIENTO ====== */

  .a4m-pista { animation: a4m-correr 42s linear infinite; }
  .a4m-fila--atras .a4m-pista { animation-duration: 56s; animation-direction: reverse; }
}

/* ---------------------------------------------------------------------------
   Franja con los productos (la arma motion.js debajo de la portada). Queda
   fuera del @media para que se vea igual, quieta, con movimiento reducido.
--------------------------------------------------------------------------- */
.a4m {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 0;
  pointer-events: none;
  user-select: none;
}
.a4m-fila {
  margin-inline: -5vw;
  rotate: -2deg;
  background: var(--color-brand);
  color: var(--color-brand-ink);
  box-shadow: 0 24px 60px -24px rgb(0 212 255 / .55);
  position: relative;
  z-index: 1;
}
.a4m-fila--atras {
  position: absolute;
  inset: 50% 0 auto 0;
  translate: 0 -50%;
  rotate: 2.5deg;
  z-index: 0;
  background: var(--color-ink-800);
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / .22);
  box-shadow: none;
}
.a4m-pista {
  display: flex;
  width: max-content;
  will-change: transform;
}
.a4m-item {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: .7rem 0 .6rem 1.1rem;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: .02em;
  white-space: nowrap;
  color: inherit;
}
.a4m-item::after {
  content: "\2726";
  font-size: .55em;
  opacity: .7;
}

/* Barra de progreso de lectura, arriba de todo */
.a4-progreso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-soft));
  box-shadow: 0 0 12px rgb(0 212 255 / .6);
}

/* ================================================================ KEYFRAMES */

@keyframes a4-hero-img {
  from { scale: 1.16; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}
@keyframes a4-flotar {
  from { translate: 0 0; }
  to   { translate: 18vw 12vh; }
}
@keyframes a4-subir {
  from { opacity: 0; translate: 0 1.2rem; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes a4-bajar {
  from { opacity: 0; translate: 0 -.6rem; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes a4-linea {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes a4-renglon {
  from { opacity: 0; translate: 0 .55em; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; translate: 0 0; clip-path: inset(-20% -5% -30% -5%); }
}
@keyframes a4-brillo-texto {
  0%        { background-position: 100% 0; }
  35%, 100% { background-position: 0 0; }
}
@keyframes a4-reflejo {
  0%        { translate: -130% 0; }
  30%, 100% { translate: 130% 0; }
}
@keyframes a4-saludo {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -12deg; scale: 1.08; }
  60%      { rotate: 8deg; }
}
@keyframes a4-respirar {
  0%, 100% { scale: 1; opacity: .75; }
  50%      { scale: 1.18; opacity: 1; }
}
@keyframes a4-grilla {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 72px 72px, 72px 72px; }
}
@keyframes a4m-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}