/* ===== Cinema FX layer — procedural film effects (no downloaded overlays) ===== */

/* 1–3 · film grain (texture generated in cinema.js → --grain) */
.grain{position:relative;isolation:isolate}
.grain:after{content:"";position:absolute;inset:-50%;z-index:9;pointer-events:none;background-image:var(--grain,none);background-size:180px;opacity:.06;mix-blend-mode:overlay}
.fx .grain:after{animation:grainShift .55s steps(6) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.film__main.grain:after,.cine__stage.grain:after{opacity:.1}
.bgvid--grade video{filter:contrast(1.05) saturate(1.25) brightness(1.15)!important}
.bgvid--grade:before{opacity:.6}

/* 5 · light leaks · 58 · anamorphic flare · 60 · fog */
.cine-atmos{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.leak{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;opacity:0}
.leak--a{width:50vw;height:50vw;left:-15vw;top:-20vw;background:radial-gradient(circle,rgba(255,140,60,.55),rgba(255,60,90,.15) 50%,transparent 70%)}
.leak--b{width:40vw;height:40vw;right:-10vw;bottom:-15vw;background:radial-gradient(circle,rgba(255,200,120,.45),rgba(255,120,40,.12) 50%,transparent 70%)}
.fx .leak--a{animation:leak 11s ease-in-out infinite}
.fx .leak--b{animation:leak 14s ease-in-out infinite -6s}
@keyframes leak{0%,100%{opacity:0;transform:translate(0,0) scale(.9)}35%{opacity:.85;transform:translate(6vw,4vw) scale(1.1)}60%{opacity:.35}}
.flare{position:absolute;left:-40%;top:38%;width:180%;height:2px;background:linear-gradient(90deg,transparent,rgba(120,190,255,.0) 30%,rgba(140,200,255,.9) 50%,rgba(120,190,255,0) 70%,transparent);box-shadow:0 0 18px 3px rgba(100,170,255,.55),0 0 60px 10px rgba(80,140,255,.25);opacity:0;mix-blend-mode:screen}
.fx .flare{animation:flare 9s ease-in-out infinite 2.5s}
@keyframes flare{0%,70%,100%{opacity:0;transform:translateX(-30%) scaleY(1)}80%{opacity:1;transform:translateX(5%) scaleY(1.4)}90%{opacity:0;transform:translateX(30%)}}
.fog{position:absolute;left:-50%;width:200%;height:40%;bottom:-8%;background:radial-gradient(ellipse at 30% 60%,rgba(200,215,240,.22),transparent 60%),radial-gradient(ellipse at 75% 50%,rgba(200,215,240,.16),transparent 55%);filter:blur(20px);mix-blend-mode:screen}
.fx .fog--a{animation:fog 40s linear infinite}
.fx .fog--b{animation:fog 60s linear infinite reverse;bottom:-14%;opacity:.7}
@keyframes fog{to{transform:translateX(25%)}}
.hero .wrap{z-index:2}

/* 49 · handheld camera simulation */
.fx .handheld{animation:handheld 9s ease-in-out infinite}
@keyframes handheld{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-4px,3px) rotate(-.15deg)}45%{transform:translate(3px,-2px) rotate(.12deg)}70%{transform:translate(-2px,-4px) rotate(-.08deg)}85%{transform:translate(4px,2px) rotate(.1deg)}}

/* 51 · teal-and-orange grading */
.bgvid--grade video{filter:contrast(1.12) saturate(1.25)}
.bgvid--grade:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(0,128,143,.55),rgba(255,138,61,.35));mix-blend-mode:soft-light}

