/* fox.css — иконка-лис xbyfox: анимации и плашка «нет сети».
   .fox--intro    — логотип в шапке при каждом заходе (кольцо рисуется, уши выскакивают, замок проявляется)
   .fox--loading  — вращение вокруг вертикальной оси (загрузка, лимит)
   .fox--offline  — медленное мигание красным (нет сети)
   Разметку SVG отдаёт window.foxSVG(mode) из fox.js; для страниц без JS —
   тот же SVG вставлен статично. */

.fox {
  --fox-accent: #3BB7A8;
  --fox-glyph: #E8EEF2;
  --fox-alert: #E5484D;
  width: 64px;
  height: 64px;
  display: inline-block;
  overflow: visible;
  vertical-align: middle;
}
.fox-ring, .fox-ears { stroke: var(--fox-accent); }
.fox-glyph { color: var(--fox-glyph); }
/* Красный лис — лимит/бан. */
.fox--alert { --fox-accent: var(--fox-alert); }

/* ---------- intro ---------- */
.fox--intro .fox-ring {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: fox-draw .6s cubic-bezier(.65, 0, .35, 1) forwards;
}
.fox--intro .fox-ears {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: fox-ears .45s cubic-bezier(.34, 1.56, .64, 1) .45s forwards;
}
.fox--intro .fox-glyph {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: scale(.6);
  animation: fox-pop .4s cubic-bezier(.34, 1.56, .64, 1) .75s forwards;
}
@keyframes fox-draw { to { stroke-dashoffset: 0; } }
@keyframes fox-ears { to { transform: scaleY(1); } }
@keyframes fox-pop  { to { opacity: 1; transform: scale(1); } }

/* ---------- loading ---------- */
.fox--loading {
  animation: fox-spin 2.4s linear infinite;
}
@keyframes fox-spin {
  from { transform: perspective(400px) rotateY(0deg); }
  to   { transform: perspective(400px) rotateY(360deg); }
}

/* ---------- offline ---------- */
.fox--offline .fox-ring,
.fox--offline .fox-ears {
  animation: fox-alert 1.6s ease-in-out infinite;
}
@keyframes fox-alert {
  0%, 100% { stroke: var(--fox-accent); }
  50%      { stroke: var(--fox-alert); }
}

/* ---------- плашка «нет сети» ---------- */
#fox-offline {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 9999;
  display: none; align-items: center; gap: 8px;
  padding: 5px 14px 5px 7px; border-radius: 999px;
  background: rgba(20, 12, 14, .92); border: 1px solid rgba(229, 72, 77, .5);
  color: #f2b8ba; font: 500 13px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  pointer-events: none; white-space: nowrap;
}
#fox-offline.show { display: flex; }
#fox-offline .fox { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .fox--intro .fox-ring, .fox--intro .fox-ears, .fox--intro .fox-glyph {
    animation: none; stroke-dashoffset: 0; transform: none; opacity: 1;
  }
  .fox--loading { animation-duration: 6s; }
  .fox--offline .fox-ring, .fox--offline .fox-ears { animation: none; stroke: var(--fox-alert); }
}