/* ============================================================
   Space AAM premium animations — CSS layer
   Pairs with assets/js/animations.js
   60fps: only transform + opacity. Reduced-motion friendly.
   ============================================================ */

/* ---- Scroll progress bar ---- */
.s4-scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #f0b923 0%, #ffd34d 50%, #f0b923 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(240, 185, 35, 0.55);
}

/* ---- Header scroll-aware (no blur/will-change — scroll jank) ---- */
.site-header {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  background-color: rgba(8, 6, 4, 0.96);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.site-header.is-hidden {
  /* keep header always visible — hide-on-scroll thrash during scroll */
  transform: none;
}

/* ---- No-scroll lock when modal/menu open ---- */
.s4-no-scroll { overflow: hidden !important; }

/* ---- Hamburger X morph ---- */
.nav-toggle span {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile main-nav prep for animations */
@media (max-width: 1023px) {
  .main-nav {
    transform-origin: top right;
  }
}

/* ---- Hero word split ---- */
.hero h1 .s4-word {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* Hero media: no permanent will-change (GPU layer = scroll jank) */
.hero-media { will-change: auto; }

/* ---- Image fade-in (Leaflet tiles and Google Maps tiles/controls
   excluded — both libraries manage their own transforms) ---- */
img:not(.s4-img-ready):not([data-s4-fade]):not(.leaflet-tile):not(.leaflet-marker-icon):not(.gm-style img):not([src*="maps.gstatic"]):not([src*="googleapis"]) {
  opacity: 0.001;
}
img[data-s4-fade]:not(.leaflet-tile):not(.leaflet-marker-icon) {
  opacity: 0;
  transform: translateY(8px) scale(1.01);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
img.s4-img-ready:not(.leaflet-tile):not(.leaflet-marker-icon) {
  opacity: 1 !important;
}
/* Leaflet tiles: never let theme styles override Leaflet's transforms */
.leaflet-tile, .leaflet-marker-icon, .leaflet-tile-pane img {
  opacity: 1 !important;
}
/* Google Maps tiles and control button glyphs: same rule — keep our
   transforms (in site.css) and Google's tile-positioning transforms
   untouched. */
.gm-style img,
.gm-style canvas {
  opacity: 1 !important;
}

/* ---- Page transition leaving ---- */
body {
  transition: opacity 0.3s ease;
}
body.s4-leaving {
  opacity: 0;
}

/* ---- Buttons base for ripple + magnetic ---- */
.button,
button.button,
.footer-cta__phone {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}
/* will-change faqat interaktsiya paytida (doimiy GPU-qatlam = scroll jank) */
.button:hover,
.button:active,
.button:focus-visible,
button.button:hover,
button.button:active,
.footer-cta__phone:hover,
.footer-cta__phone:active {
  will-change: transform;
}

/* Shimmer sweep on hover (gold buttons) */
.button-gold,
.button-call,
.button-whatsapp {
  isolation: isolate;
}
.button-gold::before,
.button-call::before,
.button-whatsapp::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.button-gold:hover::before,
.button-call:hover::before,
.button-whatsapp:hover::before {
  transform: translateX(110%);
}
.button-gold > *,
.button-call > *,
.button-whatsapp > * {
  position: relative;
  z-index: 2;
}

/* Active press */
.button:active,
button.button:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s;
}

/* Ripple */
.s4-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: s4-ripple 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
  z-index: 0;
}
.button-gold .s4-ripple,
.button-call .s4-ripple {
  background: rgba(40, 28, 8, 0.32);
}
@keyframes s4-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---- Form focus glow ---- */
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
input.is-focused,
select.is-focused,
textarea.is-focused,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: rgba(240, 185, 35, 0.65) !important;
  box-shadow:
    0 0 0 4px rgba(240, 185, 35, 0.18),
    0 4px 14px rgba(240, 185, 35, 0.12) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ---- Service / Fleet / Stat / Trust card 3D base ---- */
.service-card,
.fleet-mini__card,
.stat-card,
.driver-card,
.credential-card,
.fleet-card,
.review-card,
.trust-card {
  transform-style: preserve-3d;
}
/* will-change faqat hover-da (3D-tilt) — mobil hover yo'q, doimiy qatlam olib tashlandi */
.service-card:hover,
.fleet-mini__card:hover,
.stat-card:hover,
.driver-card:hover,
.credential-card:hover,
.fleet-card:hover,
.review-card:hover,
.trust-card:hover {
  will-change: transform;
}

/* ---- Modal scaffolding ---- */
.s4-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 6, 4, 0.62);
  backdrop-filter: blur(0px);
  z-index: 1000;
}
.s4-modal.is-open {
  display: flex;
}
.s4-modal__content {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e6 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(240, 185, 35, 0.12);
  will-change: transform, opacity;
}

