/* NoBody AI blue robot: logo animations (pure CSS). Pax, 2026-10-08.
   Nash 2026-10-08: var(--logo-lamp) now has a blue fallback (#5B8DEF) so a stale/missing tokens.css can't blank the glow.
   Markup: the live nobodyusa.com brand link, unchanged:
     <a class="brand ..."><svg class="logo-mark logo-mark--nobody" viewBox="9 8.5 78 79">
       <mask> .logo-eye x2 </mask> <g class="logo-bot"> .logo-head-stroke .logo-head-fill(mask) .logo-antenna .logo-lamp </g>
     </svg><span class="brand__word">NoBody AI</span></a>
   Use: add  nb-anim nb-anim--once  (or --lamp / --look / --antenna / --enter) to the .brand link.
   Load AFTER site.css. Nothing here changes the robot's geometry: only opacity, a glow, and rigid moves
   (eyes slide/blink inside the head, antenna+lamp rotate together around the antenna foot). */

/* ---- base: replace the old draw-in with the finished robot ---- */
.brand.nb-anim .logo-head-stroke { display: none; }
.brand.nb-anim .logo-head-fill,
.brand.nb-anim .logo-antenna { opacity: 1; animation: none; }
.brand.nb-anim .logo-eye { fill: #000; transform: none; animation: none; transform-box: fill-box; transform-origin: center; }
.brand.nb-anim .logo-lamp { transform: none; animation: none; filter: none; transform-box: fill-box; transform-origin: center; }
.brand.nb-anim .brand__word { display: inline-block; }

/* ---- 01 lamp-on: the lamp flickers on and glows once (someone is working). 3s loop ---- */
.brand.nb-anim--lamp .logo-lamp { animation: nb-lamp-on 3s linear infinite; }
@keyframes nb-lamp-on {
  0%, 10% { opacity: .3; filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  12% { opacity: 1; }
  15% { opacity: .45; }
  18% { opacity: 1; filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  32% { filter: drop-shadow(0 0 9px var(--logo-lamp, #5B8DEF)); }
  62% { filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  86% { opacity: 1; }
  94%, 100% { opacity: .3; filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
}

/* ---- 02 look: the eyes glance at the wordmark, blink once, come back. 3s loop ---- */
.brand.nb-anim--look .logo-eye { animation: nb-look 3s ease-in-out infinite; }
@keyframes nb-look {
  0%, 12% { transform: translateX(0) scaleY(1); }
  24%, 44% { transform: translateX(4px) scaleY(1); }
  47% { transform: translateX(4px) scaleY(.12); }
  51%, 70% { transform: translateX(4px) scaleY(1); }
  82%, 100% { transform: translateX(0) scaleY(1); }
}

/* ---- 03 antenna: antenna + lamp sway once like a nod, the lamp pulses. 3s loop ---- */
.brand.nb-anim--antenna .logo-antenna { transform-box: fill-box; transform-origin: 50% 100%; animation: nb-sway 3s ease-in-out infinite; }
.brand.nb-anim--antenna .logo-lamp { transform-box: fill-box; transform-origin: 50% 211.54%; /* = antenna foot (64, 36.75) */
  animation: nb-sway 3s ease-in-out infinite, nb-pulse 3s ease-in-out infinite; }
@keyframes nb-sway {
  0% { transform: rotate(0); }
  14% { transform: rotate(-7deg); }
  30% { transform: rotate(5deg); }
  44% { transform: rotate(-2.5deg); }
  56% { transform: rotate(1deg); }
  66%, 100% { transform: rotate(0); }
}
@keyframes nb-pulse {
  0%, 30% { filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  46% { filter: drop-shadow(0 0 9px var(--logo-lamp, #5B8DEF)); }
  70%, 100% { filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
}

/* ---- 04 enter: the robot pops in, the wordmark slides out from beside it. 3s loop ---- */
.brand.nb-anim--enter .logo-bot { transform-box: fill-box; transform-origin: 50% 100%; animation: nb-pop 3s linear infinite; }
.brand.nb-anim--enter .brand__word { animation: nb-word-in 3s linear infinite; }
@keyframes nb-pop {
  0% { opacity: 0; transform: translateY(3px) scale(.86); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  11% { opacity: 1; transform: translateY(0) scale(1.03); animation-timing-function: ease-in-out; }
  17%, 86% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes nb-word-in {
  0%, 12% { opacity: 0; transform: translateX(-12px); clip-path: inset(-30% 100% -30% 0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  32%, 86% { opacity: 1; transform: none; clip-path: inset(-30% -5% -30% 0); animation-timing-function: ease-in; }
  95%, 100% { opacity: 0; transform: none; clip-path: inset(-30% -5% -30% 0); }
}

/* ---- 05 once (recommended for the header): on load the lamp switches on and glows,
        the eyes glance at the wordmark and blink, then the robot rests. 2.4s, plays once. ---- */
.brand.nb-anim--once .logo-lamp { animation: nb-once-lamp 2.4s linear 1 both; }
.brand.nb-anim--once .logo-eye { animation: nb-once-look 2.4s ease-in-out 1 both; }
@keyframes nb-once-lamp {
  0%, 14% { opacity: .3; filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  17% { opacity: 1; }
  20% { opacity: .45; }
  23% { opacity: 1; filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  38% { filter: drop-shadow(0 0 9px var(--logo-lamp, #5B8DEF)); }
  72%, 100% { opacity: 1; filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
}
@keyframes nb-once-look {
  0%, 38% { transform: translateX(0) scaleY(1); }
  50%, 60% { transform: translateX(4px) scaleY(1); }
  63% { transform: translateX(4px) scaleY(.12); }
  67%, 78% { transform: translateX(4px) scaleY(1); }
  92%, 100% { transform: translateX(0) scaleY(1); }
}
/* After it rests: hovering the brand makes the lamp glow, nothing else moves. */
.brand.nb-anim--once:hover .logo-lamp,
.brand.nb-anim--once:focus-visible .logo-lamp { animation: nb-hover-glow 1.2s ease-in-out infinite; }
@keyframes nb-hover-glow {
  0%, 100% { filter: drop-shadow(0 0 0 var(--logo-lamp, #5B8DEF)); }
  50% { filter: drop-shadow(0 0 7px var(--logo-lamp, #5B8DEF)); }
}

/* ---- reduced motion: static resting robot (lamp on, eyes centred, wordmark shown) ---- */
@media (prefers-reduced-motion: reduce) {
  .brand.nb-anim .logo-lamp, .brand.nb-anim .logo-eye, .brand.nb-anim .logo-antenna,
  .brand.nb-anim .logo-bot, .brand.nb-anim .brand__word {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
}