/* Shared pixel arrows and a touchable, palette-matched companion. */
.pixel-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -3px;
  shape-rendering: crispEdges;
  pointer-events: none;
}
.studio-grid h3 .pixel-arrow {
  width: 20px;
  height: 20px;
}
.project-media {
  position: relative;
  min-width: 0;
}
.project-media > .project-image {
  position: relative;
  z-index: 1;
}
.mascot-ledge {
  position: relative;
  height: 0;
  margin-top: 72px;
  border-top: 1px solid var(--border);
}
.intro-mascot-ledge {
  margin-bottom: 32px;
}
.hero-copy:has(.mascot-ledge) .hero-description {
  margin-top: 24px;
}
.mascot-perch {
  position: relative;
}
.mascot-host {
  --mascot-size: 96px;
  position: absolute;
  left: 16px;
  right: 16px;
  height: var(--mascot-size);
  top: calc(var(--mascot-size) * -0.8125);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}
.mascot-host-bottom {
  top: auto;
  bottom: calc(var(--mascot-size) * -0.1875);
}
.mascot-host[data-scene="cue"] {
  clip-path: inset(-50px 0 18.75% 0);
}
.mascot-host[data-scene="cue"]::before {
  content: "";
  position: absolute;
  top: calc(var(--mascot-size) * 0.8125 - 1px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.mascot-cue-edge {
  position: relative;
  height: 0;
  border-top: 1px solid var(--border);
}
.mascot-position {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--mascot-size);
  height: var(--mascot-size);
  pointer-events: none;
}
.site-mascot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mascot-size);
  height: var(--mascot-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.site-mascot[hidden] {
  display: none;
}
.site-mascot:focus-visible {
  outline: 2px dashed var(--accent, #ed8355);
  outline-offset: 3px;
}
.mascot-facing,
.mascot-sprite {
  display: block;
  width: 100%;
  height: 100%;
}
.mascot-facing {
  position: relative;
}
.mascot-sprite {
  image-rendering: pixelated;
  transform-origin: 50% 81.25%;
}
.cat-bubble,
.cat-pop,
.cat-snore,
.cat-heart,
.cat-steam {
  display: none;
  position: absolute;
  pointer-events: none;
}
.cat-bubble {
  /* Sleep frame nose: (62, 66) in its 96px canvas. Grow upward from it. */
  left: 64.583333%;
  top: 44.75%;
  width: 24%;
  height: 24%;
  fill: #f3f3e9;
  fill-opacity: 0.65;
  stroke: #ed8355;
  stroke-width: 1;
  shape-rendering: crispEdges;
  transform-origin: 0 100%;
}
.bubble-shine {
  fill: #fff;
  fill-opacity: 0.85;
  stroke: none;
}
.site-mascot[data-bubble="grow"] .cat-bubble {
  display: block;
  animation: bubble-snooze 2s ease-in-out infinite;
}
.site-mascot[data-bubble="grow"] .cat-snore {
  display: block;
  left: 72%;
  top: 24%;
}
.cat-snore i {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--accent, #ed8355);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 28%,
    60% 28%,
    60% 55%,
    35% 55%,
    35% 75%,
    100% 75%,
    100% 100%,
    0 100%,
    0 70%,
    25% 70%,
    25% 45%,
    55% 45%,
    55% 25%,
    0 25%
  );
  animation: cat-snore 2s ease-out infinite;
}
.cat-snore i:nth-child(2) {
  animation-delay: 1s;
  width: 6px;
  height: 6px;
}
.site-mascot[data-bubble="pop"] .cat-pop {
  display: block;
  left: 76.5%;
  top: 56.75%;
}
.cat-pop i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #f3f3e9;
  animation: bubble-pop 0.23s ease-out both;
  --dx: -12px;
  --dy: -11px;
}
.cat-pop i:nth-child(2) {
  --dx: 12px;
  --dy: -9px;
}
.cat-pop i:nth-child(3) {
  --dx: -10px;
  --dy: 9px;
}
.cat-pop i:nth-child(4) {
  --dx: 12px;
  --dy: 10px;
}
.site-mascot[data-reaction="happy"] .cat-heart {
  display: block;
  left: 65%;
  top: 0;
  width: 14px;
  height: 14px;
  fill: var(--accent, #ed8355);
  animation: cat-love 1.6s ease-out both;
}
.site-mascot[data-reaction="grumpy"] .cat-steam {
  display: block;
  top: 4%;
  left: 70%;
}
.cat-steam i {
  position: absolute;
  width: 3px;
  height: 9px;
  background: var(--accent, #ed8355);
  animation: cat-steam 0.7s ease-in-out 2;
}
.cat-steam i:nth-child(2) {
  left: 7px;
  animation-delay: 0.15s;
}
.cat-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site-mascot[data-pose="sleep"] .mascot-sprite {
    animation: cat-breathe 2s ease-in-out infinite;
  }
  .site-mascot[data-paused="true"] *,
  .site-mascot[data-paused="true"] i {
    animation-play-state: paused !important;
  }
}
@keyframes cat-breathe {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.025) translateY(-0.5px);
  }
}
@keyframes bubble-snooze {
  0%,
  100% {
    transform: scale(0.35);
  }
  70% {
    transform: scale(1);
  }
}
@keyframes cat-snore {
  0% {
    opacity: 0;
    transform: translate(0, 8px) scale(0.6);
  }
  25% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(10px, -17px) scale(1);
  }
}
@keyframes bubble-pop {
  to {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
}
@keyframes cat-love {
  0% {
    transform: translateY(6px) scale(0.5);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-14px) scale(1);
    opacity: 0;
  }
}
@keyframes cat-steam {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
  45% {
    transform: translateY(-6px);
    opacity: 0.75;
  }
}
@media (max-width: 767px) {
  .mascot-host {
    --mascot-size: 80px;
    left: 12px;
    right: 12px;
  }
  .mascot-ledge {
    margin-top: 64px;
  }
  .pixel-arrow {
    width: 14px;
    height: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-mascot *,
  .site-mascot i {
    animation: none !important;
  }
  .cat-bubble,
  .cat-snore,
  .cat-pop {
    display: none !important;
  }
  .site-mascot[data-reaction="happy"] .cat-heart {
    opacity: 1;
  }
}