:root {
  --w: 970px;
  --h: 394px;
  --bg: #bfe3f2;
  --ink: #1c1a16;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ddd;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

#banner {
  display: block;
  width: var(--w);
  height: var(--h);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  text-decoration: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #bfe3f2 0%, #e9f4dc 100%);
}

.bg, .scrim, .can-bg-shell, .can-bg, .can-shell, .can, .logo, .copy, .cta,
.lemon-shell, .lemon, .shine, .glow, .splash {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

/* ---------- Background ---------- */
.bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transform: scale(1.02);
}

/* ---------- Left scrim for text legibility ---------- */
.scrim {
  inset: 0;
  background: linear-gradient(96deg,
    rgba(6, 42, 74, 0.30) 0%,
    rgba(6, 42, 74, 0.14) 26%,
    rgba(6, 42, 74, 0) 48%);
}

/* ---------- Ambient glows ---------- */
.glow {
  border-radius: 50%;
  filter: blur(12px);
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,214,77,0.5) 34%, rgba(255,214,77,0) 72%);
  animation: pulse 4s ease-in-out infinite;
}
.glow-a { width: 440px; height: 440px; left: 500px; top: -120px; animation-delay: -1.1s; }
.glow-b { width: 320px; height: 320px; right: 40px;  top: 120px;  animation-delay: -2.4s; }

/* ---------- Secondary (background) can ---------- */
.can-bg-shell {
  left: 380px;
  top: 74px;
  width: 280px;
  height: 280px;
  z-index: 1;
  animation: canBgDrift 4.8s ease-in-out 1.1s infinite;
}
.can-bg-shell::before,
.can-shell::before {
  content: "";
  position: absolute;
  inset: 14% 2% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 157, 0.5) 0%, rgba(255, 242, 157, 0) 68%);
  transform: rotate(-10deg);
  z-index: -1;
}
.can-bg {
  width: 280px;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 50% 72%;
  filter: brightness(0.97) saturate(0.95) drop-shadow(0 10px 14px rgba(0,0,0,0.12));
  animation: canBgIn 0.9s ease-out 0.2s forwards;
}

/* ---------- Hero can ---------- */
.can-shell {
  left: 526px;
  top: -4px;
  width: 410px;
  height: 410px;
  z-index: 3;
  animation: canHeroFloat 3.4s ease-in-out 1.15s infinite;
}
.can-shell::before {
  inset: 12% -2% 0%;
  background: radial-gradient(circle, rgba(255, 245, 166, 0.66) 0%, rgba(255, 245, 166, 0) 66%);
}
.can {
  width: 410px;
  left: 0;
  top: 0;
  transform-origin: 50% 72%;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.2));
  animation:
    canIn 1.15s cubic-bezier(.2,.8,.2,1) forwards,
    canProductGlow 4.2s ease-in-out 1.4s infinite;
}

/* ---------- Text + CTA ---------- */
.logo {
  width: 300px;
  left: 58px;
  top: 80px;
  opacity: 0;
  animation: fadeUp 0.8s ease-out 0.42s forwards;
  z-index: 4;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28));
}
.copy {
  width: 288px;
  left: 62px;
  top: 172px;
  opacity: 0;
  animation: fadeUp2 0.8s ease-out 0.62s forwards;
  z-index: 4;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28));
}
.cta {
  width: 178px;
  left: 64px;
  top: 250px;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: ctaIn 0.9s ease-out 1s forwards;
  z-index: 4;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.24));
}

/* ---------- Lemons ---------- */
.lemon-shell {
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.2s;
  animation-iteration-count: infinite;
  z-index: 2;
}
.lemon-shell-1 { left: 356px; top: 292px; width: 92px; height: 92px; animation-name: lemonIdle1; }
.lemon-shell-2 { left: 604px; top: 44px;  width: 56px; height: 56px; animation-name: lemonIdle2; }
.lemon-shell-3 { left: 812px; top: 298px; width: 72px; height: 72px; animation-name: lemonIdle3; }

.lemon { opacity: 0; }
.lemon-1 { width: 92px; left: 0; top: 0; animation: lemon1 1s ease-out 0.12s forwards; filter: drop-shadow(0 10px 12px rgba(0,0,0,0.1)); }
.lemon-2 { width: 56px; left: 0; top: 0; animation: lemon2 1s ease-out 0.18s forwards; filter: blur(1.1px) drop-shadow(0 6px 8px rgba(0,0,0,0.08)); }
.lemon-3 { width: 72px; left: 0; top: 0; animation: lemon3 0.95s ease-out 0.22s forwards; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.09)); }

