/* Calm, optional motion. All content also works without JavaScript. */
.has-floraluna-motion .hero-atmosphere {
  transform: scale(1.025);
  transform-origin: 65% 55%;
  animation: floraluna-landscape 48s ease-in-out infinite alternate;
}
.hero-mist {
  position: absolute;
  inset: 24% -10% -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 66% 60%, rgba(212, 206, 222, .12), transparent 48%),
    radial-gradient(ellipse at 27% 78%, rgba(197, 186, 212, .09), transparent 42%);
  animation: floraluna-mist 58s ease-in-out infinite alternate;
}
.has-floraluna-motion .hero-content {
  animation: floraluna-arrive 850ms cubic-bezier(.22, .61, .36, 1) both;
}
.has-floraluna-motion .motion-reveal {
  transition: opacity 650ms ease, translate 650ms cubic-bezier(.22, .61, .36, 1);
}
.has-floraluna-motion .motion-reveal:not(.is-revealed) {
  opacity: .2;
  translate: 0 14px;
}
.has-floraluna-motion .motion-reveal.is-revealed,
.has-floraluna-motion .motion-reveal:focus-within {
  opacity: 1;
  translate: 0 0;
}
.motion-toggle {
  position: absolute;
  z-index: 3;
  right: max(24px, 4.7%);
  bottom: 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(226, 195, 148, .36);
  border-radius: 30px;
  color: #efe1c9;
  background: rgba(23, 19, 28, .76);
  font: inherit;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.motion-toggle:hover { background: #2b2230; border-color: #d7b57d; }
.motion-toggle:focus-visible { outline: 2px solid #e6c695; outline-offset: 4px; }
.motion-toggle:disabled { cursor: default; color: #dfd1bb; }
.motion-toggle svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.motion-paused .hero-atmosphere,
.motion-paused .hero-mist,
.motion-paused .hero-content,
.motion-disabled .hero-atmosphere,
.motion-disabled .hero-mist,
.motion-disabled .hero-content { animation-play-state: paused !important; }
.motion-disabled .motion-reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
.motion-disabled .hero-content { animation: none !important; }
.motion-disabled .realm-card,
.motion-disabled .realm-card img,
.motion-disabled .product-photo,
.motion-disabled .product-photo-img { transition: none !important; }
.motion-disabled .realm-card:hover { transform: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .has-floraluna-motion:not(.motion-disabled) .realm-card img,
  .has-floraluna-motion:not(.motion-disabled) .product-photo-img {
    transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
  }
  .has-floraluna-motion:not(.motion-disabled) .realm-card:hover img,
  .has-floraluna-motion:not(.motion-disabled) .product-photo-button:hover .product-photo-img {
    transform: scale(1.025);
  }
}
@keyframes floraluna-landscape {
  from { transform: scale(1.025) translate3d(-.25%, 0, 0); }
  to { transform: scale(1.045) translate3d(.25%, -.3%, 0); }
}
@keyframes floraluna-mist {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(3%, -2%, 0); }
}
@keyframes floraluna-arrive {
  from { transform: translate3d(0, 7px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 600px) {
  .motion-toggle { right: 18px; bottom: 14px; padding: 10px; }
  .motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .motion-toggle svg { width: 21px; height: 21px; flex-basis: 21px; }
  .hero-mist { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .has-floraluna-motion .hero-atmosphere,
  .has-floraluna-motion .hero-content,
  .hero-mist { animation: none !important; transform: none !important; }
  .hero-mist { display: none; }
  .has-floraluna-motion .motion-reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
  .has-floraluna-motion .realm-card:hover { transform: none; }
}