/* ========================================
   CINE OPSYN — look de cine sobrio
   Luz clave/rim, grano, viñeta, rayos, haz de luz y canvas de fondo.
   Todo es decorativo (aria-hidden / pointer-events:none) y queda DETRÁS
   o por encima con opacidad mínima del texto: no baja el contraste.
   Se apaga con prefers-reduced-motion. Sin JS, el aurora CSS de
   backgrounds.css sigue siendo el fondo.
   ======================================== */

:root {
  --luz-clave: rgba(199, 125, 240, 0.16);
  --luz-rim: rgba(121, 255, 255, 0.34);
  --grano-op: 0.05;
  --vineta: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(4, 1, 14, 0.55) 100%);
  --dur-cine: 520ms;
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1); /* out4 de la skill */
}

/* ---- Grano + viñeta globales (una sola capa fija) ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    var(--vineta),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 1;
  /* sin mix-blend-mode: un blend fijo a pantalla completa obliga a recomponer toda la página */
}

/* ---- Canvas de fondo por sección (lo inserta js/cine/fondos.js) ---- */
.cine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-cine);
}
.cine-canvas.is-on { opacity: 1; }
/* bordes desvanecidos: el canvas se funde con la sección vecina (sin cortes ni barras) */
.cine-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent),
                      linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent),
              linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
/* con canvas activo el aurora CSS se retira (queda de fallback) */
[data-bg="aurora"].cine-activo::before { opacity: 0; animation: none; }

/* ---- Rim light + reflejo en paneles ---- */
.service-card,
.portfolio-card,
.contact-form {
  position: relative;
  isolation: isolate;
}
.service-card::after,
.portfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.10) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
}
/* "El haz": barrido de luz una sola vez al entrar */
.service-card.is-visible::after,
.portfolio-card.is-visible::after {
  animation: haz 1.1s var(--ease-cine) calc(var(--i, 0) * 90ms + 250ms) 1 both;
}
@keyframes haz {
  0% { background-position: 130% 0; opacity: 0; }
  15% { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}
.service-card:hover,
.portfolio-card:hover {
  box-shadow: 0 0 0 1px var(--luz-rim), 0 18px 50px -22px var(--accent-40);
}
.contact-form:focus-within {
  box-shadow: 0 0 0 1px var(--luz-rim), 0 0 60px -18px var(--accent-40);
  transition: box-shadow var(--dur-cine) var(--ease-cine);
}

/* ---- Hero: rayos volumétricos + flare anamórfico ---- */
.hero { position: relative; }
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(1100px, 120vw);
  height: 2px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--luz-rim) 50%, transparent);
  opacity: 0;
  animation: flare 2.4s var(--ease-cine) 0.6s 1 forwards;
}
@keyframes flare {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2); }
  40% { opacity: 0.55; }
  100% { opacity: 0.28; transform: translate(-50%, -50%) scaleX(1); }
}
.hero-rays {
  position: absolute;
  inset: -10% 0 auto 0;
  height: 90%;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from 200deg at 50% 0%,
    transparent 0deg, rgba(148, 52, 212, 0.10) 18deg, transparent 34deg,
    rgba(121, 255, 255, 0.06) 52deg, transparent 70deg, rgba(148, 52, 212, 0.08) 96deg, transparent 120deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  transform: translate3d(0, calc(var(--scroll-y, 0) * -0.12px), 0);
}

/* ---- Entrada con golpe (escala + desenfoque que se aclara) ---- */
html.js .golpe {
  opacity: 0;
  transform: scale(1.06);
}
html.js .golpe.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-cine) var(--ease-cine),
              transform var(--dur-cine) var(--ease-cine);
}


