/* v3 — the connective tissue: one persistent globe behind the page,
   a unified reveal grammar, and a film grade over everything.
   Loaded after narrative.css so these rules win ties. */

/* The WebGL canvas lives behind the content; chapters open windows onto it. */
#globe-fx{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:1;pointer-events:none;opacity:0}
main{position:relative;z-index:2}
header{z-index:30}
body{background:#050e15}

/* Sections that let the globe ghost through. Opaque scenes
   (cinema, warehouse window, flight stage, case chapters) still cover it. */
.modes{background:transparent;border-color:#2c414ea8}
.solutions.section,.approach.section,.experience.section{background:transparent}
.network-section{background:transparent}
.cargo-index{background:transparent}
.quote.section{background:transparent;border-top-color:#3b505d66}
.closing-word{background:transparent}
footer{background:transparent}

/* Film grade: vignette + grain, above everything, felt more than seen. */
.vignette,.grain{position:fixed;inset:0;pointer-events:none;z-index:90}
.vignette{background:radial-gradient(125% 95% at 50% 42%,transparent 52%,rgba(2,9,13,.42) 100%)}
.grain{inset:-60%;z-index:91;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");animation:grain 9s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}12.5%{transform:translate(-3%,2%)}25%{transform:translate(2%,-4%)}37.5%{transform:translate(-4%,-2%)}50%{transform:translate(3%,3%)}62.5%{transform:translate(-2%,4%)}75%{transform:translate(4%,-3%)}87.5%{transform:translate(-3%,-3%)}100%{transform:translate(0,0)}}

/* Unified reveal grammar. Hidden states only exist when JS is on (.js),
   so no-JS and reduced-motion readers always see the full page. */
.rv{transition:opacity .9s cubic-bezier(.22,.61,.21,1),transform .9s cubic-bezier(.22,.61,.21,1);transition-delay:var(--rv-d,0ms)}
.js .rv{opacity:0;transform:translate3d(0,24px,0)}
.js .rv[data-rv=fade]{transform:none}
.rv.in{opacity:1;transform:none}
.mask-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.mask-line>*{display:block;transition:transform 1.05s cubic-bezier(.19,.65,.16,1);transition-delay:var(--rv-d,0ms)}
.js .rv-mask .mask-line>*{transform:translate3d(0,115%,0)}
.rv-mask.in .mask-line>*{transform:none}

/* Quote finale: fields answer focus with a quiet lime glow. */
.quote input,.quote textarea{transition:border-color .3s,box-shadow .3s,background .3s}
.quote input:focus,.quote textarea:focus{border-color:#d1f56f;box-shadow:0 0 0 1px #d1f56f55,0 16px 44px -20px #d1f56f40;outline:none}

@media(prefers-reduced-motion:reduce){
 .grain{animation:none}
 .js .rv,.js .rv[data-rv],.js .rv-mask .mask-line>*{opacity:1!important;transform:none!important;transition:none!important}
}