/* Glacée motion: no frame loops, layout animation or permanent GPU promotion. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-press: 140ms;
  --motion-dialog: 240ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* Let the product paint immediately. The reflection is purely decorative. */
  .hero-copy {
    animation: glacee-intro 380ms var(--ease-out);
  }

  .hero-image::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: -8% 0;
    background: linear-gradient(113deg, transparent 32%, #fff9df7a 49%, transparent 63%);
    opacity: 0;
    pointer-events: none;
    animation: glass-reflection 760ms var(--ease-out) 170ms both;
  }

  @keyframes glacee-intro {
    from { transform: translateY(8px); }
    to { transform: translateY(0); }
  }

  @keyframes glass-reflection {
    0% { opacity: 0; transform: translateX(-55%); }
    28% { opacity: .55; }
    100% { opacity: 0; transform: translateX(55%); }
  }

  .is-playing .cake-frame {
    animation: cake-placement 480ms steps(1, end) both;
  }
  .is-playing .cake-tier { animation-delay: 330ms; }
  .is-playing .cake-candle { animation-delay: 660ms; }
  .is-playing .cake-finish { animation-delay: 960ms; }

  @keyframes cake-placement {
    0% { opacity: 0; transform: translateY(-12px); }
    24% { opacity: 1; transform: translateY(-9px); }
    47% { transform: translateY(-3px); }
    70% { transform: translateY(2px); }
    100% { transform: translateY(0); }
  }

  html[data-input="pointer"] .date-panel:not([hidden]) {
    animation: date-panel-in 165ms var(--ease-out);
  }
  @keyframes date-panel-in {
    from { opacity: .65; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .button, .product-add, .bag, .quantity button, .dialog-head > button {
    transition: transform var(--motion-press) var(--ease-out);
  }
  .button > span[aria-hidden] {
    display: inline-block;
    transition: transform 180ms var(--ease-out);
  }
  .product-add:not([aria-disabled='true']):active, .bag:active,
  .quantity button:not(:disabled):active, .dialog-head > button:active {
    transform: scale(.97);
  }
  .toast {
    transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out);
  }

  /* Native dialogs preserve focus trapping and Escape behavior.
     Discrete transitions retain the top layer until the exit finishes.
     Unsupported browsers simply use the existing immediate close. */
  @supports (transition-behavior: allow-discrete) {
    dialog {
      opacity: 0;
      transform: translateY(10px) scale(.98);
      transition: opacity 160ms var(--ease-out),
        transform 160ms var(--ease-out),
        display 160ms allow-discrete, overlay 160ms allow-discrete;
    }
    dialog[open] {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition-duration: var(--motion-dialog);
    }
    dialog::backdrop {
      opacity: 0;
      /* Avoid recomputing a full-screen backdrop blur during motion. */
      backdrop-filter: none;
      transition: opacity 160ms var(--ease-out),
        display 160ms allow-discrete, overlay 160ms allow-discrete;
    }
    dialog[open]::backdrop { opacity: 1; }
    @starting-style {
      dialog[open] { opacity: 0; transform: translateY(10px) scale(.98); }
      dialog[open]::backdrop { opacity: 0; }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .button:hover > span[aria-hidden] { transform: translate(2px, -2px); }
  }

  html[data-input="keyboard"] dialog,
  html[data-input="keyboard"] dialog::backdrop,
  html[data-input="keyboard"] .toast,
  html[data-input="keyboard"] button,
  html[data-input="keyboard"] .button {
    transition: none;
  }
  html[data-input="keyboard"] { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}