/* LUMAA motion: subtle entrance, tactile feedback, and a quiet living mascot.
   Only transform/opacity animate continuously; no layout or progress simulation. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header { animation: lumaa-arrive 550ms var(--motion-ease) both; }
  .hero-copy { animation: lumaa-arrive 650ms 65ms var(--motion-ease) both; }
  .hero-art { animation: lumaa-appear 800ms 100ms ease-out both; }
  .composer-wrap { animation: lumaa-arrive 650ms 140ms var(--motion-ease) both; }
  .inspiration { animation: lumaa-arrive 600ms 210ms var(--motion-ease) both; }
  .section-heading { animation: lumaa-arrive 600ms 260ms var(--motion-ease) both; }
  footer { animation: lumaa-appear 800ms 300ms ease-out both; }

  .mascot-crop { animation: lumaa-float 6s 900ms ease-in-out infinite; }
  .art-dot.one { animation: lumaa-twinkle 5s ease-in-out infinite; }
  .art-dot.two { animation: lumaa-twinkle 6s 1.6s ease-in-out infinite; }
  .art-note { animation: lumaa-note 7s 1s ease-in-out infinite; }
  .brand-icon { transition: rotate 350ms var(--motion-ease); }
  .brand:hover .brand-icon { rotate: 9deg; }
  .hero h1 i { animation: lumaa-twinkle 7s 2s ease-in-out infinite; }

  button, a.primary {
    transition: background-color var(--motion-fast) ease,
      color var(--motion-fast) ease, border-color var(--motion-fast) ease,
      box-shadow 220ms ease, translate 220ms var(--motion-ease),
      scale var(--motion-fast) var(--motion-ease);
  }
  button:not(:disabled):active, a.primary:active { scale: .97; }
  .composer, .field input, .field textarea, .search-input, .password-wrap {
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }
  .order-card {
    transition: transform 280ms var(--motion-ease), box-shadow 280ms ease,
      border-color 280ms ease;
  }
  .order-thumb img { transition: transform 550ms var(--motion-ease); }
  .pill-plus { transition: rotate 280ms var(--motion-ease); }
  .wallet-pill:hover .pill-plus { rotate: 90deg; }
  .plan { transition: border-color 200ms ease, background-color 200ms ease, translate 220ms ease; }
  .plan.selected { box-shadow: 0 5px 18px #7650b210; }
  .status { transition: color 220ms ease, background-color 220ms ease; }

  dialog[open] { animation: lumaa-dialog 280ms var(--motion-ease) both; }
  dialog[open]::backdrop { animation: lumaa-appear 180ms ease-out both; }
  .toast:not([hidden]) { animation: lumaa-toast 280ms var(--motion-ease) both; }
  .chip { animation: lumaa-arrive 240ms var(--motion-ease) both; }
  @media (hover: hover) and (pointer: fine) {
    .primary:not(:disabled):hover { translate: 0 -2px; box-shadow: 0 7px 18px #7650b227; }
    .secondary:hover, .tool-button:hover, .inspiration button:hover,
    .service-item:hover, .plan:hover { translate: 0 -2px; }
    .order-card:hover { box-shadow: 0 9px 25px #60417b12; border-color: #d5c3e7; }
    .order-card:hover .order-thumb img { transform: scale(1.025); }
    .avatar:hover { box-shadow: 0 0 0 3px #e7d9f4; }
  }
  @media (max-width: 480px) {
    dialog[open] { animation-name: lumaa-sheet; }
  }
}
@keyframes lumaa-arrive {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes lumaa-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes lumaa-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -7px; rotate: -1.5deg; }
}
@keyframes lumaa-twinkle {
  0%, 100% { opacity: .75; scale: .95; }
  50% { opacity: 1; scale: 1.07; }
}
@keyframes lumaa-note { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@keyframes lumaa-dialog {
  from { opacity: 0; translate: 0 8px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes lumaa-sheet {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes lumaa-toast {
  from { opacity: 0; translate: 0 7px; }
  to { opacity: 1; translate: 0 0; }
}
/* Accessibility applies to CSS and JS motion, including changes made mid-session. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}