/* S.T.A.R. V11 / CINEMATIC SIGNATURE. All motion respects reduced-motion. */
:root{--cin-ease:cubic-bezier(.18,.72,.22,1);--cin-reveal:1000ms}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{overflow-x:clip}
/* 1. Polished light that moves across the photographic highlights, rather than a decorative white strip. */
.hero-scenes,.feature-photo,.rescue-image,.network-visual,.v10-time-image,.v11-viewer-image,.v11-tech-img,.v11-investor-img,.v11-city-canvas,.app-card,.product-stage{isolation:isolate}
.hero-scene:after,.feature-photo:after,.rescue-image:after,.network-visual:after,.v10-time-image:after,.v11-viewer-image:after,.v11-tech-img:after,.v11-investor-img:after,.app-card:after,.product-stage:after{content:"";position:absolute;inset:-25%;z-index:2;pointer-events:none;background:linear-gradient(111deg, transparent 36%,rgba(230,242,255,.012) 44%,rgba(255,255,255,.17) 49%,rgba(200,224,255,.05) 53%,transparent 62%);mix-blend-mode:screen;opacity:0;transform:translateX(-110%);transition:opacity .5s}
:is(.feature-photo,.rescue-image,.network-visual,.v10-time-image,.v11-viewer-image,.v11-tech-img,.v11-investor-img,.app-card,.product-stage).cin-lit:after{animation:cin-light-pass 2.1s var(--cin-ease) both}
.hero-scene.is-active:after{animation:cin-hero-light 6.5s ease-out both}
@keyframes cin-light-pass{0%{opacity:0;transform:translateX(-95%)}18%{opacity:.55}72%{opacity:.45}100%{opacity:0;transform:translateX(100%)}}
@keyframes cin-hero-light{0%,15%{opacity:0;transform:translateX(-110%)}28%{opacity:.18}63%,100%{opacity:0;transform:translateX(108%)}}
/* 2. Smooth scene entries, mask revealing the underlying photography. */
:is(.feature-photo,.rescue-image,.network-visual,.v10-time-image,.v11-viewer-image,.v11-tech-img,.v11-investor-img,.product-stage).cin-picture{clip-path:inset(9% 0 9% 0 round 14px);filter:brightness(.7) saturate(.78);transition:clip-path 1.35s var(--cin-ease),filter 1.4s ease,transform 1.35s var(--cin-ease)}
:is(.feature-photo,.rescue-image,.network-visual,.v10-time-image,.v11-viewer-image,.v11-tech-img,.v11-investor-img,.product-stage).cin-picture.cin-visible{clip-path:inset(0 0 0 0 round 0);filter:brightness(1) saturate(1)}
:is(.feature-photo,.rescue-image,.network-visual,.v10-time-image,.v11-viewer-image,.v11-tech-img,.v11-investor-img,.product-stage) img{transition:transform 1.5s var(--cin-ease);will-change:auto}
:is(.feature-photo,.rescue-image,.network-visual,.v10-time-image,.v11-viewer-image,.v11-tech-img,.v11-investor-img,.product-stage).cin-visible img{transform:scale(1.017)}
/* 3. Section transition boundaries use negative space and a quiet optical seam. */
.cinematic-chapter-boundary{height:clamp(46px,7vw,105px);position:relative;background:linear-gradient(180deg,rgba(7,10,15,0),#080b10 49%,rgba(7,10,15,0));overflow:hidden;pointer-events:none}
.cinematic-chapter-boundary span{position:absolute;left:50%;top:50%;height:1px;width:min(0px,0vw);background:linear-gradient(90deg,transparent,rgba(234,223,206,.52),transparent);transform:translate(-50%,-50%);transition:width 1.65s var(--cin-ease)}
.cinematic-chapter-boundary.cin-visible span{width:min(72vw,900px)}
/* 4. Better editorial choreography of text. */
.cin-title{opacity:0;transform:translateY(25px);filter:blur(5px);transition:opacity .9s var(--cin-ease),transform 1s var(--cin-ease),filter .9s ease}
.cin-title.cin-visible{opacity:1;transform:none;filter:blur(0)}
/* 5. Physical SOS cue. Intentionally confined to the real SOS photo, never a fake activation. */
.sos-photo{position:relative}
.sos-photo:before{content:"";position:absolute;z-index:3;left:50%;top:50%;width:26px;height:26px;border-radius:50%;border:1px solid rgba(212,62,62,.4);transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none}
.sos-photo.cin-visible:before{animation:cin-sos-ring 3.8s ease-out 1.1s 2}
@keyframes cin-sos-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:.65}65%,100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
/* 6. Network status accents, non-operational visualization. */
.network-points>div{position:relative}
.network-points>div:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(214,196,171,.55),transparent);transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--cin-ease)}
.network-points.cin-visible>div:before{transform:scaleY(1)}
.network-points.cin-visible>div:nth-child(2):before{transition-delay:.22s}
.network-points.cin-visible>div:nth-child(3):before{transition-delay:.44s}
/* 7. Line drawn in sync with reading the timeline. */
.roadmap-timeline{position:relative;--cin-progress:0%}
.roadmap-timeline:after{content:"";position:absolute;left:var(--cin-road-left,24px);top:0;height:var(--cin-progress);width:2px;background:linear-gradient(180deg,rgba(211,181,146,.16),rgba(236,207,177,.9));pointer-events:none;transition:height .15s linear}
.roadmap-step .roadmap-marker{transition:box-shadow .6s ease,filter .6s ease}
.roadmap-step.cin-passed .roadmap-marker{box-shadow:0 0 22px rgba(228,192,150,.35);filter:brightness(1.35)}
/* 8. Section-specific microinteractions. */
:is(.v11-model-grid,.v11-config-grid,.v11-city-grid,.v11-tech-grid,.v11-investor-grid) :is(button,a){transition:transform .3s var(--cin-ease),background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
@media(hover:hover) and (pointer:fine){:is(.v11-model-grid,.v11-config-grid,.v11-city-grid,.v11-tech-grid,.v11-investor-grid) button:hover{transform:translateY(-2px)}.app-card:hover img{transform:scale(1.045)}.v11-pin:hover{box-shadow:0 0 0 8px rgba(255,255,255,.10),0 0 30px rgba(214,180,143,.27)}}
@media(max-width:700px){.cinematic-chapter-boundary{height:40px}.cinematic-chapter-boundary.cin-visible span{width:82vw}.hero-scene:after{opacity:.08!important}.roadmap-timeline:after{opacity:.65}.sos-photo:before{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.cin-title{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}.cin-picture{clip-path:none!important;filter:none!important;transition:none!important}.cinematic-chapter-boundary span{width:65vw!important;transition:none!important}.hero-scene:after,.cin-lit:after,.sos-photo:before{animation:none!important;display:none!important}.roadmap-timeline:after{transition:none!important}}