/* Motion is optional; native scrolling, links and content work without JS. */
html.has-hero-sequence { overflow-anchor: none; }
.hero-scroll-stage { overflow-anchor: none; }
.hero-scroll-stage.has-pinned-hero { height: calc(var(--hero-scene-height) + var(--hero-scroll-distance)); }
.hero-scroll-stage.has-pinned-hero > .hero { position: sticky; top: var(--hero-pin-top, 0px); }
.hero-photo.has-scroll-photo .hero-slide {
  opacity: var(--slide-opacity, 0);
  transform: translate3d(var(--slide-x, 0px), var(--slide-y, 0px), 0) scale(var(--slide-scale, 1));
  transform-origin: 50% 54%;
}
.hero-photo.has-scroll-photo .hero-slide:first-child { opacity: var(--slide-opacity, 1); }
html[data-motion='running'] .hero.motion-in-view .hero-slide.is-exposed { will-change: transform, opacity; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 6px; background: transparent; color: inherit; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.motion-toggle-icon { position: relative; width: 10px; height: 10px; flex: 0 0 10px; }
.motion-toggle-icon::before, .motion-toggle-icon::after { content: ''; position: absolute; top: 0; width: 2px; height: 10px; background: currentColor; }
.motion-toggle-icon::before { left: 1px; }
.motion-toggle-icon::after { right: 1px; }
.motion-toggle[aria-pressed='true'] .motion-toggle-icon::before { width: 0; height: 0; background: none; border-block: 5px solid transparent; border-left: 8px solid currentColor; }
.motion-toggle[aria-pressed='true'] .motion-toggle-icon::after { display: none; }
.faq-list details { overflow-anchor: none; }
.faq-list details.is-animating { overflow: hidden; }
.faq-list details[data-expanded='false'] summary > span::after { transform: rotate(90deg); }
.faq-list details[data-expanded='true'] summary > span::after { transform: rotate(0); }
@media (prefers-reduced-motion: no-preference) {
  html[data-motion='running'] { scroll-behavior: smooth; }
  html[data-motion='running'] .motion-waiting { opacity: 0; }
  html[data-motion='running'] .motion-waiting:focus-within { opacity: 1; }
  html[data-motion='running'] .button,
  html[data-motion='running'] .detail-link,
  html[data-motion='running'] .flavour-index a,
  html[data-motion='running'] .header-shop { transition: background .25s, color .25s, border-color .25s; }
  html[data-motion='running'] .button .arrow,
  html[data-motion='running'] .image-action { transition: transform .5s var(--ease), background .3s, color .3s; }
  html[data-motion='running'] .product-image > img { transition: transform 1s var(--ease); }
  html[data-motion='running'] .desktop-nav a::after { transition: transform .35s var(--ease); }
  html[data-motion='running'] .menu-toggle span { transition: transform .25s var(--ease); }
  html[data-motion='running'] .mobile-nav:not([hidden]) { animation: surface-arrival .25s var(--ease) both; }
  html[data-motion='running'] .product-dialog[open] { animation: surface-arrival .3s var(--ease) both; }
  html[data-motion='running'] .product-dialog[open]::backdrop { animation: fade-arrival .25s ease-out both; }
  html[data-motion='running'] .product-dialog.is-closing::backdrop { animation: fade-arrival .16s ease-in reverse both; }
  html[data-motion='running'] .hero-photo { animation: fade-arrival 1.2s var(--ease) both; }
  html[data-motion='running'] .hero.motion-in-view .scroll-link > span:first-child { animation: scroll-cue 2.8s ease-in-out infinite; }
  html[data-motion='running'] .gift-image.motion-in-view > img { animation: gift-drift 20s ease-in-out infinite alternate; }
  html[data-motion='running'] .faq-list summary > span::after { transition: transform .25s var(--ease); }
  html[data-motion='running'] .mobile-shop { transition: opacity .25s, transform .35s var(--ease), visibility .25s; opacity: 0; transform: translateY(18px); }
  html[data-motion='running'] .mobile-shop.is-visible { opacity: 1; transform: none; }
  @media (hover: hover) and (pointer: fine) {
    html[data-motion='running'] .button:hover .arrow { transform: rotate(45deg); }
    html[data-motion='running'] .product-image:hover .image-action { transform: rotate(45deg); }
  }
}
html[data-suspended='true'] *, html[data-suspended='true'] *::before, html[data-suspended='true'] *::after { animation-play-state: paused !important; }
@keyframes surface-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-arrival { from { opacity: 0; } to { opacity: 1; } }
@keyframes scroll-cue { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@keyframes gift-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .motion-waiting { opacity: 1 !important; }
}
@media print { .motion-waiting { opacity: 1 !important; } }