/* Light and texture stay behind the lettering, products and controls. */
.hero{--light-rgb:133,183,137;--wash-rgb:195,171,99}
.hero[data-scene="1"]{--light-rgb:106,149,204;--wash-rgb:122,140,184}
.hero[data-scene="2"]{--light-rgb:108,177,157;--wash-rgb:200,177,100}
.hero[data-scene="3"]{--light-rgb:179,160,216;--wash-rgb:130,164,205}
.hero[data-scene="4"]{--light-rgb:202,162,114;--wash-rgb:166,115,79}
.hero[data-scene="5"]{--light-rgb:184,165,123;--wash-rgb:150,131,103}
.hero .ambient{z-index:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#ffffff06,transparent 65%)}
.ambient-light,.ambient-wash{position:absolute;pointer-events:none;inset:-12%;transform-origin:50% 45%}
.ambient-light{background:radial-gradient(ellipse at 50% 43%,rgba(var(--light-rgb),.17),rgba(var(--light-rgb),.04) 33%,transparent 65%)}
.ambient-wash{background:radial-gradient(ellipse at 16% 28%,rgba(var(--wash-rgb),.10),transparent 47%),radial-gradient(ellipse at 88% 60%,rgba(var(--light-rgb),.08),transparent 48%)}
.ambient-grain{position:absolute;inset:0;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:180px 180px}
.hero .ambient:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#00000008,transparent 24%,transparent 62%,#0000001c),radial-gradient(ellipse at 50% 43%,transparent 32%,#00000017 100%)}
.hero[data-motion-paused] .levitate{animation-play-state:paused}
@media(max-width:600px),(hover:none),(pointer:coarse){
 .ambient-light{inset:-6%;background:radial-gradient(ellipse at 53% 36%,rgba(var(--light-rgb),.16),transparent 62%)}
 .ambient-wash{inset:-6%;opacity:.65}
 .ambient-grain{opacity:.045}
}