/* Royal Skate motion layer. Load after glow.css; motion.js enables progressive effects. */
.motion-ready .royal-store {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-spring: cubic-bezier(.2, 1.35, .45, 1);
}
.motion-ready.route-loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 38%;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #3458ed, #7b5cff, #2fd6ff, transparent);
  box-shadow: 0 0 12px #7b5cff80;
  animation: royal-route-progress 1100ms ease-in-out infinite;
}
@keyframes royal-route-progress {
  from { transform: translateX(-110%) scaleX(.6); }
  to { transform: translateX(370%) scaleX(1.2); }
}

/* Every route arrives with a directional sweep. Backwards fill releases all
   animation effects afterward so fixed children retain their viewport anchor. */
.motion-ready .royal-store .view {
  animation: royal-route-in 650ms var(--motion-ease) backwards;
}
.motion-ready .royal-store .view.view-leaving {
  animation: royal-route-out 180ms cubic-bezier(.55, 0, 1, .45) both;
  pointer-events: none;
}
@keyframes royal-route-in {
  from { opacity: 0; transform: translate3d(var(--route-shift, 48px), 28px, 0) scale(.965); }
  65% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes royal-route-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(calc(var(--route-shift, 48px) * -.55), -14px, 0) scale(.98); }
}

/* Independent translate/scale leave the card's transform available for pointer tilt. */
.motion-ready .royal-store .motion-reveal:not(.motion-visible) {
  opacity: 0;
  translate: 0 54px;
  scale: .95;
  animation: none;
}
.motion-ready .royal-store .motion-reveal.motion-visible {
  opacity: 1;
  translate: none;
  scale: none;
  animation: royal-reveal 820ms var(--motion-ease) var(--motion-delay, 0ms) backwards;
}
@keyframes royal-reveal {
  from { opacity: 0; translate: 0 54px; scale: .95; }
  68% { opacity: 1; }
  to { opacity: 1; translate: none; scale: none; }
}

