/* Route and dialog movement is coordinated by motion.js. */
dialog[open] { animation: none; }

.app-loading {
  min-height: 55dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  text-align: center;
}
.app-loading-mark img {
  width: 48px;
  height: 54px;
  object-fit: contain;
}
.app-loading-track {
  width: 112px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: #f2dfd1;
}
.app-loading-track::after {
  content: '';
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
}
.app-loading-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
}

:is(.travel-photo, .destination-image, .auth-story).image-loading {
  background-color: #e9eee5;
  background-image: linear-gradient(105deg, transparent 35%, #ffffff80 50%, transparent 65%);
  background-size: 220% 100%;
}
:is(.travel-photo, .destination-image, .auth-story) > img.image-pending { opacity: 0; }
:is(.travel-photo, .destination-image, .auth-story) > img.image-ready { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .app-loading-mark img { animation: loading-breath 1.6s ease-in-out infinite; }
  .app-loading-track::after { animation: loading-track 1.2s ease-in-out infinite; }

  .button, .icon-button, .nav-search, .nav-preferences,
  .search-package-row, .compact-plan, .destination-card, .bottom-nav a {
    transition: scale .14s ease-out, background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, box-shadow .2s ease-out;
  }
  /* Keep established desktop hover lifts alongside touch feedback. */
  .button, .destination-card {
    transition: scale .14s ease-out, transform .2s ease-out, background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, box-shadow .2s ease-out;
  }
  :is(.button, .icon-button, .nav-search, .nav-preferences):active:not(:disabled),
  .bottom-nav a:active { scale: .97; }
  :is(.search-package-row, .compact-plan, .destination-card):active { scale: .985; }

  .bottom-nav a.active .icon { animation: nav-icon-pop .3s ease-out; }
  .success-icon .icon, .auth-success-icon .icon { animation: success-pop .4s cubic-bezier(.2, .8, .2, 1); }

  :is(.travel-photo, .destination-image, .auth-story).image-loading {
    animation: image-shimmer 1.4s ease-in-out infinite;
  }
  :is(.travel-photo, .destination-image, .auth-story) > img.image-ready {
    transition: opacity .3s ease-out, transform .5s ease;
  }
}

@keyframes loading-breath {
  0%, 100% { opacity: .78; scale: .96; }
  50% { opacity: 1; scale: 1; }
}
@keyframes loading-track {
  from { transform: translateX(-110%); }
  to { transform: translateX(350%); }
}
@keyframes image-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -70% 0; }
}
@keyframes nav-icon-pop {
  0% { scale: .86; }
  65% { scale: 1.08; }
  100% { scale: 1; }
}
@keyframes success-pop {
  0% { opacity: .3; scale: .7; }
  65% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}