/* ---- Hero: rim light (cian arriba-izq) + luz clave (violeta abajo-der) en el logo 3D ---- */
/* la textura del logo es cuadrada y opaca: misma máscara radial que .hero-logo */
.hero-logo-3d canvas {
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 72%);
  mask-image: radial-gradient(circle, #000 52%, transparent 72%);
}
.hero-logo-wrap::after {
  background:
    radial-gradient(circle at 34% 30%, var(--cyan-25) 0%, transparent 42%),
    radial-gradient(circle at 62% 66%, var(--accent-40) 0%, transparent 62%);
}
/* bloom que respira detrás del logo (reemplaza el glow estático) */
.hero-logo-wrap::after { animation: respira 7s ease-in-out infinite; }
@keyframes respira {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.06); }
}
/* "El haz": barrido diagonal único sobre el logo al cargar */
.hero-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -6%;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, rgba(121, 255, 255, 0.12) 54%, transparent 62%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 70%);
  mask-image: radial-gradient(circle, #000 45%, transparent 70%);
  animation: hazLogo 1.6s var(--ease-cine) 0.9s 1 both;
}
@keyframes hazLogo {
  0% { background-position: 120% 0; opacity: 0; }
  20% { opacity: 1; }
  100% { background-position: -20% 0; opacity: 0; }
}
/* .hero-title */ .hero-title-cine { animation: tituloLuz 1.2s var(--ease-cine) 0.2s 1 both; }
@keyframes tituloLuz {
  from { opacity: 0; filter: blur(8px); transform: scale(1.04); }
  to { opacity: 1; filter: none; transform: none; }
}

/* ---- Proceso: paquete de luz que recorre la línea (lo crea escenas.js) ---- */
.process-line-packet {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 0.04 0.96;
  opacity: 0.9; /* sin drop-shadow: se repintaba en cada cuadro de la animación infinita */
  animation: paquete 3.6s linear infinite;
}
@keyframes paquete { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- Servicios: reflejo que sigue al puntero (--rx/--ry los pone escenas.js) ---- */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1; /* detrás del texto: no baja el contraste */
  background: radial-gradient(360px circle at var(--rx, 50%) var(--ry, -20%), rgba(199, 125, 240, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 400ms var(--ease-cine);
}
.service-card:hover::before { opacity: 1; }

/* ---- Portfolio: destello suave cuando el contador llega a su cifra ---- */
.portfolio-card.is-visible .portfolio-metric {
  animation: cifraLuz 1.4s ease-out calc(var(--i, 0) * 90ms + 900ms) 1 both;
}
@keyframes cifraLuz {
  0% { text-shadow: none; }
  25% { text-shadow: 0 0 22px rgba(121, 255, 255, 0.55); }
  100% { text-shadow: 0 0 10px rgba(148, 52, 212, 0.25); }
}


/* ---- Nosotros: parallax de 2 capas (--py lo pone escenas.js, -1..1) ---- */
.about-visual { position: relative; isolation: isolate; }
.about-visual::before {               /* capa lejana: halo de luz clave */
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 40% 35%, var(--accent-40) 0%, transparent 55%),
    radial-gradient(circle at 70% 75%, var(--cyan-10) 0%, transparent 50%);
  transform: translate3d(0, calc(var(--py, 0) * 40px), 0);
}
.about-visual-media {                 /* capa cercana: la imagen, más rápida */
  transform: translate3d(0, calc(var(--py, 0) * -22px), 0);
}

/* ---- Contacto: foco de luz cenital sobre el formulario ---- */
.contact-form-wrap { position: relative; isolation: isolate; }
.contact-form-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 80%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 50% at 50% 18%, rgba(199, 125, 240, 0.20), transparent 75%);
  opacity: 0.6;
  transition: opacity 700ms var(--ease-cine);
}
.contact-form-wrap:focus-within::before { opacity: 1; }

/* ---- Reduced motion: todo lo nuevo queda estático ---- */
@media (prefers-reduced-motion: reduce) {
  .cine-canvas, .hero-rays, .hero::after { display: none; }
  .service-card::after, .portfolio-card::after { animation: none; opacity: 0; }
  html.js .golpe { opacity: 1; transform: none; }
  .hero-logo-wrap::before, .process-line-packet { display: none; }
  .about-visual::before, .about-visual-media { transform: none; }
  .hero-logo-wrap::after, .hero-title, .portfolio-card.is-visible .portfolio-metric { animation: none; }
}