/* One motion rhythm across the site, with transforms confined to their own layers. */
:root {
  --motion-fast: 180ms;
  --motion-ui: 320ms;
  --motion-scene: 700ms;
  --motion-ease: cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-disabled) :is(.button,.studio-partner-link,.studio-location-link,.studio-browse-link,.studio-directory-back,.work-show-all,.work-collapse,.client-channel,.filter,.theme-toggle,.language-toggle,.menu-toggle) {
    transition: color var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-ui),transform var(--motion-ui) var(--motion-ease),translate var(--motion-ui) var(--motion-ease),scale var(--motion-fast) var(--motion-ease);
  }
  html:not(.motion-disabled) :is(.button,.studio-partner-link,.studio-location-link,.studio-browse-link,.work-show-all,.work-collapse,.filter,.theme-toggle,.language-toggle,.menu-toggle):active {
    scale: .97;
  }
  html:not(.motion-disabled) :is(.service,.client-card,.packages-grid .package,.studio-partner-card) {
    transition: transform 480ms var(--motion-ease),border-color var(--motion-ui),box-shadow 480ms var(--motion-ease),background var(--motion-ui);
  }
  html:not(.motion-disabled) :is(.contact-title-arrow,.studio-link-arrow,.studio-location-link > span[aria-hidden],.studio-browse-link svg,.studio-directory-back svg) {
    transition: translate 450ms var(--motion-ease);
  }
  html:not(.motion-disabled) .steps li > div {
    transition: translate 450ms var(--motion-ease);
  }
  html:not(.motion-disabled) .faq-list summary {
    transition: color var(--motion-fast),background var(--motion-ui);
  }
  html:not(.motion-disabled) .contact-form :is(input,select,textarea) {
    transition: border-color var(--motion-fast),box-shadow var(--motion-ui),background var(--motion-ui);
  }
  html:not(.motion-disabled) .th-preview-window {
    animation: platform-drift 7s ease-in-out infinite paused;
  }
  html:not(.motion-disabled) .th-qr-card { animation: platform-drift 6500ms ease-in-out -2200ms infinite reverse paused; }
  /* The frame floats on its own layer, inside the art's entrance animation. */
  html:not(.motion-disabled) .studio-frame { animation: studio-float 6s ease-in-out infinite paused; }
  html:not(.motion-disabled) .studio-light { animation: studio-light 7s ease-in-out infinite paused; }
  html:not(.motion-disabled) .studio-wave i { animation: studio-wave 1300ms ease-in-out infinite paused; transform-origin: center; }
  html:not(.motion-disabled) .studio-wave i:nth-child(2n) { animation-duration: 1050ms; animation-delay: -350ms; }
  html:not(.motion-disabled) .studio-wave i:nth-child(3n) { animation-duration: 1600ms; animation-delay: -900ms; }
  html:not(.motion-disabled) .studio-wave i:nth-child(5n) { animation-duration: 1450ms; animation-delay: -650ms; }
  html:not(.motion-disabled) .studio-record { animation: studio-record 2200ms ease-in-out infinite paused; }
  html:not(.motion-disabled) .motion-in-view :is(.th-preview-window,.th-qr-card,.studio-frame,.studio-light,.studio-wave i,.studio-record) { animation-play-state: running; }
  html.motion-paused :is(.th-preview-window,.th-qr-card,.studio-frame,.studio-light,.studio-wave i,.studio-record,.art-orbit) { animation-play-state: paused !important; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-disabled) :is(.service,.client-card,.packages-grid .package):hover {
    border-color: var(--blue);
    box-shadow: 0 18px 38px -22px #10223e55;
  }
  html:not(.motion-disabled) :is(.service,.packages-grid .package):hover { transform: translateY(-5px); }
  html[data-theme="dark"]:not(.motion-disabled) :is(.service,.client-card,.packages-grid .package):hover { box-shadow: 0 18px 38px -22px #0009; }
  /* Keep the carousel lift separate from the more specific package selector. */
  html:not(.motion-disabled) .client-card:hover { transform: translateY(-3px); }
  html:not(.motion-disabled) :is(.studio-partner-link,.studio-location-link,.studio-browse-link,.work-show-all,.work-collapse):hover { translate: 0 -2px; }
  html:not(.motion-disabled) .studio-partner-link:hover .studio-link-arrow { translate: -3px -3px; }
  html:not(.motion-disabled) .studio-location-link:hover > span[aria-hidden] { translate: -3px -3px; }
  html:not(.motion-disabled) .contact-copy:hover .contact-title-arrow { translate: -4px -4px; }
  html[dir="ltr"]:not(.motion-disabled) .contact-copy:hover .contact-title-arrow { translate: 4px -4px; }
  html:not(.motion-disabled) .steps li:hover > div { translate: -4px 0; }
  html[dir="ltr"]:not(.motion-disabled) .steps li:hover > div { translate: 4px 0; }
  html:not(.motion-disabled) .studio-directory-back:hover svg { translate: 4px 0; }
  html[dir="ltr"]:not(.motion-disabled) .studio-directory-back:hover svg { translate: -4px 0; }
}

@keyframes platform-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 var(--platform-drift,-9px); } }
@keyframes studio-float {
  0%,100% { transform: translate3d(0,0,0) rotate(-5deg); }
  50% { transform: translate3d(3px,-12px,0) rotate(-2.5deg); }
}
@keyframes studio-light {
  0%,100% { opacity: .6; transform: translate3d(-8px,4px,0) scale(.94); }
  50% { opacity: 1; transform: translate3d(8px,-4px,0) scale(1.06); }
}
@keyframes studio-wave {
  0%,100% { transform: scaleY(.35); }
  25% { transform: scaleY(1); }
  55% { transform: scaleY(.5); }
  75% { transform: scaleY(.85); }
}
@keyframes studio-record {
  0%,100% { opacity: .55; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 650px), (hover: none) {
  .th-preview-window,.th-qr-card { --platform-drift: -5px; }
  html:not(.motion-disabled) :is(.service,.client-card,.package):hover { transform: none; }
}
/* All content stays readable in print, when motion is disabled, or without JS. */
html.motion-disabled *, html.motion-disabled *::before, html.motion-disabled *::after { animation: none !important; transition: none !important; }
html.motion-disabled .motion-pending { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .motion-pending { opacity: 1; }
  .th-preview-window,.th-qr-card,.studio-frame,.studio-light,.studio-wave i,.studio-record { animation: none !important; }
}
@media print {
  .motion-pending,.work-reveal-pending { opacity: 1 !important; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}