/* Motion layer: entrances, tactile responses and quiet ambient movement. */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }

.ambient-one { animation: ambient-drift 18s ease-in-out infinite alternate; }
.ambient-two { animation: ambient-drift 22s ease-in-out -8s infinite alternate-reverse; }
.access-pass { transition: transform .45s var(--motion-ease), border-color .35s, box-shadow .35s; }
.access-pass::before {
  background: radial-gradient(340px circle at var(--mx, 85%) var(--my, 0%), #dec0ff1a, transparent 80%);
}
.product-symbol { transition: transform .45s var(--motion-ease), box-shadow .45s, border-color .45s; }
.status-pill:not(.waiting):not(.paused)::before { animation: status-breathe 3.6s ease-in-out infinite; }
.mini-pass.back { animation: float 9s ease-in-out -3s infinite reverse; }
.scene-pedestal { animation: pedestal-breathe 8s ease-in-out infinite; }
.brand-symbol { transition: transform .5s var(--motion-ease), box-shadow .5s; }
.brand:hover .brand-symbol { transform: rotate(0deg) translateY(-2px); box-shadow: inset 0 1px #fff3, 0 4px 0 #100b18, 0 12px 28px #a675d730; }
.button { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--motion-ease), background .25s, box-shadow .3s; }
.button.primary::before {
  content: ''; position: absolute; inset: -60% auto -60% -70%; width: 45%;
  transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #fff5, transparent);
  pointer-events: none;
}
.button svg, .text-button svg { transition: transform .35s var(--motion-ease); }
.button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.icon-button, .bonus-tab, .duration-option { transition: background .25s, border-color .25s, transform .25s var(--motion-ease); }
.icon-button:active, .bonus-tab:active { transform: scale(.92); }
.duration-option.selected { animation: selection-settle .3s var(--motion-ease); }
.nav-item::after { transition: transform .35s var(--motion-ease), opacity .35s; }
.nav-item.selected::after { animation: nav-reveal .4s var(--motion-ease); }
.mobile-nav button { transition: color .25s, background .25s, transform .25s; }
.mobile-nav button:active { transform: scale(.94); }
.catalog-card { transition: transform .4s var(--motion-ease), border-color .4s, box-shadow .4s; }

/* Native dialogs retain focus trapping, Escape and inert page behavior. */
.access-panel[open] { animation: drawer-arrive .5s var(--motion-ease); }
.small-dialog[open] { animation: dialog-arrive .4s var(--motion-ease); }
dialog[open]::backdrop { animation: backdrop-arrive .4s ease-out; }
dialog.is-closing::backdrop { animation: backdrop-leave .22s ease-in forwards; }
.code-digits span { animation: digit-arrive .5s var(--motion-ease) both; }
.code-digits span:nth-child(2) { animation-delay: .045s; }
.code-digits span:nth-child(3) { animation-delay: .09s; }
.code-digits span:nth-child(4) { animation-delay: .135s; }
.code-digits span:nth-child(5) { animation-delay: .18s; }
.code-digits span:nth-child(6) { animation-delay: .225s; }
.code-meter i { transition: transform .25s linear; }
.payment-success .round-icon { animation: success-arrive .55s var(--motion-ease); }
.gift-cube { animation: gift-float 5s ease-in-out infinite; }

@media (hover: hover) and (pointer: fine) {
  .access-pass:hover {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
    box-shadow: inset 0 1px #f4d8ff24, 0 4px 0 #0c0812, 0 5px 0 1px #594067, 0 25px 50px #0005;
  }
  .access-pass:hover .product-symbol, .catalog-card:hover .product-symbol {
    transform: translateY(-2px) rotate(-3deg); border-color: #caa5fa60; box-shadow: inset 0 1px #fff2, 0 6px 22px #a675d724;
  }
  .button.primary:hover::before, .button.primary:focus-visible::before { animation: button-sheen .7s ease-out; }
  .button:hover svg, .text-button:hover svg { transform: translateX(3px); }
  .button:hover svg:has(use[href="#diagonal"]), .text-button:hover svg:has(use[href="#diagonal"]) { transform: translate(2px, -2px); }
  .catalog-card:hover { transform: translateY(-5px); border-color: #a07fb6; }
  .concierge:hover .mini-pass.front { rotate: -3deg; }
}
.mini-pass.front { transition: rotate .6s var(--motion-ease); }

@keyframes ambient-drift { to { transform: translate(-35px, 35px) scale(1.06); } }
@keyframes status-breathe { 0%, 100% { box-shadow: 0 0 0 0 #a8d6bd00; } 50% { box-shadow: 0 0 0 4px #a8d6bd12; } }
@keyframes pedestal-breathe { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.85); opacity: .55; } }
@keyframes button-sheen { to { left: 130%; } }
@keyframes selection-settle { from { scale: .98; } to { scale: 1; } }
@keyframes nav-reveal { from { transform: scaleX(.25); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes drawer-arrive { from { opacity: 0; translate: 55px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes dialog-arrive { from { opacity: 0; translate: 0 20px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-leave { to { opacity: 0; } }
@keyframes digit-arrive { from { opacity: 0; translate: 0 10px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes success-arrive { from { opacity: 0; scale: .7; rotate: -15deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes gift-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .access-pass:hover, .catalog-card:hover, .access-pass:hover .product-symbol,
  .catalog-card:hover .product-symbol, .button:hover:not(:disabled), .button:active:not(:disabled) { transform: none; }
}