/*
  Gabriel Airlines — shared "wow" effects (Frota + Destinos)
  Cursor spotlight, starfield canvas, 3D tilt cards with a rotating
  gradient border, and a flight-path scroll progress bar. Paired with
  shared/js/effects.js.
*/

/* ---------- cursor spotlight ---------- */

.cursor-spotlight {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--x, 50%) var(--y, 50%), rgba(34, 211, 238, 0.07), transparent 70%);
}

/* ---------- starfield ---------- */

.starfield-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- 3D tilt cards + rotating gradient border ---------- */
/* Applied straight to the card itself (no wrapper markup needed) - a flat
   element can still tilt in 3D via an inline perspective() in its own
   transform, it just doesn't need a 3D parent since it has no 3D children. */

.tilt-card {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.3s var(--ease-standard);
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}

/* Two layers on the same pseudo-element: a radial "flashlight" that tracks
   the cursor, plus a diagonal shine band that sweeps across once on
   hover-in (the light-passing-over-glass moment). Safe on overflow:hidden
   cards since it never extends past inset:0. */
.tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, -60% -60%;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
  pointer-events: none;
}

.tilt-card:hover::after {
  opacity: 1;
  animation: shine-sweep 1.1s var(--ease-standard);
}

@keyframes shine-sweep {
  from { background-position: 0 0, -60% -60%; }
  to { background-position: 0 0, 160% 160%; }
}

/* Rotating gradient border ring - a separate opt-in class because it
   renders via a pseudo-element that extends *outside* the card's box
   (inset: -1.5px), so it only works on cards without overflow:hidden. */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.tilt-ring::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--border-angle),
    transparent 0%, var(--accent-cyan) 12%, transparent 26%,
    transparent 50%, var(--accent-blue) 62%, transparent 76%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--ease-standard);
  animation: spin-border 3.5s linear infinite paused;
  pointer-events: none;
}

.tilt-ring:hover::before {
  opacity: 1;
  animation-play-state: running;
}

@keyframes spin-border {
  to { --border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .tilt-card,
  .tilt-card:hover {
    transform: none !important;
  }

  .tilt-ring::before {
    animation: none;
  }
}

/* ---------- flight-path scroll progress ---------- */

.flight-progress {
  position: fixed;
  top: 84px;
  left: 0;
  width: 100%;
  z-index: 25;
  padding: 0 var(--space-6);
  pointer-events: none;
}

.flight-progress-track {
  position: relative;
  height: 2px;
  background: var(--glass-border);
}

.flight-progress-fill {
  position: absolute;
  inset: 0;
  width: var(--progress, 0%);
  background: var(--accent-gradient);
  transition: width 0.1s linear;
}

.flight-progress-plane {
  position: absolute;
  top: 50%;
  left: clamp(10px, var(--progress, 0%), calc(100% - 10px));
  transform: translate(-50%, -50%) rotate(90deg);
  color: var(--accent-cyan);
  font-size: 0.85rem;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  transition: left 0.1s linear;
}

@media only screen and (max-width: 900px) {
  .flight-progress {
    display: none;
  }
}