/* =========================================================================
   CINEMA · scrollytelling layer compartido demos/ e-emperador
   Aplica encima de premium.css + authority.css. NO sustituye, complementa.
   ========================================================================= */

/* Smooth scroll + scroll-behavior reset para que ScrollTrigger maneje */
html.cinema{scroll-behavior:auto}
html.cinema body{overflow-x:hidden;overscroll-behavior:none}

/* Wrapper que dejamos visible solo cuando GSAP carga (evita FOUC) */
html.cinema-ready .cn-fade{opacity:1;transition:opacity .6s ease}
html:not(.cinema-ready) .cn-fade{opacity:0}

/* === PINNED SECTIONS === */
.cn-pin{position:relative;height:100vh;overflow:hidden;will-change:transform}
.cn-pin-tall{position:relative;height:300vh}
.cn-pin-tall>.cn-pin-stage{position:sticky;top:0;height:100vh;overflow:hidden;will-change:transform}

/* === LAYERS PARA PARALLAX === */
.cn-layer{position:absolute;inset:0;will-change:transform}
.cn-layer-back{z-index:1}
.cn-layer-mid{z-index:2}
.cn-layer-fore{z-index:3}
.cn-layer-text{z-index:5}
.cn-layer-ui{z-index:9}

/* Imagen/video de capa */
.cn-bg-img,.cn-bg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}
.cn-bg-vid{pointer-events:none}

/* Reveal helpers (set inicial opacity:0 y JS las anima) */
.cn-reveal{opacity:0;transform:translate3d(0,40px,0);will-change:opacity,transform}
.cn-reveal-left{opacity:0;transform:translate3d(-50px,0,0)}
.cn-reveal-right{opacity:0;transform:translate3d(50px,0,0)}
.cn-reveal-scale{opacity:0;transform:scale(.92)}
.cn-reveal-blur{opacity:0;filter:blur(20px)}
@media(prefers-reduced-motion:reduce){
  .cn-reveal,.cn-reveal-left,.cn-reveal-right,.cn-reveal-scale,.cn-reveal-blur{opacity:1!important;transform:none!important;filter:none!important}
}

/* === HERO CINEMATIC OVERLAY (gradiente + grain + vignette via canvas) === */
.cn-hero-shader{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:overlay;opacity:.5}

/* === THREE.JS CANVAS HOST === */
.cn-three{position:absolute;inset:0;z-index:3;pointer-events:none}
.cn-three canvas{display:block;width:100%!important;height:100%!important}

/* === SCROLL PROGRESS BAR (en BORDE INFERIOR del viewport, debajo del menú) === */
.cn-progress{position:fixed;bottom:0;left:0;right:0;top:auto;height:2px;background:transparent;z-index:40;pointer-events:none}
.cn-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cn-accent,#d4a574),var(--cn-accent-l,#f4d9b8));box-shadow:0 -2px 8px rgba(212,165,116,.45);will-change:width;transition:width .08s linear}

/* === SCROLL HINT EN HERO === */
.cn-scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(255,255,255,.7);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;font-family:'Inter',sans-serif;animation:cnFloat 2.4s ease-in-out infinite}
.cn-scroll-hint::after{content:"";width:1px;height:32px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent)}
@keyframes cnFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@media(prefers-reduced-motion:reduce){.cn-scroll-hint{animation:none}}

/* === IMAGE SEQUENCE CANVAS (Apple-style frame-by-frame) === */
.cn-seq{position:absolute;inset:0;z-index:2}
.cn-seq canvas{display:block;width:100%;height:100%;object-fit:cover}

/* === HORIZONTAL SCROLL (pinned vertical → translateX horizontal) === */
.cn-hscroll{position:relative;height:400vh}
.cn-hscroll-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.cn-hscroll-track{display:flex;gap:2rem;padding:0 8vw;will-change:transform}
.cn-hscroll-card{flex:0 0 auto;width:min(72vw,720px)}

/* === MAGNET CTA (mouse follow) === */
.cn-magnet{position:relative;display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1);will-change:transform}

/* === SPLIT TEXT CHAR (preparación para reveal por carácter) === */
.cn-split-line{display:block;overflow:hidden}
.cn-split-line>span{display:inline-block;will-change:transform,opacity}

/* === MARQUEE infinita (para press logos cinematic) === */
.cn-marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cn-marquee-track{display:flex;gap:3rem;animation:cnMarquee 42s linear infinite;will-change:transform}
@keyframes cnMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cn-marquee-track{animation:none}}

/* === STICKY GALLERY (text moves while image stays sticky) === */
.cn-sticky-shell{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
@media(max-width:880px){.cn-sticky-shell{grid-template-columns:1fr}}
.cn-sticky-media{position:sticky;top:10vh;height:80vh;overflow:hidden}
.cn-sticky-media img,.cn-sticky-media video{width:100%;height:100%;object-fit:cover}
.cn-sticky-text{padding:10vh 2rem}
.cn-sticky-step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0}

/* === LOTTIE container default sizing === */
.cn-lottie{display:inline-block;line-height:0}
.cn-lottie>svg{display:block;width:100%;height:100%}

/* === COUNTER-UP (números que crecen al entrar viewport) === */
.cn-counter{font-variant-numeric:tabular-nums}

