/* Sheep.exe — shared between maintenance mode and blog easter egg */

/* Template source (cloned by sheep.js, never displayed directly) */
.sheep-template {
  display: none;
}

#sheep-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

.maintenance-sheep {
  position: absolute;
  width: 88px;
  height: 66px;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.sheep-body {
  width: 100%;
  height: 100%;
}

.maintenance-sheep.jumping .sheep-body {
  animation: sheepJump 0.55s ease-out;
}

@keyframes sheepJump {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-16px); }
  55%      { transform: translateY(0); }
  75%      { transform: translateY(-7px); }
  92%      { transform: translateY(0); }
}

.sheep-svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter:
    drop-shadow(1px 0 0 var(--color-border-hover))
    drop-shadow(-1px 0 0 var(--color-border-hover))
    drop-shadow(0 1px 0 var(--color-border-hover))
    drop-shadow(0 -1px 0 var(--color-border-hover));
}

.sheep-wool rect             { fill: #d9d9e2; }
.sheep-wool rect:first-child { fill: #f4f4f8; }
.sheep-head rect,
.leg             { fill: #26262c; }
.eye             { fill: #ececf1; }

.sheep-black .sheep-wool rect             { fill: #3a3a45; }
.sheep-black .sheep-wool rect:first-child { fill: #474753; }
.sheep-black .sheep-head rect             { fill: #1d1d24; }
.sheep-black .leg                         { fill: #1d1d24; }

.walking .leg:nth-of-type(odd)  { animation: legA 0.28s steps(1, end) infinite; }
.walking .leg:nth-of-type(even) { animation: legB 0.28s steps(1, end) infinite; }

@keyframes legA {
  50% { transform: translateX(-1px); }
}

@keyframes legB {
  50% { transform: translateX(1px); }
}

.grazing .sheep-head {
  animation: grazeBob 0.9s steps(1, end) infinite alternate;
}

@keyframes grazeBob {
  to { transform: translateY(1px); }
}

.sleeping .sheep-body {
  transform: scaleY(0.94);
}

.sheep-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 55%;
  transform: translate(-50%, 4px) scale(0.7);
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 0.35rem;
  padding: 0.15rem 0.45rem;
  transition: opacity 0.12s steps(2), transform 0.12s steps(2);
}

.sheep-bubble.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (max-width: 640px) {
  .maintenance-sheep {
    width: 64px;
    height: 48px;
  }
}

/* Sheep v2 — laser wars & Super Mouton */

.sheep-cape,
.sheep-xeyes {
  display: none;
}

.super .sheep-cape {
  display: block;
}

.dying .sheep-xeyes {
  display: block;
}

.dying .eye,
.dying-rm .eye {
  display: none;
}

.laser-charging .eye {
  fill: var(--color-accent, #ef4444);
}

.laser-charging .sheep-svg {
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-accent, #ef4444) 70%, transparent));
}

.beam {
  position: absolute;
  height: 3px;
  border-radius: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #fef08a, var(--color-accent, #ef4444));
  box-shadow: 0 0 8px color-mix(in oklab, var(--color-accent, #ef4444) 80%, transparent);
  pointer-events: none;
  z-index: 5;
  animation: beamFlash 260ms steps(2, end);
}

@keyframes beamFlash {
  50% { opacity: 0.55; }
}

.dying .sheep-body {
  animation: sheepDie 800ms ease-in forwards;
}

@keyframes sheepDie {
  0%   { transform: scaleY(1); opacity: 1; }
  25%  { transform: scaleY(-1) translateY(30%); opacity: 1; }
  75%  { transform: scaleY(-1) translateY(30%); opacity: 1; }
  100% { transform: scaleY(-1) translateY(30%) scale(0.85); opacity: 0; }
}

/* Reduced-motion casualty: pure opacity, no transforms (JS sets it) */
.dying-rm {
  opacity: 0;
}

.super:not(.flying) .sheep-svg {
  animation: superGlow 350ms ease-in-out infinite alternate;
}

@keyframes superGlow {
  from { filter: drop-shadow(0 0 2px color-mix(in oklab, var(--color-accent, #ef4444) 40%, transparent)); }
  to   { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--color-accent, #ef4444) 90%, transparent)); }
}

/* Flight transform is rAF-driven in sheep.js (both direct and edge-bounce
   variants): the body transform is written per frame so the geometry adapts
   to the real takeoff position. The .flying / .flying-bounce classes stay as
   semantic and test hooks. */

/* Worms Armageddon flight: hop → sine-wave cruise → exit full-screen.
   The trajectory now lives in sheep.js (rAF-driven, position-aware):
   direct exit, or edge bounce with two loopings when the takeoff would
   not cross half the screen. */

@media (prefers-reduced-motion: reduce) {
  /* Static solid line instead of animated gradient + glow */
  .beam {
    background: var(--color-accent, #ef4444);
    box-shadow: none;
  }
}

/* Worms-style flight trail */

.bb-trail {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

.bb-trail-puff {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fbcfe8 0%, #ec4899 55%, transparent 72%);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.55);
  filter: blur(1px);
  animation: trailPuff 1100ms ease-out forwards;
}

.bb-trail-ember {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fed7aa 0%, #f97316 55%, transparent 72%);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.65);
  filter: blur(1px);
  animation: trailPuff 1100ms ease-out forwards;
}

@keyframes trailPuff {
  from { transform: scale(0.5); opacity: 0.95; }
  to   { transform: scale(1.7) translate(-6px, -10px); opacity: 0; }
}

.bb-trail-star {
  color: #fef08a;
  font-size: 10px;
  text-shadow: 0 0 4px rgba(254, 240, 138, 0.9), 0 0 1px rgba(60, 50, 0, 0.55);
  animation: trailStar 1000ms ease-out forwards;
}

@keyframes trailStar {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 1; }
  50%  { transform: scale(1.2) rotate(90deg); opacity: 1; }
  100% { transform: scale(0.4) rotate(180deg); opacity: 0; }
}

/* Takeoff / bounce particle bursts + screen shake */

.bb-burst {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  animation: burstFly 600ms ease-out forwards;
}

.bb-burst.ember {
  background: #f97316;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.8);
}

.bb-burst.spark {
  background: #fef08a;
  box-shadow: 0 0 6px rgba(254, 240, 138, 0.8);
}

@keyframes burstFly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.3); opacity: 0; }
}

.shake {
  animation: screenShake 300ms steps(2, end);
}

@keyframes screenShake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(3px, -2px); }
  50%  { transform: translate(-3px, 2px); }
  75%  { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Eating: the head dips and munches, a grass tuft shrinks at the mouth */

.eating .sheep-head {
  transform-box: view-box;
  transform-origin: 12px 6px;
  animation: headMunch 600ms steps(2, end) 3 alternate;
}

@keyframes headMunch {
  from { transform: rotate(0deg); }
  to   { transform: rotate(26deg); }
}

.grass-tuft {
  position: absolute;
  width: 4px;
  height: 3px;
  background: #4ade80;
  box-shadow: 4px -2px 0 #22c55e, 8px 0 0 #16a34a;
  transform-origin: 50% 100%;
  animation: grassShrink 1800ms steps(4, end) forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes grassShrink {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(0.25); opacity: 0.5; }
}

/* Poop: pixel droppings that fertilize the Conway grid (cells light up at the spot) */

.sheep-poop {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #6b4423;
  box-shadow: 2px 3px 0 #4a2f18;
  animation: poopDrop 1400ms steps(2, end) forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes poopDrop {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(5px); opacity: 0.9; }
  100% { transform: translateY(7px); opacity: 0; }
}

/* Corpse: pixel heap left by a dead sheep, decaying into grid fertilizer */

.sheep-corpse {
  position: absolute;
  width: 14px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: #8a8a93;
  box-shadow: 4px -4px 0 #6b6b74, 9px -2px 0 #4a4a52;
  opacity: 0.7;
  animation: corpseDecay 20s linear forwards;
  pointer-events: none;
  z-index: 2;
}

@keyframes corpseDecay {
  from { opacity: 0.7; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shake,
  .bb-burst {
    animation: none;
  }
}

/* Flatulence: pixel gas puffs drifting away from the rear */

.sheep-fart {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 3;
  pointer-events: none;
  background: #a3e635;
  box-shadow: 0 0 3px rgba(163, 230, 53, 0.7);
  animation: fartDrift 1100ms steps(3, end) forwards;
}

@keyframes fartDrift {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0.85; }
  60%  { opacity: 0.55; }
  100% { transform: translate(var(--fart-dx, -16px), var(--fart-dy, 4px)) scale(1.7); opacity: 0; }
}

/* Black sheep super fart: bigger, darker, meaner */

.sheep-fart-super {
  width: 18px;
  height: 18px;
  background: #4d7c0f;
  box-shadow: 0 0 6px rgba(77, 124, 15, 0.8);
  animation-duration: 2200ms;
}

/* Black sheep bubble: distinct grey tint, theme accent surround */

.sheep-black .sheep-bubble {
  background: #3a3a44;
  color: #d7d7e0;
  border-color: var(--color-accent);
}

/* Black sheep flight: ember-and-star trail (styles in .bb-trail-ember / .bb-trail-star) */

.loving .sheep-bubble.visible {
  animation: heartBeat 600ms steps(2, end) infinite;
}

@keyframes heartBeat {
  0%   { transform: translate(-50%, 0) scale(1); }
  50%  { transform: translate(-50%, 0) scale(1.2); }
  100% { transform: translate(-50%, 0) scale(1); }
}

/* Fart wind-up: tiny jitter while the sheep holds it in */

.trembling .sheep-body {
  animation: sheepTremble 120ms steps(2, end) infinite;
}

@keyframes sheepTremble {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}