/* LoschaZ FX v3 – loaded with media="(min-width:1024px)". Everything visual is scoped to html.lzfx / #lzfx, which only fx.js creates
   (desktop + fine pointer + motion allowed + no Save-Data). The two at-rules below are inert on their own. */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fx-spin{to{--fx-a:360deg}}
@media (min-width:1024px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
#lzfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity 3s ease}
#lzfx.is-on{opacity:1}
#lzfx::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 95% at 50% 20%,#05070dad,#03040ae0 75%)}
#lzfx canvas{position:absolute;inset:0;width:100%;height:100%}
#lzfx.lzfx--aurora{-webkit-mask:linear-gradient(#000 0,#000 45%,#0006 100%);mask:linear-gradient(#000 0,#000 45%,#0006 100%)}
.lzfx-grid{position:absolute;inset:0;--g:40px;background:linear-gradient(#ffffff0b 1px,transparent 1px) 0 0/var(--g) var(--g),linear-gradient(90deg,#ffffff0b 1px,transparent 1px) 0 0/var(--g) var(--g);-webkit-mask:radial-gradient(120% 90% at 50% 0,#000 30%,#0000 85%);mask:radial-gradient(120% 90% at 50% 0,#000 30%,#0000 85%);opacity:var(--fx-dim)}
/* home hero: card stack on a table */
html.lzfx .home-mosaic.fx-3d{transform:perspective(1100px) rotateX(var(--fx-mrx,0)) rotateY(var(--fx-mry,0));will-change:transform}
html.lzfx .home-mosaic.fx-3d::after{content:"";position:absolute;inset:-3%;z-index:4;pointer-events:none;border-radius:2rem;background:radial-gradient(55% 50% at var(--fx-lx,50%) var(--fx-ly,50%),#ffffff1c,#0000 70%);mix-blend-mode:screen;-webkit-mask:radial-gradient(closest-side,#000 62%,#0000);mask:radial-gradient(closest-side,#000 62%,#0000)}

/* cards: gentle tilt + cursor glow */
html.lzfx .fx-tilt{transform:perspective(900px) rotateX(var(--fx-rx,0)) rotateY(var(--fx-ry,0)) translateY(-2px);transition:transform .7s cubic-bezier(.22,.61,.36,1),border-color .4s,box-shadow .6s;will-change:transform}
html.lzfx .fx-tilt:not(.fx-hot){transform:none}
html.lzfx .fx-ring,html.lzfx .fx-glow{position:relative}
html.lzfx .fx-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .7s;background:radial-gradient(420px circle at var(--fx-gx,50%) var(--fx-gy,50%),#c5f2751a,#0000 60%)}
html.lzfx .fx-glow.fx-hot::after{opacity:1}
html.lzfx .fx-tilt.fx-hot{box-shadow:var(--shadow-pop),0 26px 64px -30px #c5f27559}
/* running light border (cards + primary buttons) */
html.lzfx .fx-ring::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .6s;background:conic-gradient(from var(--fx-a),#c5f2751f 0 52%,#c5f275 68%,#70e5db 78%,#c5f2751f 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html.lzfx .lz-btn.fx-ring::before{inset:-1px;background:conic-gradient(from var(--fx-a),#fff0 0 50%,#fff 68%,#70e5db 80%,#fff0 94%)}
html.lzfx .fx-ring.fx-hot::before{opacity:1;animation:fx-spin 4.5s linear infinite}
html.lzfx .lz-btn--primary.fx-hot{box-shadow:0 0 0 1px #c5f27566,0 14px 40px -12px #c5f275a6}
/* scroll reveal + soft heading reveal (blur → sharp, rise) */
html.lzfx .fx-hd{opacity:0;transform:translateY(14px);filter:blur(8px);transition:opacity 1.3s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1),filter 1.3s cubic-bezier(.22,1,.36,1)}
html.lzfx .fx-hd.fx-in{opacity:1;transform:none;filter:none}
html.lzfx .fx-rv{opacity:0;transform:translateY(16px);transition:opacity 1.2s cubic-bezier(.22,1,.36,1) var(--fx-d,0ms),transform 1.2s cubic-bezier(.22,1,.36,1) var(--fx-d,0ms)}
html.lzfx .fx-rv.fx-in{opacity:1;transform:none}
html.lzfx .fx-rv.fx-in.fx-tilt.fx-hot{transform:perspective(900px) rotateX(var(--fx-rx,0)) rotateY(var(--fx-ry,0)) translateY(-2px);transition-delay:0ms}
}