/* ===================================
   AIRPLANE ANIMATION - DENSE SMOKE + ORANGE CURSOR
   FIXED VERSION
   ==================================== */

/* FIX: Removed will-change:transform from the track —
   will-change on a fixed full-viewport container creates
   a stacking context that breaks position:fixed on ALL
   children (airplane, cursor, trail dots snap to wrong position) */
.pps-airplane-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;       /* FIX: zero size — it's just a mount point, not a layer */
  height: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: visible;
  /* NO will-change here */
}

.pps-dotted-path,
.pps-path-line {
  display: none !important;
}

/* ========== AIRPLANE ========== */
.pps-airplane {
  position: fixed;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  z-index: 100000;
  transition: opacity 0.3s ease;
}

.pps-airplane.active {
  opacity: 1;
}

.pps-airplane::before {
  display: none !important;
}

.pps-airplane img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* FIX: prevent browser drag ghost on click-drag */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

body.airplane-active {
  cursor: none !important;
}

/* ========== SMOKE TRAIL ========== */
.trail-dot {
  position: fixed;
  /* FIX: size via width/height only — centering done in JS with margin trick
     BUT margin on fixed elements is unreliable across browsers.
     Use transform:translate(-50%,-50%) at spawn center instead.
     JS sets left/top to airplaneX/Y and this CSS centers it. */
  width: 5px;
  height: 5px;
  /* FIX: removed margin-left/margin-top — unreliable on fixed+scaled elements.
     Centering is now handled by transform in the keyframe starting point */
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.6)  50%,
    rgba(200, 200, 200, 0.2)  100%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
  /* FIX: start transform includes translate(-50%,-50%) so the dot
     is centered on the spawn coordinate without margin hacks */
  animation: smokeFadeTight 1.2s ease-out forwards;
  /* FIX: only opacity changes — remove transform from will-change
     since scale animation is CSS-only and composited automatically */
  will-change: opacity;
}

@keyframes smokeFadeTight {
  0% {
    opacity: 0.85;
    /* FIX: centering via translate — no margin needed */
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* ========== CUSTOM CURSOR ========== */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--orange-primary, #f36e36);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  opacity: 0;
  /* FIX: cursor dot must NOT transition transform —
     any transition on transform causes 1-frame lag
     making it feel disconnected from the real pointer */
  transition: opacity 0.3s ease;
  /* NO transition: transform here */
  will-change: transform;
  box-shadow:
    0 0 0 2px rgba(243, 110, 54, 0.3),
    0 0 0 4px rgba(243, 110, 54, 0.15),
    0 0 8px rgba(243, 110, 54, 0.4);
}

/* Orange pulsing ring */
.custom-cursor::before {
  content: '';
  position: absolute;
  /* FIX: use inset shorthand equivalent — centered without JS */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(243, 110, 54, 0.6);
  border-radius: 50%;
  animation: cursorPulse 2s ease-in-out infinite;
  /* FIX: pointer events explicitly off — belt-and-suspenders */
  pointer-events: none;
}

@keyframes cursorPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.25;
  }
}

.custom-cursor.active {
  opacity: 1;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1200px) {
  .pps-airplane { width: 60px; height: 60px; }
  .trail-dot    { width: 4px; height: 4px; }
}

@media (max-width: 768px) {
  .pps-airplane            { width: 50px; height: 50px; }
  .trail-dot               { width: 3px; height: 3px; }
  /* FIX: restore default cursor on touch devices */
  body.airplane-active     { cursor: auto !important; }
  /* FIX: hide cursor dot on mobile — no mouse on touch screens */
  .custom-cursor           { display: none !important; }
  /* FIX: keep airplane visible on tablet (it follows touch) but
     reduce smoke density by making dots smaller/faster */
  .trail-dot               { animation-duration: 0.8s; }
}

@media (max-width: 480px) {
  .pps-airplane { width: 40px; height: 40px; }
  .trail-dot    { width: 2.5px; height: 2.5px; animation-duration: 0.7s; }
}

@media (max-width: 360px) {
  /* FIX: hide entire track on very small screens — airplane is too
     large relative to viewport and causes visual noise */
  .pps-airplane-track { display: none !important; }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  .trail-dot            { animation: none !important; display: none !important; }
  .custom-cursor::before { animation: none !important; }
  /* FIX: also remove airplane opacity transition for reduced-motion users */
  .pps-airplane         { transition: none !important; }
}