/* =========================================================
   Le renard triste (pages d'erreur statiques et 404 de l'application).
   Repris de web-games/assets/css/error.css ; les décalages d'animation des
   facettes passent par des classes au lieu d'attributs style (CSP stricte).
   Intro : contours tracés, remplis, facettes qui glissent en place.
   Au repos : il respire, ses oreilles se balancent, il cligne et pleure.
   Humeurs : look (404) · no (403) · glitch (500) · sleep (503).
   ========================================================= */
.fox-sad { display: block; width: 100%; height: auto; overflow: visible; }
.fox-sad polygon {
  --i: 0; --dx: 0px; --dy: 0px;
  stroke: var(--accent); stroke-width: 0; stroke-linejoin: miter; stroke-dasharray: 1;
  animation:
    fx-draw 1.5s var(--ease) calc(var(--i) * .08s) both,
    fx-in 1.4s var(--ease) calc(var(--i) * .08s) both;
}
.fox-sad .o { fill: var(--accent); }
.fox-sad .k { fill: var(--fox-ink); }
.fox-sad .p-ear { --i: 0; --dy: -6px; }
.fox-sad .p-earin { --i: 1; --dy: -6px; }
.fox-sad .p-top { --i: 2; --dy: 8px; }
.fox-sad .p-cheekL { --i: 3; --dx: -10px; }
.fox-sad .p-cheekR { --i: 3; --dx: 10px; }
.fox-sad .p-eye { --i: 5; }
.fox-sad .p-nose { --i: 6; --dy: -4px; }
@keyframes fx-draw {
  from { stroke-dashoffset: 1; stroke-width: .5; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0; stroke-width: .5; fill-opacity: 0; }
  to   { stroke-dashoffset: 0; stroke-width: 0; fill-opacity: 1; }
}
@keyframes fx-in { from { transform: translate(var(--dx), var(--dy)); } }

.fox-sad .fx-body, .fox-sad .fx-head, .fox-sad .fx-ear, .fox-sad .fx-eyes { transform-box: view-box; }
.fox-sad .fx-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-blink 6.4s ease-in-out 2.4s infinite; }
.fox-sad .fx-body { animation: fx-bob 4.6s ease-in-out 1.8s infinite; }
@keyframes fx-bob { 50% { transform: translateY(1.1px); } }
.fox-sad .fx-earL { transform-origin: 29px 4px; animation: fx-sway-l 5.2s ease-in-out 1.8s infinite; }
.fox-sad .fx-earR { transform-origin: 71px 4px; animation: fx-sway-r 5.2s ease-in-out 2.1s infinite; }
@keyframes fx-sway-l { 50% { transform: rotate(3.2deg); } }
@keyframes fx-sway-r { 50% { transform: rotate(-3.2deg); } }
@keyframes fx-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

.fox-sad .fx-tear { fill: #3DB8FF; opacity: 0; transform-box: fill-box; transform-origin: 50% 0; animation: fx-tear 5s ease-in 2.6s infinite; }
.fox-sad .fx-tear--2 { animation-delay: 5s; }
@keyframes fx-tear {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  14%  { opacity: .95; transform: translateY(0) scale(1); }
  40%  { opacity: .95; transform: translateY(1.5px) scale(1.15, 1.35); }
  80%  { opacity: 0; transform: translateY(20px) scale(.9, 1.2); }
  100% { opacity: 0; transform: translateY(20px) scale(0); }
}

/* 404 — il cherche la page partout */
.m-look .fx-eyes { animation: fx-look 7s ease-in-out 2.2s infinite; }
@keyframes fx-look { 0%, 12%, 88%, 100% { transform: translateX(0); } 22%, 36% { transform: translateX(-1.8px); } 50%, 70% { transform: translateX(1.8px); } }
/* 403 — un « non » ferme et désolé */
.m-no .fx-head { transform-origin: 50px 62px; animation: fx-no 5.5s ease-in-out 2.4s infinite; }
@keyframes fx-no { 0%, 62%, 100% { transform: rotate(0); } 67% { transform: rotate(-5deg); } 72% { transform: rotate(5deg); } 77% { transform: rotate(-4deg); } 82% { transform: rotate(3deg); } 88% { transform: rotate(0); } }
/* 500 — court-circuit */
.m-glitch .fx-head { animation: fx-glitch 3.4s steps(1) 2.2s infinite; }
@keyframes fx-glitch { 0%, 86%, 100% { transform: none; } 88% { transform: translate(1.6px, 0) skewX(-5deg); } 90% { transform: translate(-1.8px, .5px) skewX(4deg); } 92% { transform: translate(.8px, -.6px); } 94% { transform: translate(-.6px, 0) skewX(-2deg); } }
/* 503 — endormi */
.m-sleep .fx-eye { animation: none; transform: scaleY(.1); }
.m-sleep .fx-tear { display: none; }
.m-sleep .fx-body { animation: fx-breathe 5s ease-in-out 1.8s infinite; transform-origin: 50px 70px; }
@keyframes fx-breathe { 50% { transform: scale(1.025) translateY(.6px); } }
.fx-z { fill: var(--accent); font-family: var(--f-mono); font-weight: 500; opacity: 0; animation: fx-z 3.6s ease-out 2.4s infinite; }
.fx-z--2 { animation-delay: 3.5s; }
.fx-z--3 { animation-delay: 4.6s; }
@keyframes fx-z { 0% { opacity: 0; transform: translate(0, 4px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(5px, -9px); } }

@media (prefers-reduced-motion: reduce) {
  .fox-sad polygon, .fox-sad .fx-body, .fox-sad .fx-ear, .fox-sad .fx-eyes, .fox-sad .fx-eye, .fox-sad .fx-head, .fox-sad .fx-tear, .fx-z { animation: none !important; }
  .fox-sad .fx-tear, .fx-z { display: none; }
  .m-sleep .fx-eye { transform: scaleY(.1); }
}