/* Reserved geometry avoids layout changes when the decorative video loads. */
.hero{position:relative;isolation:isolate}
.hero-digital{position:absolute;right:-1%;top:76px;width:37%;aspect-ratio:1.08;isolation:isolate;opacity:0;transform:scale(.82);transform-origin:center}
.hero-digital.is-revealing{animation:digital-reveal 1.4s cubic-bezier(.22,.61,.36,1) both}
.hero-digital.is-revealed{opacity:1;transform:scale(1)}
.hero-digital-art{position:absolute;inset:16px;transform:translateY(0) rotate(-1deg)}
.hero-digital-back{position:absolute;inset:0;background:var(--red);clip-path:url(#hero-digital-shape);transform:translate(-20px,5px)}
.hero-digital-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:url(#hero-digital-shape);background:#e8eae7}
.hero-digital.is-playing .hero-digital-art{animation:digital-float 9s ease-in-out infinite}
.hero-digital.is-paused .hero-digital-art{animation-play-state:paused}
@keyframes digital-reveal{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes digital-reveal-soft{from{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}
@keyframes digital-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@media(min-width:1600px){.hero-digital{width:39%;right:-3%;top:62px}}
@media(max-width:900px){.hero-digital{position:relative;top:auto;right:auto;width:min(88%,440px);margin:-12px auto 20px}}
@media(max-width:600px){.hero-digital{width:100%;max-width:350px;margin:-8px auto 16px}.hero-digital-art{inset:15px}.hero-digital-back{transform:translate(-12px,4px)}}
@media(prefers-reduced-motion:reduce){.hero-digital.is-revealing{animation-name:digital-reveal-soft}.hero-digital.is-playing .hero-digital-art{animation:none}}
@media print{.hero-digital{opacity:1;transform:none;animation:none!important}.hero-digital-art{animation:none!important}}