/* ============================================================
   NÉSTOR JIMÉNEZ — UPGRADE LAYER · v1  (2026-06-15)
   Atmósfera cinematográfica + microinteracciones premium.
   Capa aislada y esencia-safe: NO toca el carrusel ni el layout.
   Cargar DESPUÉS de styles.css.
   ============================================================ */

/* ---------- 0. Base: dejar respirar el fondo animado ---------- */
html{background:#000;}              /* safety: nunca un flash blanco */
body{background:transparent;}       /* deja ver la capa .bg-fx */

/* ============================================================
   1. FONDO — NEGRO CINE PURO
   Sin halos de color. Negro verdadero + viñeta sutil.
   El grano (animado abajo) y la fotografía hacen la atmósfera.
   Así las fotos de "Sobre mí" y "Testimonios" funden perfecto.
   ============================================================ */
/* Host del shader GrainGradient (canvas WebGL) — base del fondo */
.bg-shader{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; background:#000;}
.bg-shader canvas{display:block; width:100%!important; height:100%!important; opacity:.10;}

.bg-fx{
  position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  background:transparent;          /* deja ver el shader detrás */
}
.bg-fx .glow{display:none;}        /* halos de color desactivados */

/* GRAIN-GRADIENT B/N — degradado gris que fluye + GRANO visible encima.
   Monocromo; el spotlight rojo va por encima de todo. */
.bg-fx .graingrad{
  position:absolute; inset:-10%; opacity:.42; filter:grayscale(1) blur(34px); will-change:transform;
  background:
    radial-gradient(40% 40% at 26% 28%, rgba(165,165,172,.7), transparent 68%),
    radial-gradient(46% 46% at 74% 56%, rgba(70,70,78,.7), transparent 70%),
    radial-gradient(52% 52% at 50% 90%, rgba(120,120,128,.55), transparent 72%);
  animation:grainGradFlow 30s ease-in-out infinite alternate;
}
@keyframes grainGradFlow{
  0%{transform:scale(1.1) translate(-3%,-2%);}
  50%{transform:scale(1.22) translate(3%,2%);}
  100%{transform:scale(1.32) translate(-2%,4%);}
}

/* GRANO visible (animado) sobre el degradado — la textura "film grain" */
.bg-fx .grainfx{
  position:absolute; inset:-50%; pointer-events:none; opacity:.14; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2cpJy8+PC9zdmc+");
  background-size:150px 150px;
  animation:grainFlick .8s steps(5) infinite;
}
@keyframes grainFlick{
  0%{transform:translate(0,0);}    20%{transform:translate(-5%,4%);}
  40%{transform:translate(4%,-5%);} 60%{transform:translate(-4%,-3%);}
  80%{transform:translate(5%,3%);}  100%{transform:translate(0,0);}
}

/* EMBER — brasa roja sutil que respira y deriva sola (fondo animado) */
.bg-fx .ember{
  position:absolute; width:52vmax; height:52vmax; left:50%; top:42%;
  margin:-26vmax 0 0 -26vmax; border-radius:50%; filter:blur(40px); will-change:transform,opacity;
  background:radial-gradient(circle, rgba(225,6,0,.13), rgba(225,6,0,0) 60%);
  animation:emberDrift 24s ease-in-out infinite alternate, emberPulse 8s ease-in-out infinite;
}
@keyframes emberDrift{
  0%{transform:translate(-14vw,-6vh) scale(1);}
  100%{transform:translate(16vw,8vh) scale(1.22);}
}
@keyframes emberPulse{0%,100%{opacity:.45;}50%{opacity:1;}}

/* SPOTLIGHT interactivo — más pequeño y saturado, sigue el cursor (JS escribe --mx/--my) */
.bg-fx .spot{
  position:absolute; inset:0; opacity:0; transition:opacity .5s ease;
  background:
    radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(245,8,0,.17), transparent 62%),
    radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(225,6,0,.08), transparent 66%);
}
.bg-fx .spot.lit{opacity:1;}

/* DUST — partículas de polvo/brasas flotando (canvas, animado siempre) */
.bg-fx canvas.dust{position:absolute; inset:0; width:100%; height:100%; opacity:.6;}

