/* rangooo cine: cinematic motion layer (no video files, no libraries) */
html[data-cine] .fx-story{position:relative;isolation:isolate;overflow-x:clip}
/* living light behind the hero */
html[data-cine] .fx-story::before,html[data-cine] .fx-story::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
html[data-cine] .fx-story::before{width:46vw;height:46vw;max-width:640px;max-height:640px;left:-6%;top:6%;background:radial-gradient(circle,#FFC27A 0,rgba(255,194,122,0) 68%);animation:cineA 16s ease-in-out infinite alternate}
html[data-cine] .fx-story::after{width:42vw;height:42vw;max-width:600px;max-height:600px;right:-4%;bottom:0;background:radial-gradient(circle,#8FD3E0 0,rgba(143,211,224,0) 68%);animation:cineB 19s ease-in-out infinite alternate}
@keyframes cineA{to{transform:translate3d(14vw,8vh,0) scale(1.15)}}
@keyframes cineB{to{transform:translate3d(-12vw,-6vh,0) scale(1.2)}}
/* pointer spotlight */
html[data-cine] .fx-pin{--sx:70%;--sy:40%}
html[data-cine] .fx-pin::before{content:"";position:absolute;inset:-10% -4%;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--sx) var(--sy),rgba(255,255,255,.75),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light;opacity:var(--spot,0);transition:opacity .4s}
/* Ken Burns drift on the story stage + scroll depth */
html[data-cine] .fx-stage{translate:0 calc(var(--cy,0) * -42px);scale:calc(1 + var(--cz,0) * .06);animation:cineKB 22s ease-in-out infinite alternate;will-change:translate,scale}
@keyframes cineKB{from{rotate:-.4deg}to{rotate:.5deg}}
html[data-cine] .fx-copy{translate:0 calc(var(--cy,0) * -18px);opacity:calc(1 - var(--cy,0) * .9)}
/* film grain + vignette (very light) */
html[data-cine] .fx-story .cine-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:cineGrain .9s steps(4) infinite}
@keyframes cineGrain{25%{background-position:-20px 10px}50%{background-position:15px -25px}75%{background-position:-10px -15px}}
/* scroll reveals: blur-to-sharp, staggered */
html[data-cine] .cine-in{opacity:0;translate:0 28px;filter:blur(8px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--cd,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--cd,0ms),filter .8s ease var(--cd,0ms)}
html[data-cine] .cine-in.cine-on{opacity:1;translate:0 0;filter:none}
/* tier B / small phones: lighter */
html[data-fx-tier="B"][data-cine] .fx-story::before,html[data-fx-tier="B"][data-cine] .fx-story::after{filter:blur(48px);animation-duration:30s}
html[data-fx-tier="B"][data-cine] .cine-grain{display:none}
@media (max-width:700px){html[data-cine] .fx-stage{animation:none}html[data-cine] .fx-story .cine-grain{display:none}html[data-cine] .fx-pin::before{display:none}}
html[data-night="1"][data-cine] .fx-story::before{background:radial-gradient(circle,#6C4BD6 0,rgba(108,75,214,0) 68%);opacity:.4}
html[data-night="1"][data-cine] .fx-story::after{background:radial-gradient(circle,#1F7A8C 0,rgba(31,122,140,0) 68%);opacity:.4}
html[data-night="1"][data-cine] .fx-story .cine-grain{mix-blend-mode:screen;opacity:.05}
html[data-night="1"][data-cine] .fx-pin::before{mix-blend-mode:overlay}
@media (prefers-reduced-motion:reduce){html[data-cine] .cine-in{opacity:1;translate:none;filter:none;transition:none}}