/* =====================================================================
   CINEMATIC TIE FIGHTER + VADER LOGO
   - A small TIE fighter that glides between peripheral points (never UI-blocking)
   - The brand logo is a Vader helmet whose red eyes glow & blink
   ===================================================================== */

/* ---------- flying TIE fighter ---------- */
.cbat-layer {
  position: fixed;
  inset: 0;
  z-index: 45;                 /* above content, below sticky header */
  pointer-events: none;
  perspective: 900px;
  perspective-origin: 50% 40%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .3s ease-out;
  overflow: hidden;
  contain: layout style;
}
.cbat-shadow {
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 14px;
  margin-left: -30px; margin-top: -7px;
  background: radial-gradient(ellipse at center, rgba(231,237,246,.25), transparent 70%);
  filter: blur(6px);
  opacity: .3;
  will-change: transform, opacity;
}
.cbat {
  position: absolute;
  left: 0; top: 0;
  will-change: transform;
}
.cbat.intro { animation: cbat-intro 1s ease both; }
@keyframes cbat-intro { from { opacity: 0; } to { opacity: 1; } }

.cbat-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(6deg);
}
.cbat-sym {
  position: absolute;
  inset: 0;
  filter:
    drop-shadow(0 0 4px rgba(231, 237, 246, 0.6))
    drop-shadow(0 0 12px rgba(231, 237, 246, 0.28))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.cbat-sym svg { width: 100%; height: 100%; display: block; }
.cbat.perched .cbat-sym { animation: cbat-hover 5.5s ease-in-out infinite; }
@keyframes cbat-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.cbat.flying .cbat-sym {
  filter:
    drop-shadow(0 0 5px rgba(231, 237, 246, 0.7))
    drop-shadow(0 0 14px rgba(231, 237, 246, 0.3))
    blur(.4px);
}
/* engine / cockpit window flicker */
.cbat-core {
  animation: cbat-core 2.4s ease-in-out infinite;
}
@keyframes cbat-core {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* movement particles (ion trail) */
.cbat-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 1px rgba(231,237,246,.8);
  will-change: transform, opacity;
}

/* ---------- Stormtrooper helmet logo — cinematic white / gold glow ---------- */
.vader { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(231,237,246,.30)); }
.logo-mark.vader, .inline-mascot.vader {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(227, 178, 74, .42);
}
.logo-mark.vader { width: 52px; height: 52px; }
.inline-mascot.vader { width: 84px; height: 84px; border-radius: 18px; }
.lm-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 560px) { .logo-mark.vader { width: 44px; height: 44px; } }
.logo { perspective: 600px; }
.logo .logo-mark.vader {
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .25s ease;
  animation: vader-in 1.1s ease both, vader-glow 4s ease-in-out 1.1s infinite;
}
.inline-mascot.vader { animation: cowl-float 4s ease-in-out infinite, vader-glow 4s ease-in-out infinite; }
@keyframes vader-in { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 1; } }
@keyframes vader-glow {
  0%, 100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(231,237,246,.28)); }
  50%      { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(231,237,246,.5)) drop-shadow(0 0 22px rgba(227,178,74,.28)); }
}
/* automatic + hover reflective sheen sweeping across the armor */
.v-sheen { opacity: 0; animation: vader-sheen 5.5s ease-in-out 2.5s infinite; }
.logo:hover .v-sheen, .inline-mascot:hover .v-sheen { animation: vader-sheen .9s ease; }
@keyframes vader-sheen {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: .9; }
  30%  { opacity: 0; transform: translateX(150px); }
  100% { opacity: 0; transform: translateX(150px); }
}

@media (prefers-reduced-motion: reduce) {
  .cbat.flying, .cbat.intro, .cbat .cbat-sym, .cbat-core, .vader-eye,
  .logo .logo-mark.vader, .inline-mascot.vader { animation: none !important; }
  .cbat.flying .cbat-sym { filter: drop-shadow(0 0 4px rgba(231,237,246,.5)); }
}