/* ===== fennir.ch — Cinematic Scroll (#cine) =====
   Secuencia de fotogramas IA pintada en <canvas> según el scroll.
   Sin JS: una pantalla con el póster y el primer texto (nunca un hueco vacío).
   Con JS: .cine-on la alarga a ~800vh y el canvas se queda pegado (sticky). */
#cine{
  --cine-o:#e53e00;            /* naranja fennir */
  --cine-o2:#ff8a1f;           /* naranja claro del logo */
  --cine-ink:#fff;
  position:relative;height:100vh;height:100svh;background:#07060a;color:var(--cine-ink);
}
#cine.cine-on{height:800vh}
@media (max-width:767px){#cine.cine-on{height:650vh}}
/* El body tiene overflow-x:hidden (rompe position:sticky), así que el anclaje lo hace cine.js:
   pre = arriba del bloque · pin = fijo en pantalla · post = pegado al final del bloque */
.cine-sticky{position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.cine-sticky.pin{position:fixed;z-index:1}
.cine-sticky.post{top:auto;bottom:0}
.cine-poster,.cine-canvas{position:absolute;inset:0;width:100%;height:100%}
.cine-poster{object-fit:cover}
.cine-canvas{display:block;opacity:0;transition:opacity .6s ease}
#cine.cine-ready .cine-canvas{opacity:1}

/* capas de acabado: viñeta, degradado para leer el texto, grano, scanlines */
.cine-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22%,transparent 52%,rgba(0,0,0,.72) 100%)}
.cine-grain{position:absolute;inset:-50%;pointer-events:none;z-index:3;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cineGrain 1s steps(6) infinite}
@keyframes cineGrain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,-2%)}100%{transform:translate(0,0)}}
.cine-scan{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.12;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}

/* ---------- HUD tech ---------- */
.cine-hud{position:absolute;inset:0;z-index:5;pointer-events:none;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.cine-hud .mono{font-family:'Courier New',monospace;letter-spacing:.14em}
.cine-corner{position:absolute;width:22px;height:22px;border:1px solid rgba(255,255,255,.55)}
.cine-corner.tl{top:88px;left:24px;border-right:0;border-bottom:0}
.cine-corner.tr{top:88px;right:24px;border-left:0;border-bottom:0}
.cine-corner.bl{bottom:24px;left:24px;border-right:0;border-top:0}
.cine-corner.br{bottom:24px;right:24px;border-left:0;border-top:0}
.cine-hud-tl{position:absolute;top:96px;left:56px;display:flex;align-items:center;gap:10px}
.cine-rec{width:7px;height:7px;border-radius:50%;background:var(--cine-o);box-shadow:0 0 12px var(--cine-o);animation:cineRec 1.6s ease-in-out infinite}
@keyframes cineRec{50%{opacity:.25}}
.cine-hud-tr{position:absolute;top:96px;right:56px;text-align:right;line-height:1.7}
.cine-hud-tr b{color:var(--cine-o2);font-weight:500}
.cine-hud-br{position:absolute;right:120px;bottom:34px;text-align:right}
.cine-hud-tl,.cine-hud-tr,.cine-hud-br{text-shadow:0 1px 12px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.cine-rail{position:absolute;left:56px;right:330px;bottom:40px;height:1px;background:rgba(255,255,255,.18)}
.cine-rail-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cine-o),var(--cine-o2));box-shadow:0 0 10px rgba(229,62,0,.9)}
.cine-tick{position:absolute;top:-3px;width:1px;height:7px;background:rgba(255,255,255,.45)}
.cine-tick span{position:absolute;top:-18px;left:-6px;font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.5);transition:color .3s}
.cine-tick.on{background:var(--cine-o2)}
.cine-tick.on span{color:#fff}
.cine-hint{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
.cine-hint i{display:block;width:1px;height:42px;background:linear-gradient(180deg,transparent,#fff);animation:cineHint 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cineHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- capítulos de texto ---------- */
.cine-chapters{position:absolute;inset:0;z-index:6;pointer-events:none}
.cine-ch{position:absolute;left:56px;bottom:96px;max-width:min(640px,calc(100% - 112px));opacity:0;will-change:opacity,transform,filter}
.cine-ch:first-child{opacity:1}
.cine-ch::before{content:"";position:absolute;inset:-90px -140px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,4,8,.55),rgba(5,4,8,.25) 60%,transparent)}
.cine-ch.cine-center{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:min(900px,calc(100% - 48px))}
.cine-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--cine-o2);margin-bottom:18px}
.cine-eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9);font-weight:600}
.cine-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.cine-center .cine-eyebrow::after{content:"";width:28px;height:1px;background:currentColor}
.cine-h{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(38px,6.2vw,92px);line-height:.98;letter-spacing:-.035em;margin:0;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.cine-h em{font-style:normal;background:linear-gradient(100deg,var(--cine-o) 0%,var(--cine-o2) 60%,#ffc27a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cine-p{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:rgba(255,255,255,.86);margin:20px 0 0;max-width:520px}
.cine-center .cine-p{margin-left:auto;margin-right:auto}
.cine-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;pointer-events:auto}
.cine-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;text-decoration:none;color:#fff;
  background:linear-gradient(100deg,var(--cine-o),var(--cine-o2));box-shadow:0 10px 40px rgba(229,62,0,.45);transition:transform .3s,box-shadow .3s}
.cine-btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(229,62,0,.6)}
.cine-btn.ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cine-logo{width:64px;height:64px;margin:0 auto 22px;display:block;filter:drop-shadow(0 8px 30px rgba(229,62,0,.55))}