/* === MIX-BLEND títulos sobre imagen === */
.cn-title-blend{mix-blend-mode:difference;color:#fff}

/* === CURSOR personalizado opcional === */
html.cinema-cursor{cursor:none}
html.cinema-cursor *{cursor:none}
.cn-cursor{position:fixed;top:0;left:0;width:32px;height:32px;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;pointer-events:none;z-index:99999;mix-blend-mode:difference;transition:transform .15s cubic-bezier(.2,.8,.2,1),width .25s,height .25s,border-color .25s;will-change:transform;transform:translate(-50%,-50%)}
.cn-cursor.is-hover{width:64px;height:64px;border-color:rgba(255,255,255,.9)}

/* === CINEMA HERO (narrativa por nicho, activa con pointerenter) === */
.cn-hero-cinema{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;opacity:0;visibility:hidden;transform:scale(1.04) translateZ(0);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform 1.8s cubic-bezier(.2,.8,.2,1),filter .9s ease,visibility 0s linear .6s}
body.cn-h-playing .cn-hero-cinema{opacity:1;visibility:visible;transform:scale(1.02) translateZ(0);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform 1.8s cubic-bezier(.2,.8,.2,1),filter .9s ease,visibility 0s linear 0s}
body.cn-h-finale  .cn-hero-cinema{opacity:1;visibility:visible;transform:scale(1.18) translateZ(0);filter:saturate(1.18) contrast(1.12) brightness(1.04)}
body.cn-h-fading  .cn-hero-cinema{opacity:0;visibility:visible;transform:scale(1.04) translateZ(0)}

/* Veil legibilidad durante playing/finale (oscurece video tras texto) */
.cn-hero-cinema-veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s ease;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.38) 35%,rgba(0,0,0,.45) 65%,rgba(0,0,0,.7) 100%)}
body.cn-h-playing .cn-hero-cinema-veil{opacity:1}
body.cn-h-finale  .cn-hero-cinema-veil{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.5) 65%,rgba(0,0,0,.78) 100%)}

/* Hero text/CTAs van por encima del video (z-index 5 supera veil z-index 2) */
.hero .hero-content,.hero .hero-bg-text,.hero h1,.hero h2,.hero .h1,.hero .h2,
.hero .hero-lead,.hero .lead,.hero p,.hero .hero-foot,.hero .hero-meta,
.hero .hero-eyebrow,.hero .eyebrow,.hero .hero-kicker,.hero .kicker,
.hero .cta-row,.hero .hero-cta,.hero .cta,
.hero strong,.hero em,.hero span{position:relative;z-index:5}

/* === ADAPTIVE TEXT durante playing/finale === */
/* Forzamos blanco + sombra cinematográfica multinivel sobre cualquier video */
body.cn-h-playing .hero,body.cn-h-finale .hero,
body.cn-h-playing .hero h1,body.cn-h-finale .hero h1,
body.cn-h-playing .hero h2,body.cn-h-finale .hero h2,
body.cn-h-playing .hero .h1,body.cn-h-finale .hero .h1,
body.cn-h-playing .hero .hero-lead,body.cn-h-finale .hero .hero-lead,
body.cn-h-playing .hero .lead,body.cn-h-finale .hero .lead,
body.cn-h-playing .hero p,body.cn-h-finale .hero p,
body.cn-h-playing .hero .hero-foot,body.cn-h-finale .hero .hero-foot,
body.cn-h-playing .hero .hero-meta,body.cn-h-finale .hero .hero-meta,
body.cn-h-playing .hero .eyebrow,body.cn-h-finale .hero .eyebrow,
body.cn-h-playing .hero .hero-eyebrow,body.cn-h-finale .hero .hero-eyebrow,
body.cn-h-playing .hero .kicker,body.cn-h-finale .hero .kicker,
body.cn-h-playing .hero strong,body.cn-h-finale .hero strong,
body.cn-h-playing .hero em,body.cn-h-finale .hero em,
body.cn-h-playing .hero span:not(.cta):not([class*="badge"]):not([class*="tag"]),
body.cn-h-finale  .hero span:not(.cta):not([class*="badge"]):not([class*="tag"]){
  color:#fff!important;
  text-shadow:0 2px 6px rgba(0,0,0,.85),0 4px 24px rgba(0,0,0,.7),0 0 1px rgba(0,0,0,.9);
  transition:color .5s ease,text-shadow .5s ease
}
/* Headings ganan sombra más densa */
body.cn-h-playing .hero h1,body.cn-h-finale .hero h1,
body.cn-h-playing .hero h2,body.cn-h-finale .hero h2,
body.cn-h-playing .hero .h1,body.cn-h-finale .hero .h1{
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 6px 32px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,1)
}

/* CTAs: solid mantiene su color de marca, ghost se vuelve blanco translúcido legible */
body.cn-h-playing .hero .cta.ghost,body.cn-h-finale .hero .cta.ghost{
  background:rgba(255,255,255,.96);color:#111!important;border-color:rgba(255,255,255,.96);
  box-shadow:0 4px 28px rgba(0,0,0,.45);
  transition:background .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease
}
body.cn-h-playing .hero .cta:not(.ghost),body.cn-h-finale .hero .cta:not(.ghost){
  box-shadow:0 6px 32px rgba(0,0,0,.55)
}

/* === RESPECT REDUCED MOTION GLOBAL === */
@media(prefers-reduced-motion:reduce){
  .cn-pin-tall{height:auto}
  .cn-pin-tall>.cn-pin-stage{position:relative;height:auto;min-height:80vh}
  .cn-hscroll{height:auto}
  .cn-hscroll-stage{position:relative;height:auto}
  .cn-hscroll-track{flex-wrap:wrap;transform:none!important}
  .cn-hero-cinema{display:none}
}