/* Visual Lane — shared UI. The V wipe: leading edge is the logo V, always travelling downward, so leaving one page and arriving at the next reads as a single continuous sweep. ARRIVAL is a CSS-only pseudo-element driven by a class set in BEFORE first paint — a JS-created element would let the new page flash for a frame first. */ html.vl-wiping::before{ content:"";position:fixed;left:0;right:0;top:-15vh;height:130vh;z-index:200; background:var(--accent,#A04A3C);pointer-events:none; clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); transform:translateY(0); animation:vwipeLeave .62s cubic-bezier(.65,0,.35,1) forwards; } @keyframes vwipeLeave{from{transform:translateY(0)}to{transform:translateY(120%)}} /* EXIT: real element, created on click (page is already painted, so no flash risk) */ .vwipe{ position:fixed;left:0;right:0;top:-15vh;height:130vh;z-index:200; background:var(--accent,#A04A3C);pointer-events:none;will-change:transform; transform:translateY(-120%); clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); } .vwipe.enter{transition:transform .5s cubic-bezier(.65,0,.35,1);transform:translateY(0)} /* ===== cursor — quiet brand cue: terracotta dot, thin trailing ring with a small V ===== */ .vl-dot,.vl-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:210;border-radius:50%;opacity:0; transition:opacity .3s} .vl-dot{width:7px;height:7px;background:var(--accent,#A04A3C);transform:translate(-50%,-50%)} .vl-ring{width:34px;height:34px;border:1px solid rgba(244,244,242,.35);transform:translate(-50%,-50%); display:flex;align-items:center;justify-content:center; transition:width .3s cubic-bezier(.22,.8,.24,1),height .3s cubic-bezier(.22,.8,.24,1),border-color .3s,opacity .3s} .vl-ring::after{content:"";width:9px;height:9px;background:var(--accent,#A04A3C);opacity:.85; clip-path:polygon(2.1% 0.0%,10.6% 0.6%,49.6% 80.5%,53.2% 76.0%,89.4% 0.6%,97.9% 0.0%,100.0% 1.3%,100.0% 3.9%,53.2% 98.7%,51.8% 100.0%,48.2% 100.0%,46.1% 98.1%,0.0% 3.9%,0.0% 1.3%,1.4% 0.6%)} .vl-ring.hot{width:52px;height:52px;border-color:var(--accent,#A04A3C)} body.vl-cursor-on .vl-dot,body.vl-cursor-on .vl-ring{opacity:1} @media (pointer:coarse),(prefers-reduced-motion:reduce){.vl-dot,.vl-ring{display:none}} @media (prefers-reduced-motion:reduce){html.vl-wiping::before,.vwipe{display:none}} /* ===== V watermark on video surfaces ===== Applied in the page rather than burned into the files, so it sits identically over the local reel and over Vimeo embeds alike, and can be removed without re-encoding. Kept top-left: Vimeo's own controls live along the bottom edge. */ .vl-wm{position:absolute;top:16px;left:18px;z-index:4;pointer-events:none; width:20px;height:22px;background:#f4f4f2;opacity:.5; clip-path:polygon(2.1% 0.0%,10.6% 0.6%,49.6% 80.5%,53.2% 76.0%,89.4% 0.6%,97.9% 0.0%,100.0% 1.3%,100.0% 3.9%,53.2% 98.7%,51.8% 100.0%,48.2% 100.0%,46.1% 98.1%,0.0% 3.9%,0.0% 1.3%,1.4% 0.6%); filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));transition:opacity .4s} .vl-wm.sm{width:15px;height:16px;top:12px;left:13px;opacity:.42} .wcard:hover .vl-wm{opacity:.72} @media (max-width:640px){.vl-wm{width:16px;height:18px;top:12px;left:13px}}