/* 6 · projector flicker · 65 · letterbox · 7–8 dust & scratches canvas */
.dust{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;mix-blend-mode:screen;opacity:.8}
.fx .projector video{animation:flicker 4s steps(1) infinite}
@keyframes flicker{0%{opacity:1}7%{opacity:.93}8%{opacity:1}31%{opacity:.96}32%{opacity:1}58%{opacity:.9}59%{opacity:1}83%{opacity:.95}84%{opacity:1}}
.lbox{position:absolute;left:0;right:0;height:9%;background:#000;z-index:7;pointer-events:none;transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.lbox--t{top:0;transform:translateY(-101%)}.lbox--b{bottom:0;transform:translateY(101%)}
.playing .lbox,.cine__stage .lbox{transform:none}
.film__bar{z-index:10}
.credits{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.7rem}
/* 70 · animated film title */
.fx .filmtitle{opacity:0;letter-spacing:.3em;filter:blur(8px);transition:letter-spacing 2.2s cubic-bezier(.2,.9,.25,1),opacity 1.6s,filter 1.6s}
.fx .reveal.in .filmtitle{opacity:1;letter-spacing:-.025em;filter:none}

/* 59 · volumetric light rays (CTA) */
.rays{position:absolute;left:50%;top:-30%;width:160vmax;height:160vmax;margin-left:-80vmax;z-index:1;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(255,220,170,.0) 0deg,rgba(255,220,170,.16) 4deg,rgba(255,220,170,0) 9deg,rgba(255,220,170,0) 16deg);-webkit-mask:radial-gradient(circle at 50% 0%,#000 0%,transparent 55%);mask:radial-gradient(circle at 50% 0%,#000 0%,transparent 55%);mix-blend-mode:screen}
.fx .rays{animation:rays 40s linear infinite}
@keyframes rays{to{transform:rotate(14deg)}}
.cta .cta__in{z-index:3}

/* 69 · text reveal through smoke */
.smoke .sw{display:inline-block;white-space:nowrap}
.smoke .ch{display:inline-block}
.fx .smoke .ch{opacity:0;filter:blur(14px);transform:translateY(-.15em) scale(1.25)}
.fx .smoke.go .ch{animation:smoke 1.6s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes smoke{0%{opacity:0;filter:blur(14px);transform:translate(var(--sx,0),-.2em) scale(1.3)}60%{opacity:.8;filter:blur(3px)}100%{opacity:1;filter:none;transform:none}}

/* 68 · neon text glow (with flicker) */
.neon{color:#fff;text-shadow:0 0 6px rgba(140,200,255,.9),0 0 18px rgba(60,150,255,.75),0 0 42px rgba(60,150,255,.55),0 0 80px rgba(108,75,255,.45)}
.fx .neon{animation:neon 5s infinite}
@keyframes neon{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
/* 67 · 3D text extrusion */
.wall__stats b{color:#fff;text-shadow:1px 1px 0 #6ea8ff,2px 2px 0 #5a93ee,3px 3px 0 #4a80dd,4px 4px 0 #3b6ecb,5px 5px 0 #2d5cb8,6px 6px 0 #234ca1,7px 7px 12px rgba(0,0,0,.6);transform:rotateX(12deg);display:inline-block}
/* 79 · liquid chrome text */
.hero__stats div:nth-child(3) dt{background:linear-gradient(100deg,#fff 0%,#9fb6d6 18%,#fff 32%,#6d84a8 48%,#e8f0ff 62%,#8ea4c6 80%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.fx .hero__stats div:nth-child(3) dt{animation:chrome 4.5s linear infinite}
@keyframes chrome{to{background-position:-250% 0}}
/* 80 · animated logo reveal */
.fx .nav .brand .lp{animation:logoIn 1.2s cubic-bezier(.2,.9,.25,1) both}
.fx .nav .brand{animation:brandIn 1.2s cubic-bezier(.2,.9,.25,1) both .15s}
@keyframes logoIn{from{transform:rotate(-200deg) scale(0)}to{transform:rotate(-6deg) scale(1)}}
@keyframes brandIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ===== cinematic reel ===== */
.sec--black{background:linear-gradient(180deg,#16305f,#1d3a70);color:#fff}
.cine__scene video{filter:brightness(1.12)}
.cine__scene:after{background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 50%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 35%)!important}
.cine__stage{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.cine__scenes,.cine__scene{position:absolute;inset:0}
.cine__scene{opacity:0;will-change:transform,opacity,filter}
.cine__scene.on{opacity:1}
.cine__scene video{width:100%;height:100%;object-fit:cover}
.cine__scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 40%)}
.cine__scene .tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light}
/* grades */
.g-bleach video{filter:contrast(1.35) saturate(.45) brightness(1.05)}
.g-tealorange video{filter:contrast(1.15) saturate(1.3)}.g-tealorange .tint{background:linear-gradient(135deg,rgba(0,128,143,.7),rgba(255,138,61,.5))}
.g-golden video{filter:sepia(.35) saturate(1.45) hue-rotate(-10deg) brightness(1.08) contrast(1.05)}.g-golden .tint{background:radial-gradient(circle at 75% 30%,rgba(255,190,90,.75),transparent 60%);mix-blend-mode:screen}
.g-bw video{filter:grayscale(1) contrast(1.3) brightness(1.05)}
.g-dream video{filter:brightness(1.12) saturate(1.1) blur(.6px)}.g-dream .tint{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);mix-blend-mode:screen}
.g-neon video{filter:saturate(1.7) contrast(1.25) hue-rotate(-18deg)}.g-neon .tint{background:linear-gradient(160deg,rgba(255,0,170,.55),rgba(0,220,255,.45));mix-blend-mode:overlay}
.cine__rain{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .8s}
.cine__rain.on{opacity:.75}
.cine__flash{position:absolute;inset:0;z-index:11;background:#fff;opacity:0;pointer-events:none}
.cine__split{position:absolute;inset:0;z-index:10;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.cine__split i{background:#0d1b36;transform:translateY(-101%)}
.cine__split i:nth-child(2){background:#1a7ff0;transform:translateY(101%)}
.cine__split i:nth-child(3){background:#ff7a1a}
.cine__flare{position:absolute;left:-30%;top:30%;width:160%;height:3px;z-index:6;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,200,120,.95) 50%,transparent);box-shadow:0 0 24px 5px rgba(255,170,80,.6),0 0 90px 18px rgba(255,140,60,.3);mix-blend-mode:screen}
.cine__flare.on{animation:flare2 3.2s ease-in-out}
@keyframes flare2{0%{opacity:0;transform:translateX(-25%)}40%{opacity:1}100%{opacity:0;transform:translateX(25%)}}
.cine__stage.glitch .cine__scene.on video{filter:url(#rgbsplit)}
.cine__stage.glitch .cine__scene.on{animation:slices .5s steps(1) 1}
@keyframes slices{0%{clip-path:inset(10% 0 60% 0);transform:translateX(-14px)}15%{clip-path:inset(55% 0 20% 0);transform:translateX(18px)}30%{clip-path:inset(30% 0 45% 0);transform:translateX(-8px)}45%{clip-path:inset(0 0 0 0);transform:translateX(6px)}60%{clip-path:inset(70% 0 5% 0);transform:translateX(-20px)}75%{clip-path:inset(0 0 0 0);transform:none}100%{clip-path:none;transform:none}}
.cine__stage.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px) rotate(-.3deg)}40%,60%{transform:translate(6px,-3px) rotate(.3deg)}}
.cine__hud{position:absolute;top:0;left:0;right:0;z-index:12;display:flex;justify-content:space-between;padding:calc(9% + 12px) 22px 0;font:600 .72rem/1 "JetBrains Mono",ui-monospace,Consolas,monospace;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff3b30;margin-right:.5rem;vertical-align:-1px;animation:recb 1s steps(1) infinite}
@keyframes recb{50%{opacity:0}}
.cine__cap{position:absolute;left:6%;bottom:calc(9% + 54px);z-index:12;max-width:62%}
.cine__cap .k{display:block;font:600 .74rem/1 var(--f-b);letter-spacing:.24em;text-transform:uppercase;color:#8fc4ff;margin-bottom:.8rem}
.cine__cap h3{font-family:var(--f-h);color:#fff;font-size:clamp(1.6rem,4vw,3.6rem);line-height:1;letter-spacing:-.035em;font-weight:800}
/* 66 · kinetic typography + 77 echo trails */
.kw{display:inline-block;opacity:0}
.cine__cap.k-rise .kw{animation:kRise .9s cubic-bezier(.2,.9,.25,1) forwards}
.cine__cap.k-flip .kw{animation:kFlip 1s cubic-bezier(.2,.9,.25,1) forwards;transform-origin:50% 100%}
.cine__cap.k-scale .kw{animation:kScale .9s cubic-bezier(.2,.9,.25,1) forwards}
.cine__cap.k-echo .kw{animation:kEcho 1.3s cubic-bezier(.2,.9,.25,1) forwards}
.cine__cap.k-type .kw{animation:kType .05s steps(1) forwards}
.cine__cap.k-slide .kw{animation:kSlide 1s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes kRise{from{opacity:0;transform:translateY(70%) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes kFlip{from{opacity:0;transform:perspective(600px) rotateX(-90deg)}to{opacity:1;transform:none}}
@keyframes kScale{from{opacity:0;transform:scale(2.4);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes kEcho{0%{opacity:0;text-shadow:-60px 0 0 rgba(143,196,255,.5),-120px 0 0 rgba(143,196,255,.3),-180px 0 0 rgba(143,196,255,.15);transform:translateX(80px)}60%{opacity:1}100%{opacity:1;text-shadow:0 0 0 transparent,0 0 0 transparent,0 0 0 transparent;transform:none}}
@keyframes kType{to{opacity:1}}
@keyframes kSlide{from{opacity:0;transform:translateX(-50px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.cine__tags{position:absolute;right:20px;bottom:calc(9% + 18px);z-index:12;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:50%}
.cine__tags span{font:600 .66rem/1 "JetBrains Mono",ui-monospace,Consolas,monospace;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);padding:.35rem .55rem;border-radius:6px;animation:tagIn .5s both}
@keyframes tagIn{from{opacity:0;transform:translateY(8px)}}
.cine__timeline{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px}
.cine__timeline button{width:100%;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.55rem .65rem;color:#fff;position:relative;overflow:hidden}
.cine__timeline button:hover{background:rgba(255,255,255,.09)}
.cine__timeline b{display:block;font-size:.78rem;font-weight:600}
.cine__timeline small{display:block;font:500 .62rem/1.3 "JetBrains Mono",ui-monospace,Consolas,monospace;color:rgba(255,255,255,.55);margin-top:.2rem}
.cine__timeline i{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#ff7a1a,#1a7ff0)}
.cine__timeline .on button{border-color:rgba(143,196,255,.6);background:rgba(26,127,240,.14)}
@media (max-width:960px){.cine__timeline{grid-template-columns:repeat(4,1fr)}.cine__cap{max-width:85%}.cine__tags{display:none}}
@media (max-width:640px){.cine__stage{aspect-ratio:4/5}.cine__timeline{grid-template-columns:repeat(2,1fr)}.cine__hud{font-size:.6rem}}
.no-motion .leak,.no-motion .flare,.no-motion .fog{display:none}