/* ==========================================================================
   ANIMATED LOGO MARK
   The rollback ring (a ~316deg arc, drawn with stroke) plus a triangular
   "play/rewind" arrowhead. On load, the ring sweeps on like it is being
   drawn by hand, then the arrowhead snaps into place, like the moment a
   restore completes. On hover, the whole glyph counter-rotates a notch,
   a small physical "undo" gesture. Everything here is opt-out under
   prefers-reduced-motion: reduce, handled at the bottom of this file.
   ========================================================================== */

.logo-mark .logo-ring path {
  stroke-dasharray: 344;
  stroke-dashoffset: 344;
  transform-origin: 128px 82px;
}

.logo-mark .logo-arrow {
  opacity: 0;
  transform-origin: 95px 70.5px;
  transform: scale(0.4) rotate(-50deg);
}

.logo-animated .logo-mark .logo-ring path {
  animation: logo-draw 1.05s var(--ease-out) 120ms forwards;
}

.logo-animated .logo-mark .logo-arrow {
  animation: logo-pop 0.5s var(--ease-spring) 980ms forwards;
}

@keyframes logo-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-50deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Footer mark: already "seen" once at the top of the page, skip the
   draw-in and just render complete, but keep the hover gesture. */
.logo-static-in .logo-mark .logo-ring path {
  animation: none;
  stroke-dashoffset: 0;
}
.logo-static-in .logo-mark .logo-arrow {
  animation: none;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Hover / focus: a quick, tactile "undo" counter-spin of the whole glyph. */
.logo-animated .logo-mark {
  transition: transform var(--dur-med) var(--ease-spring);
  transform-origin: 50% 50%;
}
.logo-animated:hover .logo-mark,
.logo-animated:focus-visible .logo-mark {
  transform: rotate(-24deg);
}

/* --- Hero treatment: a larger standalone mark above the eyebrow -------- */

.hero-logo {
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  filter: drop-shadow(0 10px 24px rgba(37, 99, 235, 0.35));
}
.hero-logo .logo-mark { width: 100%; height: 100%; }

@media (max-width: 980px) {
  .hero-logo { width: 52px; height: 52px; margin-bottom: 18px; }
}

/* --- Respect reduced motion: show the finished mark, no motion at all -- */

@media (prefers-reduced-motion: reduce) {
  .logo-mark .logo-ring path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .logo-mark .logo-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: none;
  }
  .logo-animated:hover .logo-mark,
  .logo-animated:focus-visible .logo-mark {
    transform: none;
  }
}