/* Generated by _tools/estate_park.py from the map lab. Edit there. */

.park-stage{background:var(--cream);padding:clamp(.4rem,1.6vw,1.2rem)}
.park-map .t,.park-map .b,.park-map .ban,.park-map .cart,.park-map .gate,
.park-map .map-art,.park-map .cloud,.park-map .smoke{transform-box:fill-box}
.map-halo{display:none}
.map-place .map-art{transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.map-place:hover .map-art,.map-place:focus-visible .map-art{transform:translateY(-8px) scale(1.07)}
.map-place:hover .ban rect,.map-place:focus-visible .ban rect{fill:var(--paper,#fff)}
.map-place:focus{outline:none}

/* ambient, always: clouds drift, the fire pit smokes */
.park-map .cloud{animation:drift 26s ease-in-out infinite alternate}
.park-map .sky .cloud:nth-of-type(2){animation-duration:34s;animation-delay:-12s}
@keyframes drift{from{translate:-18px 0}to{translate:22px 0}}
.park-map .smoke{transform-origin:50% 100%;animation:smoke 3.2s ease-in-out infinite}
@keyframes smoke{0%{opacity:0;translate:0 6px}40%{opacity:.7}100%{opacity:0;translate:0 -14px}}

.lab-again-unused{position:absolute;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);z-index:60;
  font:600 .7rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--deep);
  background:var(--cream);border:1px solid var(--deep);padding:.6rem .8rem;border-radius:999px;cursor:pointer}
.lab-again-unused:hover{background:#fff}
@media (max-width:760px){.park-stage{overflow-x:auto}.park-map{min-width:860px}}

.park-map .pennant{transform-box:fill-box;transform-origin:0 50%;
  animation:wave 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--fd) * -1)}
@keyframes wave{from{transform:skewY(-5deg) scaleX(.92)}to{transform:skewY(4deg) scaleX(1.02)}}
.park-map .tw{transform-box:fill-box;transform-origin:50% 50%;
  animation:twinkle 5.5s ease-in-out infinite;animation-delay:calc(var(--tw) * -1)}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0deg);opacity:.15}50%{transform:scale(1) rotate(90deg);opacity:1}}
.park-map .birds{animation:fly 52s linear infinite}
@keyframes fly{0%{transform:translate(-520px,40px)}25%{transform:translate(160px,-10px)}
  50%{transform:translate(860px,30px)}75%{transform:translate(1500px,-20px)}100%{transform:translate(2280px,10px)}}
.park-map .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .7s ease-in-out infinite alternate}
.park-map .wf{animation-delay:-.35s}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.1)}}
.park-map .bf{animation:flutter 24s ease-in-out infinite}
.park-map .bfly:nth-of-type(2n) .bf{animation-duration:30s;animation-direction:reverse}
@keyframes flutter{0%,100%{transform:translate(0,0)}25%{transform:translate(40px,-30px)}
  50%{transform:translate(-10px,-56px)}75%{transform:translate(-44px,-16px)}}
.park-map .bw{transform-box:fill-box;transform-origin:100% 50%;animation:bwing .6s ease-in-out infinite alternate}
.park-map .bw2{transform-origin:0 50%}
@keyframes bwing{to{transform:scaleX(.45)}}

/* sparkles thrown by the page */
.spk{transform-box:fill-box;transform-origin:50% 50%;animation:spk 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spk{0%{transform:translate(0,0) scale(0) rotate(0deg)}
  25%{transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .35)) scale(var(--s)) rotate(40deg)}
  100%{transform:translate(var(--dx),var(--dy)) scale(0) rotate(170deg)}}
.map-place.hit .b{transform-origin:50% 100%;animation:bounce .8s cubic-bezier(.3,1.2,.5,1)}
.map-place.hit .ban{transform-origin:50% 50%;animation:jig .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes bounce{0%{transform:scale(.1,0)}55%{transform:scale(.94,1.12)}78%{transform:scale(1.04,.96)}100%{transform:none}}
@keyframes jig{0%{transform:scale(.4,.4)}100%{transform:none}}
@keyframes unfurl{from{transform:scaleX(0)}}
@keyframes fade{from{opacity:0}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes pop{from{transform:scale(0)}}
/* The photograph that a hover reveals. Shared by most of the ten. */
.peek{
  position:absolute;z-index:40;pointer-events:none;width:clamp(200px,22vw,320px);
  opacity:0;transform:translate(-50%,-108%) scale(.96);
  transition:opacity .32s ease,transform .32s cubic-bezier(.16,.8,.24,1);
}
.peek.on{opacity:1;transform:translate(-50%,-104%) scale(1)}
.peek.down{transform:translate(-50%,10%) scale(.96)}
.peek.down.on{transform:translate(-50%,4%) scale(1)}
.peek figure{margin:0;background:var(--cream);padding:.5rem .5rem .1rem;
  box-shadow:0 18px 40px rgba(52,55,47,.28);border-radius:16px}
.peek img{border-radius:12px;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.peek figcaption{padding:.5rem .15rem .55rem}
.peek b{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem;line-height:1.15}
.peek span{display:block;font-size:.78rem;opacity:.75;margin-top:.15rem}

/* Reduced motion stops animation outright. Shortening the duration instead
   made every looping flag and wing flicker at full speed. The lab offers a
   button to play anyway, which sets html.motion-ok. */

/* ---- the estate page's framing of the lab map ---- */
.park-stage{position:relative;background:var(--cream);border-radius:var(--round-lg,28px);
  padding:clamp(.4rem,1.2vw,.9rem);box-shadow:0 30px 70px rgba(52,55,47,.14)}
.park-stage .park-map{border-radius:18px}
.park-map .wand{pointer-events:none}
.park-map .wand circle{animation:glow .5s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.35}}
.park-again{position:absolute;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);z-index:5;
  font:600 .66rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--deep);
  background:var(--paper);border:1px solid var(--sage);padding:.55rem .8rem;border-radius:999px;cursor:pointer}
.park-again:hover{background:var(--sage)}
.park-again[hidden]{display:none}
@media (max-width:900px){
  .park-scroll{overflow-x:auto;border-radius:18px;-webkit-overflow-scrolling:touch}
  .park-scroll .park-map{min-width:860px}
  .park-again{bottom:auto;top:clamp(.9rem,2vw,1.6rem)}
}

/* ---- as the page's hero ---- */
.hero-clock{background:var(--ivory)}
.park-hero{max-width:96rem;margin:clamp(.7rem,1.6vw,1.3rem) auto 0;
  width:calc(100% - var(--pad) * 2)}
/* The map is on screen before the script arrives, so it waits hidden rather
   than showing and then vanishing under the wand's mask. If the script never
   runs, the drawing appears on its own after a moment. */
.js .park-hero .park-map{opacity:0;animation:park-show .01s 3.5s forwards}
.js .park-hero.ready .park-map{opacity:1;animation:none}
@keyframes park-show{to{opacity:1}}
.park-hero ~ .hero-body{box-shadow:none;background:none;border-radius:0}
@media (max-width:900px){
  .park-hero{width:calc(100% - 1.2rem)}
}