/* Hero coordinates scale with the same foreground landscape at every width. */
.garden { aspect-ratio: 2172 / 724; isolation: isolate; }
.garden-art { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.peek-window { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.peek-window-left { clip-path: polygon(16% 45%, 34% 45%, 34% 88%, 16% 88%); }
.peek-window-right { clip-path: polygon(67% 36%, 90% 36%, 90% 89%, 67% 89%); }
.peek-creature { position: absolute; width: 9%; aspect-ratio: 1; left: 18.5%; top: 53%; transform-origin: 52% 87%; transform: rotate(-7deg); }
.peek-window-right .peek-creature { width: 10%; left: 75.7%; top: 54%; }
.peek-creature img { display: block; width: 100%; height: auto; }
.peek-eye { position: absolute; z-index: 2; width: 17.2%; height: 20.6%; }
.peek-eye-left { left: 31.7%; top: 26.6%; }
.peek-eye-right { left: 50.1%; top: 25.5%; }
.peek-pupil { position: absolute; width: 37%; height: 44%; left: 32%; top: 35%; border-radius: 48%; background: #352b3b; box-shadow: inset -1px -1px 1px #211525, 0 1px 1px #43312e30; }
.peek-pupil::after { content: ''; position: absolute; width: 25%; height: 21%; top: 16%; left: 18%; border-radius: 50%; background: #fff2cf; opacity: .8; }
.peek-lid { position: absolute; inset: -3%; border-radius: 49%; background: radial-gradient(ellipse at 30% 10%, #9bbcb0, #76a296 70%); transform: scaleY(0); transform-origin: 50% 0%; }
.peek-lilac .peek-eye-left { left: 32.6%; top: 38%; width: 16.8%; height: 21.4%; }
.peek-lilac .peek-eye-right { left: 50.1%; top: 38.5%; width: 16.4%; height: 20.8%; }
.peek-lilac .peek-lid { background: radial-gradient(ellipse at 30% 10%, #b8a4c7, #9a80ad 70%); }
.peek-greeting { position: absolute; z-index: 2; min-width: 44px; min-height: 44px; border: 0; border-radius: 46% 46% 15% 15%; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.peek-greeting-left { left: 16.5%; top: 47%; width: 13%; height: 40%; }
.peek-greeting-right { left: 74%; top: 43%; width: 14%; height: 44%; }
.peek-greeting:focus-visible { outline: 3px dashed var(--plum, #58304f); outline-offset: 3px; }
.motion-off .peek-greeting { cursor: default; }

/* Small residents behind existing objects, with only heads crossing the edge. */
.has-peek { position: relative; isolation: isolate; }
.peek-hideout { position: absolute; z-index: 0; pointer-events: none; }
.peek-hideout .peek-creature { width: 100%; left: 0; top: 0; }
.peek-hideout .peek-greeting { inset: 0; width: 100%; height: 100%; z-index: 3; }
.has-peek-project .product-stage { position: relative; z-index: 1; }
.peek-hideout-project { width: 84px; height: 94px; top: -44px; right: 15%; }
.has-peek-project .peek-greeting { height: 44px; }
.has-peek-seal .maker-seal { position: relative; z-index: 1; }
.peek-hideout-seal { width: 90px; height: 98px; left: calc(50% + 90px); top: 100px; }
.has-peek-footer { padding-top: 86px; }
.has-peek-footer > .wordmark { position: relative; z-index: 1; background: var(--butter); }
.peek-hideout-footer { width: 82px; height: 58px; top: 30px; left: 30px; overflow: hidden; }
.peek-hideout-footer .peek-creature { height: 82px; }
@media(max-width:760px) {
  .peek-window-right .peek-creature { top: 46%; }
  .peek-hideout-project { width: 72px; height: 84px; top: -39px; right: 12%; }
  .peek-hideout-seal { width: 76px; height: 86px; left: calc(50% + 67px); top: 70px; }
  .has-peek-footer { padding-top: 86px; }
  .peek-hideout-footer { left: 24px; }
}

/* These still poses also render when the entire GSAP clock is paused. */
.peek-creature.is-still { transform: rotate(-7deg) !important; opacity: 1 !important; visibility: visible !important; }
.peek-creature.is-still .peek-pupil { transform: none !important; }
.peek-creature.is-still .peek-lid { transform: scaleY(0) !important; }
@media(prefers-reduced-motion:reduce) {
  .peek-creature { transform: rotate(-7deg) !important; opacity: 1 !important; visibility: visible !important; }
  .peek-pupil { transform: none !important; }
  .peek-lid { transform: scaleY(0) !important; }
}