/* musicofotografo — landing cinematográfica: scroll-scrub de la cámara Nikon */

/* secciones "scrolly": alto extra + lienzo sticky a pantalla completa */
.cine{position:relative;width:100%;background:#000}
.hero-cine{height:190vh}
.oficio-cine{height:160vh}
.explosion-cine{height:165vh}
.cine-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#000}
.cine-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.95)}
.cine-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.cine-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 95% 75% at 50% 55%, transparent 42%, rgba(5,5,8,.72) 100%),
    linear-gradient(180deg, rgba(5,5,8,.6) 0%, transparent 22%, transparent 58%, rgba(5,5,8,.9) 100%)}
.grade-lado{background:
  linear-gradient(90deg, rgba(5,5,8,.92) 0%, rgba(5,5,8,.55) 42%, transparent 72%),
  linear-gradient(180deg, transparent 60%, rgba(5,5,8,.85) 100%)}

/* overlays de texto sobre el video */
.hero-overlay,.oficio-overlay,.explosion-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column}
.hero-overlay{align-items:center;justify-content:center;text-align:center;padding:1.2rem;gap:.55rem}
.hero-kicker{color:var(--texto);letter-spacing:.2em;font-size:.8rem;text-transform:lowercase;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.hero-cine-titulo{font-size:clamp(2.3rem,10vw,8rem);letter-spacing:.03em;line-height:.92;color:var(--texto-vivo);
  position:relative;text-shadow:0 2px 40px rgba(0,0,0,.7)}
.hero-cine-titulo .acento{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cine-sub{color:var(--texto-vivo);font-size:clamp(.9rem,2.3vw,1.25rem);margin-top:.2rem;text-shadow:0 1px 14px rgba(0,0,0,.92)}
.hero-acciones{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.4rem}
.scroll-hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:var(--amarillo);
  font-size:.78rem;letter-spacing:.15em;animation:flotar 1.9s ease-in-out infinite;z-index:4}
.scroll-hint:hover{text-decoration:none}
@keyframes flotar{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

.oficio-overlay{justify-content:center;padding:clamp(1.5rem,7vw,6.5rem);max-width:660px}
.explosion-overlay{align-items:center;justify-content:center;text-align:center;padding:1.2rem;gap:1.6rem}
/* velo central para que los stats se lean sobre las piezas brillantes */
.explosion-cine .cine-grade{background:
  linear-gradient(180deg, rgba(5,5,8,.55) 0%, rgba(5,5,8,.12) 18%, rgba(5,5,8,.86) 38%, rgba(5,5,8,.88) 62%, rgba(5,5,8,.2) 82%, rgba(5,5,8,.6) 100%)}
.explosion-overlay .mono-kicker,.explosion-pie{text-shadow:0 1px 14px rgba(0,0,0,.98)}

/* tipografía de las secciones cinemáticas */
.mono-kicker{color:var(--amarillo);font-size:.85rem;letter-spacing:.06em;margin-bottom:1rem}
.frase-grande{font-size:clamp(1.9rem,5vw,3.4rem);color:var(--texto-vivo);line-height:1.15;margin-bottom:1.4rem}
.frase-media{font-size:clamp(1.5rem,4vw,2.6rem);color:var(--texto-vivo);line-height:1.2;margin-bottom:1rem;
  text-shadow:0 2px 30px rgba(0,0,0,.7)}
.holo-text{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.parrafo-lead{color:var(--texto);font-size:clamp(1rem,1.6vw,1.15rem);max-width:62ch;line-height:1.8}
.oficio-overlay .parrafo-lead{text-shadow:0 1px 20px rgba(0,0,0,.8)}
.estrecho{max-width:840px}
.manifiesto{padding:clamp(4.5rem,14vh,10rem) 1.2rem;border-bottom:1px solid var(--borde)}

/* stats de la sección explosión */
.stats-cine{display:flex;gap:clamp(1.2rem,5vw,3.8rem);justify-content:center;flex-wrap:wrap}
.statc{display:flex;flex-direction:column;gap:.25rem;min-width:90px}
.statc-num{font-size:clamp(2.4rem,7vw,5rem);font-weight:700;color:var(--amarillo);line-height:1;
  text-shadow:0 2px 16px rgba(0,0,0,.98), 0 0 34px rgba(0,0,0,.9)}
.statc-lbl{color:var(--texto-vivo);font-size:.78rem;letter-spacing:.05em;text-shadow:0 1px 12px rgba(0,0,0,.95)}
.explosion-pie{color:var(--texto);font-size:.82rem;letter-spacing:.05em}

/* sin JS: el póster hace de imagen fija y el texto queda legible */
.no-cine .cine-sticky{position:relative;height:auto;min-height:70vh}

@media (max-width:640px){
  .hero-cine{height:165vh}
  .oficio-cine,.explosion-cine{height:150vh}
  .oficio-overlay{justify-content:flex-end;padding-bottom:14vh}
  .stats-cine{gap:1.6rem 2.2rem}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint{animation:none}
}