/* Moon motion enhancement — additive only.
   This file intentionally does not redefine layout, spacing, colors, typography,
   positioning, footer styling, or application state styles. */

@keyframes moon-enter-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes moon-enter-down {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes moon-enter-scale {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes moon-rule-in {
  from { opacity: .25; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes moon-dialog-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes moon-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes moon-dialog-item-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes moon-feedback-pop {
  0%, 100% { transform: none; }
  45% { transform: scale(1.10); }
  72% { transform: scale(.985); }
}

/* Classes are added only when an element has already reached the viewport.
   There is no global pre-hidden state, so an observer failure can never make
   content or the footer disappear. */
.moon-motion-in {
  animation: moon-enter-up .52s cubic-bezier(.22,1,.36,1) both;
}

.moon-motion-in.moon-motion-header {
  animation-name: moon-enter-down;
  animation-duration: .44s;
}

.moon-motion-in.moon-motion-surface {
  animation-name: moon-enter-scale;
  animation-duration: .60s;
}

.moon-motion-in.moon-motion-rule {
  animation-name: moon-rule-in;
  animation-duration: .48s;
  transform-origin: left center;
}

/* Existing hover/pressed visual styles remain owned by styles.css/pages.css. */
.button,
.image-button,
.step-card,
dialog .entry,
.dialog-close {
  will-change: transform;
}

/* Modal motion only affects the opening transition. */
dialog[open] {
  animation: moon-dialog-in .28s cubic-bezier(.22,1,.36,1) both;
}

dialog[open]::backdrop {
  animation: moon-backdrop-in .22s ease-out both;
}

dialog[open] #dialog-content > * {
  animation: moon-dialog-item-in .30s cubic-bezier(.22,1,.36,1) both;
}

dialog[open] #dialog-content > *:nth-child(2) { animation-delay: 30ms; }
dialog[open] #dialog-content > *:nth-child(3) { animation-delay: 60ms; }
dialog[open] #dialog-content > *:nth-child(4) { animation-delay: 90ms; }
dialog[open] #dialog-content > *:nth-child(5) { animation-delay: 120ms; }

.moon-motion-pop {
  animation: moon-feedback-pop .32s cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .moon-motion-in,
  .moon-motion-pop,
  dialog[open],
  dialog[open]::backdrop,
  dialog[open] #dialog-content > * {
    animation: none !important;
  }
}