/* =============================================================
   Multilarm — animated logo (self-contained, dependency-free)
   Ported from the React deliverable "Multilarm Animated Logo.html".
   4s loop, smooth ease-in-out motion. Clock hands track real time.

   Markup is injected by multilarm-logo.js into any element carrying
   the [data-multilarm-logo] attribute. Animated mounts also receive
   the .mlogo-animated class (added by the script); static mounts do
   not, so every @keyframes rule below is gated behind it and the
   static variant renders a clean, still composition.
   ============================================================= */

.mlogo {
  display: block;
  position: relative;
  background: transparent;
  aspect-ratio: 760 / 880;
  line-height: 0;
}
.mlogo svg {
  display: block;
  width: 100%;
  height: auto;        /* intrinsic height from the viewBox ratio (no aspect-ratio dependency) */
  overflow: visible;   /* broadcast arcs + drop-shadow glows extend past viewBox */
}

/* Centered banner wrapper for pages without a hero column. */
.ml-masthead { display: flex; justify-content: center; margin: 1.6em 0 0.4em; }

/* ---- Size helpers (width drives height via aspect-ratio) -------- */
.mlogo.ml-hero    { width: 150px; }
.mlogo.ml-compact { width: 104px; }
.mlogo.ml-sm      { width: 72px;  }
@media (max-width: 480px) {
  .mlogo.ml-hero    { width: 116px; }
  .mlogo.ml-compact { width: 88px;  }
}

/* -------------------------------------------------------------
   Perimeter MULTILARM letters at clock positions.
   The JS loop overrides `fill` each frame on animated mounts,
   interpolating teal -> yellow as the second hand passes.
   ------------------------------------------------------------- */
