/* ══════════════════════════════════════════════════════════════
   MOVIMIENTO Y ACABADOS
   Grano de película, auras de oro, brillo que barre, revelado al
   hacer scroll, inclinación de las tarjetas. Todo sutil.
   ══════════════════════════════════════════════════════════════ */

@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ── 1 · grano: le quita el plano digital al negro ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ── 2 · auras: manchas de oro difuminadas que se mueven despacio ── */
.aura {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  opacity: 0.5;
}
.aura-1 {
  width: 300px; height: 300px;
  top: -70px; right: -110px;
  background: radial-gradient(circle, rgba(232, 200, 74, 0.20), transparent 68%);
  animation: deriva-1 22s ease-in-out infinite;
}
.aura-2 {
  width: 260px; height: 260px;
  bottom: 8%; left: -120px;
  background: radial-gradient(circle, rgba(232, 200, 74, 0.13), transparent 70%);
  animation: deriva-2 28s ease-in-out infinite;
}
@keyframes deriva-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-26px, 34px, 0) scale(1.12); }
}
@keyframes deriva-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(30px, -28px, 0) scale(1.1); }
}

/* ── 3 · revelado al hacer scroll, con retraso en cadena ── */
.rev {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
  transition-delay: var(--d, 0ms);
}
.rev.dentro { opacity: 1; transform: none; }

/* los hijos entran uno detrás de otro */
.rev-hijos > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.rev-hijos.dentro > * { opacity: 1; transform: none; }
.rev-hijos.dentro > *:nth-child(1) { transition-delay: 40ms; }
.rev-hijos.dentro > *:nth-child(2) { transition-delay: 110ms; }
.rev-hijos.dentro > *:nth-child(3) { transition-delay: 180ms; }
.rev-hijos.dentro > *:nth-child(4) { transition-delay: 250ms; }
.rev-hijos.dentro > *:nth-child(5) { transition-delay: 320ms; }
.rev-hijos.dentro > *:nth-child(6) { transition-delay: 390ms; }
.rev-hijos.dentro > *:nth-child(n + 7) { transition-delay: 450ms; }

/* la línea de un rótulo se dibuja sola */
.linea-crece {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--curva) 0.15s;
}
.dentro .linea-crece, .linea-crece.dentro { transform: scaleX(1); }

/* ── 4 · brillo que barre el titular (el oro como luz, no como pintura) ── */
.brillo {
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 38%,
    var(--oro-claro) 46%, var(--oro) 50%, var(--oro-claro) 54%,
    #ffffff 62%, #ffffff 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: barrer 7s var(--curva-suave) 1.1s infinite;
}
@keyframes barrer {
  0%        { background-position: 130% 0; }
  38%, 100% { background-position: -30% 0; }
}

/* ── 5 · reflejo diagonal que cruza una tarjeta ── */
.lustre { position: relative; overflow: hidden; }
.lustre::after {
  content: "";
  position: absolute;
  top: 0; left: -140%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 46%, rgba(232, 200, 74, 0.13) 52%, transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--curva);
  pointer-events: none;
  z-index: 3;
}
.lustre:hover::after, .lustre:focus-visible::after, .lustre.toque::after { left: 130%; }

/* ── 6 · inclinación con el puntero (solo en computadora) ── */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform 0.5s var(--curva), border-color 0.4s var(--curva);
    will-change: transform;
  }
  .tilt.activa { transition: transform 0.12s linear; }
}

/* ── 8 · marco de oro que gira (solo en el botón principal) ── */
.aro-oro { position: relative; isolation: isolate; }
.aro-oro::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--giro),
    rgba(232, 200, 74, 0.05), var(--oro) 12%, rgba(232, 200, 74, 0.05) 30%,
    rgba(232, 200, 74, 0.05) 62%, var(--oro-claro) 76%, rgba(232, 200, 74, 0.05) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: girar 5.5s linear infinite;
  z-index: -1;
}
@keyframes girar { to { --giro: 360deg; } }

/* ── 9 · brillo de espera mientras carga una foto ── */
.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  font-family: var(--display);
  font-size: 1.5rem;
  color: rgba(232, 200, 74, 0.34);
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.035) 42%, transparent 62%) 0 0 / 260% 100%,
    linear-gradient(160deg, var(--capa-3), var(--capa-1));
  animation: espera 3.6s ease-in-out infinite;
}
.ph small {
  display: block;
  font-family: var(--ui);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.24);
}
@keyframes espera {
  0%, 100% { background-position: 240% 0, 0 0; }
  55%      { background-position: -60% 0, 0 0; }
}

/* ── 10 · punto que respira ── */
.pulso {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 0 rgba(232, 200, 74, 0.55);
  animation: respirar 2.6s var(--curva-suave) infinite;
  flex: none;
}
@keyframes respirar {
  0%   { box-shadow: 0 0 0 0 rgba(232, 200, 74, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(232, 200, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 200, 74, 0); }
}

/* ── 11 · barra de avance del scroll ── */
#progreso {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  width: 0;
  z-index: 800;
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro), var(--oro-claro));
  box-shadow: 0 0 10px rgba(232, 200, 74, 0.5);
  transition: width 0.12s linear;
}

/* ── 12 · la página entra ── */
#contenido > *:first-child { animation: entrar 0.8s var(--curva) both; }
@keyframes entrar {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── 13 · el número cuenta hacia arriba: solo evita el salto ── */
.contar { font-variant-numeric: tabular-nums; }

/* ── 14 · si alguien pidió menos movimiento, se apaga todo ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rev, .rev-hijos > * { opacity: 1 !important; transform: none !important; }
  .linea-crece { transform: none !important; }
  .brillo { color: var(--blanco); -webkit-text-fill-color: var(--blanco); background: none; }
  .aura { display: none; }
}