/* Optional cinematic layer. All content and CSS image fallbacks remain usable. */
:root{--cinema-ease:cubic-bezier(.18,.72,.17,1)}
html.motion-off{scroll-behavior:auto!important}
#cinema-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.cinema-ready #cinema-canvas{opacity:1}
.cinema-ready .scene{opacity:0!important}
.cinema-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 66% 42%,transparent 15%,#03070b16 55%,#03070b9c 100%)}
.cinema-bloom{position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at 83% 25%,#a9e6f819 0%,#85c0d406 20%,transparent 45%);mix-blend-mode:screen;transform:translate3d(calc(var(--camera-x,0)*12px),calc(var(--camera-y,0)*8px),0)}
.cinema-matte{position:absolute;left:0;right:0;height:clamp(18px,3.3svh,42px);background:#060a0e;pointer-events:none;z-index:2}
.matte-top{top:0}.matte-bottom{bottom:0}
.film-visual .scene-shade{background:linear-gradient(90deg,#090d11ed 0%,#090d11cc 28%,#090d1160 53%,#090d110a 83%),linear-gradient(0deg,#090d11 0%,transparent 23%,transparent 75%,#090d114a)}
.film-visual .film-grain{opacity:.045;pointer-events:none}
.film-visual .scene-caption{bottom:calc(clamp(18px,3.3svh,42px) + 22px);right:var(--pad);z-index:3;letter-spacing:.2em}
.chapter-dial{position:absolute;right:var(--pad);top:47%;display:flex;align-items:center;flex-direction:column;gap:14px;z-index:3;font-size:9px;letter-spacing:.12em;color:#b2c6ce}
.chapter-current{color:#d7edf2}
.chapter-track{width:1px;height:100px;background:#e8faff1c;display:block;position:relative}
.chapter-track i{position:absolute;left:0;top:0;width:1px;height:100%;background:#c3e9ee;transform:scaleY(var(--film-progress,.015));transform-origin:top;box-shadow:0 0 13px #d3f3ff65}
.chapter-total{color:#829ba8}
.chapter-name{position:absolute;right:calc(var(--pad) + 35px);top:calc(47% + 58px);font-size:8px;letter-spacing:.19em;color:#91aebb;writing-mode:vertical-rl;z-index:3}
.hero .hero-copy,.film-panel .panel-copy{transform:translate3d(0,var(--panel-drift,0px),0);will-change:transform}
.cinema-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;padding-right:.08em;margin-right:-.08em}
.cinema-line>span{display:inline-block;transform-origin:0 100%}
.cinema-booted:not(.motion-off) .hero.is-cinema-in h1:not(.motion-heading) .cinema-line>span,
.cinema-booted:not(.motion-off) .film-panel.is-cinema-in h2:not(.motion-heading) .cinema-line>span{animation:cinema-title-in 1.45s var(--cinema-ease) both}
.cinema-booted:not(.motion-off) .hero.is-cinema-in h1:not(.motion-heading) .cinema-line:nth-child(2)>span,
.cinema-booted:not(.motion-off) .film-panel.is-cinema-in h2:not(.motion-heading) .cinema-line:nth-child(2)>span{animation-delay:.12s}
.cinema-booted:not(.motion-off) .film-panel.is-cinema-in h2:not(.motion-heading) .cinema-line:nth-child(3)>span{animation-delay:.24s}
.cinema-booted:not(.motion-off) .hero .hero-role{animation:cinema-soft-in 1.1s ease both .05s}
.cinema-booted:not(.motion-off) .hero .hero-statement{animation:cinema-soft-in 1.3s var(--cinema-ease) both .32s}
.cinema-booted:not(.motion-off) .hero .hero-summary{animation:cinema-soft-in 1.3s var(--cinema-ease) both .44s}
.cinema-booted:not(.motion-off) .hero .hero-actions{animation:cinema-soft-in 1.3s var(--cinema-ease) both .56s}
.cinema-booted:not(.motion-off) .hero .location{animation:cinema-soft-in 1.3s var(--cinema-ease) both .66s}
@keyframes cinema-title-in{from{transform:translate3d(0,108%,0) rotate(2.5deg);filter:blur(8px);opacity:0}to{transform:none;filter:blur(0);opacity:1}}
@keyframes cinema-soft-in{from{transform:translate3d(0,18px,0);filter:blur(5px);opacity:0}to{transform:none;filter:blur(0);opacity:1}}
.js-enabled:not(.motion-off) .reveal{filter:blur(5px);transition:opacity 1.05s ease,transform 1.05s var(--cinema-ease),filter 1.05s ease}
.js-enabled:not(.motion-off) .reveal.is-visible{filter:blur(0)}
.button-light{position:relative;overflow:hidden}
.button-light::before{content:'';position:absolute;inset:-50% 0;background:linear-gradient(105deg,transparent 25%,#ffffff9c 48%,transparent 70%);transform:translateX(-130%);transition:transform .85s var(--cinema-ease);pointer-events:none}
.button-light:hover::before,.button-light:focus-visible::before{transform:translateX(130%)}
.work-visual{transition:border-color .6s ease,box-shadow .6s ease}
.work-item[open] .work-visual{border-color:#a1d7e12d;box-shadow:0 10px 55px #00000026}
.work-item[open] .reliability-art svg>path:nth-of-type(2){stroke-dasharray:650;stroke-dashoffset:0;animation:cinema-curve 1.8s var(--cinema-ease) both}
@keyframes cinema-curve{from{stroke-dashoffset:650}to{stroke-dashoffset:0}}
.contact::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0a1015 17%,#0a1015b8 55%,#0a10153b),linear-gradient(0deg,#0a1015 0%,transparent 60%),url('assets/pathways.webp') center right/cover no-repeat;opacity:.33;pointer-events:none}
.contact-orbit{border-color:#c3edf40d;transform:rotate(-15deg)}
.site-footer{position:relative;z-index:1;background:#090d11}
.motion-off .hero .hero-copy,.motion-off .film-panel .panel-copy,.motion-off .cinema-bloom{transform:none!important}
.motion-off .reveal{filter:none!important}
.motion-off .cinema-line>span{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
@media(max-width:1100px){.chapter-name{display:none}.chapter-dial{right:28px}}
@media(max-width:760px){
  .cinema-matte{height:18px}
  .film-visual .scene-shade{background:linear-gradient(90deg,#090d11e7,#090d11c2 45%,#090d1155),linear-gradient(0deg,#090d11,transparent 25%,transparent 73%,#090d1140)}
  .cinema-vignette{background:radial-gradient(ellipse at 70% 37%,transparent 10%,#03070b1a 55%,#03070b75 100%)}
  .film-visual .scene-caption{bottom:40px;right:24px;letter-spacing:.12em}
  .chapter-dial{top:auto;bottom:42px;right:auto;left:var(--pad);flex-direction:row;gap:10px;font-size:7px}
  .chapter-track{width:48px;height:1px}.chapter-track i{width:100%;height:1px;transform:scaleX(var(--film-progress,.015));transform-origin:left}
  .hero .scroll-cue{bottom:78px}
  .cinema-bloom{opacity:.65}
  .cinema-booted:not(.motion-off) .hero.is-cinema-in h1:not(.motion-heading) .cinema-line>span,.cinema-booted:not(.motion-off) .film-panel.is-cinema-in h2:not(.motion-heading) .cinema-line>span{animation-duration:1.1s}
  .contact::before{background-image:linear-gradient(90deg,#0a1015 0%,#0a1015bd 55%,#0a101590),linear-gradient(0deg,#0a1015 0%,transparent 60%),url('assets/pathways-mobile.webp');opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  #cinema-canvas{display:none}.cinema-bloom,.hero .hero-copy,.film-panel .panel-copy{transform:none!important}
  .cinema-line>span{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
  .js-enabled .reveal{filter:none!important}
}
@media print{#cinema-canvas,.cinema-vignette,.cinema-bloom,.cinema-matte,.chapter-dial,.chapter-name{display:none}.hero .hero-copy,.film-panel .panel-copy{transform:none!important}.cinema-line>span{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}.contact::before{display:none}}