/* ==========================================================================
   BlixoAir 2.0 - Universal Smooth Transitions & Tactile Micro-Interactions
   ========================================================================== */

/* 1. Native View Transitions API (Chrome 111+, Edge 111+, Safari 18+) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 160ms cubic-bezier(0.4, 0, 1, 1) both blixoPageExitFade;
}

::view-transition-new(root) {
  animation: 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both blixoPageEnterSlide;
}

@keyframes blixoPageExitFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes blixoPageEnterSlide {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 2. Top Glowing Progress Bar (YouTube / Airbnb style indicator) */
#blixo-page-loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0067ff 0%, #00d2ff 50%, #38bdf8 100%);
  box-shadow: 0 0 12px rgba(0, 103, 255, 0.8), 0 0 6px rgba(0, 210, 255, 0.6);
  z-index: 9999999;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 3px 3px 0;
  transition: width 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

#blixo-page-loader-bar.active {
  opacity: 1;
}

/* 3. Global Smooth Page Shell & UA Transitions */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* CRITICAL: Never apply transform or will-change: transform to body or html,
   as any transform creates a containing block that disables background-attachment: fixed
   and breaks the pinned airplane hero background effect. */
body {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.blixo-page-init {
  opacity: 0;
}

body.blixo-page-ready {
  opacity: 1;
}

body.blixo-page-exiting {
  opacity: 0 !important;
}

/* 4. Tactile Micro-Interactions on Interactive Elements */
button,
a.btn,
.card-select-btn,
.card-call-btn,
.btn-search,
.btn-confirm-booking,
.btn-update-search,
.btn-drawer-apply,
.btn-modify-trigger,
.chip-btn,
.mob-sort-tab,
.btn-sort,
.strip-tab,
.strip-opt,
.time-slot-btn,
.auth-primary-btn,
.btn-swap-stations {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Tactile Active Press */
button:active:not(:disabled),
.btn-search:active,
.card-select-btn:active,
.btn-confirm-booking:active,
.btn-update-search:active,
.btn-drawer-apply:active,
.auth-primary-btn:active {
  transform: scale(0.972) translateY(1px) !important;
}

.mob-sort-tab:active,
.strip-opt:active,
.chip-btn:active,
.btn-sort:active,
.time-slot-btn:active,
.btn-modify-trigger:active,
.btn-swap-stations:active {
  transform: scale(0.945) !important;
}

/* Ripple effect container */
.blixo-ripple-host {
  position: relative !important;
  overflow: hidden !important;
}

.blixo-ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  transform: scale(0);
  animation: blixoRippleAnim 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.blixo-ripple-wave.dark {
  background: rgba(0, 103, 255, 0.18);
}

@keyframes blixoRippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 5. Sort Tabs & Chips Smooth State Change */
.mob-sort-tab {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.mob-sort-tab.active {
  animation: blixoPillBounce 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.strip-opt.active, .strip-tab.active {
  animation: blixoPillBounce 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blixoPillBounce {
  0% { transform: scale(0.95); }
  60% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* 6. Flight & Hotel Cards Smooth Stagger Reveal & Hover Elevation */
.flight-card-v2,
.hotel-card-card,
.hp-hotel-card,
.hotel-item-card {
  animation: blixoCardReveal 0.36s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease !important;
  will-change: transform, box-shadow;
}

.flight-card-v2:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 34, 68, 0.1) !important;
  border-color: #93c5fd !important;
}

@keyframes blixoCardReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 7. Shimmer Skeleton Loader - Ultra-Smooth 60FPS Wave */
.skeleton-shimmer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  animation: blixoShimmerSmooth 1.35s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes blixoShimmerSmooth {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 8. Modals, Sheets & Drawers Smooth Dynamics */
.modal-backdrop, .drawer-backdrop {
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.25s ease;
}

.modal-dialog {
  animation: blixoModalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes blixoModalPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.drawer-panel {
  animation: blixoDrawerSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes blixoDrawerSlide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* 9. Dropdown & Popover Smooth Animations */
.chip-dropdown-wrap .quick-chip-dropdown,
.cabin-dropdown-menu,
.airport-dropdown-menu {
  animation: blixoDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}

@keyframes blixoDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 10. Smooth Tab Cross-Fade Container */
.tab-smooth-fade {
  animation: blixoTabFade 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blixoTabFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}