/* Animated garden scene (home page of hutchandkaty.com). The page header,
   navigation and footer are styled by site/site.css. */
:root{color-scheme:light;--paper:#f7f3ea;--ink:#2a4f36;--muted:#61705f;--accent:#9b7b3a;--line:#c9cdbb}
canvas{display:block;width:100%;height:100%}

/* The stage follows the painting's native proportions: animals share its
   coordinates, so nothing is stretched. */
.scene-stage{position:relative;width:100%;aspect-ratio:1561/1007;isolation:isolate;overflow:hidden}
.garden-backdrop,.garden-foreground{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Phones: the portrait painting (1130 × 2147) is shown from the top; its extra
   meadow below 1842 px is cropped. */
@media(max-width:600px){
 .scene-stage{aspect-ratio:auto;height:calc(100vw*1842/1130)}
 .garden-backdrop,.garden-foreground{object-fit:cover;object-position:50% 0}
}

/* Complete crowns and open sky sit behind the home header. Only the backdrop
   crossfades only across a narrow 64 px painted join; stage dimensions and every animal's
   coordinates stay unchanged. The extra 290/500 px are overlap, not stage. */
.wedding-home .masthead{position:absolute;inset:0 0 auto;z-index:5}
.wedding-home .home .scene{margin-top:0}
.scene{position:relative;--canopy-overlap:calc(100vw * 290 / 1561)}
.scene-crowns{position:relative;height:max(300px,calc(100vw * 650 / 1561));line-height:0}
.scene-crowns picture{display:block;position:absolute;left:0;right:0;bottom:calc(-1 * var(--canopy-overlap));pointer-events:none}
.scene-crowns img{display:block;width:100%;height:auto}
.scene-crowns::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--paper) 0%,rgba(247,243,234,.94) 18%,rgba(247,243,234,.78) 45%,rgba(247,243,234,.35) 72%,rgba(247,243,234,0) 100%)}
.scene-stage{z-index:1}
.garden-backdrop{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 calc(100vw * 64 / 1561));mask-image:linear-gradient(to bottom,transparent 0,#000 calc(100vw * 64 / 1561))}
.scene-haze{display:none}
@media(max-width:600px){
 .scene{--canopy-overlap:calc(100vw * 500 / 1130)}
 .garden-backdrop{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 calc(100vw * 64 / 1130));mask-image:linear-gradient(to bottom,transparent 0,#000 calc(100vw * 64 / 1130))}
 .scene-crowns{height:max(220px,calc(100vw * 400 / 1130))}
}
/* An expanded phone menu grows the header over a quiet paper surface. */
.wedding-home .masthead.open{background:var(--paper);padding-bottom:20px}

/* Layers, back to front: sloth and ants, disco lights and morphos, toucan,
   hummingbird, monkey, then the tapir and cake in front of the table, and
   the haze. */
.sloth-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.disco-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tapir-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}

/* Perches, flower and table contacts follow the painting. Tops are set by
   public.js from SceneLayout; these lefts and widths are part of the fit. */
.animal{position:absolute;aspect-ratio:1;pointer-events:none;transform-origin:0 0}
.animal-overlay{position:absolute;inset:0}
.hummingbird{left:15.22%;width:14%}
.toucan{left:68.8%;width:14%;transform:rotate(10deg)}
.champagne-study{position:absolute;left:-0.334946vw;width:37%;aspect-ratio:1536/1100;transform:rotate(-5.7deg);transform-origin:0 0}
@media(max-width:600px){
 .hummingbird{left:15.34%;width:21%}
 .toucan{left:69.5%}
 .champagne-study{left:calc(-5% - 0.398314vw);width:44%}
}

/* Names overlay: not shown at the moment (no .invitation element in
   public.html). See docs/cover-names-overlay.md to bring it back. */
.invitation{position:absolute;z-index:2;left:53%;width:47%;transform:translate(-50%,-20%);text-align:center;pointer-events:none}
.invitation h1{font:400 clamp(23px,5.5vw,72px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.055em;margin:0;white-space:nowrap}
.invitation h1 span{font-style:italic;font-size:.8em;color:var(--accent);padding:0 .05em}
.wedding-date{font:400 clamp(13px,1.5vw,21px)/1.5 'Playfair Display',Georgia,serif;letter-spacing:.10em;margin:14px 0 0;color:var(--muted)}
@media(max-width:600px){
 .invitation{left:48%;width:74%}
 .invitation h1{font-size:clamp(26px,8.6vw,46px);white-space:normal}
 .wedding-date{font-size:14px;margin-top:9px}
}