/* =========================================================================
   SITE BUILDER — REUSABLE EFFECTS TOOLKIT · effects.css
   Brand-agnostic, token-driven premium scroll/UI effects.
   Built from the We Die Rich site (2026-06-14). Drop into any project:
     1) define the tokens below in your own :root (or override),
     2) include effects.css + effects.js,
     3) add the HTML hooks from EFFECTS-LIBRARY.md.
   Everything degrades cleanly under prefers-reduced-motion.
   ========================================================================= */

/* ---- TOKENS (override per brand) ---- */
:root{
  --canvas:#0A0A0A; --ink:#F5F2EA; --accent:#2E7D52; --accent-text:#359A5E;
  --ash:#8A8A8A; --line:#222; --card-bg:#0E0E0E;
  --accent-soft:rgba(46,125,82,.16); --accent-glow:rgba(46,125,82,.40);
  --nav-bg:rgba(10,10,10,.72);
  --display:Georgia,serif; --sans:system-ui,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,monospace;
  --wrap:1120px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---- SCROLL-REVEAL (fade + lift + blur) ---- */
.reveal{opacity:0;transform:translateY(26px) scale(.992);filter:blur(7px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s ease}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ---- CLIP-WIPE REVEAL (horizontal) ---- */
.cmask{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.16,1,.3,1)}
.cmask.in{clip-path:inset(0 0 0 0)}

/* ---- ACCENT UNDERLINE DRAW (opt-in, use sparingly) ---- */
.u-draw{background-image:linear-gradient(var(--accent),var(--accent));background-position:0 94%;
  background-repeat:no-repeat;background-size:0 2px}
.reveal.in .u-draw{animation:draw 1.1s .35s cubic-bezier(.16,1,.3,1) forwards}
@keyframes draw{to{background-size:100% 2px}}

/* ---- TOP SCROLL PROGRESS BAR ---- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}

/* ---- CORNER TYPEWRITER SECTION COUNTER ---- */
.counter{position:fixed;top:84px;left:24px;z-index:40;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ash);pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .5s ease}
.counter.show{opacity:.85}
.counter .caret{color:var(--accent);font-weight:600;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ---- STICKY NAV: bg-on-scroll + hide-on-scroll-down ---- */
header.nav{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
header.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
header.nav.nav-hidden{transform:translateY(-104%)}

/* ---- STICKY BOTTOM CONVERSION BAR ---- */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--nav-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bottombar.show{transform:none}

/* ---- HERO: cursor spotlight + parallax ghost + grain ---- */
.hero{position:relative;overflow:hidden}
.cursor-glow{position:absolute;left:0;top:0;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 60%);
  transform:translate3d(var(--gx,-300px),var(--gy,-300px),0);margin:-280px 0 0 -280px;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease;filter:blur(20px)}
.cursor-glow.on{opacity:.55}
.hero-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);
  font-weight:700;font-size:34vw;letter-spacing:-.05em;line-height:1;color:var(--ink);opacity:.035;
  white-space:nowrap;z-index:0;pointer-events:none;user-select:none}
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- KINETIC WORD REVEAL (hero headline) ---- */
.kin{display:flex;flex-direction:column;gap:.02em}
.kin-line{overflow:hidden;line-height:.96}
.kin-word{display:inline-block;overflow:hidden;vertical-align:top}
.kin-word>i{display:inline-block;font-style:inherit;transform:translateY(115%);
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.kin.in .kin-word>i{transform:none}

/* ---- MAGNETIC BUTTON (JS drives transform) ---- */
.magnetic{will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .25s,border-color .25s,color .25s}

/* ---- SLOGAN MARQUEE ---- */
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scrollx 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- FULL-SCREEN SCROLL-SNAP PANELS ---- */
body.snap{scroll-snap-type:y proximity}
.snap-panel{min-height:100svh;display:flex;align-items:center;scroll-snap-align:center;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;padding:80px 0}
.snap-panel .pindex{position:absolute;left:50%;top:8%;transform:translateX(-50%);font-family:var(--display);
  font-weight:700;font-size:34vw;line-height:1;color:var(--ink);opacity:.04;pointer-events:none;z-index:0;will-change:transform}

/* ---- VERTICAL-SCROLL-DRIVEN HORIZONTAL TRACK ---- */
.htrack-sec{position:relative}
.htrack-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.htrack-sec.driven .htrack-sticky{overflow:hidden}
.htrack{display:flex;gap:28px;padding:0 6vw;will-change:transform}

/* ---- COUNT-UP ODOMETER + breathing aura ---- */
.aura{position:relative;overflow:hidden}
.aura::before{content:"";position:absolute;left:50%;top:42%;width:70vw;height:70vw;max-width:760px;max-height:760px;
  transform:translate(-50%,-50%);background:radial-gradient(circle,var(--accent-soft) 0%,transparent 62%);
  pointer-events:none;z-index:0;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.odo{font-family:var(--display);font-weight:600;font-size:clamp(4.5rem,18vw,13rem);line-height:1;color:var(--ink)}

/* ---- MANIFESTO STICKY SCROLLYTELLING (big morphing number + dots) ---- */
.mf-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.mf-bignum{font-family:var(--display);font-weight:600;font-size:clamp(5rem,18vw,13rem);line-height:.82;color:var(--accent);opacity:.18}
.mf-step{min-height:78svh;display:flex;flex-direction:column;justify-content:center}
.mf-dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px}
.mf-dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--ash);background:transparent;cursor:pointer;padding:0;transition:.3s}
.mf-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}

/* ---- SECTION HAIRLINE DRAW-IN ---- */
.block{position:relative}
.block::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--accent);opacity:.6;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.block.line-in::before{width:64px}

/* ---- THEME TOGGLE base (data-theme on <html>) ---- */
:root[data-theme="light"] .theme-toggle .label-light{display:none}
:root[data-theme="dark"]  .theme-toggle .label-dark{display:none}

/* ---- ACCESSIBILITY: visible focus + reduced motion ---- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none;filter:none}
  .cmask{clip-path:none}
  .u-draw{background-size:100% 2px}
  .cursor-glow,.hero-ghost{display:none}
  header.nav.nav-hidden{transform:none}
  body.snap{scroll-snap-type:none}
  .mf-sticky{position:static;height:auto}
  .aura::before{animation:none}
  .htrack-sticky{position:static;height:auto;overflow-x:auto}
  .block::before{width:64px;transition:none}
  .counter{opacity:.85}
}