/*
  Sukhi logo — canonical definition, shared by every marketing page.

  Single source of truth for the "blob + Sukhi" mark: a 36px animated
  color-cycling blob (no glow) plus the "Sukhi" wordmark, matching the
  platform's own logo exactly (src/components/AnaBlob + the top-left mark
  on /home — see src/components/SideMenu/index.js). Every page links this
  file instead of redefining the blob locally.

  Markup contract (unchanged from the pre-existing per-page pattern, so no
  markup migration is needed beyond the wordmark):
    <div class="ana-blob-wrap">
      <div class="ana-blob-layer ana-blob-l1"></div>
      <div class="ana-blob-layer ana-blob-l2"></div>
      <div class="ana-blob-layer ana-blob-l3"></div>
      <div class="ana-blob-layer ana-blob-l4"></div>
      <div class="ana-blob-layer ana-blob-l5"></div>
    </div>
    <span class="sukhi-wordmark">Sukhi</span>

  Page-local hero-scale blobs (ana.html's .ana-blob-hero, the insurance
  one-pager's .ana-blob-hero-inst) stay defined per page — they resize and
  re-glow this same mark for a different, deliberately eye-catching
  purpose. That's not "the logo" and is out of scope for this file.
*/

@keyframes anaBlobCycle {
  0%   { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  16%  { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  22%  { border-radius: 54% 46% 52% 48% / 46% 54% 48% 52%; }
  27%  { border-radius: 56% 44% 54% 46% / 44% 56% 46% 54%; }
  32%  { border-radius: 46% 54% 56% 44% / 54% 46% 44% 56%; }
  37%  { border-radius: 54% 46% 48% 52% / 44% 56% 52% 48%; }
  40%  { border-radius: 60% 40% 56% 44% / 42% 60% 44% 56%; }
  42%  { border-radius: 40% 60% 44% 56% / 62% 38% 58% 42%; }
  44%  { border-radius: 64% 36% 60% 40% / 38% 64% 40% 60%; }
  46%  { border-radius: 36% 64% 42% 58% / 64% 36% 62% 38%; }
  48%  { border-radius: 62% 38% 64% 36% / 36% 62% 38% 64%; }
  50%  { border-radius: 38% 62% 36% 64% / 62% 38% 64% 36%; }
  52%  { border-radius: 66% 34% 60% 40% / 40% 66% 36% 64%; }
  54%  { border-radius: 34% 66% 40% 60% / 66% 34% 62% 38%; }
  56%  { border-radius: 60% 40% 62% 38% / 38% 62% 40% 60%; }
  58%  { border-radius: 42% 58% 44% 56% / 58% 42% 56% 44%; }
  62%  { border-radius: 56% 44% 54% 46% / 44% 56% 48% 52%; }
  67%  { border-radius: 44% 56% 58% 42% / 56% 44% 44% 56%; }
  72%  { border-radius: 58% 42% 46% 54% / 44% 56% 56% 44%; }
  77%  { border-radius: 46% 54% 56% 44% / 58% 42% 46% 54%; }
  79%  { border-radius: 54% 46% 50% 50% / 46% 54% 54% 46%; }
  82%  { border-radius: 52% 48% 54% 46% / 48% 52% 46% 54%; }
  87%  { border-radius: 48% 52% 52% 48% / 54% 46% 52% 48%; }
  92%  { border-radius: 52% 48% 50% 50% / 50% 50% 52% 48%; }
  97%  { border-radius: 51% 49% 51% 49% / 51% 49% 50% 50%; }
  100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}
@keyframes anaBreathe { 0%, 100% { transform: scale(0.91); } 50% { transform: scale(1.0); } }
@keyframes anaShowTeal { 0%,16% { opacity:1; } 22% { opacity:0; } 80% { opacity:0; } 98% { opacity:1; } 100% { opacity:1; } }
@keyframes anaShowRose { 0%,16% { opacity:0; } 22% { opacity:1; } 38% { opacity:1; } 42% { opacity:0; } 100% { opacity:0; } }
@keyframes anaShowLav  { 0%,38% { opacity:0; } 42% { opacity:1; } 58% { opacity:1; } 62% { opacity:0; } 100% { opacity:0; } }
@keyframes anaShowAmb  { 0%,58% { opacity:0; } 62% { opacity:1; } 78% { opacity:1; } 82% { opacity:0; } 100% { opacity:0; } }
@keyframes anaShowSage { 0%,78% { opacity:0; } 82% { opacity:1; } 98% { opacity:1; } 100% { opacity:0; } }

.ana-blob-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  /* Static circle as the base shape. On screen, anaBlobCycle overrides this
     with the organic elliptical morph — but the round shape must NOT depend on
     the animation alone: reduced-motion users, and DOM-rasterizing screenshot
     tools (Awesome Screenshot full-page, html2canvas) that can't read the
     animated 8-value elliptical border-radius, fall back to this 50% and get a
     clean circle instead of a square. The morph's 0%/100% keyframe is already
     a 50% circle, so this is just its rest state — no visual change live. */
  border-radius: 50%;
  animation: anaBlobCycle 36s linear infinite, anaBreathe 3.6s ease-in-out infinite;
  /* No glow at logo scale — deliberately flat/quiet, matching the platform's
     own logo. Hero-scale blobs elsewhere on the site keep their own glow. */
}
.ana-blob-layer { position: absolute; inset: 0; border-radius: inherit; }
/* Flat fills — deliberately not a radial "shine" gradient. A gradient here
   reads too close to a generic AI-orb logo; flat color is the mark. */
.ana-blob-l1 { background: #4aacac; animation: anaShowTeal 36s linear infinite; }
.ana-blob-l2 { background: #c07890; animation: anaShowRose 36s linear infinite; }
.ana-blob-l3 { background: #8878c4; animation: anaShowLav  36s linear infinite; }
.ana-blob-l4 { background: #c09050; animation: anaShowAmb  36s linear infinite; }
.ana-blob-l5 { background: #72987a; animation: anaShowSage 36s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .ana-blob-wrap, .ana-blob-l1, .ana-blob-l2, .ana-blob-l3, .ana-blob-l4, .ana-blob-l5 { animation: none; }
}

.sukhi-wordmark {
  font-family: 'Outfit', var(--sukhi-font-sans, sans-serif), sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
}