:root {
  --ink: #0b5d3b;
  --shadow: #35c97a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  overflow: hidden;
  background: #bfeeff;
  font-family: "Chewy", "Comic Sans MS", "Marker Felt", "Trebuchet MS", sans-serif;
}

/* ---------- beach scene ---------- */
.scene { position: fixed; inset: 0; z-index: 0; background: linear-gradient(#7fd8f5 0%, #c9f1ff 45%, #fff3c4 60%); }
.sun {
  position: absolute; top: 8vh; right: 18vw;
  width: clamp(80px, 14vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff7b0 0 55%, #ffe066 56% 100%);
  box-shadow: 0 0 0 clamp(10px, 2vw, 28px) rgba(255, 240, 150, .4);
}
.sea {
  position: absolute; left: 0; right: 0; top: 52%; height: 26%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 40px, transparent 40px 110px) 0 30% / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 70px, transparent 70px 160px) 40px 65% / 100% 3px no-repeat,
    linear-gradient(#18b9c9, #0a8fb5);
}
.sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(#fff0c2 0%, #f3d98b 100%);
  border-top: 10px solid #fff;
  box-shadow: 0 -6px 0 rgba(255,255,255,.5);
}
.palm { position: absolute; bottom: 3vh; height: 80vh; aspect-ratio: 300 / 520; }
.palm-left  { left: -3vw; }
.palm-right { right: -5vw; height: 66vh; transform: scaleX(-1); }

/* ---------- content ---------- */
main {
  position: relative; z-index: 2; height: 100%;
  display: grid; place-items: center; pointer-events: none;
}
h1 {
  font-size: clamp(6rem, 30vw, 26rem);
  line-height: 1;
  color: var(--ink);
  text-shadow: 0.04em 0.04em 0 var(--shadow), 0.08em 0.08em 0 #fff;
  letter-spacing: 0.02em;
}

#cats { position: fixed; inset: 0; z-index: 1; }
.cat {
  position: absolute;
  user-select: none;
  animation: float var(--d) ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translateY(0) rotate(calc(var(--r) * -1)); }
  to   { transform: translateY(-18px) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .cat { animation: none; }
}