/* Hero motion only: preserve all layout, photography, colors and breakpoints. */
.hero .hero-copy>.reveal-item.reveal-pending{
  opacity:0;
  filter:none;
  transform:translate3d(0,20px,0);
}
.hero .hero-copy>.reveal-item{
  transition:opacity 700ms cubic-bezier(.22,.68,0,1),transform 700ms cubic-bezier(.22,.68,0,1);
}
.hero .hero-copy>.reveal-item.reveal-visible{opacity:1;transform:translate3d(0,0,0)}

.hero .moon-breath{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:75%;top:3%;width:clamp(150px,16vw,300px);aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,#fff8e5a8 0%,#f9e2ad58 35%,#f6d4a200 72%);
  opacity:.18;
  animation:hero-moon-breathe 6s ease-in-out infinite;
}
@keyframes hero-moon-breathe{0%,100%{opacity:.15}50%{opacity:.27}}

.hero .lantern{
  --swing-angle:4.8deg;
  --swing-x:2.5px;
  transform-origin:top center;
  animation:lantern-enter .9s ease-out both,hero-lantern-wind 5.2s ease-in-out 0s infinite,lantern-glow 6s ease-in-out 1s infinite;
}
.hero .lantern-two{--swing-angle:3.8deg;--swing-x:2px;animation-delay:.2s,-1.7s,1.35s;animation-duration:.9s,6.1s,6.7s}
.hero .lantern-three{--swing-angle:4.3deg;--swing-x:2.2px;animation-delay:.4s,-2.4s,1.7s;animation-duration:.9s,4.8s,6.3s}
@keyframes hero-lantern-wind{
  0%,100%{transform:rotate(calc(var(--swing-angle) * -1)) translateX(calc(var(--swing-x) * -1)) translateY(0)}
  22%{transform:rotate(calc(var(--swing-angle) * .55)) translateX(calc(var(--swing-x) * .5)) translateY(1px)}
  48%{transform:rotate(var(--swing-angle)) translateX(var(--swing-x)) translateY(2px)}
  72%{transform:rotate(calc(var(--swing-angle) * -.45)) translateX(calc(var(--swing-x) * -.5)) translateY(1px)}
}

/* The product is a separate image only at the mobile breakpoint. */
@media(max-width:800px){
  .hero .moon-breath{display:none}
  .hero .lantern{--swing-angle:3.2deg;--swing-x:1.6px}
  .hero .hero-visual img{animation:hero-product-float 8s ease-in-out infinite}
}
@keyframes hero-product-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-3px,0)}}

@media(prefers-reduced-motion:reduce){
  .hero .hero-copy>.reveal-item,.hero .hero-copy>.reveal-item.reveal-pending{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .hero .moon-breath{animation:none!important;opacity:.16}
  .hero .lantern,.hero .hero-visual img{animation:none!important}
}