:root {
  --wine-deep: #12060b;
  --wine-mid: #2a0f1a;
  --wine-lift: #3d1524;
  --plum: #4a1830;
  --gold: #e8c98a;
  --gold-soft: #d4af6a;
  --gold-dim: rgba(232, 201, 138, 0.7);
  --iron: #1c1218;
  --iron-edge: #3a2a32;
  --lantern: rgba(255, 186, 110, 0.55);
  --lantern-core: rgba(255, 220, 160, 0.85);
  --night-ink: #0b0609;
  --font-display: "Cinzel", "Palatino Linotype", Palatino, serif;
  --font-body: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--gold);
  background: var(--ground-deep);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* —— Weather overlays —— */
.weather {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(236, 240, 255, 1);
  opacity: 0;
}

.flash.is-striking {
  animation: lightning 1.1s ease-out;
}

/* —— Realm: clips the land that runs beneath the castle —— */
.realm {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  /* clip, not hidden: a hidden box can still be scrolled by focus */
  overflow: clip;
}

/* —— Castle scene —— */
.scene {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: max(1rem, 3dvh) 0 0;
  display: flex;
  justify-content: center;
}

/* The castle fills what the screen can spare above the warden's form */
.castle-wrap {
  position: relative;
  flex: none;
  width: clamp(20rem, min(58rem, 96vw, (100dvh - 16rem) / 0.65), 100vw);
  aspect-ratio: 400 / 260;
  container-type: inline-size;
}

/* Mist that curls in front of the castle's feet */
.castle-wrap::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 45%;
  bottom: -12%;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--fog) * 0.75);
  background: radial-gradient(
    ellipse 55% 45% at 50% 75%,
    color-mix(in srgb, var(--sky-low) 30%, #e2e2ea) 0%,
    transparent 75%
  );
  filter: blur(4px);
}

.landscape {
  position: absolute;
  left: 50%;
  top: 90.4%;
  width: 240vw;
  height: 300vh;
  translate: -50% 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--hill-near) 0,
    color-mix(in srgb, var(--hill-near) 50%, var(--ground-deep)) 3.5rem,
    var(--ground-deep) 12rem
  );
}

.landscape__hills {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: 9rem;
}

.hill--far {
  fill: var(--hill-far);
}

.hill--mid {
  fill: var(--hill-mid);
}

.hill--near {
  fill: var(--hill-near);
}

.fog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 4rem);
  height: 9rem;
  opacity: var(--fog);
  pointer-events: none;
}

.fog__band {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    color-mix(in srgb, var(--sky-low) 35%, #dcdce4) 0%,
    transparent 70%
  );
  filter: blur(6px);
  animation: fog-drift 38s ease-in-out infinite alternate;
}

.fog__band--1 {
  top: 1rem;
  opacity: 0.85;
}

.fog__band--2 {
  top: 3.8rem;
  opacity: 0.7;
  animation-duration: 52s;
  animation-direction: alternate-reverse;
}

/* —— The castle (inline SVG) —— */
.castle {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: brightness(calc(var(--asleep-bright) * var(--weather-bright))) saturate(0.9);
  transition: filter 1.4s ease;
}

.scene[data-state="waking"] .castle,
.scene[data-state="known"] .castle,
.scene[data-state="opening"] .castle {
  filter: brightness(calc(0.18 + var(--weather-bright) * 0.85)) saturate(1.05);
}

.stop-stone-light { stop-color: var(--stone-light); }
.stop-stone-dark { stop-color: var(--stone-dark); }
.stop-roof-light { stop-color: var(--roof-light); }
.stop-roof-dark { stop-color: var(--roof-dark); }
.stop-water-top { stop-color: var(--water-top); }
.stop-water-low { stop-color: var(--water-low); }

.bricks {
  fill: none;
  stroke: rgba(0, 0, 0, 0.16);
  stroke-width: 0.6;
}

