:root { --bottle-h: min(78svh, 135vw); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; color: #fff; overflow: hidden; }
body { font-family: "Arial Black", Impact, system-ui, sans-serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.stage { position: relative; height: 100svh; display: grid; place-items: center; overflow: hidden; }

/* text carousel rows behind the bottle */
.marquees { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1rem; transform: rotate(-8deg) scale(1.3); }
.row { overflow: hidden; white-space: nowrap; line-height: 1; }
.track { display: inline-flex; width: max-content; animation: slide 22s linear infinite; will-change: transform; }
.row:nth-child(even) .track { animation-direction: reverse; animation-duration: 28s; }
.track span { font-size: clamp(2.25rem, 11vw, 6rem); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; padding-right: .6em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* bottle */
.bottle { position: relative; height: var(--bottle-h); aspect-ratio: 208 / 851; transform: rotate(12deg); animation: float 6s ease-in-out infinite; }
.bottle img { position: relative; display: block; width: 100%; height: 100%; }
@keyframes float { 50% { transform: rotate(9deg) translateY(-1.5%); } }

/* animated colourful shadow: stacked drop-shadows whose colours cycle */
.bottle img { animation: glow 8s linear infinite; }
@keyframes glow {
  0.0% { filter: drop-shadow(0 0 6px #ff0080) drop-shadow(0 0 16px #ff0080) drop-shadow(6px 8px 18px #00e676); }
  16.67% { filter: drop-shadow(0 0 6px #ff8c00) drop-shadow(0 0 16px #ff8c00) drop-shadow(6px 8px 18px #00b0ff); }
  33.33% { filter: drop-shadow(0 0 6px #ffe600) drop-shadow(0 0 16px #ffe600) drop-shadow(6px 8px 18px #7c4dff); }
  50.0% { filter: drop-shadow(0 0 6px #00e676) drop-shadow(0 0 16px #00e676) drop-shadow(6px 8px 18px #ff0080); }
  66.67% { filter: drop-shadow(0 0 6px #00b0ff) drop-shadow(0 0 16px #00b0ff) drop-shadow(6px 8px 18px #ff8c00); }
  83.33% { filter: drop-shadow(0 0 6px #7c4dff) drop-shadow(0 0 16px #7c4dff) drop-shadow(6px 8px 18px #ffe600); }
  100.0% { filter: drop-shadow(0 0 6px #ff0080) drop-shadow(0 0 16px #ff0080) drop-shadow(6px 8px 18px #00e676); }
}

@media (prefers-reduced-motion: reduce) {
  .track, .bottle, .bottle img { animation-duration: 120s; }
}