/* ============================================================
   Cosy Fox — Fox mascot styles
   Companion cursor, idle twitches, scroll-walks.
   All effects degrade gracefully under prefers-reduced-motion.
   ============================================================ */

/* ---------- Cursor companion (Desktop only, see js/fox.js for activation) ---------- */

.fox-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: var(--z-fox);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
  will-change: transform, opacity;
}
.fox-cursor.is-active {
  opacity: 0.42;
}
.fox-cursor.is-peeking {
  opacity: 0.78;
  transform: translate(-50%, -50%) scale(1.1);
}
.fox-cursor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(58, 48, 44, 0.25));
}

@media (max-width: 1023px), (hover: none), (prefers-reduced-motion: reduce) {
  .fox-cursor { display: none; }
}

/* ---------- Header logo idle twitch (ear rotation) ---------- */

.site-logo__mark .fox-ear-l,
.site-logo__mark .fox-ear-r {
  transform-origin: 50% 80%;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-logo.is-twitch .fox-ear-l { animation: ear-twitch-l 220ms var(--ease-out); }
.site-logo.is-twitch .fox-ear-r { animation: ear-twitch-r 220ms var(--ease-out) 60ms; }

@keyframes ear-twitch-l {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-14deg); }
}
@keyframes ear-twitch-r {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(12deg); }
}

.site-logo.is-wag .fox-tail {
  transform-origin: 0% 50%;
  animation: tail-wag 480ms var(--ease-soft);
}
@keyframes tail-wag {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-9deg); }
  75%      { transform: rotate(9deg); }
}

/* ---------- Scroll-reveal walker (one per major section, max 2 per page) ---------- */

.fox-walker {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  width: clamp(36px, 4vw, 64px);
  opacity: 0;
}
.fox-walker.is-walking {
  animation: fox-walk var(--dur-slow) var(--ease-out) forwards;
}
@keyframes fox-walk {
  0%   { opacity: 0; transform: translateX(-30px); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(120px); }
}

/* ---------- 404 sleeping fox ---------- */

.fox-sleep {
  width: clamp(140px, 30vw, 240px);
  margin-inline: auto;
  animation: breath 3.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .fox-walker, .fox-sleep, .site-logo.is-twitch *, .site-logo.is-wag * {
    animation: none !important;
  }
}

/* ---------- About story-block fox (sitting, slow tail wag) ---------- */

.fox-sitting {
  width: clamp(120px, 14vw, 180px);
}
.fox-sitting .fox-tail {
  transform-origin: 10% 60%;
  animation: tail-slow 3s var(--ease-soft) infinite;
}
@keyframes tail-slow {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fox-sitting .fox-tail { animation: none; }
}