/* ---- Custom cursor ---- */
.s4-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: difference;
}
.s4-cursor--dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #f0b923;
  transition: opacity 0.2s ease, transform 0.05s linear;
}
.s4-cursor--ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(240, 185, 35, 0.7);
  border-radius: 50%;
  transition: opacity 0.25s ease, width 0.3s ease, height 0.3s ease, margin 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.s4-cursor--ring.is-active {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-color: rgba(240, 185, 35, 0.9);
  background: rgba(240, 185, 35, 0.08);
}
@media (pointer: coarse), (max-width: 1024px) {
  .s4-cursor { display: none !important; }
}

/* Hide native cursor on interactive elements when custom cursor active */
@media (pointer: fine) and (min-width: 1024px) {
  body.s4-cursor-active,
  body.s4-cursor-active a,
  body.s4-cursor-active button {
    cursor: none;
  }
}

/* ---- Tier 1: Service icon hover ---- */
.service-card .service-card__icon {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.service-card:hover .service-card__icon {
  transform: rotate(-6deg) scale(1.08);
  border-color: rgba(240, 185, 35, 0.5);
  box-shadow: 0 8px 22px rgba(240, 185, 35, 0.28);
  background: linear-gradient(135deg, rgba(240, 185, 35, 0.32), rgba(240, 185, 35, 0.12));
}

/* ---- Tier 1: Fleet card image zoom on hover ---- */
.fleet-mini__card {
  overflow: hidden;
}
.fleet-mini__media {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fleet-mini__card:hover .fleet-mini__media {
  transform: scale(1.07);
}

/* ---- Tier 1: Tabular nums for stat counters ---- */
.stat-card__value,
.stat-card__suffix,
[data-s4-counter] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Tier 1: Footer link underline animation ---- */
.site-footer a:not(.button):not(.footer-cta__phone):not(.brand) {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.site-footer a:not(.button):not(.footer-cta__phone):not(.brand):hover {
  background-size: 100% 1.5px;
  color: #f0b923;
}

/* ---- Tier 1: Hero panel pulse glow ---- */
.hero-panel strong {
  position: relative;
}
.hero-panel strong::after {
  content: "";
  position: absolute;
  inset: -10px -16px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(240, 185, 35, 0.18), transparent 70%);
  z-index: -1;
  animation: s4-pulse 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes s4-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ---- Tier 1: Scroll-down indicator on hero ---- */
.s4-scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 248, 230, 0.78);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 4;
}
.s4-scroll-cue__line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(240, 185, 35, 0.85), rgba(240, 185, 35, 0));
  animation: s4-scroll-cue 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform-origin: top;
}
@keyframes s4-scroll-cue {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 767px) {
  .s4-scroll-cue { display: none; }
}

/* ---- Tier 2: Card gold-tint shadow on hover ---- */
.service-card:hover,
.fleet-mini__card:hover,
.fleet-card:hover,
.stat-card:hover,
.driver-card:hover,
.review-card:hover,
.credential-card:hover {
  box-shadow:
    0 18px 44px rgba(240, 185, 35, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(240, 185, 35, 0.1);
}

/* ---- Tier 2: Skeleton loading shimmer ---- */
.s4-skeleton {
  background: linear-gradient(
    100deg,
    rgba(240, 185, 35, 0.08) 30%,
    rgba(240, 185, 35, 0.18) 50%,
    rgba(240, 185, 35, 0.08) 70%
  );
  background-size: 200% 100%;
  animation: s4-shimmer 1.4s linear infinite;
  border-radius: 12px;
}
@keyframes s4-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Sticky book entrance prep ---- */
.sticky-book,
[data-s4-sticky-book] {
  will-change: auto;
}

/* ---- Section reveal prep (JS will animate) ---- */
@media (prefers-reduced-motion: no-preference) {
  section.section[data-s4-reveal-prepped="0"],
  .stats-section[data-s4-reveal-prepped="0"] {
    opacity: 0;
  }
}

/* ---- Reduced motion full off ---- */
@media (prefers-reduced-motion: reduce) {
  .s4-scroll-progress,
  .s4-cursor { display: none !important; }

  .button-gold::before,
  .button-call::before,
  .button-whatsapp::before { display: none !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-media { transform: none !important; }
}