.mlogo .peri-ltr {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  fill: #00D6AA;
}
.mlogo-animated .peri-ltr {
  opacity: calc(0.45 + 0.55 * var(--g, 0));
  filter: drop-shadow(0 0 calc(var(--g, 0) * 14px) #FFE94A);
}

/* Date plate */
.mlogo .date-text {
  font-family: "Share Tech Mono", "Source Code Pro", monospace;
  font-size: 16px;
  font-weight: 400;
  fill: #fffaf0;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------
   Speakers — horn "booms" outward on the broadcast beat.
   ------------------------------------------------------------- */
.mlogo .spk {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.mlogo-animated .spk-right { animation: ml-boomRight 4s cubic-bezier(0.34, 1.56, 0.5, 1) infinite; }
.mlogo-animated .spk-left  { animation: ml-boomLeft  4s cubic-bezier(0.34, 1.56, 0.5, 1) infinite; }

@keyframes ml-boomRight {
  0%, 50% { transform: translateX(0) scaleX(1) scaleY(1); }
  56%     { transform: translateX(-14px) scaleX(0.82) scaleY(1.12); }
  64%     { transform: translateX(30px) scaleX(1.28) scaleY(0.9); }
  74%     { transform: translateX(-6px) scaleX(0.94) scaleY(1.05); }
  82%     { transform: translateX(16px) scaleX(1.12) scaleY(0.96); }
  92%     { transform: translateX(-3px) scaleX(0.98) scaleY(1.02); }
  100%    { transform: translateX(0) scaleX(1) scaleY(1); }
}
@keyframes ml-boomLeft {
  0%, 50% { transform: translateX(0) scaleX(1) scaleY(1); }
  56%     { transform: translateX(14px) scaleX(0.82) scaleY(1.12); }
  64%     { transform: translateX(-30px) scaleX(1.28) scaleY(0.9); }
  74%     { transform: translateX(6px) scaleX(0.94) scaleY(1.05); }
  82%     { transform: translateX(-16px) scaleX(1.12) scaleY(0.96); }
  92%     { transform: translateX(3px) scaleX(0.98) scaleY(1.02); }
  100%    { transform: translateX(0) scaleX(1) scaleY(1); }
}

/* Dust-cap plug thrusts forward on the beat */
.mlogo .cone-plug {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.mlogo-animated .cone-plug { animation: ml-plugPush 4s cubic-bezier(0.34, 1.56, 0.5, 1) infinite; }
@keyframes ml-plugPush {
  0%, 52% { transform: scaleX(1); }
  56%     { transform: scaleX(0.5); }
  64%     { transform: scaleX(2.4); }
  74%     { transform: scaleX(1.1); }
  82%     { transform: scaleX(1.8); }
  100%    { transform: scaleX(1); }
}

/* Speaker cones — center bright dot pulses during broadcast phase */
.mlogo .cone-bright {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.mlogo-animated .cone-bright { animation: ml-speakerPulse 4s ease-in-out infinite; }
@keyframes ml-speakerPulse {
  0%, 52% { transform: scale(1);   filter: drop-shadow(0 0 2px rgba(124,245,220,0.6)); }
  56%     { transform: scale(0.6); filter: drop-shadow(0 0 2px rgba(124,245,220,0.6)); }
  64%     { transform: scale(2.6); filter: drop-shadow(0 0 16px #7CF5DC); }
  76%     { transform: scale(1.4); filter: drop-shadow(0 0 7px rgba(124,245,220,0.8)); }
  88%     { transform: scale(1.9); filter: drop-shadow(0 0 10px #7CF5DC); }
  100%    { transform: scale(1);   filter: drop-shadow(0 0 2px rgba(124,245,220,0.6)); }
}

/* -------------------------------------------------------------
   AUDIO SCHEDULER tagline.
   ------------------------------------------------------------- */
.mlogo .scheduler-tag {
  font-family: "Share Tech Mono", "Source Code Pro", monospace;
  font-size: 28px;
  letter-spacing: 0.18em;
  fill: #00D6AA;
  opacity: 0;
}
.mlogo-animated .scheduler-tag { animation: ml-schedulerFade 4s ease-in-out infinite; }
/* Static variant keeps the tagline legible. */
.mlogo:not(.mlogo-animated) .scheduler-tag { opacity: 0.9; }
@keyframes ml-schedulerFade {
  0%   { opacity: 0; }
  12%  { opacity: 0.15; }
  30%  { opacity: 0.55; }
  50%  { opacity: 1; filter: drop-shadow(0 0 4px rgba(0,214,170,0.6)); }
  60%  { opacity: 1; filter: drop-shadow(0 0 4px rgba(0,214,170,0.6)); }
  76%  { opacity: 0.55; filter: none; }
  90%  { opacity: 0.1; }
  100% { opacity: 0; }
}

/* -------------------------------------------------------------
   Dancing MULTILARM wordmark inside the dial.
   ------------------------------------------------------------- */
.mlogo .dance-wordmark text {
  font-family: "Share Tech Mono", "Source Code Pro", monospace;
  font-size: 22px;
  font-weight: 400;
  fill: #00D6AA;
}
.mlogo-animated .dance-letter {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.mlogo-animated .dance-0 { animation-name: ml-dance; animation-duration: 0.85s; animation-delay: 0.00s; }
.mlogo-animated .dance-1 { animation-name: ml-dance; animation-duration: 0.95s; animation-delay: 0.08s; }
.mlogo-animated .dance-2 { animation-name: ml-dance; animation-duration: 0.80s; animation-delay: 0.16s; }
.mlogo-animated .dance-3 { animation-name: ml-dance; animation-duration: 0.90s; animation-delay: 0.24s; }
.mlogo-animated .dance-4 { animation-name: ml-dance; animation-duration: 0.75s; animation-delay: 0.32s; }
.mlogo-animated .dance-5 { animation-name: ml-dance; animation-duration: 0.95s; animation-delay: 0.40s; }
.mlogo-animated .dance-6 { animation-name: ml-dance; animation-duration: 0.85s; animation-delay: 0.48s; }
.mlogo-animated .dance-7 { animation-name: ml-dance; animation-duration: 0.80s; animation-delay: 0.56s; }
.mlogo-animated .dance-8 { animation-name: ml-dance; animation-duration: 0.90s; animation-delay: 0.64s; }

@keyframes ml-dance {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.55;
    filter: drop-shadow(0 0 1px rgba(0, 214, 170, 0.4));
  }
  50% {
    transform: translate(0, -5px);
    opacity: 1;
    filter: drop-shadow(0 0 7px #00D6AA);
  }
}

/* -------------------------------------------------------------
   EQ bars below center.
   ------------------------------------------------------------- */
.mlogo .eq .bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.mlogo-animated .eq .bar {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.mlogo-animated .eq .bar-1 { animation-name: ml-eqBar1; animation-duration: 0.85s; }
.mlogo-animated .eq .bar-2 { animation-name: ml-eqBar2; animation-duration: 1.10s; }
.mlogo-animated .eq .bar-3 { animation-name: ml-eqBar3; animation-duration: 0.70s; }
.mlogo-animated .eq .bar-4 { animation-name: ml-eqBar4; animation-duration: 0.95s; }
.mlogo-animated .eq .bar-5 { animation-name: ml-eqBar5; animation-duration: 1.20s; }

@keyframes ml-eqBar1 { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(0.85); } }
@keyframes ml-eqBar2 { 0%,100% { transform: scaleY(0.50); } 50% { transform: scaleY(1.05); } }
@keyframes ml-eqBar3 { 0%,100% { transform: scaleY(0.65); } 50% { transform: scaleY(1.15); } }
@keyframes ml-eqBar4 { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(0.95); } }
@keyframes ml-eqBar5 { 0%,100% { transform: scaleY(0.40); } 50% { transform: scaleY(0.80); } }

/* -------------------------------------------------------------
   Antenna tip — bright flash when the inner reception arc lands.
   ------------------------------------------------------------- */
.mlogo .antenna .tip {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.mlogo-animated .antenna .tip { animation: ml-tipReceive 4s ease-in-out infinite; }
@keyframes ml-tipReceive {
  0%, 50%   { filter: drop-shadow(0 0 3px rgba(0, 214, 170, 0.55)); }
  56%       { filter: drop-shadow(0 0 18px #00D6AA); }
  66%       { filter: drop-shadow(0 0 7px #00D6AA); }
  100%      { filter: drop-shadow(0 0 3px rgba(0, 214, 170, 0.55)); }
}

/* -------------------------------------------------------------
   Incoming wifi reception arcs.
   ------------------------------------------------------------- */
.mlogo .wifi .wave {
  fill: none;
  stroke: #00D6AA;
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0;
}
.mlogo-animated .wifi .wave-3 { animation: ml-incomingWave 4s ease-in-out infinite; animation-delay: 0s;   }
.mlogo-animated .wifi .wave-2 { animation: ml-incomingWave 4s ease-in-out infinite; animation-delay: 0.5s; }
.mlogo-animated .wifi .wave-1 { animation: ml-incomingWave 4s ease-in-out infinite; animation-delay: 1.0s; }

@keyframes ml-incomingWave {
  0%, 100% { opacity: 0; }
  4%       { opacity: 0.95; }
  16%      { opacity: 0.95; }
  24%      { opacity: 0; }
}

/* -------------------------------------------------------------
   Broadcast arcs — sound waves emitting outward, both sides.
   ------------------------------------------------------------- */
.mlogo .arcs .arc {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 68.182%;   /* clock center within viewBox */
}
.mlogo-animated .arcs .a1 { animation: ml-bcast 4s cubic-bezier(0.25, 0.1, 0.3, 1) infinite; animation-delay: 0s;    }
.mlogo-animated .arcs .a2 { animation: ml-bcast 4s cubic-bezier(0.25, 0.1, 0.3, 1) infinite; animation-delay: 0.14s; }
.mlogo-animated .arcs .a3 { animation: ml-bcast 4s cubic-bezier(0.25, 0.1, 0.3, 1) infinite; animation-delay: 0.28s; }

@keyframes ml-bcast {
  0%, 56%   { transform: scale(0.96); opacity: 0; }
  60%       { transform: scale(1.0);  opacity: 0.95; }
  72%       { transform: scale(1.06); opacity: 0.8; }
  84%       { transform: scale(1.11); opacity: 0.5; }
  96%       { transform: scale(1.15); opacity: 0; }
  100%      { transform: scale(0.96); opacity: 0; }
}

/* NOTE: the brand logo intentionally animates regardless of
   prefers-reduced-motion (product decision). No reduced-motion freeze
   here, and the script keeps its requestAnimationFrame loop running.
   The data-multilarm-logo="static" opt-out is the only still variant. */