.merlons,
.tower__top,
.keep__band {
  fill: var(--merlon);
}

.tower__corbels {
  fill: var(--stone-dark);
}

.slit {
  fill: #0c0508;
}

.roof__rim {
  stroke: var(--roof-dark);
  stroke-width: 2;
}

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

.banner {
  fill: #8a2a48;
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: left center;
  animation: pennant var(--banner-pace) ease-in-out infinite;
  transition: fill 1s ease, opacity 1s ease;
}

.banner--right {
  animation-delay: -1.1s;
}

.scene[data-state="known"] .banner,
.scene[data-state="opening"] .banner {
  fill: #b8365e;
  opacity: 1;
}

.window {
  fill: #1a0c12;
  transition: fill 1.2s ease;
}

.window__mullion {
  fill: none;
  stroke: var(--stone-dark);
  stroke-width: 1.2;
}

.scene[data-state="waking"] .window {
  animation: window-kindle 4.2s ease-out both;
  filter: url(#f-glow);
}

.scene[data-state="waking"] .window--side {
  animation-delay: 0.55s;
}

.scene[data-state="waking"] .window--center {
  animation-delay: 1.1s;
}

.scene[data-state="waking"] .tower--right .window {
  animation-delay: 2.2s;
}

.scene[data-state="known"] .window,
.scene[data-state="opening"] .window {
  fill: #ffcf8a;
  filter: url(#f-glow);
}

.keep__battlement {
  fill: var(--merlon);
}

.scene[data-state="waking"] .keep__battlement {
  animation: battlement-kindle 5s ease-out both;
}

.scene[data-state="known"] .keep__battlement,
.scene[data-state="opening"] .keep__battlement {
  fill: var(--gold-soft);
  filter: url(#f-glow);
}

.keep__crown {
  fill: #8a6a48;
  opacity: 0.6;
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: fill 1s ease, opacity 1s ease, transform 1s ease;
}

.scene[data-state="known"] .keep__crown,
.scene[data-state="opening"] .keep__crown {
  fill: var(--gold);
  opacity: 1;
  transform: translateY(-2px);
  filter: url(#f-glow);
}

.crest {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
  font-size: 15px;
  fill: var(--gold-dim);
  opacity: 0.45;
  transition: opacity 1s ease, fill 1s ease;
}

.scene[data-state="known"] .crest,
.scene[data-state="opening"] .crest {
  fill: var(--gold);
  opacity: 1;
}

.arch {
  fill: color-mix(in srgb, var(--stone-dark) 80%, #000);
}

.arch__keystones {
  fill: none;
  stroke: var(--stone-light);
  stroke-width: 3;
  stroke-dasharray: 4 2;
  opacity: 0.55;
}

.gate__void {
  fill: #0a0406;
}

.gate__hall {
  opacity: 0;
  transition: opacity 2.6s ease;
}

.scene[data-state="known"] .gate__hall {
  opacity: 0.4;
}

.scene[data-state="opening"] .gate__hall {
  opacity: 1;
}

.gate {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 3.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gate--right {
  transform-origin: right center;
  transition-delay: 0.35s;
}

.gate__panel {
  fill: #3a2218;
  stroke: #1a0c0a;
  stroke-width: 0.6;
}

.gate__planks {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 0.6;
}

.gate__bar {
  fill: #9a7a50;
}

.scene[data-state="waking"] .gate--right,
.scene[data-state="known"] .gate--right {
  transform: translateX(42%) rotate(1deg);
}

.scene[data-state="waking"] .gate__hall {
  opacity: 0.3;
}

.scene[data-state="known"] .gate--left {
  transform: translateX(-12%) rotate(-2deg);
}

.scene[data-state="opening"] .gate--left {
  transform: translateX(-108%) rotate(-6deg);
}

.scene[data-state="opening"] .gate--right {
  transform: translateX(108%) rotate(6deg);
}

.lantern__bracket {
  fill: none;
  stroke: #3a2a32;
  stroke-width: 1.2;
}

.lantern__case {
  fill: rgba(20, 12, 16, 0.85);
  stroke: var(--iron-edge);
  stroke-width: 0.8;
}

.lantern__flame {
  fill: #ffd08a;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 1.8s ease;
}

.lantern--right .lantern__flame {
  transition-delay: 0.9s;
}

.scene[data-state="waking"] .lantern__flame,
.scene[data-state="known"] .lantern__flame,
.scene[data-state="opening"] .lantern__flame {
  opacity: 1;
  filter: url(#f-glow);
  animation: flame-breathe 4.5s ease-in-out infinite;
}

.scene[data-state="waking"] .lantern--right .lantern__flame,
.scene[data-state="known"] .lantern--right .lantern__flame,
.scene[data-state="opening"] .lantern--right .lantern__flame {
  animation-delay: 0.9s;
}

body[data-time="night"] .scene[data-state="asleep"] .window--center,
body[data-time="dusk"] .scene[data-state="asleep"] .window--center {
  fill: #6a3a1c;
  filter: url(#f-glow);
}

body[data-season="winter"] .snowcap,
body[data-weather="snow"] .snowcap {
  opacity: 1;
}

.snowcap {
  fill: var(--snow);
  opacity: 0;
  transition: opacity 2s ease;
}

.bank {
  fill: var(--hill-near);
}

.bank--front {
  fill: color-mix(in srgb, var(--hill-near) 70%, var(--ground-deep));
}

.reflection {
  opacity: 0.3;
}

.ripples {
  fill: none;
  stroke: color-mix(in srgb, var(--sky-low) 55%, #fff);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.35;
  animation: ripple 6s ease-in-out infinite;
}

.bridge__deck {
  fill: color-mix(in srgb, #7a5238 var(--light), var(--night-ink));
}

.bridge__planks {
  fill: none;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 0.6;
}

.tree__trunk {
  fill: none;
  stroke: var(--bark);
  stroke-width: 2.8;
  stroke-linecap: round;
}

.tree__crown {
  fill: var(--foliage);
  opacity: var(--crown-on);
  transition: opacity 2s ease;
}

.tree__bloom {
  fill: var(--bloom);
  opacity: calc(var(--bloom-on) * var(--crown-on));
  transition: opacity 2s ease;
}

.pine__boughs {
  fill: var(--pine);
}

/* A brass ring knocker on a rosette plate, set on the door at hand height */
.knocker {
  position: absolute;
  left: 50%;
  top: 79.2%;
  translate: -50% -50%;
  z-index: 5;
  display: block;
  width: 4.4cqw;
  height: auto;
  aspect-ratio: 60 / 76;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.5s ease;
}

.knocker__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.knocker:not(.is-knocked) .knocker__art {
  animation: knocker-glow 2.6s ease-in-out infinite;
}

.knocker:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
  border-radius: 40%;
}

.knocker[hidden],
.knocker:disabled {
  display: none !important;
}

.knocker__plate-line {
  fill: none;
  stroke: #6a4818;
  stroke-width: 1.1;
  opacity: 0.55;
}

.knocker__ring {
  fill: none;
  stroke: url(#k-brass);
  stroke-width: 5.6;
}

.knocker__shine {
  fill: none;
  stroke: #fff5d6;
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.6;
}

/* The ring lifts on hover and strikes the stud when she knocks */
.knocker__swing {
  transform-box: view-box;
  transform-origin: 30px 17px;
  transition: transform 0.2s ease;
}

.knocker:hover .knocker__swing,
.knocker:focus-visible .knocker__swing {
  transform: translateY(-1.5px) scaleY(0.92);
}

.knocker.knocking .knocker__swing {
  animation: knock-swing 0.45s ease;
}

.knocker.is-pressed-key .knocker__swing {
  transform: translateY(-3px) scaleY(0.85);
}

.knocker__hint {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 2.1cqw, 0.9rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  transition: opacity 0.5s ease;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.9);
}

.knocker.is-knocked .knocker__hint {
  opacity: 0;
}


/* —— Story —— */
.story {
  position: relative;
  z-index: 4;
  width: min(34rem, calc(100% - 2.5rem));
  margin: 1.25rem auto 1rem;
  text-align: center;
  padding-bottom: 1rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.story.is-gone {
  opacity: 0;
  translate: 0 -0.6rem;
  visibility: hidden;
  transition:
    opacity 0.7s ease,
    translate 0.7s ease,
    visibility 0s linear 0.7s;
}

.story {
  transition: opacity 0.7s ease, translate 0.7s ease;
}

.warden-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A soft pool of shadow so the words read against any sky or field */
.story::before {
  content: "";
  position: absolute;
  inset: -2.5rem -1.5rem 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 55% at 50% 30%,
    rgba(10, 4, 8, 0.5),
    transparent 75%
  );
}

.story__eyebrow {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dim);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.story__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw + 0.8rem, 2.35rem);
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 36px rgba(255, 200, 120, 0.16);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.story__body,
.story__prompt {
  margin: 0.75rem auto 0;
  max-width: 30rem;
  font-size: clamp(1.05rem, 1.4vw + 0.7rem, 1.25rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--gold-soft);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.story__eyebrow.is-exit,
.story__title.is-exit,
.story__body.is-exit,
.story__prompt.is-exit {
  opacity: 0;
  transform: translateY(-0.55rem);
}

.story__eyebrow.is-enter,
.story__title.is-enter,
.story__body.is-enter,
.story__prompt.is-enter {
  opacity: 0;
  transform: translateY(0.65rem);
}

.story__eyebrow.is-enter.is-show,
.story__title.is-enter.is-show,
.story__body.is-enter.is-show,
.story__prompt.is-enter.is-show {
  opacity: 1;
  transform: translateY(0);
}

.royal-form.is-swap {
  opacity: 0.28;
  translate: -50% 0.45rem;
}

.story__prompt {
  color: var(--gold);
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw + 0.7rem, 1.2rem);
  letter-spacing: 0.04em;
}

.royal-form {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 20;
  margin: 0;
  width: min(26rem, calc(100% - 1.5rem));
  display: grid;
  gap: 0.85rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: 2px solid #e8c98a;
  border-radius: 0.35rem;
  background: #241018;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 200, 120, 0.18),
    0 22px 50px rgba(0, 0, 0, 0.55);
  text-shadow: none;
  animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* display:grid / fixed above would otherwise override the HTML hidden attribute */
.royal-form[hidden] {
  display: none !important;
}

.royal-form__label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffe6a8;
  text-align: center;
}

.royal-form__input {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.95rem 1rem;
  border: 2px solid #c9a45a;
  border-radius: 0.3rem;
  background: #f7ecd2;
  color: #2a1018;
  caret-color: #2a1018;
  font-family: var(--font-body);
  font-size: 1.45rem;
  text-align: center;
  letter-spacing: 0.04em;
  outline: none;
  -webkit-text-fill-color: #2a1018;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.royal-form__input::placeholder {
  color: rgba(42, 16, 24, 0.45);
  -webkit-text-fill-color: rgba(42, 16, 24, 0.45);
  opacity: 1;
}

.royal-form__input:focus {
  border-color: #8a5a28;
  background: #fff6e0;
  box-shadow:
    0 0 0 4px rgba(232, 201, 138, 0.35),
    inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Chrome autofill: keep light field + dark text */
.royal-form__input:-webkit-autofill,
.royal-form__input:-webkit-autofill:hover,
.royal-form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #2a1018;
  caret-color: #2a1018;
  box-shadow: 0 0 0 1000px #f7ecd2 inset;
  transition: background-color 99999s ease-out;
}

.royal-form__submit {
  justify-self: center;
  margin-top: 0.1rem;
  min-height: 3rem;
  padding: 0.8rem 2rem;
  border: 2px solid #e8c98a;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #9a4a62, #4a2030);
  color: #fff4d6;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.royal-form__submit:hover,
.royal-form__submit:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  outline: none;
}

.royal-form__submit:disabled {
  opacity: 0.55;
  cursor: wait;
}

.royal-form__error {
  margin: 0.25rem 0 0;
  font-style: italic;
  color: #e8b0a0;
  font-size: 1.05rem;
  line-height: 1.4;
}

@keyframes knock-ring {
  0%,
  100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-18deg);
  }
  65% {
    transform: rotate(10deg);
  }
}

@keyframes flame-breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes window-kindle {
  0% {
    fill: #1a0c12;
  }
  28% {
    fill: #4a2a18;
  }
  58% {
    fill: #a86030;
  }
  100% {
    fill: #ffcf8a;
  }
}

@keyframes battlement-kindle {
  0% {
    fill: var(--merlon);
  }
  30% {
    fill: #6a4830;
  }
  65% {
    fill: #c49a5a;
  }
  100% {
    fill: var(--gold-soft);
  }
}

@keyframes pennant {
  0%,
  100% {
    transform: skewY(-5deg) scaleX(1);
  }
  50% {
    transform: skewY(6deg) scaleX(0.86);
  }
}

@keyframes fog-drift {
  from {
    transform: translateX(-6%);
  }
  to {
    transform: translateX(6%);
  }
}

@keyframes ripple {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: translateX(3px);
    opacity: 0.15;
  }
}

@keyframes lightning {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.55;
  }
  9% {
    opacity: 0.08;
  }
  15% {
    opacity: 0.4;
  }
  45%,
  100% {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .castle-wrap {
    width: max(20rem, min(150vw, (100dvh - 16rem) / 0.65));
  }

  .story {
    margin-top: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lantern__flame,
  .banner,
  .knocker.knocking .knocker__ring,
  .royal-form,
  .window,
  .keep__battlement,
  .cloud,
  .birds,
  .birds svg,
  .fog__band,
  .ripples,
  .sky__stars::after {
    animation: none;
  }

  .flash {
    display: none;
  }

  .scene[data-state="waking"] .window,
  .scene[data-state="known"] .window,
  .scene[data-state="opening"] .window {
    animation: none;
    fill: #ffcf8a;
  }

  .scene[data-state="waking"] .keep__battlement,
  .scene[data-state="known"] .keep__battlement,
  .scene[data-state="opening"] .keep__battlement {
    animation: none;
    fill: var(--gold-soft);
  }

  body.atmos-ready,
  .castle,
  .gate,
  .gate__hall,
  .keep__crown,
  .crest,
  .window,
  .lantern__flame,
  .banner,
  .celestial,
  .story__eyebrow,
  .story__title,
  .story__body,
  .story__prompt,
  .royal-form {
    transition: none;
    transition-delay: 0s;
  }
}

/* —— The warden of the gate: a penguin of the royal guard —— */
.peep__hole {
  fill: #0a0406;
}

.peep__light {
  fill: #ffc47a;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.peep__eyes {
  fill: #fff4dc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease 0.35s;
}

.peep__grille {
  stroke: #1a0c0a;
  stroke-width: 0.8;
}

.peep__cover {
  fill: #4a2c1e;
  stroke: #1a0c0a;
  stroke-width: 0.5;
  transform-box: fill-box;
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.scene[data-guard="peek"] .peep__cover {
  transform: translateX(96%);
}

.scene[data-guard="peek"] .peep__light {
  opacity: 0.55;
}

.scene[data-guard="peek"] .peep__eyes {
  opacity: 1;
  animation: peep-look 3.2s ease-in-out 0.8s infinite;
}

.scene[data-guard="peek"][data-peep="impatient"] .peep__eyes {
  animation: peep-squint 0.9s ease-in-out infinite alternate;
}

.guard {
  opacity: 0;
  visibility: hidden;
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: translateY(-10px) scale(0.66);
  transition:
    opacity 0.7s ease,
    transform 1.1s cubic-bezier(0.22, 0.8, 0.3, 1),
    visibility 0s linear 1.1s;
}

.scene[data-guard="out"] .guard,
.scene[data-guard="aside"] .guard {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.7s ease 0.55s,
    transform 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.55s,
    visibility 0s;
}

.scene[data-guard="aside"] .guard {
  transform: translateX(-46px);
  transition:
    opacity 0.7s ease,
    transform 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.6s,
    visibility 0s;
}

/* A waddle on the way out, then a gentle sway at post */

.scene[data-guard="out"] .guard__sway {
  animation:
    penguin-waddle 0.26s ease-in-out 0.55s 4 alternate,
    penguin-idle 3.2s ease-in-out 1.7s infinite;
}

.scene[data-guard="aside"] .guard__sway {
  animation:
    penguin-waddle 0.26s ease-in-out 0.6s 6 alternate,
    penguin-idle 3.2s ease-in-out 2.2s infinite;
}

.castle-wrap .guard-speech {
  left: 50%;
  bottom: 40%;
  translate: -50% 0;
  transition: left 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.6s;
}

.scene[data-guard="aside"] .guard-speech {
  left: 38.5%;
}

@keyframes peep-look {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-0.8px);
  }
  60% {
    transform: translateX(0.8px);
  }
  88% {
    transform: translateX(0) scaleY(1);
  }
  93% {
    transform: scaleY(0.1);
  }
}

@keyframes peep-squint {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.45) translateY(0.4px);
  }
}

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

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

/* —— The kingdom around the castle —— */
.kingdom-path__stones {
  fill: color-mix(in srgb, #b09c8c calc(35% + var(--light) * 0.65), var(--night-ink));
}

.kingdom-path__joints {
  fill: none;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 0.5;
}

.kingdom-path__edge {
  fill: none;
  stroke: rgba(60, 44, 36, 0.55);
  stroke-width: 1.2;
}

.kingdom-lantern__post,
.kingdom-lantern__cap {
  fill: #2a1c16;
}

.kingdom-lantern__lamp {
  fill: #4a3a30;
  stroke: #2a1c16;
  stroke-width: 0.5;
  transition: fill 1.2s ease;
}

.kingdom-lantern__glow {
  fill: #ffd98a;
  opacity: 0;
  filter: url(#f-glow);
  transition: opacity 1.2s ease;
}

body[data-time="night"] .kingdom-lantern__lamp,
body[data-time="dusk"] .kingdom-lantern__lamp,
body[data-festival] .kingdom-lantern__lamp {
  fill: #ffd98a;
}

body[data-time="night"] .kingdom-lantern__glow,
body[data-time="dusk"] .kingdom-lantern__glow,
body[data-festival] .kingdom-lantern__glow {
  opacity: 0.35;
  animation: lantern-breathe 3s ease-in-out infinite;
}

.kingdom-flowers__bush {
  fill: color-mix(in srgb, #4f7a44 var(--light), var(--night-ink));
}

body[data-season="winter"] .kingdom-flowers__bush {
  fill: var(--snow);
}

.kingdom-flowers__blooms {
  fill: color-mix(in srgb, var(--season-bloom) calc(40% + var(--light) * 0.6), var(--night-ink));
}

body[data-season="summer"] .kingdom-flowers__blooms {
  fill: color-mix(in srgb, #f4d86a calc(40% + var(--light) * 0.6), var(--night-ink));
}

body[data-season="winter"] .kingdom-flowers__blooms {
  opacity: 0;
}

.kingdom-duck {
  fill: color-mix(in srgb, #fbf6ee calc(45% + var(--light) * 0.55), var(--night-ink));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: duck-float 3.4s ease-in-out infinite;
}

.kingdom-duck:nth-child(2) {
  animation-delay: -1.2s;
}

.kingdom-duck:nth-child(3) {
  animation-delay: -2.1s;
}

.kingdom-duck__bill {
  fill: #f08a2a;
}

/* Frozen moats have no ducks */
body[data-season="winter"] .kingdom-ducks {
  opacity: 0;
}

.kingdom-rabbit {
  fill: color-mix(in srgb, #c8b09a calc(40% + var(--light) * 0.6), var(--night-ink));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rabbit-idle 5s ease-in-out infinite;
}

.kingdom-rabbit--right {
  fill: color-mix(in srgb, #f4efe6 calc(40% + var(--light) * 0.6), var(--night-ink));
  animation-delay: -2.4s;
}

.kingdom-rabbit__tail {
  fill: #fff;
}

.kingdom-deer__coat {
  fill: color-mix(in srgb, #b07a4a calc(40% + var(--light) * 0.6), var(--night-ink));
}

.kingdom-deer__legs {
  stroke: color-mix(in srgb, #8a5a34 calc(40% + var(--light) * 0.6), var(--night-ink));
  stroke-width: 0.9;
}

.kingdom-deer__tail {
  fill: #fff;
}

.kingdom-deer {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  animation: deer-graze 9s ease-in-out infinite;
}

/* Rabbits and deer are abed at night */
body[data-time="night"] .kingdom-rabbit,
body[data-time="night"] .kingdom-deer {
  opacity: 0;
}

/* —— Festival bunting on the castle —— */
.festival-bunting {
  display: none;
}

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

.bunting__cord {
  fill: none;
  stroke: rgba(60, 40, 30, 0.8);
  stroke-width: 0.5;
}

.bunting__flag {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: flag-flutter var(--banner-pace, 4s) ease-in-out infinite;
}

.bunting__flag:nth-of-type(even) {
  animation-delay: -1.3s;
}

.bunting__flag--b1 {
  fill: #b8365e;
}

.bunting__flag--b2 {
  fill: #e8c070;
}

.bunting__flag--b3 {
  fill: #f4a0b4;
}

.bunting__flag--b4 {
  fill: #fbf3e0;
}

.festival-garland {
  fill: #f4a0b4;
}

.festival-garland circle:nth-child(3n) {
  fill: #fbf3e0;
}

.festival-garland circle:nth-child(3n + 1) {
  fill: #e8c070;
}

@keyframes lantern-breathe {
  0%,
  100% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes duck-float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(1.5px, -0.4px) rotate(-3deg);
  }
}

@keyframes rabbit-idle {
  0%,
  86%,
  100% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(-2.4px);
  }
  94% {
    transform: translateY(0);
  }
}

@keyframes deer-graze {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  70%,
  90% {
    transform: rotate(4deg);
  }
}

@keyframes flag-flutter {
  0%,
  100% {
    transform: skewX(0deg);
  }
  50% {
    transform: skewX(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kingdom-duck,
  .kingdom-rabbit,
  .kingdom-deer,
  .bunting__flag,
  .kingdom-lantern__glow {
    animation: none !important;
  }
}

@keyframes knock-swing {
  0% {
    transform: none;
  }
  35% {
    transform: translateY(-4px) scaleY(0.78);
  }
  62% {
    transform: translateY(1.5px) scaleY(1.03);
  }
  100% {
    transform: none;
  }
}

@keyframes knocker-glow {
  0%,
  100% {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 7px rgba(255, 210, 130, 0.8));
  }
}

@media (prefers-reduced-motion: reduce) {
  .knocker__art,
  .knocker.knocking .knocker__swing {
    animation: none !important;
  }
}