/* The hero has a larger entrance and a floating, layered product composition. */
.motion-ready .royal-store .hs { transition: opacity 850ms var(--motion-ease), visibility 850ms; }
.motion-ready .royal-store .hs-copy > * {
  transform: translate3d(0, 48px, 0) rotate(1.5deg);
  transition: opacity 700ms var(--motion-ease), transform 1000ms var(--motion-ease);
}
.motion-ready .royal-store .hs.is-active .hs-copy > * { transform: none; }
.motion-ready .royal-store .hs.is-active .hs-copy > :nth-child(2) { transition-delay: 100ms; }
.motion-ready .royal-store .hs.is-active .hs-copy > :nth-child(3) { transition-delay: 190ms; }
.motion-ready .royal-store .hs.is-active .hs-copy > :nth-child(4) { transition-delay: 280ms; }
.motion-ready .royal-store .hs-visual {
  transform: translate3d(calc(var(--px, 0) * -34px), calc(var(--py, 0) * -24px), 0);
  transition: transform 850ms var(--motion-ease);
}
.motion-ready .royal-store .photo {
  transform: perspective(900px) rotateY(-22deg) rotate(-12deg) scale(.76) translateY(56px);
  transition: opacity 900ms var(--motion-ease), transform 1300ms var(--motion-ease);
  animation: royal-photo-float 6s ease-in-out infinite;
}
.motion-ready .royal-store .hs.is-active .photo { transform: rotate(-4deg); }
.motion-ready .royal-store .hs.is-custom.is-active .photo { transform: none; }
.motion-ready .royal-store .chip {
  transform: translateY(38px) rotate(-8deg) scale(.72);
  transition: opacity 700ms var(--motion-ease), transform 1000ms var(--motion-spring);
  animation: royal-chip-float 5s ease-in-out infinite;
}
.motion-ready .royal-store .hs.is-active .chip { transform: none; }
.motion-ready .royal-store .chip-1 { animation-delay: -1.8s; }
.motion-ready .royal-store .chip-2 { animation-delay: -3.3s; }
.motion-ready .royal-store .hero-grid { animation: royal-grid-drift 14s ease-in-out infinite alternate; }
.motion-ready .royal-store .halo { animation: royal-halo-breathe 5s ease-in-out infinite; }
.motion-ready .royal-store .hs:not(.is-active) :is(.photo, .chip, .halo),
.motion-ready .royal-store .hero.is-paused :is(.photo, .chip, .halo, .hero-grid, .hero-bg i) {
  animation-play-state: paused;
}
@keyframes royal-photo-float {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 7px -24px; rotate: 2deg; }
}
@keyframes royal-chip-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: -5px -16px; rotate: -3deg; }
}
@keyframes royal-grid-drift {
  from { transform: scale(1.06) translate3d(-10px, -8px, 0); opacity: .6; }
  to { transform: scale(1.06) translate3d(10px, 8px, 0); opacity: 1; }
}
@keyframes royal-halo-breathe {
  0%, 100% { transform: scale(.94); opacity: .72; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* Interactive surfaces: lift and 3D tilt only where a real hover pointer exists. */
.motion-ready .royal-store :is(.pc, .pcat, .feat) {
  transition: transform 650ms var(--motion-ease), box-shadow 650ms var(--motion-ease), background 300ms;
}
.motion-ready .royal-store :is(.pc .im img, .cat-im img) {
  transition: transform 900ms var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .motion-ready .royal-store .motion-tilt:hover {
    transform: perspective(900px) translateY(-12px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.02);
    transition: transform 180ms ease-out, box-shadow 500ms var(--motion-ease), background 300ms;
    box-shadow: 0 34px 60px -28px #3458ed66, 0 12px 24px -20px #7b5cff70;
  }
  .motion-ready .royal-store .pc:hover .im img { transform: scale(1.13) rotate(-3deg); }
  .motion-ready .royal-store .pcat:hover .cat-im img { transform: scale(1.2) rotate(-10deg); }
  .motion-ready .royal-store .pcat:hover .cat-go { transform: translateX(-7px) rotate(-8deg); }
  [dir=ltr].motion-ready .royal-store .pcat:hover .cat-go { transform: translateX(7px) rotate(8deg); }
  .motion-ready .royal-store .feat:hover .feat-ic { transform: translateY(-5px) rotate(-9deg) scale(1.1); }
  .motion-ready .royal-store :is(.btn, .cta, .cta-ghost, .more):not(:disabled):hover {
    translate: 0 -4px;
    box-shadow: 0 16px 32px -14px #3458ed80;
  }
  .motion-ready .royal-store .footer a:hover { translate: -4px 0; }
  [dir=ltr].motion-ready .royal-store .footer a:hover { translate: 4px 0; }
}

.motion-ready .royal-store :is(.btn, .cta, .cta-ghost, .more, .pill, .hero-btn, .hbtn, .stepper button, .qty button) {
  transition: translate 350ms var(--motion-spring), scale 250ms var(--motion-spring), box-shadow 350ms, background 300ms, color 300ms, border-color 300ms, transform 350ms var(--motion-spring);
}
.motion-ready .royal-store :is(.btn, .cta, .cta-ghost, .more, .pill, .hero-btn, .hbtn, .stepper button, .qty button):not(:disabled):active {
  translate: 0 1px;
  scale: .9;
}
.motion-ready .royal-store .feat-ic { transition: transform 650ms var(--motion-spring); }
.motion-ready .royal-store .footer a { transition: color 250ms, background 250ms, translate 400ms var(--motion-ease); }
.motion-ready .royal-store .motion-ripple-host { position: relative; overflow: clip; isolation: isolate; }
.motion-ready .royal-store .motion-ripple {
  position: absolute;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  width: var(--ripple-size, 160px);
  height: var(--ripple-size, 160px);
  border-radius: 50%;
  background: radial-gradient(circle, #91b9ff70 0%, #ad94ff4d 42%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: royal-ripple 700ms var(--motion-ease) both;
}
@keyframes royal-ripple {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Navigation receives immediate tactile feedback and a bounce on the active icon. */
.motion-ready .royal-store :is(.nav a, .bottomnav a, .bottomnav button) {
  transition: color 300ms, background 300ms, scale 300ms var(--motion-spring), translate 350ms var(--motion-spring);
}
.motion-ready .royal-store :is(.nav a, .bottomnav a, .bottomnav button):active { scale: .88; }
.motion-ready .royal-store .nav a.on { animation: royal-nav-select 550ms var(--motion-spring); }
.motion-ready .royal-store .bottomnav .on > .i { animation: royal-nav-icon 650ms var(--motion-spring); }
.motion-ready .royal-store .bottomnav .on { background: #3458ed0b; }
.motion-ready .royal-store .cnt.bump { animation: royal-count-pop 600ms var(--motion-spring); }
@keyframes royal-nav-select {
  from { scale: .86; translate: 0 6px; }
  to { scale: 1; translate: none; }
}
@keyframes royal-nav-icon {
  0% { transform: translateY(5px) scale(.7) rotate(-18deg); }
  55% { transform: translateY(-6px) scale(1.18) rotate(7deg); }
  100% { transform: none; }
}
@keyframes royal-count-pop {
  0% { transform: scale(.45) rotate(-16deg); }
  55% { transform: scale(1.4) rotate(8deg); }
  100% { transform: none; }
}

/* Cart keeps its open/closed transform contract; children enter in a short cascade. */
.motion-ready .royal-store .cart-drawer { transition: transform 700ms var(--motion-ease); }
.motion-ready .royal-store .cart-ov { transition: opacity 500ms var(--motion-ease); }
.motion-ready .royal-store .cart-drawer.open > .hd { animation: royal-panel-content 650ms var(--motion-ease) 100ms backwards; }
.motion-ready .royal-store .cart-drawer.open > .free { animation: royal-panel-content 650ms var(--motion-ease) 150ms backwards; }
.motion-ready .royal-store .cart-drawer.open > .bd2 { animation: royal-panel-content 700ms var(--motion-ease) 190ms backwards; }
.motion-ready .royal-store .cart-drawer.open > .ft { animation: royal-panel-content 700ms var(--motion-ease) 240ms backwards; }
.motion-ready .royal-store .drawer:not(.cart-drawer) { animation: royal-drawer-in 650ms var(--motion-ease) both; --drawer-shift: -100%; }
[dir=ltr].motion-ready .royal-store .drawer:not(.cart-drawer) { --drawer-shift: 100%; }
.motion-ready .royal-store .modal { animation: royal-sheet-in 650ms var(--motion-ease) both; }
.motion-ready .royal-store .modal.motion-closing { animation: royal-sheet-out 180ms ease-in both; pointer-events: none; }
.motion-ready .royal-store .overlay.motion-closing { animation: royal-overlay-out 180ms ease-in both; pointer-events: none; }
.motion-ready .royal-store .toast { animation: royal-toast-in 600ms var(--motion-spring) both; }
.motion-ready .royal-store .acc details[open] > .c { animation: royal-panel-content 500ms var(--motion-ease); }
.motion-ready .royal-store .acc summary .i { transition: transform 500ms var(--motion-spring); }
.motion-ready .royal-store :is(.input, .select, .textarea) { transition: box-shadow 300ms, border-color 300ms, background 300ms; }
.motion-ready .royal-store :is(.input, .select, .textarea):focus { box-shadow: 0 0 0 5px #3458ed14; }
.motion-ready .royal-store .thumbs button { transition: scale 400ms var(--motion-spring), border-color 300ms, box-shadow 300ms; }
.motion-ready .royal-store .thumbs button.on { scale: 1.07; box-shadow: 0 8px 18px -10px #3458ed80; }
.motion-ready .royal-store .motion-image-swap { animation: royal-image-swap 650ms var(--motion-ease); }
.motion-ready .royal-store .lightbox > img { animation: royal-image-swap 650ms var(--motion-ease); }
@keyframes royal-panel-content {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: none; }
}
@keyframes royal-drawer-in {
  from { opacity: .3; transform: translateX(var(--drawer-shift, -100%)); }
  to { opacity: 1; transform: none; }
}
@keyframes royal-sheet-in {
  from { opacity: 0; transform: translateY(90px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes royal-dialog-in {
  from { opacity: 0; transform: translate(-50%, -39%) scale(.86) rotate(-2deg); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes royal-sheet-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(60px) scale(.96); }
}
@keyframes royal-dialog-out {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, -44%) scale(.94); }
}
@keyframes royal-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes royal-toast-in {
  from { opacity: 0; transform: translateY(30px) scale(.8) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes royal-image-swap {
  from { opacity: .3; scale: .92; rotate: -3deg; }
  to { opacity: 1; scale: none; rotate: none; }
}
@media (min-width: 760px) {
  .motion-ready .royal-store .modal { animation-name: royal-dialog-in; }
  .motion-ready .royal-store .modal.motion-closing { animation-name: royal-dialog-out; }
}
@media (max-width: 600px) {
  .motion-ready .royal-store .view { animation-duration: 580ms; }
  .motion-ready .royal-store .view.view-leaving { animation-duration: 180ms; }
  .motion-ready .royal-store .photo { animation-duration: 6.5s; }
  .motion-ready .royal-store .hs-visual { transform: none; }
}

/* Respect reduced motion throughout the entire storefront, including the base
   theme's existing effects. Preserve layout transforms and closed UI states. */
@media (prefers-reduced-motion: reduce) {
  html.route-loading::before { display: none; animation: none; }
  .royal-store,
  .royal-store *,
  .royal-store *::before,
  .royal-store *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .royal-store .view { opacity: 1 !important; transform: none !important; }
  .royal-store .motion-reveal,
  .royal-store .motion-reveal:not(.motion-visible),
  .royal-store [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .royal-store :is(.motion-tilt, .motion-tilt:hover, .hs-visual) { transform: none !important; }
  .royal-store .motion-ripple { display: none; }
  .royal-store :is(.btn, .cta, .cta-ghost, .more, .pill, .hero-btn, .hbtn, .stepper button, .qty button, .nav a, .bottomnav a, .bottomnav button, .footer a, .thumbs button) {
    translate: none !important;
    scale: none !important;
  }
}