/* ══════════════════════════════════════════════════════════════════════
   OKi Logo — the animated visual identity of the OKi ecosystem.

   ONE component, state-driven. ALL animation lives here; JavaScript only
   flips [data-state] on .oki-logo. Everything is transform / opacity /
   color → GPU-friendly, 60fps, no filters, no JS animation loops.

   States: idle · listening · thinking · responding · warning · critical
   Philosophy: intelligent observation. Breathing, sonar, ocean swell.
   Never a spinner, never a flash, never a toy.
   ══════════════════════════════════════════════════════════════════════ */

.oki-logo{
  /* the whole palette is variables so a state can shift tone calmly */
  --oki-deep:#0a1a33;   /* face / background circle */
  --oki-mid:#1c3f6b;    /* rim */
  --oki-wave:#39b0ff;   /* waves + ripples + accent */
  --oki-glow:#39b0ff;   /* internal glow */
  --oki-text:#eaf4ff;   /* OKi wordmark */
  display:inline-block; line-height:0; color:var(--oki-wave);
  width:44px; height:44px;  /* default; override on the mount element */
}
.oki-logo__svg{ width:100%; height:100%; display:block; overflow:visible; }
.oki-logo__root{ transform-box:fill-box; transform-origin:center; }

.oki-bg{ fill:var(--oki-deep); }
.oki-ring{ stroke:var(--oki-mid); fill:none; transition:stroke 1.2s ease; }
.oki-waves{ transform-box:fill-box; }
.oki-wave{ fill:none; stroke:var(--oki-wave); stroke-linecap:round;
  transition:stroke 1.4s ease, opacity 1.4s ease; }
.oki-ripple{ fill:none; stroke:var(--oki-wave); opacity:0;
  transform-box:fill-box; transform-origin:center; transition:stroke 1.4s ease; }
.oki-glow{ opacity:0; transform-box:fill-box; transform-origin:center; }
.oki-text{ fill:var(--oki-text);
  font:800 33px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.5px; }
.oki-sub{ fill:var(--oki-wave);
  font:600 8px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:3.4px;
  transition:fill 1.4s ease; }

/* ── keyframes ─────────────────────────────────────────────── */
@keyframes oki-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.014)} }
@keyframes oki-drift{ from{transform:translateX(0)} to{transform:translateX(-40px)} }
@keyframes oki-sonar{ 0%{transform:scale(.36);opacity:.5} 82%{opacity:.05} 100%{transform:scale(1);opacity:0} }
@keyframes oki-glow-breathe{ 0%,100%{opacity:.04;transform:scale(.9)} 50%{opacity:.30;transform:scale(1)} }
@keyframes oki-respond{ 0%{opacity:.55;transform:scale(.25)} 70%{opacity:.24} 100%{opacity:0;transform:scale(1.28)} }
@keyframes oki-critical{ 0%,100%{opacity:.88} 50%{opacity:1} }
@keyframes oki-fade{ 0%,100%{opacity:.92} 50%{opacity:1} }

/* ── base (applies to every state): the slow breath + drifting swell ── */
.oki-logo__root{ animation:oki-breathe 5.6s ease-in-out infinite; }
.oki-wave--1{ animation:oki-drift 26s linear infinite; }
.oki-wave--2{ animation:oki-drift 32s linear infinite reverse; opacity:.62; }
.oki-wave--3{ animation:oki-drift 38s linear infinite; opacity:.36; }

/* ── LISTENING — travelling sonar ripples, livelier swell ── */
.oki-logo[data-state="listening"] .oki-wave--1{ animation-duration:16s; }
.oki-logo[data-state="listening"] .oki-wave--2{ animation-duration:20s; }
.oki-logo[data-state="listening"] .oki-ripple--1{ animation:oki-sonar 4.4s ease-out infinite; }
.oki-logo[data-state="listening"] .oki-ripple--2{ animation:oki-sonar 4.4s ease-out 1.47s infinite; }
.oki-logo[data-state="listening"] .oki-ripple--3{ animation:oki-sonar 4.4s ease-out 2.94s infinite; }

/* ── THINKING — quicker breath, more wave, soft internal glow ── */
.oki-logo[data-state="thinking"] .oki-logo__root{ animation-duration:2.7s; }
.oki-logo[data-state="thinking"] .oki-wave--1{ animation-duration:9s; }
.oki-logo[data-state="thinking"] .oki-wave--2{ animation-duration:11s; }
.oki-logo[data-state="thinking"] .oki-glow{ animation:oki-glow-breathe 2.7s ease-in-out infinite; }

/* ── RESPONDING — one gentle glow travelling outward (~1s), then idle ── */
.oki-logo[data-state="responding"] .oki-glow{ animation:oki-respond 1s ease-out 1; }

/* ── WARNING — calm gradual shift to amber, still breathing ── */
.oki-logo[data-state="warning"]{ --oki-wave:#ffb454; --oki-glow:#ffb454; }
.oki-logo[data-state="warning"] .oki-logo__root{ animation-duration:6.6s; }

/* ── CRITICAL — shift to red, slow professional pulse, never strobe ── */
.oki-logo[data-state="critical"]{ --oki-wave:#ff5c5c; --oki-glow:#ff5c5c; }
.oki-logo[data-state="critical"] .oki-logo__root{ animation-duration:6.6s; }
.oki-logo[data-state="critical"] .oki-glow{ animation:oki-glow-breathe 3.1s ease-in-out infinite; }
.oki-logo[data-state="critical"] .oki-waves{ animation:oki-critical 3.1s ease-in-out infinite; }

/* ── Accessibility — honour reduced motion: no movement, only a whisper ── */
@media (prefers-reduced-motion: reduce){
  .oki-logo *{ animation:none !important; }
  .oki-logo__root{ animation:oki-fade 6s ease-in-out infinite !important; }
  .oki-logo[data-state="thinking"] .oki-glow,
  .oki-logo[data-state="critical"] .oki-glow{ opacity:.18; }
}