:root{
  --sky1:#172b45;
  --sky2:#294b69;
  --sea1:#214b66;
  --sea2:#18384d;
  --sand:#665f55;
  --ink:#eff7fb;
  --muted:#c9d8e3;
  --glass:rgba(18,35,52,.72);
  --border:rgba(255,255,255,.16);
  --bubble:#f8fbfd;
  --bubbleText:#17384b;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

body{
  min-height:100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:18px;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 48%,var(--sea1) 49%,var(--sea2) 70%,var(--sand) 71%,#4d4843 100%);
}

body.day{
  --sky1:#8fd0f1;
  --sky2:#d9eff8;
  --sea1:#4db3d4;
  --sea2:#2c7f9d;
  --sand:#e7cf9f;
  --ink:#17384a;
  --muted:#496678;
  --glass:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.82);
}

.ambient,.sea{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.sun-moon{
  position:absolute;
  right:7vw;
  top:6vh;
  width:92px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#dfe8f4 65%,#9eb0ca);
  box-shadow:0 0 45px rgba(218,231,255,.32);
}

body.day .sun-moon{
  background:radial-gradient(circle at 35% 35%,#fff7d1,#ffd166 65%,#f2b84a);
  box-shadow:0 0 58px rgba(255,209,102,.68);
}

.stars{position:absolute;inset:0}
.star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  animation:twinkle 2s ease-in-out infinite;
}
body.day .stars{opacity:0}

@keyframes twinkle{
  50%{opacity:.25;transform:scale(.5)}
}

.cloud{
  position:absolute;
  left:-240px;
  width:180px;
  height:52px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  animation:cloudMove linear infinite;
}
.cloud::before,.cloud::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.cloud::before{width:72px;height:72px;left:28px;top:-30px}
.cloud::after{width:94px;height:94px;right:20px;top:-45px}
.c1{top:14vh;animation-duration:31s}
.c2{top:29vh;animation-duration:43s;transform:scale(.72)}

@keyframes cloudMove{
  to{transform:translateX(calc(100vw + 420px))}
}

.sea{top:47%;overflow:hidden}

.wave{
  position:absolute;
  left:-15%;
  width:130%;
  height:65px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  animation:waveMove 5.5s ease-in-out infinite;
}
.w1{top:0}
.w2{top:42px;opacity:.55;animation-delay:-2.5s}

@keyframes waveMove{
  50%{transform:translateX(4%) translateY(10px)}
}

.card{
  position:relative;
  z-index:5;
  width:min(830px,100%);
  padding:clamp(24px,5vw,54px);
  text-align:center;
  border:1px solid var(--border);
  border-radius:34px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  box-shadow:0 30px 90px rgba(6,20,31,.30);
  animation:enter .85s cubic-bezier(.22,1,.36,1);
}

@keyframes enter{
  from{opacity:0;transform:translateY(28px) scale(.96)}
}

.badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

body.day .badge{background:rgba(255,255,255,.72)}

h1{
  margin:18px 0 0;
  font-size:clamp(42px,8vw,78px);
  line-height:.98;
  letter-spacing:-.05em;
}

.lead{
  margin:18px auto 0;
  max-width:620px;
  font-size:clamp(18px,3vw,24px);
  line-height:1.55;
  color:var(--muted);
  text-wrap:balance;
}

.scene{
  position:relative;
  min-height:430px;
  margin-top:0;
  display:grid;
  place-items:center;
}

.speech{
  position:absolute;
  z-index:6;
  top:22px;
  right:3%;
  max-width:260px;
  padding:16px 20px;
  border-radius:20px;
  background:var(--bubble);
  color:var(--bubbleText);
  font-weight:900;
  line-height:1.35;
  box-shadow:0 18px 42px rgba(7,26,40,.25);
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:.35s;
}

.speech.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.speech::after{
  content:"";
  position:absolute;
  left:28px;
  bottom:-13px;
  border:13px solid transparent;
  border-top-color:var(--bubble);
  border-bottom:0;
}

.emoji-button{
  width:min(420px,90vw);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .2s ease;
}

.emoji-button:hover{
  transform:translateY(-5px) scale(1.018);
}

.emoji{
  width:100%;
  display:block;
  overflow:visible;
  animation:breathe 3.8s ease-in-out infinite;
}

@keyframes breathe{
  50%{transform:translateY(-5px) scale(1.01)}
}

.emoji-core{
  transform-origin:center;
  transition:transform .2s ease;
}

.curls circle,.curls path{
  fill:url(#curlGradient);
}

.eye{
  fill:#5a3a1d;
  transform-origin:center;
  animation:blink 5s infinite;
}

.eye-shine{fill:#fff}

@keyframes blink{
  0%,46%,50%,100%{transform:scaleY(1)}
  48%{transform:scaleY(.08)}
}

.cheeks ellipse{
  fill:rgba(237,120,120,.24);
}

.mouth{
  fill:none;
  stroke:#5f3d1e;
  stroke-width:12;
  stroke-linecap:round;
}

.mouth-smile{opacity:0}

.tear{
  fill:#65c8ef;
  animation:tearFall 4.8s ease-in-out infinite;
  transform-origin:center;
}

@keyframes tearFall{
  0%,18%,100%{opacity:0;transform:translateY(-10px)}
  28%{opacity:1}
  62%{opacity:1;transform:translateY(50px)}
  74%{opacity:0}
}

.emoji-button.happy .mouth-sad{opacity:0}
.emoji-button.happy .mouth-smile{opacity:1}
.emoji-button.happy .tear{opacity:0;animation:none}
.emoji-button.happy .emoji-core{animation:happyBounce .7s ease}

@keyframes happyBounce{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05) rotate(2deg)}
}

.scene.sleeping .eye{
  animation:none;
  transform:scaleY(.08);
}

.scene.sleeping .tear{
  opacity:0;
  animation:none;
}

.zzz{
  position:absolute;
  left:7%;
  top:30%;
  font-size:30px;
  font-weight:1000;
  opacity:0;
}

.scene.sleeping .zzz{
  animation:zzz 1.8s ease-in-out infinite;
}

@keyframes zzz{
  0%,100%{opacity:.2;transform:translateY(8px)}
  50%{opacity:1;transform:translateY(-9px)}
}

.floating-heart{
  position:absolute;
  left:50%;
  top:62%;
  font-size:40px;
  opacity:0;
  pointer-events:none;
}

.floating-heart.fly{
  animation:heartFly 1.7s ease-out;
}

@keyframes heartFly{
  0%{opacity:0;transform:translate(-50%,20px) scale(.5)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-180px) scale(1.3) rotate(10deg)}
}

.tip{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

@media(max-width:680px){
  .card{border-radius:26px}
  .scene{min-height:390px}
  .speech{top:4px;right:0;max-width:220px;font-size:14px}
  .sun-moon{width:70px}
  .emoji-button{width:min(390px,94vw)}
}