/* =========================================================
   SpyTech Animated Logo
   Pieces: left bracket, middle text (no dot), right bracket,
   plus a separately-positioned yellow dot that acts as an "eye".

   Animation loop (phases):
     A rest     — <  SPYTECH • CONSULTING  >
     B closing  — text collapses to 0 width, brackets slide together,
                  dot glides from its text position to dead center
     C closed   — < • >     (dot blinks like an eye)
     D opening  — text expands back, dot returns to its text spot
   ========================================================= */

.logo-anim{
  --cycle: 4.2s;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  aspect-ratio: 2583 / 410;
  line-height:0;
  filter: drop-shadow(0 0 18px rgba(240,185,11,0.25));
}

.logo-anim img,
.logo .logo-anim img,
.foot-about .logo-anim img,
.about .logo-anim img{
  display:block;
  height:100%;
  width:auto;
  pointer-events:none;
  user-select:none;
  filter:none;
}

.logo-anim .la-left,
.logo-anim .la-right,
.logo-anim .la-mid{
  display:inline-flex;
  align-items:center;
  height:100%;
  position:relative;
  flex:0 0 auto;
}

/* Middle text: collapses horizontally (scaleX on the image, max-width on wrapper) */
.logo-anim .la-mid{
  overflow:hidden;
  animation: la-mid var(--cycle) ease-in-out infinite;
}
.logo-anim .la-mid img{
  transform-origin:50% 50%;
  animation: la-mid-img var(--cycle) ease-in-out infinite;
}

@keyframes la-mid{
  0%,   12%  { max-width: 500%; opacity:1; }
  40%,  72%  { max-width: 0%;   opacity:0; }
  92%,  100% { max-width: 500%; opacity:1; }
}
@keyframes la-mid-img{
  0%,   12%  { transform: scaleX(1); }
  40%,  72%  { transform: scaleX(0); }
  92%,  100% { transform: scaleX(1); }
}

/* Yellow dot (eye) — outer wrapper handles POSITION + move animation.
   It's a sibling of the 3 pieces inside .logo-anim, so its coordinate
   system is the whole logo — unaffected when .la-mid collapses. */
.logo-anim .la-dot{
  position:absolute;
  /* Dot center sits at the original artwork's dot position:
     x = 83.3% of full logo width, y = 22.2% of full logo height */
  top: 22.2%;
  height: 44.4%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  animation: la-dot-move var(--cycle) ease-in-out infinite;
  pointer-events:none;
}

/* Inner pupil handles COLOR + BLINK (scaleY). Keeps blink math
   independent of the outer translate used for positioning. */
.logo-anim .la-pupil{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f0b90b;
  box-shadow: 0 0 12px rgba(240,185,11,0.55);
  transform-origin:50% 50%;
  animation: la-dot-blink var(--cycle) linear infinite;
}

/* Dot position across the loop.
   Rest: sits where the dot is in the original artwork →
     x = (285 + 1866) / 2583 ≈ 83.3% of full logo width from left.
   Closed: centered between the two brackets → 50%. */
/* Dot position across the loop.
   Rest: sits where the dot is in the original artwork → x = 83.3%, y = 22.2%.
   Closed: centered between the two brackets at x=50%, y=50% (middle). */
@keyframes la-dot-move{
  0%,   12%  { left: 83.3%; top: 22.2%; }
  40%,  72%  { left: 50%;   top: 50%;   }
  92%,  100% { left: 83.3%; top: 22.2%; }
}

/* Eye blink — two very visible blinks during the closed phase (38–74%).
   Each blink is long enough to clearly register: open → close over ~3%,
   held closed ~3%, then open over ~3%. */
@keyframes la-dot-blink{
  0%,   40%  { transform: scaleY(1); }
  44%        { transform: scaleY(0.05); }
  47%        { transform: scaleY(0.05); }
  51%        { transform: scaleY(1); }
  58%        { transform: scaleY(1); }
  62%        { transform: scaleY(0.05); }
  65%        { transform: scaleY(0.05); }
  69%, 100%  { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce){
  .logo-anim .la-mid,
  .logo-anim .la-mid img,
  .logo-anim .la-dot,
  .logo-anim .la-pupil { animation: none; }
  .logo-anim .la-dot  { left: 83.3%; top: 22.2%; }
}