/* ---------- Splash sparkles ---------- */
.splash {
  left: 62%;
  top: 200px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,221,102,0.95) 30%, rgba(255,221,102,0) 72%);
  opacity: 0;
  mix-blend-mode: screen;
}
.splash-1 { animation: splash1 0.9s ease-out 0.16s forwards; }
.splash-2 { animation: splash2 0.9s ease-out 0.2s forwards; }
.splash-3 { animation: splash3 0.9s ease-out 0.24s forwards; }

/* ---------- Sweep shine ---------- */
.shine {
  inset: -20% auto auto -35%;
  width: 45%;
  height: 130%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg) translateX(-120%);
  animation: sweep 1s ease-out 1.2s forwards;
  mix-blend-mode: screen;
}

/* ================= Keyframes ================= */
@keyframes canIn {
  0%   { transform: translateY(28px) scale(0.8) rotate(-7deg); opacity: 0; }
  65%  { transform: translateY(-4px) scale(1.03) rotate(1deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes canBgIn {
  0%   { transform: translateY(16px) scale(0.82) rotate(7deg); opacity: 0; }
  100% { transform: translateY(0) scale(1) rotate(6deg); opacity: 1; }
}
@keyframes lemon1 {
  0%   { transform: translate(-38px, 26px) scale(0.42) rotate(-42deg); opacity: 0; }
  70%  { transform: translate(8px, -6px) scale(1.04) rotate(10deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes lemon2 {
  0%   { transform: translate(34px, 12px) scale(0.38) rotate(54deg); opacity: 0; }
  70%  { transform: translate(-8px, 3px) scale(1.06) rotate(-10deg); opacity: 0.88; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes lemon3 {
  0%   { transform: translateY(22px) translateX(10px) scale(0.3) rotate(-18deg); opacity: 0; }
  72%  { transform: translateY(-5px) translateX(-4px) scale(1.06) rotate(10deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes splash1 {
  0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
  68%  { transform: translate(-58px, 26px) scale(1.05); opacity: 0.95; }
  100% { transform: translate(-52px, 24px) scale(0.92); opacity: 0.48; }
}
@keyframes splash2 {
  0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
  68%  { transform: translate(70px, 18px) scale(0.95); opacity: 0.82; }
  100% { transform: translate(64px, 16px) scale(0.84); opacity: 0.42; }
}
@keyframes splash3 {
  0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
  68%  { transform: translate(-8px, -34px) scale(1.08); opacity: 0.78; }
  100% { transform: translate(-6px, -28px) scale(0.94); opacity: 0.36; }
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(12px); }
  70%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp2 {
  0%   { opacity: 0; transform: translateY(8px); }
  70%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ctaIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.92); }
  70%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sweep {
  0%   { transform: rotate(18deg) translateX(-120%); opacity: 0; }
  24%  { opacity: 0.68; }
  100% { transform: rotate(18deg) translateX(320%); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { transform: scale(0.95); opacity: 0.22; }
  50%      { transform: scale(1.05); opacity: 0.42; }
}
@keyframes canHeroFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-3px) rotate(1deg); }
}
@keyframes canBgDrift {
  0%, 100% { transform: translateY(0) scale(0.98) rotate(-1deg); }
  50%      { transform: translateY(3px) scale(1.01) rotate(1deg); }
}
@keyframes canProductGlow {
  0%, 42%, 100% { filter: brightness(1) saturate(1) drop-shadow(0 18px 24px rgba(0,0,0,0.2)); }
  52% { filter: brightness(1.12) saturate(1.08) drop-shadow(0 20px 30px rgba(0,0,0,0.24)); }
  62% { filter: brightness(1.02) saturate(1.02) drop-shadow(0 18px 24px rgba(0,0,0,0.2)); }
}
@keyframes lemonIdle1 {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-7px) rotate(5deg); }
}
@keyframes lemonIdle2 {
  0%, 100% { transform: translateY(0) rotate(7deg) scale(0.98); }
  50%      { transform: translateY(-3px) rotate(-2deg) scale(1.02); }
}
@keyframes lemonIdle3 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-5px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .logo, .copy, .cta, .can, .can-bg, .lemon { opacity: 1; }
}