/* Subtle depth and entrance motion for the storefront. Layout stays unchanged. */
.motion-enabled .motion-reveal {
  --reveal-y: 16px;
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity 650ms ease,
    transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .motion-reveal.is-visible {
  --reveal-y: 0px;
  opacity: 1;
}
/* A separate visual layer combines automatic floating with pointer depth. */
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled [data-depth="hero"] {
    perspective: 1200px;
    isolation: isolate;
  }
  .motion-enabled [data-depth="hero"]::before {
    content: "";
    position: absolute;
    inset: 4% 8%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 65% 35%, #c4a05925, transparent 55%),
      radial-gradient(ellipse at 45% 80%, #a8d5b526, transparent 50%);
    animation: atelier-aura 12s ease-in-out infinite;
  }
  .motion-enabled .hero-visual {
    transform-style: preserve-3d;
    transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0)
      rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg));
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .motion-enabled .hero-model {
    animation: atelier-hero-float 9s ease-in-out infinite;
    transform-origin: 50% 75%;
    filter: drop-shadow(0 14px 18px #0f20182e);
  }
  .motion-enabled .hero-outline,
  .motion-enabled .hero-tagline {
    transform: translate3d(
      calc(var(--hero-x, 0px) * -0.3),
      calc(var(--hero-y, 0px) * -0.3),
      0
    );
    transition: transform 900ms ease;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .product[data-depth="card"] {
    transform-style: preserve-3d;
    border-radius: 10px;
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg))
      translateY(calc(var(--reveal-y, 0px) + var(--card-lift, 0px)));
    transition:
      opacity 650ms ease,
      transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 450ms ease;
  }
  .motion-enabled .product[data-depth="card"][data-tilting="true"] {
    --card-lift: -5px;
    transition:
      transform 120ms linear,
      box-shadow 450ms ease;
    box-shadow: 0 18px 32px #1a3a2a21;
  }
  .motion-enabled .product[data-depth="card"] .product-image {
    transform: translateZ(14px);
    backface-visibility: hidden;
  }
  .motion-enabled .product[data-depth="card"] .product-info {
    transform: translateZ(8px);
  }
}
@keyframes atelier-hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateY(-1deg) rotateZ(-0.4deg);
  }
  50% {
    transform: translate3d(3px, -10px, 0) rotateY(2deg) rotateZ(0.8deg);
  }
}
@keyframes atelier-hero-float-mobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateY(-0.5deg);
  }
  50% {
    transform: translate3d(0, -4px, 0) rotateY(1deg);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .hero-model {
    animation-name: atelier-hero-float-mobile;
  }
}
@keyframes atelier-aura {
  0%,
  100% {
    opacity: 0.55;
    transform: translate3d(-8px, 0, 0) scale(0.98);
  }
  50% {
    opacity: 0.95;
    transform: translate3d(8px, -6px, 0) scale(1.04);
  }
}
.motion-paused [data-depth="hero"]::before,
.motion-paused .hero-model,
.hero-offscreen::before,
.hero-offscreen .hero-model {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-enabled [data-depth="hero"]::before {
    animation: none;
  }
}