/* Shared vector atmosphere: transform/opacity only, no canvas or per-frame filters. */
body .ribbon-hero-active{position:relative;isolation:isolate}
.hero-ribbons{position:absolute;inset-block:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;overflow:hidden;contain:paint;opacity:var(--ribbon-strength,.4);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 86%,transparent)}
.hero-ribbon-layer{position:absolute;inset:-18% -10%;display:block;transform-origin:center;pointer-events:none;animation:ribbon-rise 28s ease-in-out infinite alternate}
.hero-ribbon-layer:nth-child(2){animation:ribbon-fall 35s ease-in-out infinite alternate}
.hero-ribbon-layer::before,.hero-ribbon-layer::after{content:"";position:absolute;inset:0;background:url('img/spotlight-ribbons.svg?v=2') center/100% 100% no-repeat;pointer-events:none;animation:ribbon-cool 48s ease-in-out infinite alternate}
.hero-ribbon-layer::after{background-image:url('img/spotlight-ribbons-warm.svg?v=1');opacity:0;animation-name:ribbon-warm}
.hero-ribbon-layer:nth-child(2)::before,.hero-ribbon-layer:nth-child(2)::after{animation-delay:-24s;animation-duration:59s}
@keyframes ribbon-rise{from{transform:translate3d(-1%,-8%,0) rotate(-3deg)}to{transform:translate3d(2%,8%,0) rotate(-1deg)}}
@keyframes ribbon-fall{from{transform:translate3d(2%,9%,0) rotate(2deg)}to{transform:translate3d(-1%,-9%,0) rotate(-2deg)}}
@keyframes ribbon-cool{from{opacity:.78}to{opacity:.08}}
@keyframes ribbon-warm{from{opacity:.08}to{opacity:.78}}
/* Replace the earlier hero-only patterns, retaining each page's background wash. */
body .inner-hero.ribbon-hero-active::after,body .landing-scene-home.ribbon-hero-active::after,body .cl-hero.ribbon-hero-active::after,body .empty-page.ribbon-hero-active::after,body .rf-hero.ribbon-hero-active::after{display:none}
.ribbon-hero-active>.rf-atmosphere{display:none}
.ribbon-hero-active>.discovery-atmosphere::after{display:none}
.landing-scene-home.ribbon-hero-active,.discovery-hero.ribbon-hero-active,.rf-hero.ribbon-hero-active,.cl-hero.ribbon-hero-active{--ribbon-strength:.62}
/* Photo covers have no text under the overlay; all actions remain unaffected. */
.space-cover>.hero-ribbons,.demo-hero-image>.hero-ribbons{left:0;width:100%;transform:none;z-index:1;opacity:.3}
.studio-bookings-panel .inner-hero>.hero-ribbons{left:0;width:100%;transform:none}
.demo-hero-image.ribbon-hero-active figcaption{position:absolute;z-index:2}
.ribbon-hero-rest .hero-ribbons *,.ribbon-page-rest .hero-ribbons *,.ribbon-motion-off .hero-ribbons *{animation-play-state:paused!important}
@media(max-width:760px){.hero-ribbons{opacity:calc(var(--ribbon-strength,.4)*.85)}.hero-ribbon-layer{animation-duration:34s}.hero-ribbon-layer:nth-child(2){animation-duration:41s}}
@media(prefers-reduced-motion:reduce){.hero-ribbons *,.hero-ribbons *::before,.hero-ribbons *::after{animation:none!important}.hero-ribbon-layer::before{opacity:.6}.hero-ribbon-layer::after{opacity:0}.hero-ribbon-layer:nth-child(2){transform:translateY(7%) rotate(-2deg)}}
/* Pseudo-elements are paused explicitly as they own the palette crossfade. */
.ribbon-hero-rest .hero-ribbons *::before,.ribbon-hero-rest .hero-ribbons *::after,.ribbon-page-rest .hero-ribbons *::before,.ribbon-page-rest .hero-ribbons *::after,.ribbon-motion-off .hero-ribbons *::before,.ribbon-motion-off .hero-ribbons *::after{animation-play-state:paused!important}