/* byFox icon animations
   .fox--intro    — один раз при заходе (кольцо рисуется, уши выскакивают, символ проявляется)
   .fox--loading  — медленное вращение вокруг вертикальной оси (загрузка)
   .fox--offline  — медленное мигание красным (сайт оффлайн)            */

.fox {
  --fox-accent: #3BB7A8;
  --fox-glyph: #E8EEF2;
  --fox-alert: #E5484D;
  width: 64px;
  height: 64px;
  display: inline-block;
  overflow: visible;
}
.fox-ring, .fox-ears { stroke: var(--fox-accent); }
.fox-glyph { color: var(--fox-glyph); }

/* ---------- 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); }
}

@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); }
}

/* site header */
.brand .fox { width: 30px; height: 34px; flex: none; position: relative; top: -4px; } /* ring centre on the text line */
[data-theme="light"] .brand .fox { --fox-glyph: #121821; }