/* Short, finite motion. Content remains usable with animation disabled. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }

/* Three masked copies assemble centrally, then travel to the real image slot. */
.intro-stage { position: fixed; inset: 0; overflow: hidden; z-index: 20; pointer-events: none; }
.logo-assembly { position: absolute; transform-origin: center; }
.logo-piece, .logo-complete { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-piece-dog { z-index: 1; }
.login-intro .login-art > img { animation: none; opacity: 0; position: relative; z-index: 1; }
.login-intro .login-form, .login-intro .edition { animation: none; visibility: hidden; }
.login-revealed .login-art > img { animation: none; }
.login-revealed .login-form, .login-revealed .edition { animation-delay: 0ms; }

@keyframes arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logo-arrive {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dialog-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes number-celebrate {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.1); }
}
@keyframes success-highlight {
  from { border-color: var(--accent); background-color: #143422; }
  to { border-color: var(--line); background-color: var(--panel); }
}
@keyframes notice-arrive {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .login-art > img, .menu-art > img {
    animation: logo-arrive 550ms var(--motion-ease) both;
  }
  .login-form, .edition, .menu-copy > *, .menu-progress,
  .heading, .level-header, .level-layout .card, .proof-group, .empty {
    animation: arrive 400ms var(--motion-ease) both;
  }
  .login-form { animation-delay: 90ms; }
  .edition, .menu-progress { animation-delay: 140ms; }
  .menu-copy > :nth-child(2) { animation-delay: 50ms; }
  .menu-copy > :nth-child(3) { animation-delay: 100ms; }
  .menu-copy > :nth-child(4) { animation-delay: 150ms; }
  .level-layout .card { animation-delay: 60ms; }
  .level-layout .card + .card { animation-delay: 110ms; }
  .level-card { animation: arrive 350ms var(--motion-ease) both; }
  .level-card:nth-child(2) { animation-delay: 35ms; }
  .level-card:nth-child(3) { animation-delay: 70ms; }
  .level-card:nth-child(4) { animation-delay: 105ms; }
  .level-card:nth-child(5) { animation-delay: 140ms; }
  .level-card:nth-child(6) { animation-delay: 175ms; }
  .level-card:nth-child(7) { animation-delay: 210ms; }
  .level-card:nth-child(8) { animation-delay: 245ms; }
  .progress span.complete {
    transform-origin: left;
    animation: progress-fill 450ms var(--motion-ease) both;
  }
  .dialog[open] { animation: dialog-arrive 300ms var(--motion-ease) both; }
  .dialog[open]::backdrop { animation: fade-in 200ms ease-out both; }
  #notice:not(:empty) { animation: notice-arrive 250ms var(--motion-ease) both; }
  .level-won .big-number { animation: number-celebrate 600ms var(--motion-ease); }
  .level-won .level-layout aside .card:last-child {
    animation: success-highlight 900ms ease-out;
  }
  .btn, .map-link, .level-card:not(.locked) {
    transition: transform 180ms var(--motion-ease), background-color 180ms ease, border-color 180ms ease;
  }
  .btn svg, .map-link > svg:last-child, .back svg {
    transition: transform 180ms var(--motion-ease);
  }
  .btn:not(:disabled):active, .map-link:active, .level-card:not(.locked):active {
    scale: .985;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:not(:disabled):hover, .map-link:hover { transform: translateY(-2px); }
    .level-card:not(.locked):hover { translate: 0 -3px; }
    .btn:not(:disabled):hover svg, .map-link:hover > svg:last-child { transform: translateX(3px); }
    .back:hover svg { transform: translateX(-3px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-stage { display: none; }
  .login-intro .login-art > img { opacity: 1; }
  .login-intro .login-form, .login-intro .edition { visibility: visible; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}