/* ═══════════════════════════════════════════════════════════════
   PT Taxi Animation — Styles
   Scroll-driven cinematic taxi journey background layer.
   All selectors namespaced under #pt-taxi- or .pt-taxi-
   ═══════════════════════════════════════════════════════════════ */

/* ── Canvas: fixed fullscreen behind everything ── */
#pt-taxi-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  /* Default color variable */
  --pt-taxi-color: #ffffff;
}

.pt-taxi-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Ensure page content floats above the animation ── */
body.home > .elementor,
body.home > footer.elementor,
body.home > .elementor-location-footer,
body.home > [data-elementor-type="wp-page"],
body.home > [data-elementor-type="footer"] {
  position: relative;
  z-index: 1;
}

/* Ensure the header floats above the page content when sticky */
body.home > header.elementor,
body.home > .elementor-location-header,
body.home > [data-elementor-type="header"] {
  position: relative;
  z-index: 999 !important;
}

/* Skip-link should also be above */
body.home > .skip-link {
  z-index: 2;
}

/* WhatsApp widget already has z-index: 99999999, untouched */

/* ── Taxi body fill: driven by CSS variable ── */
.pt-taxi-body-fill {
  fill: var(--pt-taxi-color, #e5ab23);
  transition: fill 0.05s linear;
}

/* ── Wheel spoke rotation is handled by JS transform ── */
#pt-taxi-wheel-rear,
#pt-taxi-wheel-front {
  will-change: transform;
}

/* ── Taxi group GPU acceleration ── */
#pt-taxi-group {
  will-change: transform;
}

/* ── Character groups ── */
#pt-taxi-driver,
#pt-taxi-passenger {
  will-change: transform, opacity;
}

/* ── Headlight glow ── */
#pt-taxi-hl-glow {
  will-change: opacity;
}

/* ── Door groups ── */
#pt-taxi-door-d,
#pt-taxi-door-p {
  will-change: transform, opacity;
}

/* ── Destination marker ── */
#pt-taxi-dest {
  will-change: opacity;
}

/* ── Subtle star twinkle (CSS animation, very lightweight) ── */
#pt-taxi-stars circle:nth-child(odd) {
  animation: pt-taxi-twinkle 4s ease-in-out infinite alternate;
}
#pt-taxi-stars circle:nth-child(even) {
  animation: pt-taxi-twinkle 5s ease-in-out 1.5s infinite alternate;
}

@keyframes pt-taxi-twinkle {
  0%   { opacity: 0.3; }
  100% { opacity: 0.9; }
}

/* ── City window lights subtle pulse ── */
#pt-taxi-windows-city rect:nth-child(3n) {
  animation: pt-taxi-window-pulse 3s ease-in-out infinite alternate;
}
#pt-taxi-windows-city rect:nth-child(3n+1) {
  animation: pt-taxi-window-pulse 4s ease-in-out 1s infinite alternate;
}

@keyframes pt-taxi-window-pulse {
  0%   { opacity: 0.15; }
  100% { opacity: 0.55; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: slightly reduce visual complexity */
@media (max-width: 1024px) {
  #pt-taxi-trees { opacity: 0.08; }
  #pt-taxi-city  { opacity: 0.12; }
}

/* Mobile: simplify further for performance */
@media (max-width: 767px) {
  #pt-taxi-trees         { display: none; }
  #pt-taxi-windows-city  { display: none; }
  #pt-taxi-stars circle  { animation: none !important; }
  #pt-taxi-windows-city rect { animation: none !important; }
  #pt-taxi-city          { opacity: 0.08; }
}

/* ═══════════════════════════════════════════════════════════════
   PREFERS REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Disable all CSS animations */
  #pt-taxi-stars circle,
  #pt-taxi-windows-city rect {
    animation: none !important;
  }

  /* Disable destination pulse */
  #pt-taxi-dest circle animate {
    display: none;
  }

  /* Hide moving animation elements entirely for reduced motion safety */
  #pt-taxi-group,
  #pt-taxi-driver,
  #pt-taxi-passenger,
  #pt-taxi-dest {
    display: none !important;
  }

  /* Remove will-change to save memory */
  #pt-taxi-group,
  #pt-taxi-wheel-rear,
  #pt-taxi-wheel-front,
  #pt-taxi-driver,
  #pt-taxi-passenger,
  #pt-taxi-hl-glow,
  #pt-taxi-door-d,
  #pt-taxi-door-p,
  #pt-taxi-dest {
    will-change: auto;
  }

  /* Disable smooth fill transition */
  .pt-taxi-body-fill {
    transition: none;
  }
}