@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

:root{
  --forest:#0F5C47;
  --mint:#3FBF8F;
  --cream:#F6FAF7;
  --ink:#0B1F19;
  --lime:#C8F169;
}

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

html,body{
  height:100%;
  background:var(--cream);
  font-family:'Inter',sans-serif;
  overflow:hidden;
}

.stage{
  position:relative;
  height:100vh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:
    radial-gradient(circle at 20% 20%, rgba(63,191,143,0.10), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(15,92,71,0.08), transparent 50%),
    var(--cream);
}

/* speed lines */
.lines{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.line{
  position:absolute;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--mint), transparent);
  opacity:0;
  animation:zoom 2.4s linear infinite;
}
@keyframes zoom{
  0%{ transform:translateX(-60vw) scaleX(0.4); opacity:0; }
  15%{ opacity:0.55; }
  85%{ opacity:0.35; }
  100%{ transform:translateX(60vw) scaleX(1.6); opacity:0; }
}

.logo-wrap{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(26px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.logo{
  width:min(62vw, 460px);
  height:auto;
  filter:drop-shadow(0 18px 30px rgba(15,92,71,0.18));
  animation:float 4.5s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.hook{
  margin-top:2.1rem;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 4.2vw, 3.1rem);
  color:var(--forest);
  letter-spacing:-0.01em;
  text-align:center;
  position:relative;
  animation:slideup .9s .35s cubic-bezier(.2,.8,.2,1) both;
}

.hook .accent{
  color:var(--mint);
  position:relative;
}
.hook .accent::after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:2px;
  height:0.32em;
  background:var(--lime);
  z-index:-1;
  opacity:0.65;
  transform:scaleX(0);
  transform-origin:left;
  animation:underline .6s .9s ease-out forwards;
}

@keyframes underline{
  to{ transform:scaleX(1); }
}

@keyframes slideup{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.sub{
  margin-top:0.9rem;
  font-size:clamp(0.95rem, 1.6vw, 1.15rem);
  color:rgba(11,31,25,0.62);
  text-align:center;
  animation:slideup .9s .5s cubic-bezier(.2,.8,.2,1) both;
}

.dots{
  display:inline-flex;
  gap:5px;
  margin-left:6px;
  vertical-align:middle;
}
.dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mint);
  display:inline-block;
  animation:bounce 1.2s infinite ease-in-out;
}
.dots span:nth-child(2){ animation-delay:0.15s; }
.dots span:nth-child(3){ animation-delay:0.3s; }

@keyframes bounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.5; }
  40%{ transform:translateY(-6px); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
}