/* ============================================================
   LAMPWORK — Sitewide Motion Layer v1 (all pages except home)
   ============================================================ */
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .03; mix-blend-mode: overlay;
  animation: grainShift 0.9s steps(2) infinite;
}
@keyframes grainShift { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1.5%)} 50%{transform:translate(1.5%,-2%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(2%,2%)} }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 95; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), #ff8a5c);
  transform-origin: 0 50%; transform: scaleX(0);
}

.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); margin: -3px 0 0 -3px; }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(255,90,38,.5); transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s, background .3s; }
.cursor-ring.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: rgba(255,90,38,.9); background: rgba(255,90,38,.08); }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* nav smart-hide */
.nav { transition: transform .45s var(--ease), background .3s, border-color .3s; }
.nav.nav-hidden { transform: translateY(-110%); }

/* tilt targets */
.card, .post-card { transform-style: preserve-3d; will-change: transform; }
.post-card { overflow: hidden; }
.post-card .post-img { will-change: transform; transition: none; }

/* image curtain reveal */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after { content:''; position:absolute; inset:0; background: var(--bg); transform-origin: 100% 50%; transform: scaleX(1); }
.img-reveal.revealed::after { transition: transform 1s cubic-bezier(.76,0,.24,1); transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none !important; display: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .nav.nav-hidden { transform: none; }
}

/* ============ v2: scroll + header + scrollbar fixes ============ */

/* Official Lenis CSS — kills the fight with html{scroll-behavior:smooth} */
html.lenis, .lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ticker bar hides together with nav */
.ticker-bar { transition: transform .45s var(--ease); }
.ticker-bar.nav-hidden { transform: translateY(-110px); }

/* readable dark scrollbar */
html { scrollbar-width: thin; scrollbar-color: #38383b #0a0a0b; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a0a0b; }
::-webkit-scrollbar-thumb { background: #2e2e31; border-radius: 6px; border: 2px solid #0a0a0b; }
::-webkit-scrollbar-thumb:hover { background: #ff5a26; }

/* clearer progress bar */
.scroll-progress { height: 3px; box-shadow: 0 0 12px rgba(255,90,38,.55); }

/* ============ v3: human-verification widget ============ */
.lw-verify {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; padding: 14px 16px; max-width: 400px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--bg-elev); cursor: pointer; user-select: none;
  transition: border-color .3s;
}
.lw-verify:hover { border-color: rgba(255,90,38,.5); }
.lwv-box { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.03); position: relative; flex-shrink: 0; transition: background .3s, border-color .3s; }
.lw-verify.working .lwv-box::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: lwvSpin .7s linear infinite; }
@keyframes lwvSpin { to { transform: rotate(360deg); } }
.lw-verify.done { cursor: default; }
.lw-verify.done .lwv-box { background: var(--accent); border-color: var(--accent); }
.lw-verify.done .lwv-box::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #0a0a0b; font-weight: 700; font-size: 14px; }
.lwv-label { font-size: .85rem; color: var(--text-dim); }
.lw-verify.done .lwv-label { color: var(--text); }
.lwv-brand { margin-left: auto; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .18em; color: var(--text-faint); white-space: nowrap; }
button.lwv-locked, .btn.lwv-locked { opacity: .45; pointer-events: none; }