Nivara \u2014 Come up for air<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,440;0,9..144,560;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* ============ RESET & TOKENS ============ *\/\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml{scroll-behavior:smooth;}\r\n:root{\r\n --abyss:#050910;\r\n --deep:#0a1524;\r\n --deep-2:#0e2035;\r\n --surface-tone:#12283f;\r\n --foam:#eaf3f1;\r\n --foam-dim:rgba(234,243,241,0.62);\r\n --foam-faint:rgba(234,243,241,0.34);\r\n --teal:#4ff0c7;\r\n --teal-dim:#2bb894;\r\n --violet:#7c93ff;\r\n --amber:#ffb86b;\r\n --line:rgba(234,243,241,0.11);\r\n --line-bright:rgba(79,240,199,0.35);\r\n --font-display:'Fraunces', serif;\r\n --font-body:'Space Grotesk', sans-serif;\r\n --font-mono:'JetBrains Mono', monospace;\r\n --ease:cubic-bezier(.22,.9,.32,1);\r\n}\r\nbody{\r\n background:var(--abyss);\r\n color:var(--foam);\r\n font-family:var(--font-body);\r\n line-height:1.5;\r\n overflow-x:hidden;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\nimg,svg{display:block;max-width:100%;}\r\na{color:inherit;}\r\nbutton{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}\r\n.container{width:min(1120px,90vw);margin:0 auto;position:relative;}\r\n::selection{background:var(--teal);color:var(--abyss);}\r\n:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px;}\r\n\r\nh1,h2,h3{font-family:var(--font-display);font-weight:560;letter-spacing:-0.01em;}\r\n.eyebrow{\r\n font-family:var(--font-mono);\r\n font-size:.72rem;\r\n letter-spacing:.22em;\r\n text-transform:uppercase;\r\n color:var(--teal);\r\n display:flex;align-items:center;gap:.6em;\r\n}\r\n.eyebrow::before{content:\"\";width:22px;height:1px;background:var(--teal);display:inline-block;}\r\n\r\n\/* ============ GRAIN OVERLAY ============ *\/\r\n.grain{\r\n position:fixed;inset:0;pointer-events:none;z-index:60;\r\n opacity:.05;mix-blend-mode:overlay;\r\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\/* ============ AMBIENT GLOWS ============ *\/\r\n.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}\r\n.glow-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;will-change:transform;}\r\n\r\n\/* ============ NAV ============ *\/\r\nnav{\r\n position:fixed;top:0;left:0;right:0;z-index:50;\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:1.5rem clamp(1.25rem,5vw,3rem);\r\n backdrop-filter:blur(10px);\r\n background:linear-gradient(to bottom, rgba(5,9,16,.75), transparent);\r\n}\r\n.wordmark{\r\n font-family:var(--font-display);font-size:1.25rem;font-weight:560;\r\n letter-spacing:.01em;\r\n}\r\n.wordmark span{color:var(--teal);}\r\n.nav-right{font-family:var(--font-mono);font-size:.7rem;color:var(--foam-faint);letter-spacing:.08em;}\r\n\r\n\/* ============ DEPTH GAUGE ============ *\/\r\n.depth-gauge{\r\n position:fixed;right:2.25rem;top:50%;transform:translateY(-50%);\r\n z-index:45;display:flex;flex-direction:column;align-items:center;gap:0;\r\n height:280px;\r\n}\r\n.depth-gauge .track{\r\n position:relative;width:1px;height:100%;background:var(--line);\r\n}\r\n.depth-gauge .fill{\r\n position:absolute;top:0;left:0;width:1px;height:0%;\r\n background:linear-gradient(to bottom, var(--teal), var(--violet));\r\n transition:height .1s linear;\r\n}\r\n.depth-gauge .dot{\r\n position:absolute;left:50%;top:0%;width:8px;height:8px;border-radius:50%;\r\n background:var(--teal);box-shadow:0 0 12px 2px var(--teal);\r\n transform:translate(-50%,-50%);transition:top .1s linear;\r\n}\r\n.depth-readout{\r\n position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);\r\n font-family:var(--font-mono);font-size:.68rem;color:var(--foam-dim);\r\n text-align:right;white-space:nowrap;letter-spacing:.04em;\r\n}\r\n.depth-readout .num{color:var(--teal);font-size:.82rem;display:block;margin-bottom:.15rem;}\r\n@media (max-width:900px){.depth-gauge,.depth-readout{display:none;}}\r\n\r\n\/* ============ 3D REVEAL SYSTEM ============ *\/\r\n\/* every .reveal starts tipped back and pushed into the screen, then rises\r\n into place \u2014 the whole page's motion language is \"surfacing\" in true 3D *\/\r\n.reveal{\r\n opacity:0;\r\n transform:perspective(1200px) translateZ(-260px) translateY(70px) rotateX(-30deg);\r\n transform-origin:50% 100%;\r\n transition:opacity 1s var(--ease), transform 1s var(--ease);\r\n will-change:transform,opacity;\r\n}\r\n.reveal.in-view{\r\n opacity:1;\r\n transform:perspective(1200px) translateZ(0) translateY(0) rotateX(0deg);\r\n}\r\n.reveal.delay1{transition-delay:.12s;}\r\n.reveal.delay2{transition-delay:.24s;}\r\n\r\n\/* ============ HERO ============ *\/\r\n.hero{\r\n position:relative;min-height:100vh;display:flex;flex-direction:column;\r\n justify-content:center;padding:7rem clamp(1.25rem,5vw,3rem) 4rem;\r\n overflow:hidden;\r\n}\r\n.hero .glow-orb.g1{width:520px;height:520px;background:var(--teal);top:-10%;left:-10%;}\r\n.hero .glow-orb.g2{width:420px;height:420px;background:var(--violet);bottom:-15%;right:-8%;opacity:.22;}\r\n.hero-grid{\r\n display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;\r\n max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:2;\r\n}\r\n.hero h1{\r\n font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.08;margin:1.1rem 0 1.4rem;\r\n max-width:14ch;\r\n}\r\n.hero h1 em{font-style:italic;color:var(--teal);}\r\n.hero p.lede{\r\n font-size:1.05rem;color:var(--foam-dim);max-width:44ch;line-height:1.65;\r\n margin-bottom:2.1rem;\r\n}\r\n.scroll-cue{\r\n display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);\r\n font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--foam-faint);\r\n}\r\n.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:cueFall 1.8s var(--ease) infinite;}\r\n@keyframes cueFall{0%{opacity:0;transform:scaleY(.3);transform-origin:top;}40%{opacity:1;}100%{opacity:0;transform:scaleY(1);transform-origin:top;}}\r\n\r\n\/* Phone mockup \u2014 a real layered 3D object, tilted continuously by both\r\n scroll position and cursor position, with its own children floating\r\n at different depths inside it *\/\r\n.phone-stage{position:relative;height:520px;display:flex;align-items:center;justify-content:center;perspective:1500px;}\r\n.phone-rig{transform-style:preserve-3d;transition:transform .05s linear;}\r\n.phone{\r\n width:250px;height:500px;border-radius:34px;\r\n background:linear-gradient(160deg, #0d1c2f, #060c15);\r\n border:1px solid rgba(234,243,241,.14);\r\n box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -10px rgba(79,240,199,.18), inset 0 0 0 1px rgba(255,255,255,.02);\r\n padding:1.1rem .95rem;position:relative;z-index:3;\r\n transform-style:preserve-3d;\r\n animation:phoneFloat 6s ease-in-out infinite;\r\n}\r\n@keyframes phoneFloat{0%,100%{transform:translateZ(0px);}50%{transform:translateZ(24px);}}\r\n.phone .status-dot{width:38px;height:4px;border-radius:3px;background:rgba(234,243,241,.15);margin:0 auto .9rem;transform:translateZ(10px);}\r\n.phone .greet{font-family:var(--font-mono);font-size:.6rem;color:var(--foam-faint);letter-spacing:.06em;transform:translateZ(22px);}\r\n.phone .greet strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--foam);font-weight:500;margin-top:.25rem;}\r\n.phone .ring{\r\n width:112px;height:112px;border-radius:50%;margin:1.6rem auto 1.2rem;\r\n background:conic-gradient(var(--teal) 0deg 252deg, rgba(234,243,241,.08) 252deg 360deg);\r\n display:flex;align-items:center;justify-content:center;\r\n animation:ringSpin 12s linear infinite;\r\n transform:translateZ(40px);\r\n box-shadow:0 20px 40px -10px rgba(0,0,0,.6);\r\n}\r\n.phone .ring .inner{\r\n width:88px;height:88px;border-radius:50%;background:#0a1524;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n animation:ringSpin 12s linear infinite reverse;\r\n}\r\n@keyframes ringSpin{to{transform:rotate(360deg);}}\r\n.phone .ring .inner b{font-family:var(--font-mono);font-size:1.1rem;color:var(--teal);}\r\n.phone .ring .inner small{font-size:.55rem;color:var(--foam-faint);letter-spacing:.06em;}\r\n.phone .pill-row{display:flex;gap:.4rem;margin-bottom:.5rem;transform:translateZ(26px);}\r\n.phone .pill{flex:1;background:rgba(234,243,241,.07);border:1px solid var(--line);border-radius:10px;padding:.5rem .55rem;backdrop-filter:blur(2px);}\r\n.phone .pill span{display:block;font-family:var(--font-mono);font-size:.55rem;color:var(--foam-faint);}\r\n.phone .pill b{font-family:var(--font-mono);font-size:.85rem;color:var(--teal);}\r\n\r\n\/* sinking bubbles behind phone, each given its own depth so the field\r\n has real perspective \u2014 closer ones bigger\/sharper, far ones small\/blurred *\/\r\n.bubble-field{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;}\r\n.bubble-depth{position:absolute;transform-style:preserve-3d;}\r\n.bubble{\r\n border-radius:8px;\r\n background:rgba(124,147,255,.14);\r\n border:1px solid rgba(124,147,255,.3);\r\n animation:sinkFall linear infinite;\r\n width:100%;height:100%;\r\n}\r\n@keyframes sinkFall{\r\n 0%{transform:translateY(-40px) rotate(0deg);opacity:0;}\r\n 10%{opacity:.8;}\r\n 85%{opacity:.5;}\r\n 100%{transform:translateY(560px) rotate(25deg);opacity:0;}\r\n}\r\n\r\n\/* ============ STORY SECTIONS ============ *\/\r\n.story{position:relative;padding:9rem clamp(1.25rem,5vw,3rem);overflow:hidden;}\r\n.story .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}\r\n.story.reverse .container{grid-template-columns:1fr 1fr;}\r\n.story.reverse .visual{order:2;}\r\n.story.reverse .copy{order:1;}\r\n.depth-label{margin-bottom:1.4rem;}\r\n.depth-label .reading{font-family:var(--font-mono);font-size:.72rem;color:var(--foam-faint);letter-spacing:.1em;margin-top:.35rem;}\r\n.story h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.15;margin-bottom:1.15rem;max-width:13ch;}\r\n.story p{color:var(--foam-dim);max-width:42ch;line-height:1.7;font-size:1rem;}\r\n.story p+p{margin-top:1rem;}\r\n\r\n\/* --- Undertow visual: vortex, rendered as a tilted 3D disk --- *\/\r\n.visual{position:relative;height:380px;}\r\n.vortex-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:900px;}\r\n.vortex-tilt{\r\n position:relative;width:280px;height:280px;transform-style:preserve-3d;\r\n transform:rotateX(58deg) rotateZ(0deg);\r\n transition:transform .3s ease-out;\r\n}\r\n.vortex-ring{\r\n position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid rgba(124,147,255,.28);\r\n animation:vortexSpin linear infinite;transform-style:preserve-3d;\r\n}\r\n.vortex-ring.r1{width:260px;height:260px;margin:-130px 0 0 -130px;animation-duration:18s;transform:translateZ(-10px);}\r\n.vortex-ring.r2{width:190px;height:190px;margin:-95px 0 0 -95px;animation-duration:13s;border-color:rgba(79,240,199,.28);animation-direction:reverse;transform:translateZ(10px);}\r\n.vortex-ring.r3{width:120px;height:120px;margin:-60px 0 0 -60px;animation-duration:9s;transform:translateZ(30px);}\r\n@keyframes vortexSpin{to{transform:translateZ(var(--z,0px)) rotate(360deg);}}\r\n.vortex-ring.r1{--z:-10px;} .vortex-ring.r2{--z:10px;} .vortex-ring.r3{--z:30px;}\r\n.vortex-core{\r\n position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;\r\n background:var(--violet);box-shadow:0 0 40px 14px rgba(124,147,255,.5);transform:translateZ(50px);\r\n}\r\n.vortex-particle{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:2px;background:var(--foam-faint);animation:spiralIn linear infinite;}\r\n@keyframes spiralIn{\r\n 0%{transform:rotate(0deg) translateX(150px) translateZ(-20px) rotate(0deg) scale(1);opacity:0;}\r\n 15%{opacity:.9;}\r\n 100%{transform:rotate(720deg) translateX(0px) translateZ(40px) rotate(-720deg) scale(.2);opacity:0;}\r\n}\r\n\r\n\/* --- Signal visual: a receding 3D conveyor lane --- *\/\r\n.lane-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;perspective:700px;}\r\n.lane-tilt{position:relative;width:100%;transform-style:preserve-3d;transform:rotateX(52deg);transition:transform .3s ease-out;}\r\n.lane{position:relative;width:100%;height:2px;background:var(--line);}\r\n.lane-item{\r\n position:absolute;top:50%;width:34px;height:34px;border-radius:9px;\r\n background:rgba(234,243,241,.08);border:1px solid var(--line);\r\n transform:translateY(-50%) translateZ(0);\r\n box-shadow:0 18px 30px -14px rgba(0,0,0,.7);\r\n animation:laneMove linear infinite;\r\n}\r\n@keyframes laneMove{from{left:-40px;transform:translateY(-50%) translateZ(-40px) scale(.7);}30%{transform:translateY(-50%) translateZ(20px) scale(1);}to{left:105%;transform:translateY(-50%) translateZ(-40px) scale(.7);}}\r\n.lane-catch{\r\n position:absolute;left:52%;top:50%;transform:translate(-50%,-50%) translateZ(30px);\r\n width:78px;height:78px;border-radius:50%;\r\n border:1px solid var(--teal);\r\n box-shadow:0 0 0 6px rgba(79,240,199,.06), 0 0 26px rgba(79,240,199,.3);\r\n animation:catchPulse 2.6s ease-in-out infinite;\r\n}\r\n@keyframes catchPulse{0%,100%{box-shadow:0 0 0 6px rgba(79,240,199,.06),0 0 26px rgba(79,240,199,.25);}50%{box-shadow:0 0 0 10px rgba(79,240,199,.1),0 0 40px rgba(79,240,199,.45);}}\r\n.lane-caption{position:absolute;bottom:-3.4rem;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:.66rem;color:var(--foam-faint);letter-spacing:.08em;}\r\n\r\n\/* ============ FEATURE TRIO ============ *\/\r\n.features-wrap{position:relative;padding:8rem clamp(1.25rem,5vw,3rem);}\r\n.features-head{text-align:center;max-width:640px;margin:0 auto 4rem;}\r\n.features-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-top:1rem;}\r\n.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1160px;margin:0 auto;perspective:1600px;}\r\n.tilt-card{\r\n background:linear-gradient(160deg, rgba(234,243,241,.045), rgba(234,243,241,.01));\r\n border:1px solid var(--line);border-radius:20px;padding:2rem 1.7rem 1.9rem;\r\n transform-style:preserve-3d;transition:transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;\r\n position:relative;\r\n}\r\n.tilt-card:hover{border-color:var(--line-bright);box-shadow:0 30px 70px -24px rgba(79,240,199,.28);}\r\n.tilt-card .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--teal);text-transform:uppercase;transform:translateZ(28px);display:block;}\r\n.tilt-card h3{font-size:1.3rem;margin:.85rem 0 .7rem;font-weight:500;transform:translateZ(22px);}\r\n.tilt-card p{color:var(--foam-dim);font-size:.9rem;line-height:1.6;transform:translateZ(8px);}\r\n\r\n\/* rank ring card *\/\r\n.rank-ring{width:96px;height:96px;border-radius:50%;margin:1.3rem 0;position:relative;transform:translateZ(18px);\r\n background:conic-gradient(var(--amber) 0deg 216deg, rgba(234,243,241,.08) 216deg 360deg);\r\n box-shadow:0 22px 36px -16px rgba(0,0,0,.7);}\r\n.rank-ring .hole{position:absolute;inset:9px;border-radius:50%;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;}\r\n.rank-ring .hole b{font-family:var(--font-mono);font-size:.85rem;color:var(--amber);}\r\n.rank-ring .hole small{font-size:.55rem;color:var(--foam-faint);}\r\n.stat-row{display:flex;gap:.6rem;margin-top:1.1rem;transform:translateZ(14px);}\r\n.stat-pill{flex:1;background:rgba(234,243,241,.05);border:1px solid var(--line);border-radius:10px;padding:.55rem .5rem;text-align:center;}\r\n.stat-pill b{display:block;font-family:var(--font-mono);color:var(--teal);font-size:1.05rem;}\r\n.stat-pill span{font-size:.62rem;color:var(--foam-faint);}\r\n\r\n\/* focus timer card *\/\r\n.timer-wrap{display:flex;align-items:center;gap:1.1rem;margin:1.3rem 0;transform:translateZ(20px);}\r\n.timer-ring{width:88px;height:88px;flex-shrink:0;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));}\r\n.timer-ring circle{fill:none;stroke-width:5;}\r\n.timer-ring .bg{stroke:rgba(234,243,241,.09);}\r\n.timer-ring .fg{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:60;transform:rotate(-90deg);transform-origin:50% 50%;animation:timerTick 8s linear infinite;}\r\n@keyframes timerTick{0%{stroke-dashoffset:251;}100%{stroke-dashoffset:0;}}\r\n.timer-label b{display:block;font-family:var(--font-mono);font-size:1.3rem;color:var(--violet);}\r\n.timer-label span{font-size:.68rem;color:var(--foam-faint);}\r\n\r\n\/* analytics bars *\/\r\n.bar-list{margin-top:1.3rem;display:flex;flex-direction:column;gap:.75rem;transform:translateZ(14px);}\r\n.bar-row span{font-size:.72rem;color:var(--foam-dim);display:flex;justify-content:space-between;margin-bottom:.3rem;font-family:var(--font-mono);}\r\n.bar-track{height:6px;border-radius:4px;background:rgba(234,243,241,.07);overflow:hidden;}\r\n.bar-fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--teal-dim),var(--teal));transition:width 1.4s var(--ease);box-shadow:0 0 10px rgba(79,240,199,.5);}\r\n.bar-row.in-view .bar-fill{width:var(--w);}\r\n\r\n\/* ============ PRIVACY (VAULT) ============ *\/\r\n.vault-stage{position:relative;height:380px;display:flex;align-items:center;justify-content:center;perspective:1000px;}\r\n.vault-orb{\r\n width:220px;height:220px;border-radius:50%;position:relative;transform-style:preserve-3d;\r\n background:radial-gradient(circle at 32% 28%, rgba(234,243,241,.14), rgba(79,240,199,.05) 45%, rgba(5,9,16,.5) 75%);\r\n border:1px solid rgba(79,240,199,.28);\r\n box-shadow:inset 0 0 40px rgba(79,240,199,.12), 0 0 70px -6px rgba(79,240,199,.3), 0 40px 60px -20px rgba(0,0,0,.7);\r\n animation:orbBob 5s ease-in-out infinite;\r\n}\r\n@keyframes orbBob{0%,100%{transform:translateZ(0);}50%{transform:translateZ(30px);}}\r\n.vault-orbit-tilt{position:absolute;inset:-34px;transform-style:preserve-3d;transform:rotateX(62deg);transition:transform .3s ease-out;}\r\n.vault-orbit{\r\n position:absolute;inset:0;border-radius:50%;\r\n border:1px dashed rgba(124,147,255,.35);\r\n animation:vortexSpin2 22s linear infinite;transform-style:preserve-3d;\r\n}\r\n@keyframes vortexSpin2{to{transform:rotate(360deg);}}\r\n.vault-orbit::before{\r\n content:\"\";position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;\r\n border-radius:50%;background:var(--violet);box-shadow:0 0 14px 4px var(--violet);\r\n}\r\n.vault-readout{\r\n position:absolute;bottom:14px;left:50%;transform:translateX(-50%);text-align:center;\r\n font-family:var(--font-mono);\r\n}\r\n.vault-readout b{font-size:.95rem;color:var(--teal);display:block;}\r\n.vault-readout span{font-size:.6rem;color:var(--foam-faint);letter-spacing:.06em;}\r\n.privacy-checks{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.6rem;}\r\n.privacy-checks li{display:flex;gap:.65rem;align-items:flex-start;color:var(--foam-dim);font-size:.92rem;}\r\n.privacy-checks li::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:.5rem;flex-shrink:0;box-shadow:0 0 8px var(--teal);}\r\n\r\n\/* ============ CTA \/ BUOY ============ *\/\r\n.cta{position:relative;padding:10rem clamp(1.25rem,5vw,3rem) 8rem;text-align:center;overflow:hidden;}\r\n.cta .glow-orb{width:600px;height:600px;background:var(--teal);left:calc(50% - 300px);top:20%;opacity:.16;}\r\n.cta-inner{position:relative;z-index:2;max-width:560px;margin:0 auto;}\r\n.cta h2{font-size:clamp(2.1rem,4.2vw,3rem);margin:1.2rem 0 1rem;}\r\n.cta p{color:var(--foam-dim);font-size:1.02rem;line-height:1.65;max-width:40ch;margin:0 auto 3rem;}\r\n\r\n.buoy-wrap{display:flex;flex-direction:column;align-items:center;gap:2.2rem;perspective:1100px;}\r\n.buoy{position:relative;width:160px;height:200px;cursor:pointer;transform-style:preserve-3d;transition:transform .06s linear;}\r\n.buoy .rope{position:absolute;top:0;left:50%;width:2px;height:26px;background:linear-gradient(var(--foam-faint),transparent);transform:translateX(-50%) translateZ(20px);}\r\n.rays-z{position:absolute;inset:0;transform:translateZ(-70px);transform-style:preserve-3d;}\r\n.buoy .rays{\r\n position:absolute;top:20px;left:50%;width:200px;height:200px;transform:translate(-50%,-6%);\r\n background:conic-gradient(from 0deg, transparent 0deg, rgba(79,240,199,.18) 8deg, transparent 16deg, transparent 40deg, rgba(79,240,199,.14) 48deg, transparent 56deg, transparent 80deg, rgba(79,240,199,.18) 88deg, transparent 96deg, transparent 120deg, rgba(79,240,199,.14) 128deg, transparent 136deg, transparent 160deg, rgba(79,240,199,.18) 168deg, transparent 176deg, transparent 200deg, rgba(79,240,199,.14) 208deg, transparent 216deg, transparent 240deg, rgba(79,240,199,.18) 248deg, transparent 256deg, transparent 280deg, rgba(79,240,199,.14) 288deg, transparent 296deg, transparent 320deg, rgba(79,240,199,.18) 328deg, transparent 336deg);\r\n opacity:0;transition:opacity .4s ease;border-radius:50%;\r\n animation:raysTurn 30s linear infinite;\r\n}\r\n@keyframes raysTurn{to{transform:translate(-50%,-6%) rotate(360deg);}}\r\n.bell-z{position:absolute;top:26px;left:50%;transform:translateX(-50%) translateZ(26px);transform-style:preserve-3d;}\r\n.buoy .bell{\r\n position:relative;width:96px;height:100px;transform-origin:top center;\r\n transition:transform .6s cubic-bezier(.34,1.56,.64,1);transform-style:preserve-3d;\r\n}\r\n.buoy .bell-top{\r\n position:absolute;top:0;left:50%;transform:translateX(-50%) translateZ(6px);\r\n width:22px;height:22px;border-radius:50% 50% 0 0;\r\n background:linear-gradient(160deg,#1b3450,#0e2035);\r\n border:1px solid rgba(79,240,199,.3);border-bottom:none;\r\n}\r\n.buoy .bell-body{\r\n position:absolute;top:18px;left:50%;transform:translateX(-50%);\r\n width:96px;height:76px;border-radius:48px 48px 12px 12px \/ 60px 60px 10px 10px;\r\n background:linear-gradient(165deg,#1c3a58,#0a1826 70%);\r\n border:1px solid rgba(79,240,199,.35);\r\n box-shadow:inset 0 -10px 24px rgba(0,0,0,.4), inset 0 8px 18px rgba(79,240,199,.08), 0 30px 40px -18px rgba(0,0,0,.7);\r\n}\r\n.buoy .bell-band{\r\n position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateZ(10px);\r\n width:104px;height:8px;border-radius:4px;\r\n background:linear-gradient(90deg, rgba(79,240,199,.1), rgba(79,240,199,.4), rgba(79,240,199,.1));\r\n}\r\n.buoy .bell-base{\r\n position:absolute;bottom:0;left:50%;transform:translateX(-50%);\r\n width:26px;height:14px;border-radius:0 0 8px 8px;\r\n background:#0a1826;border:1px solid rgba(79,240,199,.3);border-top:none;\r\n}\r\n.buoy .clapper{\r\n position:absolute;bottom:-6px;left:50%;width:10px;height:10px;border-radius:50%;\r\n background:var(--teal);box-shadow:0 0 10px 3px var(--teal);\r\n transform:translateX(-50%) translateZ(4px);\r\n}\r\n.buoy .ping{\r\n position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;\r\n border:1px solid var(--teal);transform:translate(-50%,-50%) scale(0);opacity:0;\r\n}\r\n.buoy .glow-under{\r\n position:absolute;top:40%;left:50%;width:140px;height:140px;transform:translate(-50%,-50%) translateZ(-90px);\r\n border-radius:50%;background:radial-gradient(circle, rgba(79,240,199,.28), transparent 70%);\r\n opacity:.5;filter:blur(4px);transition:opacity .5s ease;\r\n}\r\n\r\n\/* ringing state *\/\r\n.buoy.ringing .bell{animation:bellSwing 1.2s ease-in-out 2;}\r\n.buoy.ringing .rays{opacity:1;}\r\n.buoy.ringing .glow-under{opacity:1;}\r\n.buoy.ringing .ping{animation:pingOut 1.4s ease-out 2;}\r\n@keyframes bellSwing{\r\n 0%{transform:rotate(0deg);}\r\n 20%{transform:rotate(14deg);}\r\n 45%{transform:rotate(-11deg);}\r\n 68%{transform:rotate(7deg);}\r\n 85%{transform:rotate(-4deg);}\r\n 100%{transform:rotate(0deg);}\r\n}\r\n@keyframes pingOut{0%{transform:translate(-50%,-50%) scale(.4);opacity:.7;}100%{transform:translate(-50%,-50%) scale(6);opacity:0;}}\r\n\r\n.notify-btn{\r\n position:relative;padding:.95rem 2.1rem;border-radius:100px;\r\n border:1px solid var(--teal);background:rgba(79,240,199,.08);\r\n font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;\r\n color:var(--teal);transition:background .3s ease, transform .2s ease;\r\n}\r\n.notify-btn:hover{background:rgba(79,240,199,.16);transform:translateY(-2px);}\r\n.notify-btn:active{transform:translateY(0);}\r\n.notify-note{font-family:var(--font-mono);font-size:.68rem;color:var(--foam-faint);min-height:1.2em;}\r\n\r\nfooter{\r\n padding:3rem clamp(1.25rem,5vw,3rem) 2.4rem;\r\n display:flex;justify-content:space-between;align-items:center;\r\n border-top:1px solid var(--line);\r\n font-family:var(--font-mono);font-size:.68rem;color:var(--foam-faint);\r\n flex-wrap:wrap;gap:1rem;\r\n}\r\n\r\n\/* ============ RESPONSIVE ============ *\/\r\n@media (max-width:900px){\r\n .hero-grid{grid-template-columns:1fr;}\r\n .phone-stage{height:400px;order:-1;}\r\n .story .container{grid-template-columns:1fr;gap:2.5rem;}\r\n .story.reverse .visual, .story.reverse .copy{order:0;}\r\n .feature-grid{grid-template-columns:1fr;}\r\n .story{padding:6rem 1.25rem;}\r\n .features-wrap{padding:5rem 1.25rem;}\r\n}\r\n\r\n\/* ============ REDUCED MOTION ============ *\/\r\n@media (prefers-reduced-motion: reduce){\r\n *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"grain\"><\/div>\r\n\r\n<nav>\r\n <div class=\"wordmark\">nivara<span>.<\/span><\/div>\r\n <div class=\"nav-right\">ATTENTION, PROTECTED<\/div>\r\n<\/nav>\r\n\r\n<div class=\"depth-gauge\">\r\n <div class=\"track\"><div class=\"fill\" id=\"gaugeFill\"><\/div><\/div>\r\n <div class=\"dot\" id=\"gaugeDot\"><\/div>\r\n<\/div>\r\n<div class=\"depth-readout\" id=\"depthReadout\">\r\n <span class=\"num\">−240m<\/span>\r\n The Undertow\r\n<\/div>\r\n\r\n\r\n<header class=\"hero\" id=\"hero\">\r\n <div class=\"ambient\">\r\n <div class=\"glow-orb g1\" data-parallax=\"0.15\"><\/div>\r\n <div class=\"glow-orb g2\" data-parallax=\"0.25\"><\/div>\r\n <\/div>\r\n <div class=\"hero-grid\">\r\n <div>\r\n <div class=\"eyebrow\">NIVARA — FOR ANDROID<\/div>\r\n <h1>You didn't choose<br>to disappear into <em>the feed.<\/em><\/h1>\r\n <p class=\"lede\">Somewhere between one notification and the fortieth minute, the current took you under. Nivara watches for the exact moment scrolling turns into freefall — and pulls you back, before you even notice you're gone.<\/p>\r\n <div class=\"scroll-cue\"><div class=\"line\"><\/div>ENTER THE CURRENT<\/div>\r\n <\/div>\r\n <div class=\"phone-stage\" id=\"phoneStage\">\r\n <div class=\"bubble-field\" id=\"bubbleField\"><\/div>\r\n <div class=\"phone-rig\" id=\"phoneRig\">\r\n <div class=\"phone\" id=\"phone\">\r\n <div class=\"status-dot\"><\/div>\r\n <div class=\"greet\">GOOD EVENING<strong>Surface before 9<\/strong><\/div>\r\n <div class=\"ring\"><div class=\"inner\"><b>3h 12m<\/b><small>SAVED TODAY<\/small><\/div><\/div>\r\n <div class=\"pill-row\">\r\n <div class=\"pill\"><span>RANK<\/span><b>Disciple<\/b><\/div>\r\n <div class=\"pill\"><span>BLOCKED<\/span><b>27<\/b><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"story\" id=\"undertow\" data-depth=\"-240\" data-label=\"The Undertow\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:400px;height:400px;background:var(--violet);top:10%;left:-6%;\" data-parallax=\"0.2\"><\/div><\/div>\r\n <div class=\"container\">\r\n <div class=\"copy\">\r\n <div class=\"depth-label reveal\">\r\n <div class=\"eyebrow\">01 — THE PROBLEM<\/div>\r\n <div class=\"reading\">−240m — no light from the surface<\/div>\r\n <\/div>\r\n <h2 class=\"reveal delay1\">The scroll doesn't ask permission.<\/h2>\r\n <p class=\"reveal delay2\">Short-form feeds are built by people paid to keep you exactly where you are. There's no bottom to hit, no natural stopping point — just the next card, already loading before you've finished the last one.<\/p>\r\n <p class=\"reveal delay2\">Most blockers respond by locking the whole app. That works for about a day, until you turn it off out of genuine need — and the feed is right there waiting.<\/p>\r\n <\/div>\r\n <div class=\"visual reveal delay1\">\r\n <div class=\"vortex-stage\" id=\"vortexStage\">\r\n <div class=\"vortex-tilt\" id=\"vortexTilt\">\r\n <div class=\"vortex-ring r1\"><\/div>\r\n <div class=\"vortex-ring r2\"><\/div>\r\n <div class=\"vortex-ring r3\"><\/div>\r\n <div class=\"vortex-core\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"story reverse\" id=\"signal\" data-depth=\"-120\" data-label=\"Signal Emerges\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:420px;height:420px;background:var(--teal);top:0;right:-10%;\" data-parallax=\"0.2\"><\/div><\/div>\r\n <div class=\"container\">\r\n <div class=\"copy\">\r\n <div class=\"depth-label reveal\">\r\n <div class=\"eyebrow\">02 — HOW NIVARA WORKS<\/div>\r\n <div class=\"reading\">−120m — a signal, reading the current<\/div>\r\n <\/div>\r\n <h2 class=\"reveal delay1\">Nivara doesn't cut the line. It reads it.<\/h2>\r\n <p class=\"reveal delay2\">A lightweight engine runs entirely on your device, watching not which app is open, but what kind of moment you're in. A message thread passes through untouched. The instant you drop into an infinite short-form feed, it intercepts — and only that.<\/p>\r\n <p class=\"reveal delay2\">You keep the parts of the app you actually came for. Only the trap gets closed.<\/p>\r\n <\/div>\r\n <div class=\"visual reveal delay1\">\r\n <div class=\"lane-stage\" id=\"laneStageOuter\">\r\n <div class=\"lane-tilt\" id=\"laneTilt\">\r\n <div class=\"lane\" id=\"laneStage\"><\/div>\r\n <div class=\"lane-catch\"><\/div>\r\n <\/div>\r\n <div class=\"lane-caption\">precision blocking — not app-wide lockout<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"features-wrap\" id=\"features\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:500px;height:500px;background:var(--amber);top:30%;left:50%;transform:translateX(-50%);opacity:.08;\"><\/div><\/div>\r\n <div class=\"features-head reveal\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">03 — INSIDE THE APP<\/div>\r\n <h2>Three ways it stays out of your way<\/h2>\r\n <\/div>\r\n <div class=\"feature-grid\">\r\n\r\n <div class=\"tilt-card reveal\">\r\n <span class=\"tag\">Dashboard<\/span>\r\n <h3>Progress you can see<\/h3>\r\n <div class=\"rank-ring\">\r\n <div class=\"hole\"><b>Disciple<\/b><small>rank<\/small><\/div>\r\n <\/div>\r\n <div class=\"stat-row\">\r\n <div class=\"stat-pill\"><b class=\"count\" data-target=\"192\">0<\/b><span>min saved<\/span><\/div>\r\n <div class=\"stat-pill\"><b class=\"count\" data-target=\"27\">0<\/b><span>blocked<\/span><\/div>\r\n <\/div>\r\n <p style=\"margin-top:1rem;\">A rank system — Novice through Master — turns avoiding the feed into something worth checking on.<\/p>\r\n <\/div>\r\n\r\n <div class=\"tilt-card reveal delay1\">\r\n <span class=\"tag\">Deep Focus<\/span>\r\n <h3>The hour that can't be interrupted<\/h3>\r\n <div class=\"timer-wrap\">\r\n <svg class=\"timer-ring\" viewBox=\"0 0 90 90\">\r\n <circle class=\"bg\" cx=\"45\" cy=\"45\" r=\"40\"><\/circle>\r\n <circle class=\"fg\" cx=\"45\" cy=\"45\" r=\"40\"><\/circle>\r\n <\/svg>\r\n <div class=\"timer-label\"><b>47:12<\/b><span>locked, no toggle<\/span><\/div>\r\n <\/div>\r\n <p>Set a duration and every selected app is strictly blocked until it ends — no casual override when discipline is the whole point.<\/p>\r\n <\/div>\r\n\r\n <div class=\"tilt-card reveal delay2\">\r\n <span class=\"tag\">Analytics<\/span>\r\n <h3>Your day, without the noise<\/h3>\r\n <div class=\"bar-list\">\r\n <div class=\"bar-row\" style=\"--w:78%\"><span>Short-form video<b>2h 04m<\/b><\/span><div class=\"bar-track\"><div class=\"bar-fill\"><\/div><\/div><\/div>\r\n <div class=\"bar-row\" style=\"--w:44%\"><span>Messaging<b>0h 51m<\/b><\/span><div class=\"bar-track\"><div class=\"bar-fill\"><\/div><\/div><\/div>\r\n <div class=\"bar-row\" style=\"--w:22%\"><span>Work apps<b>0h 26m<\/b><\/span><div class=\"bar-track\"><div class=\"bar-fill\"><\/div><\/div><\/div>\r\n <\/div>\r\n <p style=\"margin-top:1.1rem;\">System noise filtered out automatically — only the apps you actually touched.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"story\" id=\"privacy\" data-depth=\"-40\" data-label=\"Surfacing\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:400px;height:400px;background:var(--teal);bottom:0;left:-8%;\" data-parallax=\"0.2\"><\/div><\/div>\r\n <div class=\"container\">\r\n <div class=\"copy\">\r\n <div class=\"depth-label reveal\">\r\n <div class=\"eyebrow\">04 — PRIVACY<\/div>\r\n <div class=\"reading\">−40m — the water clears<\/div>\r\n <\/div>\r\n <h2 class=\"reveal delay1\">Nothing you do here ever leaves this device.<\/h2>\r\n <p class=\"reveal delay2\">No cloud servers. No telemetry. No crash logs sent home for analysis. Your ranks, streaks and block lists live in encrypted local storage — delete the app and every trace of them goes with it.<\/p>\r\n <ul class=\"privacy-checks reveal delay2\">\r\n <li>100% on-device processing, offline-first<\/li>\r\n <li>No silent permissions — every capability is granted by you, visibly<\/li>\r\n <li>Structurally unable to transmit your usage data anywhere<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"visual reveal delay1\">\r\n <div class=\"vault-stage\" id=\"vaultStage\">\r\n <div class=\"vault-orbit-tilt\" id=\"vaultTilt\"><div class=\"vault-orbit\"><\/div><\/div>\r\n <div class=\"vault-orb\"><\/div>\r\n <div class=\"vault-readout\"><b>0.00 KB<\/b><span>TRANSMITTED, EVER<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"cta\" id=\"notify\" data-depth=\"0\" data-label=\"Clear Water\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" data-parallax=\"0.1\"><\/div><\/div>\r\n <div class=\"cta-inner\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">05 — 0m<\/div>\r\n <h2 class=\"reveal\">Come up for air.<\/h2>\r\n <p class=\"reveal delay1\">Nivara is almost ready to surface on the Play Store. Ring the buoy and we'll let you know the moment it does — nothing else, no other noise.<\/p>\r\n <div class=\"buoy-wrap reveal delay2\">\r\n <div class=\"buoy\" id=\"buoy\">\r\n <div class=\"glow-under\"><\/div>\r\n <div class=\"rays-z\"><div class=\"rays\"><\/div><\/div>\r\n <div class=\"rope\"><\/div>\r\n <div class=\"bell-z\">\r\n <div class=\"bell\">\r\n <div class=\"bell-top\"><\/div>\r\n <div class=\"bell-body\"><\/div>\r\n <div class=\"bell-band\"><\/div>\r\n <div class=\"bell-base\"><\/div>\r\n <div class=\"clapper\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ping\"><\/div>\r\n <\/div>\r\n <button class=\"notify-btn\" id=\"notifyBtn\">Notify Me<\/button>\r\n <div class=\"notify-note\" id=\"notifyNote\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <span>nivara © 2026<\/span>\r\n <span>attention, protected — not gamified guilt<\/span>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ ---------- Reveal on scroll ----------\r\nconst revealEls = document.querySelectorAll('.reveal');\r\nconst barRows = document.querySelectorAll('.bar-row');\r\nconst countEls = document.querySelectorAll('.count');\r\n\r\nconst io = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{\r\n if(e.isIntersecting){\r\n e.target.classList.add('in-view');\r\n }\r\n });\r\n},{threshold:0.2});\r\nrevealEls.forEach(el=>io.observe(el));\r\nbarRows.forEach(el=>io.observe(el));\r\n\r\n\/\/ count-up numbers\r\nconst countIO = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{\r\n if(e.isIntersecting){\r\n const el = e.target;\r\n const target = parseInt(el.dataset.target,10);\r\n let cur = 0;\r\n const step = Math.max(1, Math.round(target\/40));\r\n const tick = ()=>{\r\n cur = Math.min(target, cur+step);\r\n el.textContent = cur;\r\n if(cur<target) requestAnimationFrame(tick);\r\n };\r\n tick();\r\n countIO.unobserve(el);\r\n }\r\n });\r\n},{threshold:0.4});\r\ncountEls.forEach(el=>countIO.observe(el));\r\n\r\n\/\/ ---------- Depth gauge ----------\r\nconst gaugeFill = document.getElementById('gaugeFill');\r\nconst gaugeDot = document.getElementById('gaugeDot');\r\nconst depthReadout = document.getElementById('depthReadout');\r\nconst depthSections = [...document.querySelectorAll('[data-depth]')];\r\n\r\nfunction updateGauge(){\r\n const scrollTop = window.scrollY;\r\n const docH = document.documentElement.scrollHeight - window.innerHeight;\r\n const progress = Math.min(1, Math.max(0, scrollTop\/docH));\r\n gaugeFill.style.height = (progress*100)+'%';\r\n gaugeDot.style.top = (progress*100)+'%';\r\n\r\n let current = depthSections[0];\r\n const mid = window.innerHeight*0.5;\r\n depthSections.forEach(sec=>{\r\n const r = sec.getBoundingClientRect();\r\n if(r.top < mid) current = sec;\r\n });\r\n const depth = current.dataset.depth;\r\n const label = current.dataset.label;\r\n depthReadout.querySelector('.num').textContent = (depth==='0' ? '0m' : depth+'m');\r\n depthReadout.lastChild.textContent = label;\r\n}\r\n\r\n\/\/ ---------- Sinking bubble field (with per-bubble depth) ----------\r\nconst bubbleField = document.getElementById('bubbleField');\r\nconst bubbleColors = ['rgba(124,147,255,.16)','rgba(79,240,199,.14)','rgba(255,184,107,.14)'];\r\nfor(let i=0;i<16;i++){\r\n const depth = Math.random(); \/\/ 0 = near, 1 = far\r\n const wrap = document.createElement('div');\r\n wrap.className='bubble-depth';\r\n const size = 14+Math.random()*22*(1-depth*0.6);\r\n wrap.style.width=size+'px';\r\n wrap.style.height=size+'px';\r\n wrap.style.left = (Math.random()*100)+'%';\r\n wrap.style.transform = `translateZ(${-260*depth}px)`;\r\n wrap.style.filter = `blur(${depth*2.2}px)`;\r\n wrap.style.opacity = (1 - depth*0.55).toFixed(2);\r\n const b = document.createElement('div');\r\n b.className='bubble';\r\n b.style.background = bubbleColors[i%3];\r\n b.style.borderColor = bubbleColors[i%3];\r\n b.style.animationDuration = (5+Math.random()*6)+'s';\r\n b.style.animationDelay = (Math.random()*8)+'s';\r\n wrap.appendChild(b);\r\n bubbleField.appendChild(wrap);\r\n}\r\n\r\n\/\/ ---------- Vortex particles ----------\r\nconst vortexTilt = document.getElementById('vortexTilt');\r\nfor(let i=0;i<10;i++){\r\n const p = document.createElement('div');\r\n p.className='vortex-particle';\r\n p.style.animationDuration = (3+Math.random()*3)+'s';\r\n p.style.animationDelay = (Math.random()*4)+'s';\r\n vortexTilt.appendChild(p);\r\n}\r\n\r\n\/\/ ---------- Lane items ----------\r\nconst laneStage = document.getElementById('laneStage');\r\nfor(let i=0;i<7;i++){\r\n const item = document.createElement('div');\r\n item.className='lane-item';\r\n item.style.animationDuration = (4+Math.random()*2)+'s';\r\n item.style.animationDelay = (i*0.9)+'s';\r\n laneStage.appendChild(item);\r\n}\r\n\r\n\/\/ ---------- Tilt cards (hover-driven 3D, layered children pop via translateZ in CSS) ----------\r\ndocument.querySelectorAll('.tilt-card').forEach(card=>{\r\n card.addEventListener('mousemove', (e)=>{\r\n const r = card.getBoundingClientRect();\r\n const x = (e.clientX-r.left)\/r.width - 0.5;\r\n const y = (e.clientY-r.top)\/r.height - 0.5;\r\n card.style.transform = `perspective(1200px) rotateY(${x*14}deg) rotateX(${-y*14}deg) translateZ(10px)`;\r\n });\r\n card.addEventListener('mouseleave', ()=>{ card.style.transform=''; });\r\n});\r\n\r\n\/\/ ---------- Buoy notify ----------\r\nconst buoy = document.getElementById('buoy');\r\nconst notifyBtn = document.getElementById('notifyBtn');\r\nconst notifyNote = document.getElementById('notifyNote');\r\nlet rung = false;\r\nfunction ring(){\r\n if(rung) return;\r\n rung = true;\r\n buoy.classList.add('ringing');\r\n notifyBtn.textContent = \"You're on the list \u2713\";\r\n notifyNote.textContent = \"We'll ring you back the moment Nivara surfaces.\";\r\n}\r\nbuoy.addEventListener('click', ring);\r\nnotifyBtn.addEventListener('click', ring);\r\nbuoy.addEventListener('mousemove',(e)=>{\r\n const r = buoy.getBoundingClientRect();\r\n const x = (e.clientX-r.left)\/r.width - 0.5;\r\n const y = (e.clientY-r.top)\/r.height - 0.5;\r\n buoy.style.transform = `perspective(1100px) rotateY(${x*22}deg) rotateX(${-y*18}deg)`;\r\n});\r\nbuoy.addEventListener('mouseleave', ()=>{ buoy.style.transform=''; });\r\n\r\n\/\/ ---------- Master scroll-linked 3D motion loop ----------\r\n\/\/ Cursor position relative to hero, used for the phone's continual tilt\r\nlet mouseX = 0, mouseY = 0, mouseActive = false;\r\nconst heroEl = document.getElementById('hero');\r\nheroEl.addEventListener('mousemove', (e)=>{\r\n const r = heroEl.getBoundingClientRect();\r\n mouseX = (e.clientX - r.left)\/r.width - 0.5;\r\n mouseY = (e.clientY - r.top)\/r.height - 0.5;\r\n mouseActive = true;\r\n});\r\nheroEl.addEventListener('mouseleave', ()=>{ mouseActive = false; mouseX=0; mouseY=0; });\r\n\r\nconst phoneRig = document.getElementById('phoneRig');\r\nconst vortexTiltEl = document.getElementById('vortexTilt');\r\nconst laneTiltEl = document.getElementById('laneTilt');\r\nconst vaultTiltEl = document.getElementById('vaultTilt');\r\nconst parallaxOrbs = document.querySelectorAll('[data-parallax]');\r\n\r\n\/\/ normalized position of an element's center relative to viewport center: -1 (above) .. 0 (centered) .. 1 (below)\r\nfunction centerOffset(el){\r\n const r = el.getBoundingClientRect();\r\n const elCenter = r.top + r.height\/2;\r\n const viewCenter = window.innerHeight\/2;\r\n return Math.max(-1, Math.min(1, (elCenter - viewCenter)\/window.innerHeight));\r\n}\r\n\r\nfunction frame(){\r\n updateGauge();\r\n\r\n \/\/ hero phone: cursor tilt + a gentle scroll-driven rotation as the hero scrolls away\r\n const heroOffset = centerOffset(heroEl);\r\n const rigY = mouseX*16 - heroOffset*18;\r\n const rigX = -mouseY*12 + heroOffset*10;\r\n phoneRig.style.transform = `rotateY(${rigY}deg) rotateX(${rigX}deg)`;\r\n\r\n \/\/ vortex disk: base tilt + extra rotation as it passes through the viewport\r\n if(vortexTiltEl){\r\n const off = centerOffset(document.getElementById('vortexStage'));\r\n vortexTiltEl.style.transform = `rotateX(${58 - off*20}deg) rotateZ(${off*14}deg)`;\r\n }\r\n \/\/ conveyor lane: base tilt + extra pitch on scroll\r\n if(laneTiltEl){\r\n const off = centerOffset(document.getElementById('laneStageOuter'));\r\n laneTiltEl.style.transform = `rotateX(${52 - off*18}deg)`;\r\n }\r\n \/\/ vault orbit ring: base tilt + wobble on scroll\r\n if(vaultTiltEl){\r\n const off = centerOffset(document.getElementById('vaultStage'));\r\n vaultTiltEl.style.transform = `rotateX(${62 - off*16}deg) rotateY(${off*10}deg)`;\r\n }\r\n\r\n \/\/ ambient glow orbs drift in depth as you scroll past\r\n parallaxOrbs.forEach(orb=>{\r\n const speed = parseFloat(orb.dataset.parallax)||0.15;\r\n const r = orb.getBoundingClientRect();\r\n const delta = (r.top - window.innerHeight\/2) * speed * -0.4;\r\n orb.style.transform = `translate3d(0, ${delta}px, 0)`;\r\n });\r\n\r\n requestAnimationFrame(frame);\r\n}\r\nrequestAnimationFrame(frame);\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nivara \u2014 Come up for air nivara. ATTENTION, PROTECTED −240m The Undertow NIVARA — FOR ANDROID You didn’t chooseto disappear into the feed. Somewhere between one notification and the fortieth minute, the current took you under. Nivara watches for the exact moment scrolling turns into freefall — and pulls you back, before you even notice […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thenivara.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":16,"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nNivara \u2014 Come up for air<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,440;0,9..144,560;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* ============ RESET & TOKENS ============ *\/\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml{scroll-behavior:smooth;}\r\n:root{\r\n --abyss:#050910;\r\n --deep:#0a1524;\r\n --deep-2:#0e2035;\r\n --surface-tone:#12283f;\r\n --foam:#eaf3f1;\r\n --foam-dim:rgba(234,243,241,0.62);\r\n --foam-faint:rgba(234,243,241,0.34);\r\n --teal:#4ff0c7;\r\n --teal-dim:#2bb894;\r\n --violet:#7c93ff;\r\n --amber:#ffb86b;\r\n --line:rgba(234,243,241,0.11);\r\n --line-bright:rgba(79,240,199,0.35);\r\n --font-display:'Fraunces', serif;\r\n --font-body:'Space Grotesk', sans-serif;\r\n --font-mono:'JetBrains Mono', monospace;\r\n --ease:cubic-bezier(.22,.9,.32,1);\r\n}\r\nbody{\r\n background:var(--abyss);\r\n color:var(--foam);\r\n font-family:var(--font-body);\r\n line-height:1.5;\r\n overflow-x:hidden;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\nimg,svg{display:block;max-width:100%;}\r\na{color:inherit;}\r\nbutton{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}\r\n.container{width:min(1120px,90vw);margin:0 auto;position:relative;}\r\n::selection{background:var(--teal);color:var(--abyss);}\r\n:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px;}\r\n\r\nh1,h2,h3{font-family:var(--font-display);font-weight:560;letter-spacing:-0.01em;}\r\n.eyebrow{\r\n font-family:var(--font-mono);\r\n font-size:.72rem;\r\n letter-spacing:.22em;\r\n text-transform:uppercase;\r\n color:var(--teal);\r\n display:flex;align-items:center;gap:.6em;\r\n}\r\n.eyebrow::before{content:\"\";width:22px;height:1px;background:var(--teal);display:inline-block;}\r\n\r\n\/* ============ GRAIN OVERLAY ============ *\/\r\n.grain{\r\n position:fixed;inset:0;pointer-events:none;z-index:60;\r\n opacity:.05;mix-blend-mode:overlay;\r\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\/* ============ AMBIENT GLOWS ============ *\/\r\n.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}\r\n.glow-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;will-change:transform;}\r\n\r\n\/* ============ NAV ============ *\/\r\nnav{\r\n position:fixed;top:0;left:0;right:0;z-index:50;\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:1.5rem clamp(1.25rem,5vw,3rem);\r\n backdrop-filter:blur(10px);\r\n background:linear-gradient(to bottom, rgba(5,9,16,.75), transparent);\r\n}\r\n.wordmark{\r\n font-family:var(--font-display);font-size:1.25rem;font-weight:560;\r\n letter-spacing:.01em;\r\n}\r\n.wordmark span{color:var(--teal);}\r\n.nav-right{font-family:var(--font-mono);font-size:.7rem;color:var(--foam-faint);letter-spacing:.08em;}\r\n\r\n\/* ============ DEPTH GAUGE ============ *\/\r\n.depth-gauge{\r\n position:fixed;right:2.25rem;top:50%;transform:translateY(-50%);\r\n z-index:45;display:flex;flex-direction:column;align-items:center;gap:0;\r\n height:280px;\r\n}\r\n.depth-gauge .track{\r\n position:relative;width:1px;height:100%;background:var(--line);\r\n}\r\n.depth-gauge .fill{\r\n position:absolute;top:0;left:0;width:1px;height:0%;\r\n background:linear-gradient(to bottom, var(--teal), var(--violet));\r\n transition:height .1s linear;\r\n}\r\n.depth-gauge .dot{\r\n position:absolute;left:50%;top:0%;width:8px;height:8px;border-radius:50%;\r\n background:var(--teal);box-shadow:0 0 12px 2px var(--teal);\r\n transform:translate(-50%,-50%);transition:top .1s linear;\r\n}\r\n.depth-readout{\r\n position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);\r\n font-family:var(--font-mono);font-size:.68rem;color:var(--foam-dim);\r\n text-align:right;white-space:nowrap;letter-spacing:.04em;\r\n}\r\n.depth-readout .num{color:var(--teal);font-size:.82rem;display:block;margin-bottom:.15rem;}\r\n@media (max-width:900px){.depth-gauge,.depth-readout{display:none;}}\r\n\r\n\/* ============ 3D REVEAL SYSTEM ============ *\/\r\n\/* every .reveal starts tipped back and pushed into the screen, then rises\r\n into place \u2014 the whole page's motion language is \"surfacing\" in true 3D *\/\r\n.reveal{\r\n opacity:0;\r\n transform:perspective(1200px) translateZ(-260px) translateY(70px) rotateX(-30deg);\r\n transform-origin:50% 100%;\r\n transition:opacity 1s var(--ease), transform 1s var(--ease);\r\n will-change:transform,opacity;\r\n}\r\n.reveal.in-view{\r\n opacity:1;\r\n transform:perspective(1200px) translateZ(0) translateY(0) rotateX(0deg);\r\n}\r\n.reveal.delay1{transition-delay:.12s;}\r\n.reveal.delay2{transition-delay:.24s;}\r\n\r\n\/* ============ HERO ============ *\/\r\n.hero{\r\n position:relative;min-height:100vh;display:flex;flex-direction:column;\r\n justify-content:center;padding:7rem clamp(1.25rem,5vw,3rem) 4rem;\r\n overflow:hidden;\r\n}\r\n.hero .glow-orb.g1{width:520px;height:520px;background:var(--teal);top:-10%;left:-10%;}\r\n.hero .glow-orb.g2{width:420px;height:420px;background:var(--violet);bottom:-15%;right:-8%;opacity:.22;}\r\n.hero-grid{\r\n display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;\r\n max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:2;\r\n}\r\n.hero h1{\r\n font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.08;margin:1.1rem 0 1.4rem;\r\n max-width:14ch;\r\n}\r\n.hero h1 em{font-style:italic;color:var(--teal);}\r\n.hero p.lede{\r\n font-size:1.05rem;color:var(--foam-dim);max-width:44ch;line-height:1.65;\r\n margin-bottom:2.1rem;\r\n}\r\n.scroll-cue{\r\n display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);\r\n font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--foam-faint);\r\n}\r\n.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:cueFall 1.8s var(--ease) infinite;}\r\n@keyframes cueFall{0%{opacity:0;transform:scaleY(.3);transform-origin:top;}40%{opacity:1;}100%{opacity:0;transform:scaleY(1);transform-origin:top;}}\r\n\r\n\/* Phone mockup \u2014 a real layered 3D object, tilted continuously by both\r\n scroll position and cursor position, with its own children floating\r\n at different depths inside it *\/\r\n.phone-stage{position:relative;height:520px;display:flex;align-items:center;justify-content:center;perspective:1500px;}\r\n.phone-rig{transform-style:preserve-3d;transition:transform .05s linear;}\r\n.phone{\r\n width:250px;height:500px;border-radius:34px;\r\n background:linear-gradient(160deg, #0d1c2f, #060c15);\r\n border:1px solid rgba(234,243,241,.14);\r\n box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -10px rgba(79,240,199,.18), inset 0 0 0 1px rgba(255,255,255,.02);\r\n padding:1.1rem .95rem;position:relative;z-index:3;\r\n transform-style:preserve-3d;\r\n animation:phoneFloat 6s ease-in-out infinite;\r\n}\r\n@keyframes phoneFloat{0%,100%{transform:translateZ(0px);}50%{transform:translateZ(24px);}}\r\n.phone .status-dot{width:38px;height:4px;border-radius:3px;background:rgba(234,243,241,.15);margin:0 auto .9rem;transform:translateZ(10px);}\r\n.phone .greet{font-family:var(--font-mono);font-size:.6rem;color:var(--foam-faint);letter-spacing:.06em;transform:translateZ(22px);}\r\n.phone .greet strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--foam);font-weight:500;margin-top:.25rem;}\r\n.phone .ring{\r\n width:112px;height:112px;border-radius:50%;margin:1.6rem auto 1.2rem;\r\n background:conic-gradient(var(--teal) 0deg 252deg, rgba(234,243,241,.08) 252deg 360deg);\r\n display:flex;align-items:center;justify-content:center;\r\n animation:ringSpin 12s linear infinite;\r\n transform:translateZ(40px);\r\n box-shadow:0 20px 40px -10px rgba(0,0,0,.6);\r\n}\r\n.phone .ring .inner{\r\n width:88px;height:88px;border-radius:50%;background:#0a1524;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n animation:ringSpin 12s linear infinite reverse;\r\n}\r\n@keyframes ringSpin{to{transform:rotate(360deg);}}\r\n.phone .ring .inner b{font-family:var(--font-mono);font-size:1.1rem;color:var(--teal);}\r\n.phone .ring .inner small{font-size:.55rem;color:var(--foam-faint);letter-spacing:.06em;}\r\n.phone .pill-row{display:flex;gap:.4rem;margin-bottom:.5rem;transform:translateZ(26px);}\r\n.phone .pill{flex:1;background:rgba(234,243,241,.07);border:1px solid var(--line);border-radius:10px;padding:.5rem .55rem;backdrop-filter:blur(2px);}\r\n.phone .pill span{display:block;font-family:var(--font-mono);font-size:.55rem;color:var(--foam-faint);}\r\n.phone .pill b{font-family:var(--font-mono);font-size:.85rem;color:var(--teal);}\r\n\r\n\/* sinking bubbles behind phone, each given its own depth so the field\r\n has real perspective \u2014 closer ones bigger\/sharper, far ones small\/blurred *\/\r\n.bubble-field{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;}\r\n.bubble-depth{position:absolute;transform-style:preserve-3d;}\r\n.bubble{\r\n border-radius:8px;\r\n background:rgba(124,147,255,.14);\r\n border:1px solid rgba(124,147,255,.3);\r\n animation:sinkFall linear infinite;\r\n width:100%;height:100%;\r\n}\r\n@keyframes sinkFall{\r\n 0%{transform:translateY(-40px) rotate(0deg);opacity:0;}\r\n 10%{opacity:.8;}\r\n 85%{opacity:.5;}\r\n 100%{transform:translateY(560px) rotate(25deg);opacity:0;}\r\n}\r\n\r\n\/* ============ STORY SECTIONS ============ *\/\r\n.story{position:relative;padding:9rem clamp(1.25rem,5vw,3rem);overflow:hidden;}\r\n.story .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}\r\n.story.reverse .container{grid-template-columns:1fr 1fr;}\r\n.story.reverse .visual{order:2;}\r\n.story.reverse .copy{order:1;}\r\n.depth-label{margin-bottom:1.4rem;}\r\n.depth-label .reading{font-family:var(--font-mono);font-size:.72rem;color:var(--foam-faint);letter-spacing:.1em;margin-top:.35rem;}\r\n.story h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.15;margin-bottom:1.15rem;max-width:13ch;}\r\n.story p{color:var(--foam-dim);max-width:42ch;line-height:1.7;font-size:1rem;}\r\n.story p+p{margin-top:1rem;}\r\n\r\n\/* --- Undertow visual: vortex, rendered as a tilted 3D disk --- *\/\r\n.visual{position:relative;height:380px;}\r\n.vortex-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:900px;}\r\n.vortex-tilt{\r\n position:relative;width:280px;height:280px;transform-style:preserve-3d;\r\n transform:rotateX(58deg) rotateZ(0deg);\r\n transition:transform .3s ease-out;\r\n}\r\n.vortex-ring{\r\n position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid rgba(124,147,255,.28);\r\n animation:vortexSpin linear infinite;transform-style:preserve-3d;\r\n}\r\n.vortex-ring.r1{width:260px;height:260px;margin:-130px 0 0 -130px;animation-duration:18s;transform:translateZ(-10px);}\r\n.vortex-ring.r2{width:190px;height:190px;margin:-95px 0 0 -95px;animation-duration:13s;border-color:rgba(79,240,199,.28);animation-direction:reverse;transform:translateZ(10px);}\r\n.vortex-ring.r3{width:120px;height:120px;margin:-60px 0 0 -60px;animation-duration:9s;transform:translateZ(30px);}\r\n@keyframes vortexSpin{to{transform:translateZ(var(--z,0px)) rotate(360deg);}}\r\n.vortex-ring.r1{--z:-10px;} .vortex-ring.r2{--z:10px;} .vortex-ring.r3{--z:30px;}\r\n.vortex-core{\r\n position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;\r\n background:var(--violet);box-shadow:0 0 40px 14px rgba(124,147,255,.5);transform:translateZ(50px);\r\n}\r\n.vortex-particle{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:2px;background:var(--foam-faint);animation:spiralIn linear infinite;}\r\n@keyframes spiralIn{\r\n 0%{transform:rotate(0deg) translateX(150px) translateZ(-20px) rotate(0deg) scale(1);opacity:0;}\r\n 15%{opacity:.9;}\r\n 100%{transform:rotate(720deg) translateX(0px) translateZ(40px) rotate(-720deg) scale(.2);opacity:0;}\r\n}\r\n\r\n\/* --- Signal visual: a receding 3D conveyor lane --- *\/\r\n.lane-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;perspective:700px;}\r\n.lane-tilt{position:relative;width:100%;transform-style:preserve-3d;transform:rotateX(52deg);transition:transform .3s ease-out;}\r\n.lane{position:relative;width:100%;height:2px;background:var(--line);}\r\n.lane-item{\r\n position:absolute;top:50%;width:34px;height:34px;border-radius:9px;\r\n background:rgba(234,243,241,.08);border:1px solid var(--line);\r\n transform:translateY(-50%) translateZ(0);\r\n box-shadow:0 18px 30px -14px rgba(0,0,0,.7);\r\n animation:laneMove linear infinite;\r\n}\r\n@keyframes laneMove{from{left:-40px;transform:translateY(-50%) translateZ(-40px) scale(.7);}30%{transform:translateY(-50%) translateZ(20px) scale(1);}to{left:105%;transform:translateY(-50%) translateZ(-40px) scale(.7);}}\r\n.lane-catch{\r\n position:absolute;left:52%;top:50%;transform:translate(-50%,-50%) translateZ(30px);\r\n width:78px;height:78px;border-radius:50%;\r\n border:1px solid var(--teal);\r\n box-shadow:0 0 0 6px rgba(79,240,199,.06), 0 0 26px rgba(79,240,199,.3);\r\n animation:catchPulse 2.6s ease-in-out infinite;\r\n}\r\n@keyframes catchPulse{0%,100%{box-shadow:0 0 0 6px rgba(79,240,199,.06),0 0 26px rgba(79,240,199,.25);}50%{box-shadow:0 0 0 10px rgba(79,240,199,.1),0 0 40px rgba(79,240,199,.45);}}\r\n.lane-caption{position:absolute;bottom:-3.4rem;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:.66rem;color:var(--foam-faint);letter-spacing:.08em;}\r\n\r\n\/* ============ FEATURE TRIO ============ *\/\r\n.features-wrap{position:relative;padding:8rem clamp(1.25rem,5vw,3rem);}\r\n.features-head{text-align:center;max-width:640px;margin:0 auto 4rem;}\r\n.features-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-top:1rem;}\r\n.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1160px;margin:0 auto;perspective:1600px;}\r\n.tilt-card{\r\n background:linear-gradient(160deg, rgba(234,243,241,.045), rgba(234,243,241,.01));\r\n border:1px solid var(--line);border-radius:20px;padding:2rem 1.7rem 1.9rem;\r\n transform-style:preserve-3d;transition:transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;\r\n position:relative;\r\n}\r\n.tilt-card:hover{border-color:var(--line-bright);box-shadow:0 30px 70px -24px rgba(79,240,199,.28);}\r\n.tilt-card .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--teal);text-transform:uppercase;transform:translateZ(28px);display:block;}\r\n.tilt-card h3{font-size:1.3rem;margin:.85rem 0 .7rem;font-weight:500;transform:translateZ(22px);}\r\n.tilt-card p{color:var(--foam-dim);font-size:.9rem;line-height:1.6;transform:translateZ(8px);}\r\n\r\n\/* rank ring card *\/\r\n.rank-ring{width:96px;height:96px;border-radius:50%;margin:1.3rem 0;position:relative;transform:translateZ(18px);\r\n background:conic-gradient(var(--amber) 0deg 216deg, rgba(234,243,241,.08) 216deg 360deg);\r\n box-shadow:0 22px 36px -16px rgba(0,0,0,.7);}\r\n.rank-ring .hole{position:absolute;inset:9px;border-radius:50%;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;}\r\n.rank-ring .hole b{font-family:var(--font-mono);font-size:.85rem;color:var(--amber);}\r\n.rank-ring .hole small{font-size:.55rem;color:var(--foam-faint);}\r\n.stat-row{display:flex;gap:.6rem;margin-top:1.1rem;transform:translateZ(14px);}\r\n.stat-pill{flex:1;background:rgba(234,243,241,.05);border:1px solid var(--line);border-radius:10px;padding:.55rem .5rem;text-align:center;}\r\n.stat-pill b{display:block;font-family:var(--font-mono);color:var(--teal);font-size:1.05rem;}\r\n.stat-pill span{font-size:.62rem;color:var(--foam-faint);}\r\n\r\n\/* focus timer card *\/\r\n.timer-wrap{display:flex;align-items:center;gap:1.1rem;margin:1.3rem 0;transform:translateZ(20px);}\r\n.timer-ring{width:88px;height:88px;flex-shrink:0;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));}\r\n.timer-ring circle{fill:none;stroke-width:5;}\r\n.timer-ring .bg{stroke:rgba(234,243,241,.09);}\r\n.timer-ring .fg{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:60;transform:rotate(-90deg);transform-origin:50% 50%;animation:timerTick 8s linear infinite;}\r\n@keyframes timerTick{0%{stroke-dashoffset:251;}100%{stroke-dashoffset:0;}}\r\n.timer-label b{display:block;font-family:var(--font-mono);font-size:1.3rem;color:var(--violet);}\r\n.timer-label span{font-size:.68rem;color:var(--foam-faint);}\r\n\r\n\/* analytics bars *\/\r\n.bar-list{margin-top:1.3rem;display:flex;flex-direction:column;gap:.75rem;transform:translateZ(14px);}\r\n.bar-row span{font-size:.72rem;color:var(--foam-dim);display:flex;justify-content:space-between;margin-bottom:.3rem;font-family:var(--font-mono);}\r\n.bar-track{height:6px;border-radius:4px;background:rgba(234,243,241,.07);overflow:hidden;}\r\n.bar-fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--teal-dim),var(--teal));transition:width 1.4s var(--ease);box-shadow:0 0 10px rgba(79,240,199,.5);}\r\n.bar-row.in-view .bar-fill{width:var(--w);}\r\n\r\n\/* ============ PRIVACY (VAULT) ============ *\/\r\n.vault-stage{position:relative;height:380px;display:flex;align-items:center;justify-content:center;perspective:1000px;}\r\n.vault-orb{\r\n width:220px;height:220px;border-radius:50%;position:relative;transform-style:preserve-3d;\r\n background:radial-gradient(circle at 32% 28%, rgba(234,243,241,.14), rgba(79,240,199,.05) 45%, rgba(5,9,16,.5) 75%);\r\n border:1px solid rgba(79,240,199,.28);\r\n box-shadow:inset 0 0 40px rgba(79,240,199,.12), 0 0 70px -6px rgba(79,240,199,.3), 0 40px 60px -20px rgba(0,0,0,.7);\r\n animation:orbBob 5s ease-in-out infinite;\r\n}\r\n@keyframes orbBob{0%,100%{transform:translateZ(0);}50%{transform:translateZ(30px);}}\r\n.vault-orbit-tilt{position:absolute;inset:-34px;transform-style:preserve-3d;transform:rotateX(62deg);transition:transform .3s ease-out;}\r\n.vault-orbit{\r\n position:absolute;inset:0;border-radius:50%;\r\n border:1px dashed rgba(124,147,255,.35);\r\n animation:vortexSpin2 22s linear infinite;transform-style:preserve-3d;\r\n}\r\n@keyframes vortexSpin2{to{transform:rotate(360deg);}}\r\n.vault-orbit::before{\r\n content:\"\";position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;\r\n border-radius:50%;background:var(--violet);box-shadow:0 0 14px 4px var(--violet);\r\n}\r\n.vault-readout{\r\n position:absolute;bottom:14px;left:50%;transform:translateX(-50%);text-align:center;\r\n font-family:var(--font-mono);\r\n}\r\n.vault-readout b{font-size:.95rem;color:var(--teal);display:block;}\r\n.vault-readout span{font-size:.6rem;color:var(--foam-faint);letter-spacing:.06em;}\r\n.privacy-checks{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.6rem;}\r\n.privacy-checks li{display:flex;gap:.65rem;align-items:flex-start;color:var(--foam-dim);font-size:.92rem;}\r\n.privacy-checks li::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:.5rem;flex-shrink:0;box-shadow:0 0 8px var(--teal);}\r\n\r\n\/* ============ CTA \/ BUOY ============ *\/\r\n.cta{position:relative;padding:10rem clamp(1.25rem,5vw,3rem) 8rem;text-align:center;overflow:hidden;}\r\n.cta .glow-orb{width:600px;height:600px;background:var(--teal);left:calc(50% - 300px);top:20%;opacity:.16;}\r\n.cta-inner{position:relative;z-index:2;max-width:560px;margin:0 auto;}\r\n.cta h2{font-size:clamp(2.1rem,4.2vw,3rem);margin:1.2rem 0 1rem;}\r\n.cta p{color:var(--foam-dim);font-size:1.02rem;line-height:1.65;max-width:40ch;margin:0 auto 3rem;}\r\n\r\n.buoy-wrap{display:flex;flex-direction:column;align-items:center;gap:2.2rem;perspective:1100px;}\r\n.buoy{position:relative;width:160px;height:200px;cursor:pointer;transform-style:preserve-3d;transition:transform .06s linear;}\r\n.buoy .rope{position:absolute;top:0;left:50%;width:2px;height:26px;background:linear-gradient(var(--foam-faint),transparent);transform:translateX(-50%) translateZ(20px);}\r\n.rays-z{position:absolute;inset:0;transform:translateZ(-70px);transform-style:preserve-3d;}\r\n.buoy .rays{\r\n position:absolute;top:20px;left:50%;width:200px;height:200px;transform:translate(-50%,-6%);\r\n background:conic-gradient(from 0deg, transparent 0deg, rgba(79,240,199,.18) 8deg, transparent 16deg, transparent 40deg, rgba(79,240,199,.14) 48deg, transparent 56deg, transparent 80deg, rgba(79,240,199,.18) 88deg, transparent 96deg, transparent 120deg, rgba(79,240,199,.14) 128deg, transparent 136deg, transparent 160deg, rgba(79,240,199,.18) 168deg, transparent 176deg, transparent 200deg, rgba(79,240,199,.14) 208deg, transparent 216deg, transparent 240deg, rgba(79,240,199,.18) 248deg, transparent 256deg, transparent 280deg, rgba(79,240,199,.14) 288deg, transparent 296deg, transparent 320deg, rgba(79,240,199,.18) 328deg, transparent 336deg);\r\n opacity:0;transition:opacity .4s ease;border-radius:50%;\r\n animation:raysTurn 30s linear infinite;\r\n}\r\n@keyframes raysTurn{to{transform:translate(-50%,-6%) rotate(360deg);}}\r\n.bell-z{position:absolute;top:26px;left:50%;transform:translateX(-50%) translateZ(26px);transform-style:preserve-3d;}\r\n.buoy .bell{\r\n position:relative;width:96px;height:100px;transform-origin:top center;\r\n transition:transform .6s cubic-bezier(.34,1.56,.64,1);transform-style:preserve-3d;\r\n}\r\n.buoy .bell-top{\r\n position:absolute;top:0;left:50%;transform:translateX(-50%) translateZ(6px);\r\n width:22px;height:22px;border-radius:50% 50% 0 0;\r\n background:linear-gradient(160deg,#1b3450,#0e2035);\r\n border:1px solid rgba(79,240,199,.3);border-bottom:none;\r\n}\r\n.buoy .bell-body{\r\n position:absolute;top:18px;left:50%;transform:translateX(-50%);\r\n width:96px;height:76px;border-radius:48px 48px 12px 12px \/ 60px 60px 10px 10px;\r\n background:linear-gradient(165deg,#1c3a58,#0a1826 70%);\r\n border:1px solid rgba(79,240,199,.35);\r\n box-shadow:inset 0 -10px 24px rgba(0,0,0,.4), inset 0 8px 18px rgba(79,240,199,.08), 0 30px 40px -18px rgba(0,0,0,.7);\r\n}\r\n.buoy .bell-band{\r\n position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateZ(10px);\r\n width:104px;height:8px;border-radius:4px;\r\n background:linear-gradient(90deg, rgba(79,240,199,.1), rgba(79,240,199,.4), rgba(79,240,199,.1));\r\n}\r\n.buoy .bell-base{\r\n position:absolute;bottom:0;left:50%;transform:translateX(-50%);\r\n width:26px;height:14px;border-radius:0 0 8px 8px;\r\n background:#0a1826;border:1px solid rgba(79,240,199,.3);border-top:none;\r\n}\r\n.buoy .clapper{\r\n position:absolute;bottom:-6px;left:50%;width:10px;height:10px;border-radius:50%;\r\n background:var(--teal);box-shadow:0 0 10px 3px var(--teal);\r\n transform:translateX(-50%) translateZ(4px);\r\n}\r\n.buoy .ping{\r\n position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;\r\n border:1px solid var(--teal);transform:translate(-50%,-50%) scale(0);opacity:0;\r\n}\r\n.buoy .glow-under{\r\n position:absolute;top:40%;left:50%;width:140px;height:140px;transform:translate(-50%,-50%) translateZ(-90px);\r\n border-radius:50%;background:radial-gradient(circle, rgba(79,240,199,.28), transparent 70%);\r\n opacity:.5;filter:blur(4px);transition:opacity .5s ease;\r\n}\r\n\r\n\/* ringing state *\/\r\n.buoy.ringing .bell{animation:bellSwing 1.2s ease-in-out 2;}\r\n.buoy.ringing .rays{opacity:1;}\r\n.buoy.ringing .glow-under{opacity:1;}\r\n.buoy.ringing .ping{animation:pingOut 1.4s ease-out 2;}\r\n@keyframes bellSwing{\r\n 0%{transform:rotate(0deg);}\r\n 20%{transform:rotate(14deg);}\r\n 45%{transform:rotate(-11deg);}\r\n 68%{transform:rotate(7deg);}\r\n 85%{transform:rotate(-4deg);}\r\n 100%{transform:rotate(0deg);}\r\n}\r\n@keyframes pingOut{0%{transform:translate(-50%,-50%) scale(.4);opacity:.7;}100%{transform:translate(-50%,-50%) scale(6);opacity:0;}}\r\n\r\n.notify-btn{\r\n position:relative;padding:.95rem 2.1rem;border-radius:100px;\r\n border:1px solid var(--teal);background:rgba(79,240,199,.08);\r\n font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;\r\n color:var(--teal);transition:background .3s ease, transform .2s ease;\r\n}\r\n.notify-btn:hover{background:rgba(79,240,199,.16);transform:translateY(-2px);}\r\n.notify-btn:active{transform:translateY(0);}\r\n.notify-note{font-family:var(--font-mono);font-size:.68rem;color:var(--foam-faint);min-height:1.2em;}\r\n\r\nfooter{\r\n padding:3rem clamp(1.25rem,5vw,3rem) 2.4rem;\r\n display:flex;justify-content:space-between;align-items:center;\r\n border-top:1px solid var(--line);\r\n font-family:var(--font-mono);font-size:.68rem;color:var(--foam-faint);\r\n flex-wrap:wrap;gap:1rem;\r\n}\r\n\r\n\/* ============ RESPONSIVE ============ *\/\r\n@media (max-width:900px){\r\n .hero-grid{grid-template-columns:1fr;}\r\n .phone-stage{height:400px;order:-1;}\r\n .story .container{grid-template-columns:1fr;gap:2.5rem;}\r\n .story.reverse .visual, .story.reverse .copy{order:0;}\r\n .feature-grid{grid-template-columns:1fr;}\r\n .story{padding:6rem 1.25rem;}\r\n .features-wrap{padding:5rem 1.25rem;}\r\n}\r\n\r\n\/* ============ REDUCED MOTION ============ *\/\r\n@media (prefers-reduced-motion: reduce){\r\n *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"grain\"><\/div>\r\n\r\n<nav>\r\n <div class=\"wordmark\">nivara<span>.<\/span><\/div>\r\n <div class=\"nav-right\">ATTENTION, PROTECTED<\/div>\r\n<\/nav>\r\n\r\n<div class=\"depth-gauge\">\r\n <div class=\"track\"><div class=\"fill\" id=\"gaugeFill\"><\/div><\/div>\r\n <div class=\"dot\" id=\"gaugeDot\"><\/div>\r\n<\/div>\r\n<div class=\"depth-readout\" id=\"depthReadout\">\r\n <span class=\"num\">−240m<\/span>\r\n The Undertow\r\n<\/div>\r\n\r\n\r\n<header class=\"hero\" id=\"hero\">\r\n <div class=\"ambient\">\r\n <div class=\"glow-orb g1\" data-parallax=\"0.15\"><\/div>\r\n <div class=\"glow-orb g2\" data-parallax=\"0.25\"><\/div>\r\n <\/div>\r\n <div class=\"hero-grid\">\r\n <div>\r\n <div class=\"eyebrow\">NIVARA — FOR ANDROID<\/div>\r\n <h1>You didn't choose<br>to disappear into <em>the feed.<\/em><\/h1>\r\n <p class=\"lede\">Somewhere between one notification and the fortieth minute, the current took you under. Nivara watches for the exact moment scrolling turns into freefall — and pulls you back, before you even notice you're gone.<\/p>\r\n <div class=\"scroll-cue\"><div class=\"line\"><\/div>ENTER THE CURRENT<\/div>\r\n <\/div>\r\n <div class=\"phone-stage\" id=\"phoneStage\">\r\n <div class=\"bubble-field\" id=\"bubbleField\"><\/div>\r\n <div class=\"phone-rig\" id=\"phoneRig\">\r\n <div class=\"phone\" id=\"phone\">\r\n <div class=\"status-dot\"><\/div>\r\n <div class=\"greet\">GOOD EVENING<strong>Surface before 9<\/strong><\/div>\r\n <div class=\"ring\"><div class=\"inner\"><b>3h 12m<\/b><small>SAVED TODAY<\/small><\/div><\/div>\r\n <div class=\"pill-row\">\r\n <div class=\"pill\"><span>RANK<\/span><b>Disciple<\/b><\/div>\r\n <div class=\"pill\"><span>BLOCKED<\/span><b>27<\/b><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"story\" id=\"undertow\" data-depth=\"-240\" data-label=\"The Undertow\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:400px;height:400px;background:var(--violet);top:10%;left:-6%;\" data-parallax=\"0.2\"><\/div><\/div>\r\n <div class=\"container\">\r\n <div class=\"copy\">\r\n <div class=\"depth-label reveal\">\r\n <div class=\"eyebrow\">01 — THE PROBLEM<\/div>\r\n <div class=\"reading\">−240m — no light from the surface<\/div>\r\n <\/div>\r\n <h2 class=\"reveal delay1\">The scroll doesn't ask permission.<\/h2>\r\n <p class=\"reveal delay2\">Short-form feeds are built by people paid to keep you exactly where you are. There's no bottom to hit, no natural stopping point — just the next card, already loading before you've finished the last one.<\/p>\r\n <p class=\"reveal delay2\">Most blockers respond by locking the whole app. That works for about a day, until you turn it off out of genuine need — and the feed is right there waiting.<\/p>\r\n <\/div>\r\n <div class=\"visual reveal delay1\">\r\n <div class=\"vortex-stage\" id=\"vortexStage\">\r\n <div class=\"vortex-tilt\" id=\"vortexTilt\">\r\n <div class=\"vortex-ring r1\"><\/div>\r\n <div class=\"vortex-ring r2\"><\/div>\r\n <div class=\"vortex-ring r3\"><\/div>\r\n <div class=\"vortex-core\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"story reverse\" id=\"signal\" data-depth=\"-120\" data-label=\"Signal Emerges\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:420px;height:420px;background:var(--teal);top:0;right:-10%;\" data-parallax=\"0.2\"><\/div><\/div>\r\n <div class=\"container\">\r\n <div class=\"copy\">\r\n <div class=\"depth-label reveal\">\r\n <div class=\"eyebrow\">02 — HOW NIVARA WORKS<\/div>\r\n <div class=\"reading\">−120m — a signal, reading the current<\/div>\r\n <\/div>\r\n <h2 class=\"reveal delay1\">Nivara doesn't cut the line. It reads it.<\/h2>\r\n <p class=\"reveal delay2\">A lightweight engine runs entirely on your device, watching not which app is open, but what kind of moment you're in. A message thread passes through untouched. The instant you drop into an infinite short-form feed, it intercepts — and only that.<\/p>\r\n <p class=\"reveal delay2\">You keep the parts of the app you actually came for. Only the trap gets closed.<\/p>\r\n <\/div>\r\n <div class=\"visual reveal delay1\">\r\n <div class=\"lane-stage\" id=\"laneStageOuter\">\r\n <div class=\"lane-tilt\" id=\"laneTilt\">\r\n <div class=\"lane\" id=\"laneStage\"><\/div>\r\n <div class=\"lane-catch\"><\/div>\r\n <\/div>\r\n <div class=\"lane-caption\">precision blocking — not app-wide lockout<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"features-wrap\" id=\"features\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:500px;height:500px;background:var(--amber);top:30%;left:50%;transform:translateX(-50%);opacity:.08;\"><\/div><\/div>\r\n <div class=\"features-head reveal\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">03 — INSIDE THE APP<\/div>\r\n <h2>Three ways it stays out of your way<\/h2>\r\n <\/div>\r\n <div class=\"feature-grid\">\r\n\r\n <div class=\"tilt-card reveal\">\r\n <span class=\"tag\">Dashboard<\/span>\r\n <h3>Progress you can see<\/h3>\r\n <div class=\"rank-ring\">\r\n <div class=\"hole\"><b>Disciple<\/b><small>rank<\/small><\/div>\r\n <\/div>\r\n <div class=\"stat-row\">\r\n <div class=\"stat-pill\"><b class=\"count\" data-target=\"192\">0<\/b><span>min saved<\/span><\/div>\r\n <div class=\"stat-pill\"><b class=\"count\" data-target=\"27\">0<\/b><span>blocked<\/span><\/div>\r\n <\/div>\r\n <p style=\"margin-top:1rem;\">A rank system — Novice through Master — turns avoiding the feed into something worth checking on.<\/p>\r\n <\/div>\r\n\r\n <div class=\"tilt-card reveal delay1\">\r\n <span class=\"tag\">Deep Focus<\/span>\r\n <h3>The hour that can't be interrupted<\/h3>\r\n <div class=\"timer-wrap\">\r\n <svg class=\"timer-ring\" viewBox=\"0 0 90 90\">\r\n <circle class=\"bg\" cx=\"45\" cy=\"45\" r=\"40\"><\/circle>\r\n <circle class=\"fg\" cx=\"45\" cy=\"45\" r=\"40\"><\/circle>\r\n <\/svg>\r\n <div class=\"timer-label\"><b>47:12<\/b><span>locked, no toggle<\/span><\/div>\r\n <\/div>\r\n <p>Set a duration and every selected app is strictly blocked until it ends — no casual override when discipline is the whole point.<\/p>\r\n <\/div>\r\n\r\n <div class=\"tilt-card reveal delay2\">\r\n <span class=\"tag\">Analytics<\/span>\r\n <h3>Your day, without the noise<\/h3>\r\n <div class=\"bar-list\">\r\n <div class=\"bar-row\" style=\"--w:78%\"><span>Short-form video<b>2h 04m<\/b><\/span><div class=\"bar-track\"><div class=\"bar-fill\"><\/div><\/div><\/div>\r\n <div class=\"bar-row\" style=\"--w:44%\"><span>Messaging<b>0h 51m<\/b><\/span><div class=\"bar-track\"><div class=\"bar-fill\"><\/div><\/div><\/div>\r\n <div class=\"bar-row\" style=\"--w:22%\"><span>Work apps<b>0h 26m<\/b><\/span><div class=\"bar-track\"><div class=\"bar-fill\"><\/div><\/div><\/div>\r\n <\/div>\r\n <p style=\"margin-top:1.1rem;\">System noise filtered out automatically — only the apps you actually touched.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"story\" id=\"privacy\" data-depth=\"-40\" data-label=\"Surfacing\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" style=\"width:400px;height:400px;background:var(--teal);bottom:0;left:-8%;\" data-parallax=\"0.2\"><\/div><\/div>\r\n <div class=\"container\">\r\n <div class=\"copy\">\r\n <div class=\"depth-label reveal\">\r\n <div class=\"eyebrow\">04 — PRIVACY<\/div>\r\n <div class=\"reading\">−40m — the water clears<\/div>\r\n <\/div>\r\n <h2 class=\"reveal delay1\">Nothing you do here ever leaves this device.<\/h2>\r\n <p class=\"reveal delay2\">No cloud servers. No telemetry. No crash logs sent home for analysis. Your ranks, streaks and block lists live in encrypted local storage — delete the app and every trace of them goes with it.<\/p>\r\n <ul class=\"privacy-checks reveal delay2\">\r\n <li>100% on-device processing, offline-first<\/li>\r\n <li>No silent permissions — every capability is granted by you, visibly<\/li>\r\n <li>Structurally unable to transmit your usage data anywhere<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"visual reveal delay1\">\r\n <div class=\"vault-stage\" id=\"vaultStage\">\r\n <div class=\"vault-orbit-tilt\" id=\"vaultTilt\"><div class=\"vault-orbit\"><\/div><\/div>\r\n <div class=\"vault-orb\"><\/div>\r\n <div class=\"vault-readout\"><b>0.00 KB<\/b><span>TRANSMITTED, EVER<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"cta\" id=\"notify\" data-depth=\"0\" data-label=\"Clear Water\">\r\n <div class=\"ambient\"><div class=\"glow-orb\" data-parallax=\"0.1\"><\/div><\/div>\r\n <div class=\"cta-inner\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">05 — 0m<\/div>\r\n <h2 class=\"reveal\">Come up for air.<\/h2>\r\n <p class=\"reveal delay1\">Nivara is almost ready to surface on the Play Store. Ring the buoy and we'll let you know the moment it does — nothing else, no other noise.<\/p>\r\n <div class=\"buoy-wrap reveal delay2\">\r\n <div class=\"buoy\" id=\"buoy\">\r\n <div class=\"glow-under\"><\/div>\r\n <div class=\"rays-z\"><div class=\"rays\"><\/div><\/div>\r\n <div class=\"rope\"><\/div>\r\n <div class=\"bell-z\">\r\n <div class=\"bell\">\r\n <div class=\"bell-top\"><\/div>\r\n <div class=\"bell-body\"><\/div>\r\n <div class=\"bell-band\"><\/div>\r\n <div class=\"bell-base\"><\/div>\r\n <div class=\"clapper\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ping\"><\/div>\r\n <\/div>\r\n <button class=\"notify-btn\" id=\"notifyBtn\">Notify Me<\/button>\r\n <div class=\"notify-note\" id=\"notifyNote\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <span>nivara © 2026<\/span>\r\n <span>attention, protected — not gamified guilt<\/span>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ ---------- Reveal on scroll ----------\r\nconst revealEls = document.querySelectorAll('.reveal');\r\nconst barRows = document.querySelectorAll('.bar-row');\r\nconst countEls = document.querySelectorAll('.count');\r\n\r\nconst io = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{\r\n if(e.isIntersecting){\r\n e.target.classList.add('in-view');\r\n }\r\n });\r\n},{threshold:0.2});\r\nrevealEls.forEach(el=>io.observe(el));\r\nbarRows.forEach(el=>io.observe(el));\r\n\r\n\/\/ count-up numbers\r\nconst countIO = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{\r\n if(e.isIntersecting){\r\n const el = e.target;\r\n const target = parseInt(el.dataset.target,10);\r\n let cur = 0;\r\n const step = Math.max(1, Math.round(target\/40));\r\n const tick = ()=>{\r\n cur = Math.min(target, cur+step);\r\n el.textContent = cur;\r\n if(cur<target) requestAnimationFrame(tick);\r\n };\r\n tick();\r\n countIO.unobserve(el);\r\n }\r\n });\r\n},{threshold:0.4});\r\ncountEls.forEach(el=>countIO.observe(el));\r\n\r\n\/\/ ---------- Depth gauge ----------\r\nconst gaugeFill = document.getElementById('gaugeFill');\r\nconst gaugeDot = document.getElementById('gaugeDot');\r\nconst depthReadout = document.getElementById('depthReadout');\r\nconst depthSections = [...document.querySelectorAll('[data-depth]')];\r\n\r\nfunction updateGauge(){\r\n const scrollTop = window.scrollY;\r\n const docH = document.documentElement.scrollHeight - window.innerHeight;\r\n const progress = Math.min(1, Math.max(0, scrollTop\/docH));\r\n gaugeFill.style.height = (progress*100)+'%';\r\n gaugeDot.style.top = (progress*100)+'%';\r\n\r\n let current = depthSections[0];\r\n const mid = window.innerHeight*0.5;\r\n depthSections.forEach(sec=>{\r\n const r = sec.getBoundingClientRect();\r\n if(r.top < mid) current = sec;\r\n });\r\n const depth = current.dataset.depth;\r\n const label = current.dataset.label;\r\n depthReadout.querySelector('.num').textContent = (depth==='0' ? '0m' : depth+'m');\r\n depthReadout.lastChild.textContent = label;\r\n}\r\n\r\n\/\/ ---------- Sinking bubble field (with per-bubble depth) ----------\r\nconst bubbleField = document.getElementById('bubbleField');\r\nconst bubbleColors = ['rgba(124,147,255,.16)','rgba(79,240,199,.14)','rgba(255,184,107,.14)'];\r\nfor(let i=0;i<16;i++){\r\n const depth = Math.random(); \/\/ 0 = near, 1 = far\r\n const wrap = document.createElement('div');\r\n wrap.className='bubble-depth';\r\n const size = 14+Math.random()*22*(1-depth*0.6);\r\n wrap.style.width=size+'px';\r\n wrap.style.height=size+'px';\r\n wrap.style.left = (Math.random()*100)+'%';\r\n wrap.style.transform = `translateZ(${-260*depth}px)`;\r\n wrap.style.filter = `blur(${depth*2.2}px)`;\r\n wrap.style.opacity = (1 - depth*0.55).toFixed(2);\r\n const b = document.createElement('div');\r\n b.className='bubble';\r\n b.style.background = bubbleColors[i%3];\r\n b.style.borderColor = bubbleColors[i%3];\r\n b.style.animationDuration = (5+Math.random()*6)+'s';\r\n b.style.animationDelay = (Math.random()*8)+'s';\r\n wrap.appendChild(b);\r\n bubbleField.appendChild(wrap);\r\n}\r\n\r\n\/\/ ---------- Vortex particles ----------\r\nconst vortexTilt = document.getElementById('vortexTilt');\r\nfor(let i=0;i<10;i++){\r\n const p = document.createElement('div');\r\n p.className='vortex-particle';\r\n p.style.animationDuration = (3+Math.random()*3)+'s';\r\n p.style.animationDelay = (Math.random()*4)+'s';\r\n vortexTilt.appendChild(p);\r\n}\r\n\r\n\/\/ ---------- Lane items ----------\r\nconst laneStage = document.getElementById('laneStage');\r\nfor(let i=0;i<7;i++){\r\n const item = document.createElement('div');\r\n item.className='lane-item';\r\n item.style.animationDuration = (4+Math.random()*2)+'s';\r\n item.style.animationDelay = (i*0.9)+'s';\r\n laneStage.appendChild(item);\r\n}\r\n\r\n\/\/ ---------- Tilt cards (hover-driven 3D, layered children pop via translateZ in CSS) ----------\r\ndocument.querySelectorAll('.tilt-card').forEach(card=>{\r\n card.addEventListener('mousemove', (e)=>{\r\n const r = card.getBoundingClientRect();\r\n const x = (e.clientX-r.left)\/r.width - 0.5;\r\n const y = (e.clientY-r.top)\/r.height - 0.5;\r\n card.style.transform = `perspective(1200px) rotateY(${x*14}deg) rotateX(${-y*14}deg) translateZ(10px)`;\r\n });\r\n card.addEventListener('mouseleave', ()=>{ card.style.transform=''; });\r\n});\r\n\r\n\/\/ ---------- Buoy notify ----------\r\nconst buoy = document.getElementById('buoy');\r\nconst notifyBtn = document.getElementById('notifyBtn');\r\nconst notifyNote = document.getElementById('notifyNote');\r\nlet rung = false;\r\nfunction ring(){\r\n if(rung) return;\r\n rung = true;\r\n buoy.classList.add('ringing');\r\n notifyBtn.textContent = \"You're on the list \u2713\";\r\n notifyNote.textContent = \"We'll ring you back the moment Nivara surfaces.\";\r\n}\r\nbuoy.addEventListener('click', ring);\r\nnotifyBtn.addEventListener('click', ring);\r\nbuoy.addEventListener('mousemove',(e)=>{\r\n const r = buoy.getBoundingClientRect();\r\n const x = (e.clientX-r.left)\/r.width - 0.5;\r\n const y = (e.clientY-r.top)\/r.height - 0.5;\r\n buoy.style.transform = `perspective(1100px) rotateY(${x*22}deg) rotateX(${-y*18}deg)`;\r\n});\r\nbuoy.addEventListener('mouseleave', ()=>{ buoy.style.transform=''; });\r\n\r\n\/\/ ---------- Master scroll-linked 3D motion loop ----------\r\n\/\/ Cursor position relative to hero, used for the phone's continual tilt\r\nlet mouseX = 0, mouseY = 0, mouseActive = false;\r\nconst heroEl = document.getElementById('hero');\r\nheroEl.addEventListener('mousemove', (e)=>{\r\n const r = heroEl.getBoundingClientRect();\r\n mouseX = (e.clientX - r.left)\/r.width - 0.5;\r\n mouseY = (e.clientY - r.top)\/r.height - 0.5;\r\n mouseActive = true;\r\n});\r\nheroEl.addEventListener('mouseleave', ()=>{ mouseActive = false; mouseX=0; mouseY=0; });\r\n\r\nconst phoneRig = document.getElementById('phoneRig');\r\nconst vortexTiltEl = document.getElementById('vortexTilt');\r\nconst laneTiltEl = document.getElementById('laneTilt');\r\nconst vaultTiltEl = document.getElementById('vaultTilt');\r\nconst parallaxOrbs = document.querySelectorAll('[data-parallax]');\r\n\r\n\/\/ normalized position of an element's center relative to viewport center: -1 (above) .. 0 (centered) .. 1 (below)\r\nfunction centerOffset(el){\r\n const r = el.getBoundingClientRect();\r\n const elCenter = r.top + r.height\/2;\r\n const viewCenter = window.innerHeight\/2;\r\n return Math.max(-1, Math.min(1, (elCenter - viewCenter)\/window.innerHeight));\r\n}\r\n\r\nfunction frame(){\r\n updateGauge();\r\n\r\n \/\/ hero phone: cursor tilt + a gentle scroll-driven rotation as the hero scrolls away\r\n const heroOffset = centerOffset(heroEl);\r\n const rigY = mouseX*16 - heroOffset*18;\r\n const rigX = -mouseY*12 + heroOffset*10;\r\n phoneRig.style.transform = `rotateY(${rigY}deg) rotateX(${rigX}deg)`;\r\n\r\n \/\/ vortex disk: base tilt + extra rotation as it passes through the viewport\r\n if(vortexTiltEl){\r\n const off = centerOffset(document.getElementById('vortexStage'));\r\n vortexTiltEl.style.transform = `rotateX(${58 - off*20}deg) rotateZ(${off*14}deg)`;\r\n }\r\n \/\/ conveyor lane: base tilt + extra pitch on scroll\r\n if(laneTiltEl){\r\n const off = centerOffset(document.getElementById('laneStageOuter'));\r\n laneTiltEl.style.transform = `rotateX(${52 - off*18}deg)`;\r\n }\r\n \/\/ vault orbit ring: base tilt + wobble on scroll\r\n if(vaultTiltEl){\r\n const off = centerOffset(document.getElementById('vaultStage'));\r\n vaultTiltEl.style.transform = `rotateX(${62 - off*16}deg) rotateY(${off*10}deg)`;\r\n }\r\n\r\n \/\/ ambient glow orbs drift in depth as you scroll past\r\n parallaxOrbs.forEach(orb=>{\r\n const speed = parseFloat(orb.dataset.parallax)||0.15;\r\n const r = orb.getBoundingClientRect();\r\n const delta = (r.top - window.innerHeight\/2) * speed * -0.4;\r\n orb.style.transform = `translate3d(0, ${delta}px, 0)`;\r\n });\r\n\r\n requestAnimationFrame(frame);\r\n}\r\nrequestAnimationFrame(frame);\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nivara \u2014 Come up for air nivara. ATTENTION, PROTECTED −240m The Undertow NIVARA — FOR ANDROID You didn’t chooseto disappear into the feed. Somewhere between one notification and the fortieth minute, the current took you under. Nivara watches for the exact moment scrolling turns into freefall — and pulls you back, before you even notice […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thenivara.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":16,"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/thenivara.app\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/thenivara.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}