/*//////////////////////////////////////////////////////////
  47Flare — LOGO
//////////////////////////////////////////////////////////*/

/* Base wrapper (used everywhere) */
.ff-logo-wrap{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 999px;
  color: var(--logo-color);
}

.ff-logo{
  width: 78%;
  height: 78%;
  display: block;
}

.ff-flame{ fill: currentColor; }

/*//////////////////////////////////////////////////////////
  NAV — CENTER LOGO (floating, 2x, FX)
//////////////////////////////////////////////////////////*/

.center-logo .ff-logo-wrap.logo-nav{
  /* 2x-ish */
  width: 84px;
  height: 84px;

  border-radius: 999px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  /* float above the bar */
  transform: translateY(-18px);

  /* IMPORTANT for FX */
  position: relative;
  isolation: isolate;

  /* allow flames out, but don't create viewport scroll (nav.css clips it) */
  overflow: visible;
}

/* Fill wrapper */
.center-logo .ff-logo-wrap.logo-nav .ff-logo{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 3;
}

/* Theme-reactive logo color */
[data-theme="light"] .center-logo .ff-logo-wrap.logo-nav{ color: var(--accent); }
[data-theme="dark"]  .center-logo .ff-logo-wrap.logo-nav{ color: #19d6c7; }

/* Remove mobile tap highlight / focus glow */
.center-logo,
.center-logo *{
  -webkit-tap-highlight-color: transparent;
}
.center-logo:focus,
.center-logo:focus-visible{ outline: none; }

/* Alive glow (close to logo, not global) */
.center-logo .ff-logo-wrap.logo-nav.is-alive{
  filter:
    drop-shadow(0 0 10px rgba(0,199,182,.22))
    drop-shadow(0 0 18px rgba(0,199,182,.12));
}

/* FIRE: kept tight around the top so it looks like flame, not fog */
.center-logo .ff-logo-wrap.logo-nav.is-alive::before{
  content:"";
  position:absolute;

  /* smaller area so it doesn't become a far blob */
  inset: -14px -14px -18px -14px;

  z-index: 2;
  pointer-events:none;

  background:
    radial-gradient(22px 40px at 35% 10%, rgba(0,199,182,.55), transparent 70%),
    radial-gradient(22px 40px at 65% 10%, rgba(0,199,182,.45), transparent 70%),
    radial-gradient(16px 28px at 50% 0%,  rgba(255,255,255,.18), transparent 72%),
    radial-gradient(34px 54px at 50% 18%, rgba(0,199,182,.18), transparent 75%);

  filter: blur(5px);
  opacity: .75;

  /* keep it attached to the logo top */
  transform: translateY(2px);
  animation: ffFlame 1.25s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* tiny sparks — subtle */
.center-logo .ff-logo-wrap.logo-nav.is-alive::after{
  content:"";
  position:absolute;
  inset: -16px -14px -22px -14px;
  z-index: 1;
  pointer-events:none;

  background:
    radial-gradient(2px 2px at 46% 14%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(2px 2px at 58% 8%,  rgba(255,255,255,.30), transparent 60%),
    radial-gradient(3px 3px at 52% 18%, rgba(0,199,182,.30), transparent 60%),
    radial-gradient(3px 3px at 38% 22%, rgba(0,199,182,.22), transparent 60%);

  filter: blur(.35px);
  opacity: .35;
  animation: ffSparks 1.6s linear infinite;
  mix-blend-mode: screen;
}

@keyframes ffFlame{
  0%,100% { transform: translateY(3px) scale(1);    opacity:.55; }
  50%     { transform: translateY(0px) scale(1.06); opacity:.82; }
}
@keyframes ffSparks{
  0%   { transform: translateY(8px);  opacity:.12; }
  40%  { opacity:.38; }
  100% { transform: translateY(-6px); opacity:.06; }
}

/* Light mode: keep premium/subtle */
[data-theme="light"] .center-logo .ff-logo-wrap.logo-nav.is-alive::before{
  opacity: .26;
  mix-blend-mode: normal;
}
[data-theme="light"] .center-logo .ff-logo-wrap.logo-nav.is-alive::after{
  opacity: .10;
  mix-blend-mode: normal;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .center-logo .ff-logo-wrap.logo-nav.is-alive::before,
  .center-logo .ff-logo-wrap.logo-nav.is-alive::after{
    animation: none !important;
  }
}