.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .3s ease;pointer-events:none}
.hero .hero-video.is-active{opacity:1;z-index:1}
.hero[data-hero-scene=leaves]{background:#283626;--hero-title-color:#fff}
.hero[data-hero-scene=still-life]{background:#eeefec;--hero-title-color:#000}
.hero[data-hero-scene=ecosystem]{background:#f6f6f1;--hero-title-color:#000}
.hero[data-hero-scene=still-life]:after,.hero[data-hero-scene=ecosystem]:after{opacity:0}
.hero .hero-copy{color:var(--hero-title-color,#fff);transition:color .25s ease}
.hero .hero-video[data-scene=ecosystem]{inset:auto auto 0 54.5%;width:33%;height:70%;object-fit:contain;object-position:center bottom}
@media(max-width:760px){
 .hero .hero-video[data-scene=still-life]{object-position:65% center}
 .hero .hero-video[data-scene=ecosystem]{left:25%;bottom:36%;width:73%;height:42%}
 .hero[data-hero-scene=still-life] .hero-copy{padding:12px 10px;background:#ffffffb8;border-radius:4px}
}
@media(prefers-reduced-motion:reduce){.hero .hero-video,.hero .hero-copy{transition:none}}

/* Match the tree scene's white video background to the page below it. */
.hero[data-hero-scene=ecosystem] .hero-media{background:#f6f6f1}
.hero .hero-video[data-scene=ecosystem]{mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}