/* Google Nunito */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#FFF6D9;
  --teal-1:#00C6AE;
  --teal-2:#00E6B7;
  --muted:#3f6060;
  --title:#0a4b4b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  overflow:hidden;
}

/* Cursor glow */
#cursorGlow{
  position:fixed;
  pointer-events:none;
  width:180px; height:180px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  background: radial-gradient(circle, rgba(0,230,183,0.25), rgba(0,198,174,0.08), transparent);
  filter:blur(18px);
  mix-blend-mode:screen;
  opacity:0;
  transition: opacity .1s, left .06s linear, top .06s linear;
  z-index:600;
}

/* Background blobs */
.blob{
  position:fixed;
  border-radius:50%;
  filter:blur(40px);
  opacity:0.55;
  z-index:-5;
  transition: transform 0.08s linear;
}
.blob1{ width:380px;height:380px;background:var(--teal-2); top:-80px; left:-110px; }
.blob2{ width:300px;height:300px;background:#FFE29B; bottom:-120px; right:-80px; }
.blob3{ width:250px;height:250px;background:var(--teal-1); top:50%; left:80%; transform:translate(-50%,-50%); }

/* Stars */
#stars{ position:fixed; inset:0; pointer-events:none; z-index:0; }

/* Container */
.container{
  max-width:720px;
  margin:0 auto;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  position:relative;
  z-index:10;
}

/* Glow waves */
.wave{
  position:absolute;
  top:100px; left:50%;
  width:260px;height:260px;
  border-radius:50%;
  transform:translateX(-50%) scale(0.6);
  background: radial-gradient(circle, rgba(0,230,183,0.35), transparent);
  opacity:0;
  z-index:-1;
}
.wave1{ animation:waveExpand 4s infinite ease-out }
.wave2{ animation:waveExpand 4s infinite ease-out 1.3s }
.wave3{ animation:waveExpand 4s infinite ease-out 2.6s }

@keyframes waveExpand{
  0%{ transform:translateX(-50%) scale(0.6); opacity:.6 }
  100%{ transform:translateX(-50%) scale(1.55); opacity:0 }
}

/* Glow ring */
.glow-ring{
  width:260px;height:260px;
  position:absolute;
  top:40px; left:50%;
  transform:translateX(-50%) scale(0);
  background: radial-gradient(circle, rgba(0,230,183,0.5), rgba(0,198,174,0.15), transparent 70%);
  filter:blur(20px);
  animation: glowExpand 1.6s ease-out forwards;
}
@keyframes glowExpand{
  0%{ transform:translateX(-50%) scale(0); opacity:0 }
  40%{ opacity:1 }
  100%{ transform:translateX(-50%) scale(1); opacity:1 }
}

/* Sparkles */
.sparkle{
  width:12px;height:12px;background:#fffbe8;
  border-radius:50%;position:absolute;
  opacity:0;box-shadow:0 0 10px #fff5b3,0 0 20px #ffe89b;
}
.s1{top:110px;left:48%;animation:sparkle 3s infinite .2s}
.s2{top:150px;left:60%;animation:sparkle 3s infinite .6s}
.s3{top:180px;left:40%;animation:sparkle 3s infinite 1s}
.s4{top:130px;left:35%;animation:sparkle 3s infinite 1.4s}
.s5{top:165px;left:70%;animation:sparkle 3s infinite 1.8s}

@keyframes sparkle{
  0%{opacity:0;transform:translateY(0)}
  30%{opacity:1}
  60%{opacity:1;transform:translateY(-14px)}
  100%{opacity:0}
}

/* MASCOT Always Visible + animations */
.mascot img{
  width:200px;
  margin-bottom:10px;

  /* ALWAYS visible */
  opacity:1;

  animation:
    popIn 1s ease forwards,
    glowPulse 3.5s ease-in-out infinite 1.2s;

  display:block;
  margin-left:auto;margin-right:auto;
}

@keyframes popIn{
  0%{ transform:scale(0.4) }
  60%{ transform:scale(1.15) }
  100%{ transform:scale(1) }
}

@keyframes glowPulse{
  0%{ filter:drop-shadow(0 0 0px rgba(0,240,190,0)); }
  50%{ filter:drop-shadow(0 0 28px rgba(0,220,180,0.75)); }
  100%{ filter:drop-shadow(0 0 0px rgba(0,240,190,0)); }
}

/* Text */
.title{
  font-size:2.5rem;font-weight:800;color:var(--title);
  margin:18px 0 8px;opacity:0;animation:fadeUp 1.2s .4s forwards;
}
.subtitle{
  color:var(--muted);font-size:1.15rem;opacity:0;
  animation:fadeUp 1.2s .6s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.msg{min-height:24px;color:var(--teal-1);font-weight:700;opacity:0;animation:fadeUp 1s 1s forwards}

footer{margin-top:32px;color:#668585;font-size:.9rem}

/* Mobile */
@media(max-width:520px){
  .title{font-size:1.9rem}
  #cursorGlow{width:120px;height:120px}
}