* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #1a1814;
  font-family: Georgia, serif;
}

.stage {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.frame {
  position: relative;
  width: min(92vw, 480px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 22px;
  background: #F4F1EA;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}

.studio {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 28%, #FFFaf3 0%, #F4F1EA 48%, #E8E2D6 100%);
}

.soft-key {
  position: absolute;
  inset: 8% 18% auto;
  height: 36%;
  background: radial-gradient(circle, rgba(255,255,255,.7), transparent 70%);
  filter: blur(10px);
}

.rim {
  position: absolute;
  inset: auto 10% 18%;
  height: 28%;
  background: radial-gradient(ellipse, rgba(255,255,255,.35), transparent 70%);
  filter: blur(12px);
}

#chips {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.hero {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 68%;
  transform: translate(-50%, -50%);
  z-index: 5;
  filter: drop-shadow(0 28px 24px rgba(90, 50, 20, .28));
  animation: cookieFloat 7.5s ease-in-out infinite;
}

#heroCookie { width: 100%; height: auto; display: block; }

@keyframes cookieFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50% { transform: translate(-50%, calc(-50% - 14px)) rotate(2deg); }
}

.floaters { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.floater {
  position: absolute;
  filter: drop-shadow(0 10px 8px rgba(70,40,10,.2));
}

.floater svg { width: 100%; height: auto; display: block; }

.f1 { width: 18%; top: 10%; left: 8%; animation: driftA 9s ease-in-out infinite; }
.f2 { width: 14%; top: 18%; right: 8%; animation: driftB 11s ease-in-out infinite; }
.f3 { width: 12%; top: 48%; left: 6%; animation: driftA 10s ease-in-out infinite reverse; }

.chip-only {
  width: 18px;
  height: 14px;
  border-radius: 50% 45% 55% 40%;
  background: radial-gradient(circle at 30% 30%, #6B3A24, #2A140C 70%);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,.35), inset 2px 2px 2px rgba(255,255,255,.12);
}

.f4 { top: 28%; left: 18%; animation: chipFall 8s linear infinite; }
.f5 { top: 14%; right: 22%; width: 14px; height: 11px; animation: chipFall 9.5s linear infinite 1.4s; }
.f6 { top: 40%; right: 12%; width: 16px; height: 12px; animation: chipFall 7.2s linear infinite .8s; }

@keyframes driftA {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(22px) rotate(8deg); }
}

@keyframes driftB {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  50% { transform: translateY(-18px) rotate(-6deg); }
}

@keyframes chipFall {
  0% { transform: translateY(-30px) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(420px) rotate(220deg); opacity: .15; }
}

.milk {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 112%;
  transform: translateX(-50%);
  z-index: 6;
  filter: drop-shadow(0 8px 10px rgba(160,140,110,.18));
}

.crown { transform-origin: 200px 280px; animation: erupt 3.6s ease-in-out infinite; }
.p1 { animation: plume 3.2s ease-in-out infinite; }
.p2 { animation: plume 3.6s ease-in-out infinite .2s; }
.p3 { animation: plume 3.4s ease-in-out infinite .1s; }
.drop { transform-box: fill-box; transform-origin: center; animation: dropUp 2.8s ease-in-out infinite; }
.d2 { animation-delay: .15s; }
.d3 { animation-delay: .28s; }
.d4 { animation-delay: .4s; }
.d5 { animation-delay: .22s; }
.pool { animation: poolPulse 3.6s ease-in-out infinite; }

@keyframes erupt {
  0%, 100% { transform: scaleY(.92) scaleX(1); }
  50% { transform: scaleY(1.08) scaleX(1.02); }
}

@keyframes plume {
  0%, 100% { transform: translateY(10px) scale(.92); }
  50% { transform: translateY(-16px) scale(1.06); }
}

@keyframes dropUp {
  0%, 100% { transform: translateY(8px) scale(.9); opacity: .7; }
  50% { transform: translateY(-22px) scale(1); opacity: 1; }
}

@keyframes poolPulse {
  0%, 100% { transform: scaleX(1); opacity: .88; }
  50% { transform: scaleX(1.04); opacity: 1; }
}

.grade {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(40,30,16,.12) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero, .floater, .crown, .p1, .p2, .p3, .drop, .pool { animation: none; }
}