/* sweep de luz naranja al cambiar de capítulo */
.cine-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,138,31,.22) 50%,transparent 70%);background-size:250% 100%}
.cine-flash.go{animation:cineFlash 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes cineFlash{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-40% 0}}

@media (max-width:767px){
  .cine-corner.tl,.cine-corner.tr{top:78px}
  .cine-corner{width:16px;height:16px}
  .cine-corner.tl,.cine-corner.bl{left:14px}.cine-corner.tr,.cine-corner.br{right:14px}
  .cine-hud-tl{top:84px;left:38px}
  .cine-hud-tr{display:none}
  .cine-hud-br{display:none}
  .cine-rail{left:38px;right:92px;bottom:34px}
  .cine-ch.cine-center{right:auto;bottom:auto;width:calc(100% - 40px)}
  .cine-center .cine-h{font-size:clamp(34px,10.5vw,46px)}
  .cine-center .cine-eyebrow{font-size:9.5px;letter-spacing:.2em}
  .cine-logo{width:52px;height:52px;margin-bottom:16px}
  .cine-ch{left:24px;right:24px;bottom:84px;max-width:none}
  .cine-p{font-size:15px}
  .cine-hint{bottom:64px}
}
@media (prefers-reduced-motion:reduce){.cine-grain,.cine-rec,.cine-hint i{animation:none}}

/* ---------- texto FIJO de lujo (un solo capítulo .cine-fixed) ----------
   Serif clásica (Cormorant Garamond) + filetes finos. La entrada es CSS pura que
   siempre termina: el texto nunca depende del scroll para verse. */
.cine-fixed{opacity:1}
.cine-fixed::before{inset:-120px -200px;background:radial-gradient(closest-side,rgba(5,4,8,.62),rgba(5,4,8,.3) 60%,transparent)}
.cine-fixed .cine-eyebrow{color:#e9d3b0;letter-spacing:.42em;font-weight:500}
.cine-lux{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(46px,7vw,112px);line-height:.95;letter-spacing:-.01em;
  text-shadow:0 6px 50px rgba(0,0,0,.45)}
.cine-lux em{display:inline-block;font-style:italic;font-weight:500;padding:0 .06em .08em;
  background:linear-gradient(100deg,#f3e2c4 0%,#ffb35c 45%,var(--cine-o2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cine-fixed .cine-p{font-size:clamp(15px,1.2vw,17.5px);letter-spacing:.01em;color:rgba(255,255,255,.82);max-width:560px}
.cine-fixed .cine-btns{justify-content:center}
.cine-seal{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,211,176,.75)}
.cine-seal i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
/* entrada escalonada: se revela cada línea con elegancia, una sola vez */
.cine-fixed>*{animation:cineLux 1.6s cubic-bezier(.16,1,.3,1) both}
.cine-fixed>.cine-logo{animation-delay:.1s}
.cine-fixed>.cine-eyebrow{animation-delay:.35s}
.cine-fixed>.cine-h{animation-delay:.55s}
.cine-fixed>.cine-p{animation-delay:.85s}
.cine-fixed>.cine-btns{animation-delay:1.05s}
.cine-fixed>.cine-seal{animation-delay:1.25s}
@keyframes cineLux{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:767px){
  .cine-lux{font-size:clamp(40px,12.5vw,56px)}
  .cine-fixed .cine-eyebrow{letter-spacing:.26em}
  .cine-seal{gap:9px;font-size:9px;letter-spacing:.2em;margin-top:22px}
  .cine-fixed .cine-btns{gap:10px}
  .cine-fixed .cine-btn{padding:13px 20px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.cine-fixed>*{animation:none}}

/* ---------- capítulos 2–5 (mismo look de lujo; cine.js los funde según el scroll) ----------
   Cada capítulo cuenta un servicio; los ve quien hace scroll, y el mismo contenido está
   en #services más abajo: nada depende de la animación para existir en la página. */
.cine-lux-ch::before{inset:-120px -200px;background:radial-gradient(closest-side,rgba(5,4,8,.62),rgba(5,4,8,.3) 60%,transparent)}
.cine-lux-ch .cine-eyebrow{color:#e9d3b0;letter-spacing:.42em;font-weight:500}
.cine-lux-ch .cine-p{font-size:clamp(15px,1.2vw,17.5px);letter-spacing:.01em;color:rgba(255,255,255,.82);max-width:560px}
.cine-lux-ch .cine-btns{justify-content:center}
.cine-lux-ch .cine-num{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(15px,1.4vw,20px);color:rgba(243,226,196,.7);letter-spacing:.06em;margin-bottom:14px}
@media (max-width:767px){
  .cine-lux-ch .cine-eyebrow{letter-spacing:.26em}
  .cine-lux-ch .cine-btns{gap:10px}
  .cine-lux-ch .cine-btn{padding:13px 20px;font-size:13px}
}