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

:root{
  --ink:#020506;
  --white:#f5f6f6;
  --soft:rgba(245,246,246,.62);
  --line:rgba(255,255,255,.22);
  --aqua:#8ec5b7;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--ink);color:var(--white)}
body{min-height:100svh;overflow:hidden;font-family:Montserrat,Arial,sans-serif}

.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:#020506;pointer-events:none}
.video-wrap{
  position:absolute;inset:-4%;
  transform:translate3d(0,0,0) scale(1.08);
  animation:slowZoom 24s ease-in-out infinite alternate;
  will-change:transform;
}
.video-wrap video{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.98) contrast(1.08)}
.darken{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.03) 45%,rgba(0,0,0,.28))}
.vignette{position:absolute;inset:-5%;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.50) 100%)}
.light-sweep{
  position:absolute;top:-25%;bottom:-25%;left:-35%;width:26%;
  background:linear-gradient(90deg,transparent,rgba(235,255,250,.11),transparent);
  transform:rotate(12deg);
  filter:blur(22px);
  animation:sweep 17s ease-in-out infinite;
  mix-blend-mode:screen;
}
.grain{position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
@keyframes slowZoom{0%{transform:scale(1.06)}100%{transform:scale(1.13)}}
@keyframes sweep{0%,12%{transform:translateX(-20vw) rotate(12deg);opacity:0}35%{opacity:1}60%{transform:translateX(150vw) rotate(12deg);opacity:.25}100%{transform:translateX(150vw) rotate(12deg);opacity:0}}

.topbar{position:fixed;left:0;right:0;top:0;padding:28px 38px;display:flex;justify-content:space-between;align-items:center;z-index:10;font-size:10px;letter-spacing:.34em}
.topbar a{color:#fff;text-decoration:none}
.wordmark{font-weight:600}.status{opacity:.58}

main{min-height:100svh;display:grid;place-items:center;padding:80px 20px 140px}
.hero{text-align:center;width:min(620px,92vw);transform:translateY(-2vh)}
.monogram{width:74px;height:74px;margin:0 auto 21px;border:1px solid rgba(255,255,255,.23);display:grid;place-items:center;
  font-size:34px;font-weight:500;letter-spacing:-.08em;backdrop-filter:blur(6px);background:rgba(255,255,255,.025)}
.eyebrow{font-size:9px;letter-spacing:.54em;margin:0 0 18px;color:rgba(255,255,255,.62)}
h1{margin:0;font-size:clamp(44px,6.7vw,92px);font-weight:400;line-height:.87;letter-spacing:.15em;text-shadow:0 8px 40px rgba(0,0,0,.6)}
h1 span{color:rgba(255,255,255,.72)}
.rule{width:42px;height:1px;background:var(--aqua);margin:29px auto 19px;box-shadow:0 0 14px rgba(142,197,183,.45)}
.tagline{margin:0 0 42px;font-size:9px;letter-spacing:.54em;color:rgba(255,255,255,.72)}
.signup{width:min(410px,100%);margin:auto}
.signup>label:first-child{display:block;font-size:9px;letter-spacing:.34em;margin-bottom:12px;color:rgba(255,255,255,.78)}
.field{display:flex;height:48px;border-bottom:1px solid rgba(255,255,255,.56);background:rgba(0,0,0,.10);backdrop-filter:blur(3px)}
.field input{flex:1;border:0;background:transparent;color:white;outline:none;padding:0 8px;font-family:inherit;font-size:10px;letter-spacing:.15em}
.field input::placeholder{color:rgba(255,255,255,.38)}
.field button{width:50px;border:0;background:transparent;color:var(--aqua);font-size:20px;cursor:pointer}
.terms{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:8px;letter-spacing:.21em;color:rgba(255,255,255,.54)}
.terms input{accent-color:#8ec5b7}
.terms a{color:rgba(255,255,255,.76);text-underline-offset:3px}
.message{min-height:16px;margin:12px 0 0;font-size:8px;letter-spacing:.18em;color:var(--aqua)}

.sound{position:fixed;left:34px;bottom:32px;z-index:12;border:0;background:none;color:#fff;display:flex;align-items:center;gap:12px;cursor:pointer;font-family:inherit;font-size:9px;letter-spacing:.18em}
.sound-ring{width:38px;height:38px;border:1px solid rgba(142,197,183,.7);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.18);backdrop-filter:blur(5px)}
.sound-bars{height:15px;display:flex;align-items:flex-end;gap:2px}
.sound-bars i{width:2px;height:5px;background:#dceee9;display:block}
.sound.on .sound-bars i{animation:bar .72s ease-in-out infinite alternate}
.sound-bars i:nth-child(2){height:11px;animation-delay:.15s}.sound-bars i:nth-child(3){height:8px;animation-delay:.3s}.sound-bars i:nth-child(4){height:13px;animation-delay:.07s}
@keyframes bar{to{height:3px;opacity:.45}}

.scroll-note{position:fixed;right:36px;bottom:42px;font-size:8px;letter-spacing:.27em;color:rgba(255,255,255,.38)}

.cookie{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;width:min(820px,calc(100% - 48px));min-height:76px;padding:18px 22px;
  border:1px solid rgba(255,255,255,.12);background:rgba(5,7,8,.82);backdrop-filter:blur(18px);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.cookie strong{font-size:9px;letter-spacing:.12em}.cookie p{margin:6px 0 0;font-size:8px;line-height:1.5;color:rgba(255,255,255,.45);letter-spacing:.06em}
.cookie button{min-width:96px;height:36px;border:1px solid rgba(142,197,183,.5);background:transparent;color:#dceee9;font:500 9px Montserrat;letter-spacing:.18em;cursor:pointer}

@media(max-width:700px){
  .topbar{padding:22px 20px}.status{display:none}
  main{padding:72px 18px 180px}.hero{transform:translateY(-3vh)}
  h1{font-size:clamp(46px,17vw,70px);letter-spacing:.10em}
  .tagline{letter-spacing:.28em}
  .sound{left:18px;bottom:20px}.scroll-note{display:none}
  .cookie{bottom:74px;width:calc(100% - 28px);padding:15px;align-items:flex-start}
  .cookie p{max-width:210px}.cookie button{min-width:68px}
}
@media(prefers-reduced-motion:reduce){
  .video-wrap,.light-sweep{animation:none}
}


/* --- Small SOON revision --- */
.monogram,.eyebrow{display:none!important}
.hero{width:min(520px,92vw);transform:translateY(-1vh)}
h1{
  margin:0!important;
  font-size:clamp(30px,3.2vw,46px)!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:.32em!important;
  padding-left:.32em;
  color:rgba(255,255,255,.94)!important;
  text-shadow:0 4px 24px rgba(0,0,0,.48)!important;
}
.rule{margin:22px auto 17px!important;width:30px!important}
.tagline{margin-bottom:34px!important}
.signup{width:min(390px,100%)!important}


/* --- WATERYUU water logo preview --- */
.water-logo{
  display:block;
  width:clamp(110px,12vw,165px);
  height:auto;
  margin:0 auto 22px;
  object-fit:contain;
  mix-blend-mode:screen;
  opacity:.95;
  filter:contrast(1.08) brightness(1.08);
  -webkit-mask-image:radial-gradient(circle at center, #000 52%, transparent 84%);
  mask-image:radial-gradient(circle at center, #000 52%, transparent 84%);
}


/* --- VIDEO VISIBILITY FIX --- */
body{position:relative;background:#050708}
.scene{z-index:0!important}
.video-wrap{z-index:0}
.video-wrap video{display:block}
.darken{z-index:1}
.vignette{z-index:2}
.light-sweep{z-index:3}
.grain{z-index:4}
.topbar{z-index:20!important}
main{position:relative;z-index:10}
.sound{z-index:30!important}
.scroll-note{z-index:30}
.cookie{z-index:40!important}

/* True transparent logo asset */
.water-logo{
  mix-blend-mode:normal!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:brightness(1.12) contrast(1.08) drop-shadow(0 5px 18px rgba(0,0,0,.32))!important;
}