/* The penguin warden of the royal guard and the speech bubble.
   Markup comes from warden.js (Warden.mount). */
.guard__sway {
  transform-box: view-box;
  transform-origin: 200px 255px;
}

.guard__upper {
  transform-box: view-box;
  transform-origin: 200px 252px;
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}

.guard.pose-bow .guard__upper {
  transform: rotate(13deg);
}

.guard__shadow {
  fill: rgba(0, 0, 0, 0.35);
}

.guard__pole {
  stroke: #5a3a22;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.guard__blade {
  fill: #c9ccd6;
  stroke: #6a6e7a;
  stroke-width: 0.5;
}

.penguin__body,
.penguin__head,
.penguin__flipper {
  fill: #1c1a26;
}

.penguin__flipper {
  transform-box: view-box;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.penguin__flipper--left {
  transform-origin: 186px 214px;
}

.guard.pose-halt .penguin__flipper--left {
  transform: rotate(118deg);
}

.penguin__flipper--right {
  transform-origin: 214px 214px;
}

.guard.pose-bow .penguin__flipper--right {
  transform: rotate(-30deg);
}

.penguin__belly,
.penguin__face {
  fill: #fbf7ef;
}

.penguin__tunic {
  fill: #c0223e;
}

.penguin__collar {
  stroke: var(--gold);
  stroke-width: 1.4;
}

.penguin__belt {
  fill: #f4efe4;
}

.penguin__buckle,
.penguin__button {
  fill: var(--gold);
}

.penguin__foot,
.penguin__beak {
  fill: #f2a23a;
}

.penguin__beak-lower {
  fill: #d9822a;
  transform-box: fill-box;
  transform-origin: center top;
}

.guard.is-talking .penguin__beak-lower {
  animation: beak-talk 0.16s ease-in-out infinite alternate;
}

.penguin__blush {
  fill: #f4a0a8;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.guard.mood-glad .penguin__blush {
  opacity: 0.95;
}

.penguin__eye {
  fill: #1c1a26;
}

.penguin__glint {
  fill: #fff;
}

.guard__eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: guard-blink 4.6s ease-in-out infinite;
  transition: opacity 0.2s ease;
}

.penguin__happy {
  fill: none;
  stroke: #1c1a26;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.guard.mood-glad .guard__eyes {
  opacity: 0;
}

.guard.mood-glad .penguin__happy {
  opacity: 1;
}

.guard__brows {
  stroke: #1c1a26;
  stroke-width: 0.9;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s ease;
}

.guard.mood-surprised .guard__brows,
.guard.mood-glad .guard__brows {
  transform: translateY(-1.1px);
}

.guard.mood-surprised .guard__eyes {
  animation: none;
  transform: scale(1.25);
}

.guard.mood-stern .guard__brow--left {
  transform: translateY(0.6px) rotate(18deg);
}

.guard.mood-stern .guard__brow--right {
  transform: translateY(0.6px) rotate(-18deg);
}

.guard.mood-suspicious .guard__brow--left {
  transform: translateY(0.8px) rotate(8deg);
}

.guard.mood-suspicious .guard__brow--right {
  transform: translateY(-0.9px) rotate(-10deg);
}

.guard.mood-suspicious .guard__eyes {
  animation: none;
  transform: scaleY(0.6);
}

.penguin__strap {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 0.8;
}

.penguin__hat {
  fill: #121018;
  stroke: #0a080e;
  stroke-width: 0.6;
  stroke-dasharray: 1.2 0.8;
}

.penguin__hat-sheen {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.penguin__plume {
  fill: #e0304e;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: plume-sway var(--banner-pace) ease-in-out infinite;
}

.guard__head {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.guard.is-shaking .guard__head {
  animation: guard-shake 0.9s ease-in-out;
}

/* Speech bubble above the warden */
.guard-speech {
  position: absolute;
  z-index: 6;
  margin: 0;
  display: grid;
  width: max-content;
  max-width: min(62cqw, 92vw);
  padding: 0.6em 1em 0.65em;
  border: 1.5px solid #c9a45a;
  border-radius: 0.9em;
  background: #f7ecd2;
  color: #2a1018;
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.1cqw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 200, 120, 0.18);
  transform-origin: 50% 110%;
}

.guard-speech[hidden] {
  display: none;
}

.guard-speech::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.8em;
  height: 0.8em;
  translate: -50% -50%;
  rotate: 45deg;
  background: #f7ecd2;
  border-right: 1.5px solid #c9a45a;
  border-bottom: 1.5px solid #c9a45a;
}

.guard-speech__size,
.guard-speech__text {
  grid-area: 1 / 1;
}

.guard-speech__size {
  visibility: hidden;
}

.guard-speech__more {
  position: absolute;
  right: 0.45em;
  bottom: 0.2em;
  font-size: 0.7em;
  font-style: normal;
  color: #8a5a28;
  opacity: 0;
}

.guard-speech.has-more.is-waiting .guard-speech__more {
  opacity: 1;
  animation: more-bob 0.8s ease-in-out infinite alternate;
}

.guard-speech.is-pop {
  animation: speech-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes guard-blink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.1);
  }
}

@keyframes guard-shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-11deg);
  }
  45% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(-7deg);
  }
  88% {
    transform: rotate(3deg);
  }
}

@keyframes penguin-waddle {
  from {
    transform: rotate(-6deg);
  }
  to {
    transform: rotate(6deg);
  }
}

@keyframes penguin-idle {
  0%,
  100% {
    transform: rotate(-1.5deg);
  }
  50% {
    transform: rotate(1.5deg);
  }
}

@keyframes beak-talk {
  from {
    transform: translateY(0) scaleY(0.8);
  }
  to {
    transform: translateY(1.3px) scaleY(1.25);
  }
}

@keyframes plume-sway {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@keyframes speech-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes more-bob {
  from {
    translate: 0 0;
  }
  to {
    translate: 2px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guard__upper,
  .penguin__flipper {
    transition: none;
  }

  .guard__eyes,
  .penguin__plume,
  .guard__sway,
  .guard.is-talking .penguin__beak-lower,
  .guard.is-shaking .guard__head,
  .guard-speech.is-pop,
  .guard-speech__more {
    animation: none !important;
  }
}

/* A festival rosette on the tunic, worn on the kingdom's anniversary */
.penguin__rosette {
  display: none;
}

body[data-festival] .penguin__rosette {
  display: inline;
}

.penguin__rosette-bloom {
  fill: #f4a0b4;
  stroke: #fbf3e0;
  stroke-width: 0.5;
  stroke-dasharray: 0.9 0.5;
}

.penguin__rosette-heart {
  fill: var(--gold, #e8c98a);
}

.penguin__rosette-ribbon {
  fill: #b8365e;
}