/*
 * Sim Village Cooking motion system
 *
 * This file is loaded last in both the React preview and WordPress. It only
 * normalizes interaction timing; component layout and visual styling remain
 * in their existing stylesheets so this layer can be removed cleanly.
 */

:root {
  --motion-touch: 140ms;
  --motion-control: 180ms;
  --motion-fade: 220ms;
  --motion-card: 260ms;
  --motion-dialog: 280ms;
  --motion-notice: 320ms;
  --motion-ease-control: cubic-bezier(0.2, 0.65, 0.25, 1);
  --motion-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Buttons and links should acknowledge an action immediately and uniformly. */
:where(a, button, .button, summary, [role="button"]),
:where(a, button, .button, summary, [role="button"]) *:not(img):not(picture):not(video):not(iframe) {
  transition-duration: var(--motion-control) !important;
  transition-delay: 0ms !important;
  transition-timing-function: var(--motion-ease-control) !important;
}

/* Cards use a slightly calmer response than compact controls. */
.card-image {
  transition-duration: var(--motion-card) !important;
  transition-timing-function: var(--motion-ease-enter) !important;
}

.short-card {
  transition:
    transform var(--motion-card) var(--motion-ease-enter),
    border-color var(--motion-fade) ease,
    box-shadow var(--motion-fade) ease !important;
}

.short-card::after {
  transition: opacity var(--motion-card) var(--motion-ease-enter) !important;
}

.short-card-play {
  transition:
    transform var(--motion-card) var(--motion-ease-enter),
    background-color var(--motion-card) var(--motion-ease-enter) !important;
}

/* Every overlay fades in with the same timing; dialogs share one gentle rise. */
@keyframes sim-motion-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sim-motion-dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-modal-backdrop,
.shorts-modal-backdrop,
.consent-modal {
  animation: sim-motion-backdrop-in var(--motion-fade) ease-out both !important;
}

.auth-dialog,
.shorts-dialog,
.consent-dialog {
  animation: sim-motion-dialog-in var(--motion-dialog) var(--motion-ease-enter) both !important;
}

/* Navigation, authentication tabs and notices use the same shared rhythm. */
.mobile-menu-backdrop {
  transition: opacity var(--motion-fade) ease !important;
}

.mobile-menu-sheet {
  transition:
    transform var(--motion-dialog) var(--motion-ease-enter),
    opacity var(--motion-fade) ease !important;
}

.auth-tabs::before {
  transition: transform var(--motion-card) var(--motion-ease-enter) !important;
}

.login-required-notice {
  transition:
    transform var(--motion-notice) var(--motion-ease-enter),
    opacity var(--motion-fade) ease,
    visibility 0s linear var(--motion-notice) !important;
}

.login-required-notice.is-visible {
  transition-delay: 0s !important;
}

/* Touch devices need an even quicker response and must not depend on hover. */
@media (any-pointer: coarse), (hover: none) {
  :where(a, button, .button, summary, [role="button"]),
  :where(a, button, .button, summary, [role="button"]) *:not(img):not(picture):not(video):not(iframe) {
    transition-duration: var(--motion-touch) !important;
  }

  .short-card {
    transition-duration: var(--motion-touch) !important;
  }
}

/* Accessibility: honor the visitor's reduced-motion operating-system setting. */
@media (prefers-reduced-motion: reduce) {
  .auth-modal-backdrop,
  .shorts-modal-backdrop,
  .consent-modal,
  .auth-dialog,
  .shorts-dialog,
  .consent-dialog {
    animation: none !important;
  }

  :where(a, button, .button, summary, [role="button"]),
  :where(a, button, .button, summary, [role="button"]) *:not(img):not(picture):not(video):not(iframe),
  .card-image,
  .short-card,
  .short-card::after,
  .short-card-play,
  .mobile-menu-backdrop,
  .mobile-menu-sheet,
  .auth-tabs::before,
  .login-required-notice {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}