:root {
  --ink: oklch(0.18 0.035 275); --lilac: oklch(0.82 0.1 305);
  --pink: oklch(0.8 0.14 355); --peach: oklch(0.84 0.12 55);
  --mint: oklch(0.84 0.1 165); --blue: oklch(0.76 0.12 235);
  --lemon: oklch(0.92 0.12 100); --paper: oklch(0.94 0.025 90);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.ncvh-stage { --pointer-x:50%; --pointer-y:50%; position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; background:linear-gradient(135deg,var(--paper) 0 49.8%,transparent 50.2%),linear-gradient(315deg,var(--lilac) 0 49.8%,var(--blue) 50.2%); }
.ncvh-stage::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:7; box-shadow:inset 0 0 0 clamp(10px,1.5vw,22px) var(--ink); }
.ncvh-grid { position:absolute; inset:0; opacity:.32; pointer-events:none; background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px); background-size:42px 42px; animation:grid-drift 18s linear infinite; }
.ncvh-cursor-glow { position:absolute; left:var(--pointer-x); top:var(--pointer-y); width:min(48rem,80vw); aspect-ratio:1; border-radius:9999px; pointer-events:none; background:radial-gradient(circle,var(--lemon) 0%,transparent 64%); mix-blend-mode:soft-light; opacity:.8; transform:translate(-50%,-50%); transition:left 180ms ease-out,top 180ms ease-out; }
.ncvh-orbit { position:absolute; left:50%; top:50%; border:clamp(10px,1.5vw,20px) solid var(--ink); border-radius:50%; pointer-events:none; }
.ncvh-orbit-one { width:min(76vw,62rem); aspect-ratio:1; border-color:var(--pink) var(--ink) var(--lemon) var(--ink); animation:orbit 24s linear infinite; }
.ncvh-orbit-two { width:min(55vw,42rem); aspect-ratio:1; border-width:2px; animation:orbit-reverse 17s linear infinite; }
.ncvh-shape { position:absolute; z-index:1; pointer-events:none; border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); }
.ncvh-shape-circle { width:clamp(5rem,12vw,10rem); aspect-ratio:1; top:10%; left:8%; border-radius:50%; background:var(--peach); animation:float 7s ease-in-out infinite; }
.ncvh-shape-square { width:clamp(4rem,9vw,8rem); aspect-ratio:1; right:10%; bottom:12%; background:var(--mint); transform:rotate(14deg); animation:wobble 9s ease-in-out infinite; }
.ncvh-shape-pill { width:clamp(4rem,7vw,6rem); height:clamp(8rem,16vw,13rem); right:9%; top:8%; border-radius:999px; background:repeating-linear-gradient(45deg,var(--lilac) 0 12px,var(--pink) 12px 24px); animation:float 8s ease-in-out infinite reverse; }
.ncvh-lockup { position:relative; display:flex; flex-direction:column; align-items:center; will-change:transform; z-index:4; animation:stage-in 1.2s cubic-bezier(.16,1,.3,1) both; }
.ncvh-word { display:flex; margin:0; font-size:clamp(4rem,18vw,14rem); font-weight:800; line-height:1; letter-spacing:0; color:var(--paper); -webkit-text-stroke:clamp(3px,.65vw,9px) var(--ink); paint-order:stroke fill; filter:drop-shadow(clamp(6px,1.2vw,16px) clamp(6px,1.2vw,16px) 0 var(--pink)); user-select:none; }
.ncvh-letter { display:inline-block; opacity:0; animation:letter-in 1.3s cubic-bezier(.16,1,.3,1) forwards; will-change:transform,filter,opacity; }
.ncvh-letter:nth-child(1){color:var(--lemon)} .ncvh-letter:nth-child(2){color:var(--mint)} .ncvh-letter:nth-child(3){color:var(--peach)} .ncvh-letter:nth-child(4){color:var(--lilac)}
.ncvh-underline { width:74%; height:clamp(10px,1.5vw,20px); margin-top:clamp(1rem,2vw,2rem); border:3px solid var(--ink); background:repeating-linear-gradient(90deg,var(--pink) 0 14%,var(--lemon) 14% 28%,var(--mint) 28% 42%,var(--blue) 42% 56%); box-shadow:7px 7px 0 var(--ink); animation:stripe 9s linear infinite; }
@keyframes letter-in { from{opacity:0;transform:translateY(.32em) scale(1.05);filter:blur(22px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes stage-in { from{opacity:0} to{opacity:1} }
@keyframes grid-drift { to{background-position:42px 42px} }
@keyframes orbit { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes orbit-reverse { from{transform:translate(-50%,-50%) rotate(360deg)} to{transform:translate(-50%,-50%) rotate(0)} }
@keyframes float { 50%{transform:translateY(22px) rotate(7deg)} }
@keyframes wobble { 50%{transform:rotate(-12deg) translateY(-18px)} }
@keyframes stripe { to{background-position:16rem 0} }
@media (prefers-reduced-motion:reduce) { .ncvh-letter,.ncvh-lockup,.ncvh-grid,.ncvh-orbit,.ncvh-shape,.ncvh-underline{animation:none}.ncvh-letter{opacity:1;transform:none;filter:none}.ncvh-orbit{transform:translate(-50%,-50%)} }
@media (max-width:640px) { .ncvh-shape-pill{right:4%;top:7%}.ncvh-shape-circle{left:6%;top:14%}.ncvh-shape-square{right:8%;bottom:15%}.ncvh-word{font-size:clamp(3.8rem,21vw,8rem)} }