:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  --ink: #5a4b55;
  --paper: #fffdf9;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.smiley-field {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 17% 20%, rgb(255 221 226 / 25%), transparent 24rem),
    radial-gradient(circle at 84% 78%, rgb(203 237 255 / 24%), transparent 28rem),
    var(--paper);
}

.smiley-field::before,
.smiley-field::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.smiley-field::before {
  top: -16rem;
  right: 10%;
  width: 30rem;
  height: 30rem;
  background: rgb(255 239 177 / 15%);
  filter: blur(8px);
}

.smiley-field::after {
  bottom: -18rem;
  left: 12%;
  width: 32rem;
  height: 32rem;
  background: rgb(222 211 255 / 14%);
  filter: blur(10px);
}

.smiley-layer { position: absolute; inset: 0; }

.smiley {
  --size: 4rem;
  --skin: #ffd86d;
  --accent: #f29a9c;
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--skin);
  box-shadow: inset calc(var(--size) * -.09) calc(var(--size) * -.1) 0 rgb(195 132 45 / 12%), 0 1rem 2rem rgb(90 75 85 / 11%);
  transform: translate(-50%, -50%);
  animation: arrive .85s cubic-bezier(.18,.9,.25,1.15) both, drift var(--duration, 6s) ease-in-out var(--drift-delay, 0s) infinite alternate;
  will-change: transform;
}

.smiley::before,
.smiley::after { position: absolute; top: 34%; width: 12%; height: 18%; border-radius: 50%; background: var(--ink); content: ""; }
.smiley::before { left: 28%; }
.smiley::after { right: 28%; }
.smiley__mouth { position: absolute; left: 50%; top: 51%; width: 37%; height: 22%; border-bottom: .16rem solid var(--ink); border-radius: 0 0 100% 100%; transform: translateX(-50%); }
.smiley__blush { position: absolute; top: 54%; width: 18%; height: 8%; border-radius: 50%; background: var(--accent); opacity: .55; }
.smiley__blush--left { left: 12%; }
.smiley__blush--right { right: 12%; }

.smiley--wink::after { top: 39%; width: 20%; height: 0; border-top: .16rem solid var(--ink); border-radius: 0; background: none; }
.smiley--surprised::before, .smiley--surprised::after { width: 14%; height: 16%; }
.smiley--sleepy::before, .smiley--sleepy::after { top: 40%; width: 19%; height: 0; border-top: .17rem solid var(--ink); border-radius: 0; }
.smiley--heart::before, .smiley--heart::after { top: 31%; width: auto; height: auto; border-radius: 0; background: none; color: #ef7899; content: "♥"; font-size: calc(var(--size) * .25); line-height: 1; }
.smiley--heart::before { left: 24%; }
.smiley--heart::after { right: 24%; }
.smiley--tongue .smiley__mouth { height: 27%; border: 0; border-radius: 0 0 50% 50%; background: var(--ink); }
.smiley--tongue .smiley__mouth::after { position: absolute; bottom: -2%; left: 50%; width: 55%; height: 56%; border-radius: 50%; background: #f58d9c; content: ""; transform: translateX(-50%); }
.smiley--cool::before, .smiley--cool::after { top: 32%; width: 25%; height: 19%; border: .12rem solid #343849; border-radius: .25rem; background: #596077; }
.smiley--cool .smiley__mouth { width: 25%; border-bottom-style: dotted; }
.smiley--cool .smiley__glasses { position: absolute; top: 41%; left: 50%; width: 55%; border-top: .13rem solid #343849; transform: translateX(-50%); }
.smiley--star .smiley__mouth { width: 22%; height: 14%; border: 0; border-radius: 50%; background: var(--ink); }
.smiley--pink { --skin: #ffb7c8; --accent: #eb7993; }
.smiley--blue { --skin: #b9e5ff; --accent: #63b3de; }
.smiley--mint { --skin: #c8f3d1; --accent: #62c78d; }
.smiley--lavender { --skin: #d9c7ff; --accent: #9b7bd1; }
.smiley--sunset { --skin: #ffb27e; --accent: #e8755f; }

.smiley.is-bursting { animation: burst .6s cubic-bezier(.2,.8,.2,1) both; }

@keyframes arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-24deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes drift { from { margin-top: -10px; } to { margin-top: 14px; } }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -50%) scale(1.3) rotate(8deg); } 100% { transform: translate(-50%, -50%) scale(1); } }

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