/* =====================================================================
 * Lok-N-Blok — Motion layer
 *
 * Opt-in visual + animation enhancements, ported from the Claude Design v1
 * design-system.html. Any page that includes this CSS + lnb-motion.js gets:
 *
 *   .lnb-hero-canvas            3D interlocking-block hero background
 *   #lnbScrollProgress          1px gradient progress bar at top of page
 *   .lnb-reveal                 fade-up on scroll into view
 *   .count                      number counts from 0 to data-count target
 *   .lnb-btn-fx                 button gets ripple + magnetic hover + shine
 *   .lnb-spotlight              radial glow tracks mouse across surface
 *   #lnbAmbientCursor           soft green glow following the cursor
 *
 * No selectors here collide with existing page CSS — everything is
 * namespaced with .lnb-* or #lnb* or only touches elements the motion JS
 * explicitly tagged. Safe to drop onto any existing page.
 * ===================================================================== */

/* Respect reduced-motion preference everywhere. Every transition in this
 * file is gated on (prefers-reduced-motion: no-preference) EXCEPT the base
 * CSS (reveal hidden state stays hidden; JS reveals it instantly on load). */

/* ---------- 1. Scroll-reveal ---------- */
.lnb-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
             transform .7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity, transform;
}
.lnb-reveal.in{opacity:1;transform:translateY(0)}
.lnb-reveal.lnb-delay-1{transition-delay:.08s}
.lnb-reveal.lnb-delay-2{transition-delay:.16s}
.lnb-reveal.lnb-delay-3{transition-delay:.24s}
.lnb-reveal.lnb-delay-4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .lnb-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 2. Hero canvas ---------- */
.lnb-hero-canvas{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
  opacity:.75;
}
.lnb-hero-canvas canvas{
  width:100%;
  height:100%;
  display:block;
}
/* Scanline sheen — subtle gradient sweeps across every 6s */
.lnb-hero-sheen{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg, transparent 30%, rgba(110,232,154,.06) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:lnbHeroSheen 6s ease-in-out infinite;
  animation-delay:2s;
}
@keyframes lnbHeroSheen{
  0%,12%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
  62%,100%{transform:translateX(100%)}
}
@media (prefers-reduced-motion:reduce){
  .lnb-hero-sheen{animation:none;display:none}
}

/* ---------- 3. Scroll progress bar ---------- */
#lnbScrollProgress{
  position:fixed;top:0;left:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg, var(--g-400, #3dcc6e), var(--gold, #f0c35a));
  z-index:99998;
  pointer-events:none;
  transition:width .1s linear;
  box-shadow:0 0 12px rgba(61,204,110,.5);
}

/* ---------- 4. Button effects (ripple + shine) ---------- */
.lnb-btn-fx{
  position:relative;
  overflow:hidden;
  will-change:transform;
  isolation:isolate;
}
.lnb-btn-fx .lnb-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  pointer-events:none;
  transform:translate(-50%, -50%) scale(0);
  animation:lnbRipple .6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index:1;
}
@keyframes lnbRipple{
  to{transform:translate(-50%, -50%) scale(4); opacity:0}
}
/* Shine sweep on hover */
.lnb-btn-fx::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:0;
}
.lnb-btn-fx:hover::before{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){
  .lnb-btn-fx::before{display:none}
}

/* ---------- 5. Card spotlight (radial glow tracks mouse) ---------- */
.lnb-spotlight{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.lnb-spotlight::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(
    circle 280px at var(--mx, 50%) var(--my, 50%),
    rgba(110, 232, 154, .08),
    transparent 70%
  );
  opacity:0;
  transition:opacity .25s ease;
  z-index:0;
}
.lnb-spotlight:hover::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .lnb-spotlight::after{display:none}
}

/* ---------- 6. Ambient cursor (soft follow glow) ---------- */
#lnbAmbientCursor{
  position:fixed;
  left:0;top:0;
  width:300px;height:300px;
  margin-left:-150px;margin-top:-150px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(110, 232, 154, .08) 0%,
    rgba(110, 232, 154, .02) 40%,
    transparent 70%
  );
  pointer-events:none;
  z-index:99997;
  opacity:0;
  transition:opacity .3s ease;
  mix-blend-mode:screen;
}
#lnbAmbientCursor.on{opacity:1}
@media (prefers-reduced-motion:reduce), (hover:none){
  #lnbAmbientCursor{display:none}
}

/* ---------- 7. Count-up numbers — no visible hook needed (JS handles) ---------- */
.count{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum';
}