.writing-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.writing-sheep {
  width: min(416px, 80%);
  flex-shrink: 0;
  margin: auto 0 0 auto;
  padding-top: 32px;
}

.writing-sheep img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 82%;
  pointer-events: none;
  user-select: none;
}

.sheep-play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 40%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The floor is a separate render: it never follows the sheep's rotation. */
.sheep-play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/writing/cotton-sheep-shadow.webp") center / contain no-repeat;
  transform-origin: 50% 82%;
  pointer-events: none;
}

.sheep-play:focus-visible {
  outline: 2px dashed var(--d2);
  outline-offset: 6px;
}

.sheep-play[data-reaction="peek"] img { animation: sheep-peek 780ms ease-in-out; }
.sheep-play[data-reaction="hop"] img { animation: sheep-hop 950ms ease-in-out; }
.sheep-play[data-reaction="shiver"] img { animation: sheep-shiver 900ms ease-in-out; }

.sheep-play[data-reaction="hop"]::before {
  animation: sheep-hop-shadow 950ms ease-in-out;
}

@keyframes sheep-peek {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg) translateY(-3px); }
  55% { transform: rotate(5deg); }
  78% { transform: rotate(-2deg); }
}

@keyframes sheep-hop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  16% { transform: translateY(3px) rotate(-3deg) scale(1.05, .93); }
  42% { transform: translateY(-38px) rotate(-9deg) scale(.97, 1.03); }
  65% { transform: translateY(0) rotate(3deg) scale(1.06, .93); }
  82% { transform: translateY(-10px) rotate(4deg) scale(1); }
}

@keyframes sheep-shiver {
  0%, 100% { transform: translateX(0) rotate(0); }
  18%, 42% { transform: translateX(-3px) rotate(-6deg); }
  30%, 54% { transform: translateX(3px) rotate(6deg); }
  68% { transform: translateX(-2px) rotate(-4deg); }
  82% { transform: translateX(2px) rotate(2deg); }
}

/* Rising above a soft light's contact shadow makes it broader and fainter. */
@keyframes sheep-hop-shadow {
  0%, 16%, 65%, 100% { transform: scale(1); opacity: 1; filter: blur(0); }
  42% { transform: scale(1.07, 1.12); opacity: .35; filter: blur(4px); }
  82% { transform: scale(1.02, 1.04); opacity: .7; filter: blur(1.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .sheep-play[data-reaction] img,
  .sheep-play[data-reaction]::before { animation: none; }
}

.writing-page .construction-note {
  margin-top: 4px;
}