/* Ernie sprite scenes -----------------------------------------------------
   The scene reserves its own box; JavaScript only swaps pixels inside it. */
.ernie-scene {
  --ernie-aspect: 1 / 1;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ernie-aspect);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 0;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  isolation: isolate;
  contain: layout;
}

.mascot-stage > .ernie-scene {
  min-width: 0;
  max-width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.ernie-scene--page-head {
  width: 230px;
  height: 210px;
  aspect-ratio: auto;
  flex: 0 0 auto;
}

.ernie-poster,
.ernie-viewport {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ernie-poster {
  z-index: 1;
  object-fit: contain;
  object-position: center;
  opacity: 1;
}

.ernie-viewport {
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ernie-scene.is-ready .ernie-poster {
  opacity: 0;
}

.ernie-scene.is-ready .ernie-viewport {
  opacity: 1;
}

.ernie-scene.is-error .ernie-poster,
.ernie-scene.is-invalid .ernie-poster {
  opacity: 1;
}

.ernie-scene.is-error .ernie-viewport,
.ernie-scene.is-invalid .ernie-viewport {
  opacity: 0;
}

.ernie-scene:focus-visible {
  outline: 3px solid var(--ink, #17251d);
  outline-offset: 4px;
}

.ernie-scene:disabled {
  cursor: default;
}

/* Optional nav-face reactions. They run only on deliberate hover/focus. */
[data-ernie-nav] {
  transform-origin: 50% 70%;
}

body[data-ernie-page="watch"] .brand:is(:hover, :focus-within) [data-ernie-nav] {
  animation: ernie-nav-watch .62s ease-out 1;
}

body[data-ernie-page="about-reading"] .brand:is(:hover, :focus-within) [data-ernie-nav] {
  animation: ernie-nav-reading .7s ease-out 1;
}

body[data-ernie-page="mirror"] .brand:is(:hover, :focus-within) [data-ernie-nav] {
  animation: ernie-nav-mirror .62s ease-out 1;
}

body[data-ernie-page="letter"] .brand:is(:hover, :focus-within) [data-ernie-nav] {
  animation: ernie-nav-letter .62s ease-out 1;
}

body[data-ernie-page="wave"] .brand:is(:hover, :focus-within) [data-ernie-nav] {
  animation: ernie-nav-wave .72s ease-out 1;
}

@keyframes ernie-nav-watch {
  35% { transform: translateY(1px) rotate(-5deg); }
  70% { transform: translateY(-1px) rotate(2deg); }
}

@keyframes ernie-nav-reading {
  35% { transform: translateY(2px) scale(.98); }
  70% { transform: translateY(-1px) scale(1.01); }
}

@keyframes ernie-nav-mirror {
  45% { transform: scaleX(-1); }
  75% { transform: scaleX(-1) translateY(-1px); }
}

@keyframes ernie-nav-letter {
  35% { transform: translate(-1px, -2px) rotate(-3deg); }
  70% { transform: translate(1px, 0) rotate(1deg); }
}

@keyframes ernie-nav-wave {
  25% { transform: rotate(-6deg); }
  55% { transform: rotate(5deg); }
  80% { transform: rotate(-2deg); }
}

@media (max-width: 700px) {
  .ernie-scene--page-head {
    width: 140px;
    height: 160px;
  }

  .ernie-scene--page-head.ernie-scene--wide {
    width: 160px;
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-ernie-nav],
  body[data-ernie-page] .brand:is(:hover, :focus-within) [data-ernie-nav] {
    animation: none !important;
    transform: none !important;
  }
}