/* motion.css — Apple-native view and modal motion.
 *
 * Loaded after titanium.css. Directional view transitions are applied by
 * motion.js; this file only defines the physics, the nav glider and the
 * tactile press states. Everything is transform/opacity/filter so the
 * compositor can run it at display refresh (60/120 Hz).
 *
 * The outgoing view is never animated in place: [hidden] is display:none, so
 * motion.js snapshots it into `.motion-snapshot` (a fixed, inert clone) and
 * fades that. At every moment exactly one real <main> section is visible.
 */

:root {
  --ease-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-macos-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-view: 180ms;
  --duration-modal: 240ms;
}

/* ── view containers ────────────────────────────────────────────────── */
main { position: relative; overflow-x: clip; }
main > section {
  will-change: transform, opacity, filter;
  transform-origin: 50% 180px;
}
main > section.motion-enter { position: relative; z-index: 2; }

.motion-snapshot {
  position: fixed;
  z-index: 30;
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
  overflow: hidden;
}

/* ── A. lateral slide (Compare ↔ Explore ↔ My Trips) ────────────────── */
.anim-enter-right { animation: appleSlideInRight var(--duration-view) var(--ease-ios-spring) both; }
.anim-leave-left { animation: appleSlideOutLeft var(--duration-view) var(--ease-ios-spring) both; }
.anim-enter-left { animation: appleSlideInLeft var(--duration-view) var(--ease-ios-spring) both; }
.anim-leave-right { animation: appleSlideOutRight var(--duration-view) var(--ease-ios-spring) both; }

@keyframes appleSlideInRight {
  0% { opacity: 0; transform: translate3d(36px, 0, 0) scale(0.99); filter: blur(4px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes appleSlideOutLeft {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(-36px, 0, 0) scale(0.99); filter: blur(4px); }
}
@keyframes appleSlideInLeft {
  0% { opacity: 0; transform: translate3d(-36px, 0, 0) scale(0.99); filter: blur(4px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes appleSlideOutRight {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(36px, 0, 0) scale(0.99); filter: blur(4px); }
}

/* ── B. depth push / pop (Compare ↔ hotel detail) ───────────────────── */
.anim-push-in { animation: applePushIn 460ms var(--ease-ios-spring) both; }
.anim-push-recede { animation: applePushRecede 460ms var(--ease-ios-spring) both; }
.anim-pop-in { animation: applePopIn 440ms var(--ease-ios-spring) both; }
.anim-pop-out { animation: applePopOut 440ms var(--ease-ios-spring) both; }

@keyframes applePushIn {
  0% { opacity: 0; transform: scale(1.045) translate3d(0, 12px, 0); filter: blur(10px); }
  100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes applePushRecede {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.94); filter: blur(4px); }
}
@keyframes applePopIn {
  0% { opacity: 0; transform: scale(0.95); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes applePopOut {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.04) translate3d(0, 10px, 0); filter: blur(10px); }
}

/* ── C. staggered cascade of the incoming view's blocks ────────────── */
/* The control deck is deliberately excluded: it holds the popovers (dates,
   currency, autocomplete), and an entrance that moves a form while the user
   is already reaching for it makes clicks chase the layout. Cards cascade;
   controls are stable the instant the view appears. */
main > section.motion-stagger > :not([hidden]):not(.searchglass) {
  animation: bentoCascadeUp 300ms var(--ease-macos-out) both;
  animation-delay: calc(var(--stagger-index, 0) * 28ms + 20ms);
}
@keyframes bentoCascadeUp {
  0% { opacity: 0; transform: translate3d(0, 18px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── D. nav: the pill glides behind the active tab ─────────────────── */
.nav-glider {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: var(--glider-w, 96px);
  transform: translate3d(var(--glider-x, 4px), 0, 0);
  border-radius: 999px;
  background: #2c2c2e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition:
    transform 380ms var(--ease-ios-spring),
    width 380ms var(--ease-ios-spring),
    opacity 180ms ease;
}
.navswitch.motion-ready .nav-glider { opacity: 1; }
.navswitch .navlink { position: relative; z-index: 1; }
/* the glider is the pill now — the button keeps only its label state */
.navswitch .navlink.active,
.navswitch .navlink.active:hover {
  background: transparent;
  box-shadow: none;
}

/* ── E. sheets: spring presentation (enter automatic, exit opt-in) ─── */
/* A sheet is centred by its own transform, so the spring cannot animate
   `transform` without dragging it off-centre. It animates the registered
   --sheet-scale (inside the centring transform) plus the independent
   translate property (composed outside it), which keeps the sheet centred
   on both the desktop modal and the mobile bottom sheet. */
@property --sheet-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.sheet { transform: translate(-50%, -50%) scale(var(--sheet-scale, 1)); }
@media (max-width: 720px) {
  .sheet { transform: translateX(-50%) scale(var(--sheet-scale, 1)); }
}
.sheet.modal-entering {
  animation: appleModalSpringIn var(--duration-modal) var(--ease-ios-spring) both;
}
.sheet.modal-leaving {
  animation: appleModalSpringOut 260ms var(--ease-macos-out) both;
  pointer-events: none;
}
@keyframes appleModalSpringIn {
  0% { opacity: 0; --sheet-scale: 0.92; translate: 0 24px; filter: blur(6px); }
  100% { opacity: 1; --sheet-scale: 1; translate: 0 0; filter: blur(0); }
}
@keyframes appleModalSpringOut {
  0% { opacity: 1; --sheet-scale: 1; translate: 0 0; }
  100% { opacity: 0; --sheet-scale: 0.95; translate: 0 14px; }
}
.sheet-backdrop:not([hidden]) { animation: fadeIn 380ms var(--ease-ios-spring) both; }

/* ── F. tactile press + live-region settle ─────────────────────────── */
button:active,
[role="group"] button:active,
[aria-label="price calendar"] .day:active {
  transform: scale(0.96);
  transition: transform 80ms cubic-bezier(0.22, 1, 0.36, 1);
}
[aria-live="polite"] {
  transition: opacity 220ms ease, transform 220ms var(--ease-macos-out);
}

/* ── reduced motion: motion is a preference, never a requirement ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .motion-snapshot { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}