/* Winding Line motion: feedback, orientation, and confirmed changes only. */
:root {
  --motion-quick: 120ms;
  --motion-feedback: 180ms;
  --motion-arrive: 240ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
}

/* Native, same-origin document transitions preserve ordinary links and forms.
   Browsers without support navigate normally; no custom router is needed. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-leave 100ms ease-in both; }
::view-transition-new(root) { animation: page-arrive 180ms ease-out both; }
@keyframes page-leave { to { opacity: 0; } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Keep the navigation steady while the page changes around it. */
@media(max-width:959px) {
  .mobile-tabbar { view-transition-name: app-navigation; }
  .mobile-tabbar a[aria-current] svg { view-transition-name: current-destination; }
}
@media(min-width:960px) {
  .app-rail { view-transition-name: app-navigation; }
  .app-rail a[aria-current] { view-transition-name: current-destination; }
}
::view-transition-group(app-navigation),
::view-transition-group(current-destination) {
  animation-duration: 200ms;
  animation-timing-function: var(--motion-ease);
}

.button, .round-button, .boundary-action, .penpal-row,
.featured-letter, .mobile-letter-row, .account-links>a,
.mobile-tabbar svg, .app-rail nav>a {
  transition: background-color var(--motion-feedback) ease,
              border-color var(--motion-feedback) ease,
              color var(--motion-quick) ease,
              transform var(--motion-quick) var(--motion-ease);
}
.button:active:not(:disabled), .round-button:active,
.penpal-row:active, .featured-letter:active, .mobile-letter-row:active {
  transform: scale(.99);
}
.mobile-tabbar a:active svg { transform: scale(.94); }
@media(hover:hover) and (pointer:fine) {
  .penpal-row:hover, .mobile-letter-row:hover, .account-links>a:hover { background-color: var(--pp-surface); }
  .featured-letter:hover { transform: translateY(-2px); }
}
.choice-field label, input, textarea, select {
  transition: border-color var(--motion-feedback) ease,
              background-color var(--motion-feedback) ease;
}

/* Messages remain visible and keep their normal live-region semantics. */
.message { animation: feedback-arrive 220ms var(--motion-ease) both; }
@keyframes feedback-arrive {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.mobile-menu .menu-scrim { animation: scrim-arrive 200ms ease-out both; }
@keyframes scrim-arrive { from { opacity: 0; } to { opacity: 1; } }
.boundary-panel[open] > :not(summary) { animation: disclosure-arrive 180ms ease-out both; }
@keyframes disclosure-arrive {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* The server sets this marker only after a successful status change.
   Viewing an existing journey never animates a fictional delivery event. */
[data-milestone-confirm="true"] .timeline .current .timeline-dot {
  animation: milestone-confirm 400ms var(--motion-ease) both;
}
[data-milestone-confirm="true"] .timeline .done:has(+ .current)::before {
  animation: route-confirm 600ms ease-out both;
}
@keyframes milestone-confirm {
  from { transform: scale(.88); box-shadow: 0 0 0 0 #F2C14E66; }
  65% { box-shadow: 0 0 0 8px #F2C14E00; }
  to { transform: scale(1); box-shadow: 0 0 0 8px #F2C14E00; }
}
@keyframes route-confirm {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:active, .round-button:active, .penpal-row:active,
  .featured-letter:hover, .featured-letter:active, .mobile-letter-row:active,
  .mobile-tabbar a:active svg { transform: none !important; }
  html { scroll-behavior: auto; }
}


/* Landing-page arrival: short, finite, and separate from private app screens. */
@media(prefers-reduced-motion:no-preference) {
  [data-landing-hero] > .eyebrow,
  [data-landing-hero] > h1,
  [data-landing-hero] > .hero-copy,
  [data-landing-hero] > .hero-buttons,
  [data-landing-hero] > .invitation-link {
    animation: landing-intro 420ms var(--motion-ease) backwards;
  }
  [data-landing-hero] > h1 { animation-delay: 45ms; }
  [data-landing-hero] > .hero-copy { animation-delay: 90ms; }
  [data-landing-hero] > .hero-buttons { animation-delay: 135ms; }
  [data-landing-hero] > .invitation-link { animation-delay: 170ms; }
  [data-landing-hero] + .hero-letter {
    animation: landing-collage 600ms ease-out 140ms backwards;
  }
}
@keyframes landing-intro {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes landing-collage { from { opacity: 0; } to { opacity: 1; } }
/* Keyboard and anchor navigation must never wait for decorative entrances. */
[data-landing-reveal]:focus-within,
[data-landing-hero] > :focus-within { animation: none !important; }