/* CostVantage cinematic layer (2026-10-25)
   Loaded after each page's own styles. Pages opt in with <body data-cine="full"> or "light".
   All text stays in the HTML; this file only changes how it appears. */

:root{--cine-ease:cubic-bezier(.2,.7,.2,1)}

/* Content is visible unless JavaScript is running to reveal it */
html:not(.js) .reveal,html:not(.js) .sr{opacity:1!important;transform:none!important}

/* Smoother reveals, staggered by cinematic.js through --d */
[data-cine] .reveal,.js [data-cine] .sr{opacity:0;transform:translateY(24px);transition:opacity .85s var(--cine-ease),transform .85s var(--cine-ease);transition-delay:var(--d,0s)}
[data-cine] .reveal.visible,.js [data-cine] .sr.visible{opacity:1;transform:none}

/* Hero: staged entrance on load (both treatments) */
[data-cine] .page-hero .reveal,[data-cine] .hero .reveal,[data-cine="light"] .contact .contact-copy.reveal{opacity:1;transform:none;transition:none}
.js [data-cine] .cine-stage>*{opacity:0;transform:translateY(22px);animation:cineIn .9s var(--cine-ease) forwards;animation-delay:var(--d,0s)}

.js [data-cine] .hero .hero-visual{opacity:0;transform:translateY(22px);animation:cineIn 1s var(--cine-ease) .55s forwards}

/* ===== Full treatment ===== */
[data-cine="full"] .page-hero,[data-cine="full"] .hero{position:relative;overflow:hidden;isolation:isolate}
[data-cine="full"] .page-hero{min-height:calc(78svh - 78px);display:flex;align-items:center;padding:90px 0 120px}
[data-cine="full"] .page-hero>.container{position:relative;z-index:2}
[data-cine="full"] .page-hero h1{font-size:clamp(50px,7.6vw,104px);line-height:.95;letter-spacing:-.05em}
[data-cine="full"] .page-hero p{font-size:clamp(16px,1.5vw,18px)}
.cine-glow{position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 75% 35%,rgba(47,191,107,.20),transparent 32%),radial-gradient(circle at 15% 85%,rgba(47,191,107,.08),transparent 30%),linear-gradient(130deg,#081A27,#0E2D40);animation:cineDrift 22s ease-in-out infinite alternate}
.hero .cine-glow{z-index:0}
.cine-rings{position:absolute;right:-200px;top:50%;width:720px;height:720px;transform:translateY(-50%);pointer-events:none;z-index:1}
.cine-rings circle{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.cine-rings circle.g{stroke:rgba(47,191,107,.35);stroke-dasharray:4 10;animation:cineSpin 90s linear infinite;transform-origin:center}
.hero .cine-rings{opacity:.7}
.cine-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9px;letter-spacing:2px;font-weight:800;color:#8FA3AF}
.cine-cue i{display:block;width:1px;height:38px;background:linear-gradient(#2FBF6B,transparent);animation:cineCue 2.2s ease-in-out infinite}
[data-cine="full"] .section,[data-cine="full"] .approach{padding:clamp(80px,11vw,140px) 0}
[data-cine="full"] .section h2,[data-cine="full"] .approach-head h2{letter-spacing:-.045em}

/* Bars in "cost driver" cards grow in when the card appears */
.js [data-cine] .data-card .bar{transform-origin:left;transition:transform 1.1s var(--cine-ease);transition-delay:var(--d,0s)}
.js [data-cine] .data-card:not(.visible) .bar{transform:scaleX(0)}

/* Service pages: body blocks fade in */
.js [data-cine] .article .sr{transform:translateY(16px)}

/* Chapter rail (wide screens, full pages with several sections) */
.cine-rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transition:opacity .4s}
.cine-rail.on{opacity:1;pointer-events:auto}
.cine-rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:9px;font-weight:800;letter-spacing:1.4px;color:transparent;transition:color .3s;text-decoration:none}
.cine-rail a i{display:block;width:8px;height:8px;border-radius:50%;border:1.5px solid #8FA3AF;transition:.3s}
.cine-rail a:hover,.cine-rail a.active,.cine-rail a:focus-visible{color:#8FA3AF}
.cine-rail.on-dark a:hover,.cine-rail.on-dark a.active{color:#C5D2DA}
.cine-rail a.active i{background:#2FBF6B;border-color:#2FBF6B;transform:scale(1.25)}

@keyframes cineIn{to{opacity:1;transform:none}}
@keyframes cineDrift{to{transform:translate(4%,-3%) scale(1.06)}}
@keyframes cineSpin{to{transform:rotate(360deg)}}
@keyframes cineCue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

@media(max-width:1180px){.cine-rail{display:none}}
@media(max-width:650px){
 [data-cine="full"] .page-hero{min-height:0;padding:70px 0 100px}
 .cine-rings{width:460px;height:460px;right:-260px}
}
@media(prefers-reduced-motion:reduce){
 .cine-glow,.cine-rings circle.g,.cine-cue i{animation:none}
 .js [data-cine] .cine-stage>*,.js [data-cine] .hero .hero-visual{animation:none;opacity:1;transform:none}
 [data-cine] .reveal,.js [data-cine] .sr{opacity:1;transform:none;transition:none}
 .js [data-cine] .data-card:not(.visible) .bar{transform:none}
}

/* Pre-launch availability line (until early 2027) */
.availability{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 14px;border:1px solid rgba(47,191,107,.45);border-radius:999px;background:rgba(47,191,107,.10);color:#D4EEDF!important;font-size:12px!important;font-weight:700;line-height:1.4!important;max-width:100%}
.availability:before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#2FBF6B}
.hero-copy .availability{margin-bottom:6px}