/* Keep the copy steady while the image plane moves. */
.hero .frame[aria-hidden="true"]{pointer-events:none}
.hero .frame.is-arriving{z-index:1}
.hero .frame.is-departing{z-index:0}
.hero canvas[data-optics]{z-index:2}
.hero .frame-image img{animation:none}
.hero .frame-lines{gap:2px}
.hero .frame-lines button{display:grid;place-items:center;width:18px}
.hero .frame-lines i{width:5px;height:5px;border-radius:50%;background:#54716366}
.hero .frame-lines button[aria-pressed="true"] i{width:9px;height:9px;background:radial-gradient(circle at 32% 26%,#f7e6b5,#b29448 43%,#6b6036 95%);box-shadow:0 0 0 2px #f2f5e652}
.frame-arrows .circle{touch-action:manipulation}
.hero .frame-arrows .motion-toggle{margin-right:4px}
.hero[data-active-frame="1"] .frame-arrows .circle,.hero[data-active-frame="2"] .frame-arrows .circle{background:#405c4fba}
@media(prefers-reduced-motion:no-preference){
  :root[data-home-motion] .hero .frame-image img{
    animation:serum-camera 11s cubic-bezier(.38,0,.55,1) infinite alternate both;
    transform-origin:66% 54%;
  }
  :root[data-home-motion] .hero .frame-2 img{transform-origin:53% 42%}
  :root[data-home-motion] .hero .frame-3 img{transform-origin:61% 52%}
  :root[data-home-motion="paused"] .hero .frame-image img{animation-play-state:paused}
  .hero .frame.is-arriving{animation:serum-dissolve .74s cubic-bezier(.25,.65,.36,1) both}
  .hero.is-awake .frame:not([hidden]):not(.is-departing) .hero-copy h1 span,
  .hero.is-awake .frame:not([hidden]):not(.is-departing) .hero-copy h2 span{
    display:inline-block;animation:copy-arrive .78s cubic-bezier(.2,.75,.26,1) both
  }
  .hero.is-awake .frame:not([hidden]):not(.is-departing) .hero-copy :is(h1,h2) span:last-child{animation-delay:75ms}
  :root[data-home-motion="paused"] .hero.is-awake .frame .hero-copy :is(h1,h2) span{animation:none}
  :root[data-home-motion] .hero[data-in-view="false"] .frame-image img{animation-play-state:paused}
}
@keyframes serum-camera{from{transform:scale(1)}to{transform:scale(1.047)}}
@keyframes serum-dissolve{from{opacity:0}to{opacity:1}}
@keyframes copy-arrive{from{opacity:.4;transform:translateY(.16em)}to{opacity:1;transform:none}}
@media(max-width:720px){.hero .frame-lines{gap:0}.hero .frame-lines button{width:15px}.hero .frame-arrows{gap:6px}}
@media(prefers-reduced-motion:reduce){.hero .frame-image img,.hero .frame{animation:none!important}}