* { box-sizing: border-box; }

:root {
  --bg-1: #f7fffb;
  --bg-2: #eaf9ff;
  --shadow: 0 24px 70px rgba(0, 76, 90, .18);
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(164, 231, 233, .55), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(212, 241, 214, .65), transparent 32rem),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
  overflow-x: hidden;
}

.page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
}

.poster-stage {
  position: relative;
  width: min(78vw, 620px);
  isolation: isolate;
}

.poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 28px);
  box-shadow: var(--shadow);
}

.dot {
  position: absolute;
  width: clamp(18px, 3.2vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 26px rgba(0,0,0,.16), inset 0 0 0 3px rgba(255,255,255,.55);
  animation: float 3.8s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  z-index: 2;
}

.dot:hover,
.dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.28);
  box-shadow: 0 15px 34px rgba(0,0,0,.22), 0 0 0 9px rgba(255,255,255,.55), inset 0 0 0 3px rgba(255,255,255,.75);
  filter: saturate(1.15);
  outline: none;
}

.dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: currentColor;
  opacity: .16;
  animation: pulse 2.6s ease-out infinite;
  z-index: -1;
}

.dot-1  { left: -6%;  top: 8%;   background: #ffd6e7; color: #ffd6e7; animation-delay: -.1s; }
.dot-2  { left: 18%;  top: -4%;  background: #c9f2ff; color: #c9f2ff; animation-delay: -.7s; }
.dot-3  { left: 51%;  top: -7%;  background: #d7f8c8; color: #d7f8c8; animation-delay: -1.4s; }
.dot-4  { left: 84%;  top: -2%;  background: #ffe6a7; color: #ffe6a7; animation-delay: -2.1s; }
.dot-5  { left: 106%; top: 10%;  background: #d8c7ff; color: #d8c7ff; animation-delay: -.4s; }
.dot-6  { left: -10%; top: 27%;  background: #ffc8bd; color: #ffc8bd; animation-delay: -1.8s; }
.dot-7  { left: 110%; top: 30%;  background: #bff3df; color: #bff3df; animation-delay: -.9s; }
.dot-8  { left: -8%;  top: 50%;  background: #bfe1ff; color: #bfe1ff; animation-delay: -2.6s; }
.dot-9  { left: 108%; top: 52%;  background: #f5c7ff; color: #f5c7ff; animation-delay: -1.2s; }
.dot-10 { left: -5%;  top: 72%;  background: #fff0b8; color: #fff0b8; animation-delay: -.5s; }
.dot-11 { left: 104%; top: 74%;  background: #c5ffd6; color: #c5ffd6; animation-delay: -2.3s; }
.dot-12 { left: 12%;  top: 104%; background: #ffd1c2; color: #ffd1c2; animation-delay: -1.1s; }
.dot-13 { left: 35%;  top: 109%; background: #c8fff4; color: #c8fff4; animation-delay: -2.9s; }
.dot-14 { left: 61%;  top: 107%; background: #e6d4ff; color: #e6d4ff; animation-delay: -.8s; }
.dot-15 { left: 88%;  top: 103%; background: #cfe0ff; color: #cfe0ff; animation-delay: -1.9s; }
.dot-16 { left: 50%;  top: 50%;  background: #ffe0ef; color: #ffe0ef; animation-delay: -3.3s; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes pulse {
  0% { transform: scale(.6); opacity: .25; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 700px) {
  .page { padding: 22px; }
  .poster-stage { width: min(86vw, 440px); }
  .dot { width: clamp(14px, 4.7vw, 25px); }
  .dot-1, .dot-6, .dot-8, .dot-10 { left: -2%; }
  .dot-5, .dot-7, .dot-9, .dot-11 { left: 102%; }
  .dot-2 { top: -2%; }
  .dot-3 { top: -3%; }
  .dot-13 { top: 105%; }
  .dot-14 { top: 104%; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .dot::after { animation: none; }
}