/* Movimiento breve y accesible; las ilustraciones conservan su posición. */
:root {
  --motion-fast: 140ms;
  --motion-enter: 260ms;
  --motion-ease: cubic-bezier(.2, .7, .25, 1);
}

/* El foco permanece visible incluso durante una transición de pantalla. */
:where(button, a, input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid var(--accent, #8de5ff);
  outline-offset: 4px;
}

:where(.btn, .home-text-action, .btn-link-reset, .modal-close) {
  touch-action: manipulation;
}

:where(.account-auth-card, .modal-card, .panel-box, .control-sidebar) {
  scroll-margin-block: 24px;
}

:where(.modal-card, .term-wrap, .bots-list-container, .cosmetics-grid) {
  overscroll-behavior: contain;
}

/* Evita que los antiguos efectos de inclinación alteren controles o texto. */
:where([data-tilt-3d], .holo-3d-card, .cosmetic-item, .pro-unlock-card,
  .trial-timer-box, .stage-3d-card, .floating-slot) {
  transform: none !important;
  perspective: none !important;
}

:where(.hero-art-figure, .hero-art-figure-main, .stage-3d-character-layer,
  #stage3DCharacterLayer, .onboarding-art-scene > img) {
  animation: none !important;
}

:where(.tilt-glare, .holo-glare, .ambient-gold-sparks-layer) {
  display: none !important;
  pointer-events: none;
}

/* Cada pantalla entra una vez. No se anima el panel al recibir datos. */
@media (prefers-reduced-motion: no-preference) {
  .step-screen.active > .step-stage-box,
  #view-auth.active > .account-auth-card {
    animation: interface-enter var(--motion-enter) var(--motion-ease) both;
  }

  .modal-backdrop:not(.hidden) > .modal-card {
    animation: interface-enter 200ms var(--motion-ease) both;
  }

  .toast {
    animation: notice-enter 180ms var(--motion-ease) both;
  }

  /* La entrada de la pantalla ya engloba su arte; evita retrasos en cascada. */
  .step-screen.active :is(.hero-art-display, .onboarding-art-card) {
    animation: none;
  }

  .btn:not(:disabled):not([aria-busy="true"]) {
    transition: transform var(--motion-fast) var(--motion-ease);
  }

  .btn:not(:disabled):not([aria-busy="true"]):active {
    transform: translateY(1px);
  }

  .switch-track::after {
    transition: transform 160ms var(--motion-ease);
  }
}

@keyframes interface-enter {
  from { opacity: .5; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes notice-enter {
  from { opacity: .5; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sin rotaciones, desplazamientos automáticos ni destellos en accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  html, :where(.panel-subtabs, .bots-list-container, .cosmetics-grid) {
    scroll-behavior: auto !important;
    scroll-snap-type: none;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  :where(.hero-art-figure, #stage3DCharacterLayer, .emote-bounce, .btn:active) {
    transform: none !important;
  }

  /* Los indicadores mantienen su forma, sin girar. */
  :where(.btn[data-loading="true"], .checkout-feedback[data-state="loading"],
    .checkout-feedback[data-state="redirecting"], .ui-list-state.is-loading)::before {
    border-right-color: currentColor;
    border-style: dotted;
  }
}

@media (forced-colors: active) {
  :where(.btn, .form-input, .form-select, .holo-3d-card, .cosmetic-item,
    .bot-list-item, .setting-switch .switch-track) {
    border: 1px solid ButtonText;
  }

  :where(.holo-3d-card.selected, .cosmetic-item.selected, .bot-list-item.active) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  :where(.btn, a, input, select, textarea, [tabindex="0"]):focus-visible {
    outline-color: Highlight;
  }

  .setting-switch > input:checked + .switch-track::after {
    background: Highlight;
  }
}