html, body {
  margin: 0;
  overflow: hidden;
  background: #b3d8ee;
}

main {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  height: 100vh;
  height: 100dvh;
  --grass-height: min(28vw, 20vh, 184px);
}

.sky, .cloud, .tree, .grass {
  position: absolute;
  pointer-events: none;
}

.sky {
  inset: 0;
  width: 100%;
  height: 100%;
}

.birthday-heading {
  position: absolute;
  z-index: 4;
  inset: clamp(16px, 4vh, 40px) 0 auto;
  display: grid;
  grid-template-columns: 182fr 177fr 199fr 233fr 207fr 213fr 247fr 217fr;
  align-items: center;
  gap: clamp(2px, .55vw, 8px);
  width: min(93vw, 820px, 142vh);
  margin: 0 auto;
}

.balloon {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--tilt));
}

.cloud, .tree {
  height: auto;
}

.cloud-long {
  width: clamp(128px, 31vw, 470px);
  left: 12%;
  top: 12%;
}

.cloud-small {
  width: clamp(93px, 22vw, 275px);
  right: 13%;
  top: 26%;
}

.tree {
  bottom: calc(var(--grass-height) * .2);
  transform-origin: center bottom;
  transform: rotate(var(--lean));
}

.oak {
  left: clamp(-79px, calc(18vw - 140px), 12vw);
  width: min(clamp(200px, 31vw, 450px), 47vh);
  --lean: -3deg;
}

.pine {
  right: clamp(-64px, calc(15vw - 116px), 10vw);
  width: min(clamp(163px, 25vw, 365px), 44vh);
  --lean: 3deg;
}

.sapling {
  right: 22%;
  width: min(clamp(74px, 12vw, 155px), 27vh);
  --lean: -5deg;
}

.piper {
  display: block;
  align-self: end;
  z-index: 1;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.bug-out-button {
  position: absolute;
  z-index: 5;
  bottom: min(91vw, 73dvh, 100dvh - 155px);
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  padding: 0 1.05em;
  color: #292d1d;
  background: #f8e99a;
  border: 2px solid currentColor;
  border-radius: 52% 46% 47% 48% / 38% 44% 38% 43%;
  box-shadow: 2px 3px 0 #292d1d;
  font: bold clamp(17px, 4vw, 22px)/1.15 Georgia, serif;
  text-decoration: none;
  transform: rotate(-4deg);
}

.bug-out-button:hover, .bug-out-button:focus-visible {
  background: #fff3b9;
  transform: rotate(0);
}

.bug-out-button:focus-visible {
  outline: 3px solid #292d1d;
  outline-offset: 5px;
}

@media (max-width: 600px) and (orientation: portrait) {
  .bug-out-button {
    bottom: min(91vw + 52px, 73dvh, 100dvh - 155px);
  }
}

.grass {
  z-index: 2;
  inset: auto -12px 0;
  height: var(--grass-height);
  background: url("grass-front.svg") repeat-x center bottom / auto 100%;
  transform-origin: center bottom;
}

.insect {
  --lane: calc(100vw - var(--size));
  --start-y: 0px;
  --end-y: 0px;
  position: absolute;
  left: 0;
  width: var(--size);
  transform: translate(var(--start-x), var(--start-y));
  pointer-events: none;
}

.insect img {
  display: block;
  width: 100%;
  height: auto;
}

.flyer { top: 0; }
.crawler { bottom: calc(var(--grass-height) * .25); }

.bee {
  --size: clamp(49px, 14vw, 105px);
  --start-x: calc(var(--lane) * .08);
  --end-x: calc(var(--lane) * .95);
  --start-y: 60dvh;
  --end-y: 33dvh;
  --trip: 41s;
  --phase: -19s;
  --flutter: 6.5s;
}

.ladybug {
  --size: clamp(44px, 12vw, 89px);
  --start-x: calc(var(--lane) * .27);
  --end-x: calc(var(--lane) * .98);
  --start-y: 46dvh;
  --end-y: 72dvh;
  --trip: 48s;
  --phase: -34s;
  --flutter: 5.1s;
}

.caterpillar {
  --size: clamp(66px, 19vw, 133px);
  --start-x: calc(var(--lane) * .04);
  --end-x: calc(var(--lane) * .84);
  --trip: 66s;
  --phase: -9s;
}

.butterfly {
  z-index: 2;
  --size: clamp(59px, 17vw, 126px);
  --start-x: calc(var(--lane) * .02);
  --end-x: calc(var(--lane) * .88);
  --start-y: 32dvh;
  --end-y: 63dvh;
  --trip: 52s;
  --phase: -15s;
  --flutter: 7.3s;
}

.spider {
  z-index: 3;
  bottom: 3px;
  --size: clamp(49px, 14vw, 100px);
  --start-x: calc(var(--lane) * .34);
  --end-x: calc(var(--lane) * .98);
  --trip: 56s;
  --phase: -33s;
}

.spider-left {
  bottom: 15px;
  --start-x: calc(var(--lane) * .02);
  --end-x: calc(var(--lane) * .52);
  --trip: 47s;
  --phase: -13s;
}

@media (prefers-reduced-motion: no-preference) {
  .balloon { animation: balloon-float var(--period) var(--phase) ease-in-out infinite alternate; }
  .cloud-long { animation: cloud-drift 41s -7s ease-in-out infinite alternate; }
  .cloud-small { animation: cloud-drift 54s -25s ease-in-out infinite alternate-reverse; }
  .tree { animation: tree-sway 11s ease-in-out infinite alternate; }
  .pine { animation-delay: -6s; }
  .sapling { animation-delay: -3s; }
  .grass { animation: grass-sway 6.2s ease-in-out infinite alternate; }
  .insect { animation: insect-travel var(--trip) var(--phase) ease-in-out infinite; }
  .insect img { animation: face-direction var(--trip) var(--phase) steps(1, end) infinite; }
  .flyer img {
    animation: face-direction var(--trip) var(--phase) steps(1, end) infinite,
               flight-bob var(--flutter) var(--phase) ease-in-out infinite alternate;
  }
}

@keyframes balloon-float {
  from { transform: translateY(-4px) rotate(calc(var(--tilt) - 2deg)); }
  to { transform: translateY(5px) rotate(calc(var(--tilt) + 2deg)); }
}

@keyframes insect-travel {
  0%, 100% { transform: translate(var(--start-x), var(--start-y)); }
  50% { transform: translate(var(--end-x), var(--end-y)); }
}

@keyframes face-direction {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}

@keyframes flight-bob {
  from { translate: 0 -8px; }
  to { translate: 0 7px; }
}

@keyframes cloud-drift {
  from { transform: translateX(-5%); }
  to { transform: translateX(7%); }
}

@keyframes tree-sway {
  from { transform: rotate(calc(var(--lean) - .45deg)); }
  to { transform: rotate(calc(var(--lean) + .55deg)); }
}

@keyframes grass-sway {
  from { transform: skewX(-1.2deg); }
  to { transform: skewX(1.6deg); }
}