.bg-fx .vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 100% at 50% 30%, transparent 58%, rgba(0,0,0,.5) 100%);
}

/* grain animado (antes estático) — textura de película en movimiento */
[data-grain="1"] .grain{animation:grainShift 1.05s steps(4) infinite;}
@keyframes grainShift{
  0%{transform:translate(0,0);}    25%{transform:translate(-4%,3%);}
  50%{transform:translate(3%,-4%);} 75%{transform:translate(-3%,-2%);}
  100%{transform:translate(0,0);}
}

/* ============================================================
   2. ACENTOS ROJOS (nav, kicker, links activos)
   ============================================================ */
.nav-menu a::after{background:var(--red)!important; height:2px!important;}
.nav-menu a.active{color:#fff;}
.nav-menu a.active::after{width:100%;}
.kicker::before{background:var(--red); width:34px; height:2px; transform-origin:left;}

/* ============================================================
   3. REVEAL CINEMATOGRÁFICO DE TÍTULOS
   Los .sec-title entran con un wipe + leve subida (más editorial).
   ============================================================ */
[data-reveal].sec-title{
  clip-path:inset(0 100% -10% 0);
  transform:translateY(14px);
  transition:clip-path .9s var(--ease-out), transform .9s var(--ease-out), opacity .6s ease;
}
[data-reveal].sec-title.in{clip-path:inset(0 0 -10% 0); transform:none;}

/* línea roja que se dibuja bajo cada cabecera de sección al revelar */
.sec-head{position:relative;}
.sec-head::after{
  content:""; position:absolute; left:var(--gutter,0); bottom:-14px; height:2px; width:0;
  background:linear-gradient(90deg,var(--red),transparent);
  transition:width 1s var(--ease-out) .25s;
}
.sec-head.in::after,
.sec-head:has([data-reveal].in)::after{width:min(180px,40%);}

/* ============================================================
   4. HOVER DE TARJETAS — subrayado rojo + lift sutil + brillo
   (.proj = videos, .alb-card = álbumes de foto)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .proj, .alb-card{
    transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), filter .5s ease;
  }
  .proj::after, .alb-card::after{
    content:""; position:absolute; left:0; bottom:0; height:3px; width:0; z-index:5;
    background:var(--red); transition:width .45s var(--ease-out); pointer-events:none;
  }
  .proj:hover, .alb-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px var(--line-3);
    filter:brightness(1.05);
  }
  .proj:hover::after, .alb-card:hover::after{width:100%;}
}

/* ============================================================
   5. BOTONES CTA MAGNÉTICOS (el JS mueve --mx/--my)
   ============================================================ */
.btn-primary, .btn-ghost, .nav-cta{
  will-change:transform;
  transition:transform .25s var(--ease-out), background .35s ease, border-color .35s ease, color .35s ease;
}
.btn-ghost:hover{border-color:var(--red); color:#fff;}
.btn-ghost:hover .play{border-color:var(--red);}
.nav-cta:hover{border-color:var(--red);}

/* ============================================================
   6. CURSOR CINEMATOGRÁFICO (anillo aditivo, solo desktop)
   No reemplaza el cursor nativo: lo acompaña.
   ============================================================ */
.cine-cursor{
  position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(255,255,255,.35); border-radius:50%;
  pointer-events:none; z-index:99999; mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0) scale(1);
  transition:transform .18s var(--ease-out), width .25s var(--ease-out),
             height .25s var(--ease-out), border-color .25s ease, opacity .3s ease;
  opacity:0;
}
.cine-cursor.ready{opacity:1;}
.cine-cursor.hot{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-color:var(--red); border-width:2px;
}
@media (hover:none),(pointer:coarse){ .cine-cursor{display:none!important;} }

/* ============================================================
   8. SERVICIOS — lista editorial interactiva (estilo Awwwards)
   Cada fila: número rojo, título que ROTA a rojo itálico,
   fill rojo que barre, preview de foto flotante siguiendo el cursor.
   ============================================================ */
.svc{position:relative; isolation:isolate; transition:opacity .4s ease;}

/* fill rojo que barre desde la izquierda al hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .svc::before{
    content:""; position:absolute; inset:0; z-index:-1; transform-origin:left;
    transform:scaleX(0); background:linear-gradient(90deg, rgba(225,6,0,.14), rgba(225,6,0,0) 70%);
    transition:transform .5s var(--ease-out);
  }
  .svc:hover::before{transform:scaleX(1);}
  /* dim de las filas no enfocadas */
  .svc-list:hover .svc:not(:hover){opacity:.4;}
  /* número a rojo */
  .svc:hover .svc-no{color:var(--red);}
  /* descripción se aclara y el icono+flecha a rojo */
  .svc:hover .svc-desc{color:var(--paper-soft);}
  .svc:hover .ic{color:var(--red);}
  .svc:hover .svc-go{color:var(--red); transform:translate(4px,-4px);}
}
.svc-no, .svc-desc, .ic, .svc-go{transition:color .4s ease, transform .4s var(--ease-out);}

