.hero-motion-stage{position:relative;width:100%;height:100%;min-height:0;overflow:clip}
.hero-motion-stage .hero-motion-poster,.hero-motion-stage .hero-motion-video{position:absolute;top:0;left:50%;display:block;width:auto;max-width:none;height:100%;aspect-ratio:720/1088;object-fit:contain;transform:translateX(-50%)}
.hero-motion-video{opacity:0}
.hero-motion.is-playing .hero-motion-video{opacity:1}
.hero-motion.is-playing .hero-motion-poster{opacity:0}
.hero-motion-next{border:0;border-bottom:1px solid #a8ad9d;background:transparent;padding:0 0 2px;font-size:inherit;line-height:inherit;color:inherit;letter-spacing:0;white-space:nowrap}
.hero-motion-next:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){.hero-motion figcaption{gap:9px}}
.layered-logo{overflow:visible}
.layered-logo .logo-layer{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1330/665;transform:translateY(-50%)}
.hero-logo .logo-layer img{position:static;display:block;width:100%;height:100%;transform:none;user-select:none;pointer-events:none}
.hero-logo .logo-layer .logo-base{position:absolute;inset:0}
.logo-sprite{position:absolute;display:block}
.logo-red{left:17.368421%;top:23.007519%;width:15.037594%;height:19.699248%}
.logo-yellow{left:8.796992%;top:48.571429%;width:15.864662%;height:21.503759%}
.logo-idle,.logo-react{display:block;width:100%;height:100%}
.logo-red .logo-idle,.logo-red .logo-react{transform-origin:57% 88%}
.logo-yellow .logo-idle,.logo-yellow .logo-react{transform-origin:44% 82%}
.has-reaction .logo-idle{animation:logo-bob 3.4s ease-in-out infinite}
.has-reaction .logo-yellow .logo-idle{animation-duration:3.9s;animation-delay:-1.3s}
.motion-paused .logo-idle{animation-play-state:paused}
.is-reacting .logo-red .logo-react{animation:logo-camera-lean 1.6s cubic-bezier(.3,.7,.3,1) both}
.is-reacting .logo-yellow .logo-react{animation:logo-camera-hop .9s .06s cubic-bezier(.3,.7,.3,1) both}
.hero-camera-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--flash-x,70%) var(--flash-y,22%),#fffffff2,#ffffff70 12%,#ffffff1a 38%,transparent 60%)}
.hero-camera-flash.is-flashing{animation:hero-camera-pulse .55s ease-out both}
@keyframes logo-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.5px) scale(1.018,1.03)}}
@keyframes logo-camera-hop{0%{transform:translateY(0) scale(1)}14%{transform:translateY(1px) scale(1.12,.86)}36%{transform:translateY(-8px) scale(.92,1.12)}58%{transform:translateY(0) scale(1.06,.94)}76%{transform:translateY(-2px) scale(.98,1.03)}100%{transform:translateY(0) scale(1)}}
@keyframes logo-camera-lean{0%{transform:translateY(0) rotate(0) scale(1)}8%{transform:translateY(1px) rotate(2deg) scale(1.12,.86)}20%{transform:translateY(-8px) rotate(9deg) scale(.92,1.12)}32%{transform:translateY(0) rotate(11deg) scale(1.06,.94)}42%{transform:translateY(-2px) rotate(10deg) scale(.98,1.03)}70%{transform:translateY(0) rotate(9deg) scale(1)}100%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes hero-camera-pulse{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.logo-idle,.logo-react,.hero-camera-flash{animation:none!important}}