/* nydrate · landing page */
:root{
  --ink:#0E1A2B;
  --slate:#4E5F72;
  --green:#5DBB46;
  --blue:#1FB5E0;
  --bg:#FAFAF7;
  --grad:linear-gradient(225deg,var(--green),var(--blue));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}

.page{position:relative;width:100%;height:100vh;height:100dvh;min-height:560px;overflow:hidden;--mx:50%;--my:40%}

/* background */
.blob{position:absolute;border-radius:50%;pointer-events:none}
.blob-a{left:-10vw;top:-18vh;width:62vw;height:62vw;max-width:900px;max-height:900px;background:#C9EDB9;filter:blur(110px);opacity:.75;animation:blobA 22s ease-in-out infinite}
.blob-b{right:-14vw;bottom:-26vh;width:66vw;height:66vw;max-width:980px;max-height:980px;background:#A6E4F6;filter:blur(120px);opacity:.75;animation:blobB 26s ease-in-out infinite}
.blob-c{left:38vw;top:30vh;width:30vw;height:30vw;background:#E3F6F0;filter:blur(90px);opacity:.9;animation:blobC 18s ease-in-out infinite}
.spotlight{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.75),rgba(255,255,255,0) 60%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* header & footer */
.top{position:absolute;left:0;right:0;top:0;z-index:2;padding:28px clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between}
.mini-logo{display:flex;align-items:baseline;gap:4px;font-size:26px;font-weight:300;letter-spacing:-.04em;line-height:1}
.mini-logo .drop{display:inline-block;width:6px;height:6px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--grad)}
.status{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--slate)}
.status-dot{width:8px;height:8px;border-radius:4px;background:var(--green);box-shadow:0 0 0 4px rgba(93,187,70,.2)}
.bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px clamp(20px,4vw,56px);text-align:center;font-size:13px;color:var(--slate)}

/* hero */
.hero{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px}
.logo{margin:0;display:flex;align-items:baseline;justify-content:center;gap:.06em;font-size:clamp(76px,15vw,210px);font-weight:300;letter-spacing:-.05em;line-height:.9;padding-bottom:.06em}
.letters{display:inline-flex}
.letters span{display:inline-block;opacity:0;animation:letter 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
.dot{position:relative;display:inline-block;width:.15em;height:.15em}
.dot .drop{position:absolute;inset:0;border-radius:50% 50% 50% 0;background:var(--grad);opacity:0}
.drop-main{transform:rotate(-45deg) scale(0);animation:pop .7s cubic-bezier(.2,.8,.2,1) 1.05s forwards,squash 5s ease-in-out 2.2s infinite}
.drop-fall{animation:fall 5s cubic-bezier(.55,0,.85,.35) 2.2s infinite}
.ring{position:absolute;left:50%;top:100%;border-radius:50%;opacity:0;animation:ring 5s ease-out infinite}
.ring-1{width:1.5em;height:.26em;border:2px solid rgba(31,181,224,.55);animation-delay:2.2s}
.ring-2{width:.9em;height:.16em;border:2px solid rgba(93,187,70,.6);animation-delay:2.45s}
.ring-3{width:2.2em;height:.36em;border:1px solid rgba(31,181,224,.3);animation-delay:2.7s}

/* tagline: DS lockup · 12.5% of the logo size, Light, +30% tracking */
.tagline{margin-top:clamp(6px,.9vw,14px);font-size:clamp(9.5px,1.875vw,26px);font-weight:300;letter-spacing:.3em;padding-left:.3em;color:var(--slate);white-space:nowrap}

.claim{margin:34px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.28em;font-size:clamp(22px,2.6vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.words{position:relative;display:inline-block;height:1.25em;overflow:hidden;min-width:4.6em;text-align:left}
.words-track{display:flex;flex-direction:column;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.words-track span{height:1.25em;line-height:1.25em;font-weight:500;background:linear-gradient(90deg,#3E8E2E,#0F86B3,#3E8E2E);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}

/* entrance */
.reveal{opacity:0;animation:fade 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}

@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8vw,-6vh) scale(1.12)}66%{transform:translate(-5vw,5vh) scale(.94)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-7vw,6vh) scale(.92)}66%{transform:translate(6vw,-4vh) scale(1.1)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,7vh) scale(1.15)}}
@keyframes letter{0%{opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(10px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes fade{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:rotate(-45deg) scale(0)}70%{opacity:1;transform:rotate(-45deg) scale(1.3)}100%{opacity:1;transform:rotate(-45deg) scale(1)}}
@keyframes fall{0%{transform:translateY(-4.5em) rotate(-45deg) scale(.55);opacity:0}8%{opacity:1}30%{transform:translateY(-.05em) rotate(-45deg) scale(.75);opacity:1}31%,100%{transform:translateY(0) rotate(-45deg) scale(.75);opacity:0}}
@keyframes squash{0%,30%{transform:rotate(-45deg) scale(1);opacity:1}33%{transform:rotate(-45deg) scale(1.3,.75);opacity:1}38%{transform:rotate(-45deg) scale(.9,1.12);opacity:1}44%,100%{transform:rotate(-45deg) scale(1);opacity:1}}
@keyframes ring{0%,30%{transform:translate(-50%,-50%) scale(.1);opacity:0}33%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:700px){
  .status{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}
  .drop-fall,.ring{display:none}
}