/* Shared art and finite motion, used by the live site and the mascot gallery. */
.ape-mascot-art { display:block; width:100%; height:100%; overflow:visible; }
.ape-mascot-sway { transform-box:view-box; transform-origin:50% 95%; }
.ape-mascot-eyes { transform-box:fill-box; transform-origin:center; }
.ape-mascot-detail { transform-box:fill-box; transform-origin:center bottom; }
.is-peeking .ape-mascot-sway { animation:ape-visitor-look 4.2s ease-in-out both; }
.is-peeking .ape-mascot-eyes { animation:ape-visitor-blink 4.2s linear both; }
.is-peeking .ape-mascot-detail { animation:ape-visitor-detail 4.2s ease-in-out both; }
.is-peeking.has-spring-motion .ape-mascot-sway,.is-peeking.has-spring-motion .ape-mascot-detail,.is-peeking.has-spring-motion .ape-peek-actor,.stage.is-peeking.has-spring-motion .portrait { animation:none; }
.ape-peek-slot { position:fixed; z-index:12; width:112px; height:104px; overflow:hidden; pointer-events:none; user-select:none; contain:layout paint; }
.ape-peek-orientation { width:100%; height:100%; transform-origin:center; }
.ape-peek-slot[data-edge="left"] .ape-peek-orientation { transform:rotate(90deg); }
.ape-peek-slot[data-edge="right"] .ape-peek-orientation { transform:rotate(-90deg); }
.ape-peek-actor { width:100%; height:100%; transform:translateY(115%); }
.is-peeking .ape-peek-actor { animation:ape-visitor-emerge 4.2s cubic-bezier(.25,.7,.25,1) both; }
.ape-peek-slot[hidden] { display:none; }
.ape-peek-slot[data-anchor="card"] .ape-mascot-art { transform:translateY(8px); }
.ape-mascot-replay { appearance:none; font:inherit; font-size:var(--ape-type-xs); color:var(--ape-muted,var(--ape-muted)); background:none; border:1px solid var(--ape-line,var(--ape-line)); border-radius:var(--ape-radius-pill); min-height:44px; padding:8px 13px; cursor:pointer; }
.ape-mascot-replay:hover { color:var(--ape-ink,var(--ape-ink)); background:var(--ape-sky,var(--ape-sky)); }
.ape-mascot-replay:focus-visible { outline:3px solid var(--ape-ink,var(--ape-ink)); outline-offset:3px; }
.ape-mascot-replay:disabled { cursor:default; }
@keyframes ape-visitor-emerge {
  0%,5% { transform:translateY(115%); }
  20% { transform:translateY(-2%); }
  28%,77% { transform:translateY(2%); }
  86% { transform:translateY(0%); }
  100% { transform:translateY(115%); }
}
@keyframes ape-visitor-look {
  0%,23%,100% { transform:rotate(0); }
  36%,48% { transform:rotate(-5deg); }
  63%,74% { transform:rotate(3deg); }
  83% { transform:rotate(0); }
}
@keyframes ape-visitor-blink {
  0%,42%,48%,68%,73%,100% { transform:scaleY(1); }
  45%,70% { transform:scaleY(.08); }
}
@keyframes ape-visitor-detail {
  0%,30%,68%,100% { transform:rotate(0); }
  42% { transform:rotate(-7deg); }
  54% { transform:rotate(5deg); }
}
@media(max-width:720px) { .ape-peek-slot { width:90px; height:84px; } }
@media(prefers-reduced-motion:reduce) {
  .ape-peek-slot { display:none!important; }
  .is-peeking .ape-mascot-sway,.is-peeking .ape-mascot-eyes,.is-peeking .ape-mascot-detail,.is-peeking .ape-peek-actor { animation:none!important; }
}