/* ============================================================
   Belly Care — Logo
   Faithful port of the app's AnimatedLogo (lib/core/widgets/animated_logo.dart):
   a rounded square of three layers —
     1. logo_bg.png  : soft radial glow
     2. .rays        : 16 light rays that SLOWLY ROTATE (50s/turn)
     3. logo_flower  : the dandelion, STATIC, anchored to the bottom
   ============================================================ */

/* ---------- Animated 3-layer logo widget ---------- */
.logo-orb {
  position: relative;
  width: 88px;            /* default; callers override per placement */
  height: 88px;
  border-radius: 22%;     /* matches s * 0.22 in the app */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}
.logo-orb__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 16 cream rays (each ~55% of its 22.5° slice), faded center→edge by a
   radial mask, rotating once every 50s — exactly like the app's painter. */
.logo-orb__rays {
  position: absolute;
  /* sunburst is LARGER than the tile and clipped by the rounded container
     (overflow:hidden on .logo-orb), so no square edges/corners ever show */
  inset: -26%;
  /* wider rays (each ~70% of its 22.5° slice) */
  background: repeating-conic-gradient(
    from -7.88deg,
    #F4F1C9 0deg 15.75deg,
    rgba(244, 241, 201, 0) 15.75deg 22.5deg
  );
  /* circular fade completes beyond the tile edges, so within the tile the
     rays stay even and never terminate on a flat edge */
  -webkit-mask: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0) 92%);
          mask: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0) 92%);
  transform-origin: 50% 50%;
  animation: logo-rays 50s linear infinite;
  pointer-events: none;
}
/* flower: sized by width (asset is 366x490, tightly cropped to the bloom),
   anchored to the BOTTOM so the stem attaches to the tile base — like the app.
   width 58% -> height ~78% via the natural aspect ratio. */
.logo-orb__flower {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58%;
  height: auto;
  transform: translateX(-50%);
}
@keyframes logo-rays { to { transform: rotate(360deg); } }

/* ---------- Small static brand mark (nav / footer / CTA) ---------- */
.logo-mark {
  width: 1.7em;
  height: 1.7em;
  border-radius: 26%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: -0.45em;
}

@media (prefers-reduced-motion: reduce) {
  .logo-orb__rays { animation: none; }
}