/* Motion only: finite transitions and keyframes; no layout or typography. */
.nav-item {
  transition: background .2s,color .2s;
}
.primary-btn {
  transition: transform 180ms var(--ease-soft),background-color 180ms,box-shadow 180ms;
}
.secondary-btn {
  transition: transform 180ms var(--ease-soft),background-color 180ms,box-shadow 180ms;
}
.round-btn {
  transition: transform 180ms var(--ease-soft),background-color 180ms,box-shadow 180ms;
}
.trip-card {
  transition: transform .3s var(--ease),box-shadow .3s;
}
.moment-card {
  transition: transform .25s;
}
.modal-backdrop {
  animation: veil-in 180ms ease-out both;
}
.modal {
  animation: sheet-in 260ms var(--ease-soft) both;
}
.drop-zone {
  transition: background .2s;
}
.choice-card {
  transition: transform 180ms var(--ease-soft),background-color 180ms,box-shadow 180ms;
}
.toast {
  animation: toast-in .25s var(--ease);
}
.entrance {
  animation: page-turn 200ms var(--ease-soft) both;
}
body.reduce-motion * {
  animation: none !important;
  transition: none !important;
}
body.reduce-motion *:before {
  animation: none !important;
  transition: none !important;
}
body.reduce-motion *:after {
  animation: none !important;
  transition: none !important;
}
.icon-btn {
  transition: transform 180ms var(--ease-soft),background-color 180ms,box-shadow 180ms;
}
.favorite-btn.heart-pop .icon {
  animation: heart-pop 500ms var(--ease-soft);
}
.favorite-btn.heart-pop::after {
  animation: heart-ring 500ms ease-out both;
}
.modal-backdrop.is-closing {
  animation: veil-out 200ms ease both;
}
.modal-backdrop.is-closing .modal {
  animation: sheet-out 200ms ease both;
}
.close-guard {
  animation: veil-in 140ms both;
}
.guard-card {
  animation: sheet-in 250ms var(--ease-soft) both;
}
.is-preparing>.icon {
  animation: prepare-breathe 800ms ease-in-out infinite alternate;
}
.upload-item {
  animation: photo-arrive 300ms var(--ease-spring) both;
}
.lightbox>img {
  animation: photo-arrive 260ms var(--ease-soft) both;
}
.photo-dots i {
  transition: width 200ms;
}
.save-success>.icon {
  animation: check-bloom 450ms ease-out;
}
.save-success {
  animation: toast-in 350ms var(--ease-spring) both;
}
.atlas-pin>span {
  transition: transform 180ms;
}
.atlas-pin.is-selected>span::before {
  animation: heart-ring 500ms ease-out;
}
.atlas-story {
  animation: peek-in 250ms var(--ease-spring) both;
}
body.reduce-motion *::before {
  animation: none !important;
  transition: none !important;
}
body.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}
.lightbox-switch {
  animation: none !important;
}
.nav-active-pill {
  animation: nav-glide 330ms var(--ease-spring) both;
}
.saved-highlight {
  animation: saved-focus 1.5s ease-out 1;
}
.optional-section summary .icon:last-child {
  transition: transform .18s ease;
}
.reduce-motion .saved-highlight {
  animation: none;
}
@media (hover:hover) and (pointer:fine) {
  .trip-cover {
    transition: transform 550ms var(--ease-soft);
  }
  .dream-teaser:hover .frog {
    animation: frog-hello 650ms var(--ease-soft);
  }
  .sidebar-footer:hover .pig {
    animation: pig-hello 650ms var(--ease-soft);
  }
}
@media (max-width:720px) {
  .toast {
    animation: fade-in .2s;
  }
  .mobile-nav .add-tab {
    transition: transform 220ms var(--ease-spring);
  }
  .nav-active-pill {
    transition: transform 350ms var(--ease-spring);
  }
  .mobile-nav button.active .icon {
    animation: nav-pick 300ms var(--ease-spring);
  }
  .modal {
    animation: sheet-in 260ms var(--ease-soft) both;
  }
}
@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  *:before {
    animation: none !important;
    transition: none !important;
  }
  *:after {
    animation: none !important;
    transition: none !important;
  }
  *::before {
    animation: none !important;
    transition: none !important;
  }
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .saved-highlight {
    animation: none;
  }
  .optional-section summary .icon {
    transition: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%,6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%,0);
  }
}
@keyframes page-turn {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heart-pop {
  0%,100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.26);
  }
  60% {
    transform: scale(.95);
  }
}
@keyframes heart-ring {
  from {
    opacity: .7;
    scale: .9;
  }
  to {
    opacity: 0;
    scale: 1.5;
  }
}
@keyframes veil-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes veil-out {
  to {
    opacity: 0;
  }
}
@keyframes sheet-in {
  from {
    opacity: .5;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sheet-out {
  to {
    opacity: 0;
    transform: translateY(28px);
  }
}
@keyframes photo-arrive {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes check-bloom {
  0% {
    transform: scale(.65) rotate(-15deg);
  }
  65% {
    transform: scale(1.15) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes prepare-breathe {
  from {
    opacity: .35;
    transform: scale(.95);
  }
  to {
    opacity: 1;
    transform: scale(1.03);
  }
}
@keyframes peek-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nav-pick {
  from {
    transform: scale(.85);
  }
  60% {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
@keyframes pig-hello {
  0%,100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-5deg);
  }
  65% {
    transform: rotate(4deg);
  }
}
@keyframes frog-hello {
  0%,100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px) rotate(-3deg);
  }
  70% {
    transform: translateY(0) rotate(2deg);
  }
}
@keyframes nav-glide {
  from {
    transform: translateX(calc(var(--previous-tab,0) * 100%));
  }
  to {
    transform: translateX(calc(var(--active-tab) * 100%));
  }
}
@keyframes saved-focus {
  from {
    box-shadow: 0 0 0 4px #b4778a55;
  }
  to {
    box-shadow: 0 0 0 0 transparent;
  }
}