/* ---- Texto que rota (rolling) — estructura inyectada por JS ---- */
.svc-name h3{margin:0;}
.svc-roll{display:block; position:relative; overflow:hidden;}
.svc-roll .r{display:block; transition:transform .55s cubic-bezier(.76,0,.24,1);}
.svc-roll .r2{position:absolute; top:100%; left:0; width:100%;
  font-style:italic; color:var(--red);}
@media (hover:hover) and (pointer:fine){
  .svc:hover .svc-roll .r{transform:translateY(-100%);}
}

/* ---- Preview flotante que sigue el cursor ---- */
.svc-preview{
  position:fixed; top:0; left:0; z-index:60; width:clamp(240px,22vw,340px); aspect-ratio:4/3;
  margin:-50% 0 0 24px; border-radius:6px; overflow:hidden; pointer-events:none;
  opacity:0; transform:scale(.9); transition:opacity .35s ease, transform .35s var(--ease-out);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.9); border:1px solid var(--line-3);
  will-change:transform;
}
.svc-preview.show{opacity:1; transform:scale(1);}
.svc-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.9); opacity:0; transform:scale(1.08);
  transition:opacity .45s ease, transform .6s var(--ease-out), filter .5s ease;
}
.svc-preview img.active{opacity:1; transform:scale(1); filter:grayscale(0) brightness(1);}
.svc-preview::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
@media (hover:none),(pointer:coarse){ .svc-preview{display:none!important;} }

/* ============================================================
   9. HERO — título ~10% más chico + frase rotativa
   ============================================================ */
.hero-title{font-size:clamp(45px,9.5vw,135px);}
.hero-title .l{line-height:.92;}                 /* interlineado más ajustado entre líneas */
.hero-title .l3{overflow:hidden; padding-bottom:.04em; margin-top:-.04em;}
/* quita el padding superior heredado del inline que abría un hueco antes de la frase rotativa */
.hero-title .l3 .outline{display:inline-block; will-change:transform; padding-top:0!important; padding-bottom:.02em!important; line-height:.9!important;}

/* --- Ajustes móvil del hero --- */
@media (max-width:560px){
  .hero{padding-top:clamp(76px,9vh,96px);}        /* menos espacio negro arriba */
  .hero-title .l{line-height:.9;}
  .scroll-hint{display:none!important;}            /* no choca con "Ver reel" en móvil */
}

/* ============================================================
   7. ACCESIBILIDAD — respetar reduced-motion / motion off
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg-fx .glow, .bg-fx .ember, .bg-fx .graingrad, .bg-fx .grainfx, [data-grain="1"] .grain{animation:none!important;}
  .bg-fx .spot{display:none!important;}
  .cine-cursor{display:none!important;}
  [data-reveal].sec-title{clip-path:none!important;}
}
[data-motion="off"] .bg-fx .glow,
[data-motion="off"] .bg-fx .ember,
[data-motion="off"] .bg-fx .graingrad,
[data-motion="off"] .bg-fx .grainfx,
[data-motion="off"] .grain{animation:none!important;}
[data-motion="off"] .bg-fx .spot{display:none!important;}
[data-motion="off"] .cine-cursor{display:none!important;}
[data-motion="off"] [data-reveal].sec-title{clip-path:none!important;transform:none!important;}