/* Website Deals - luxe.css : premium motion + polish primitives, safe on every page.
   Everything here is progressive: without JS nothing is hidden. Admin can switch each effect off. */
:root{--wd-ease:cubic-bezier(.22,.61,.36,1);--wd-ease-out:cubic-bezier(.16,1,.3,1);--wd-speed:1}
html{scroll-behavior:smooth}
::selection{background:var(--lime,#b7ff00);color:var(--on-accent,#0b0d0c)}
html{scrollbar-color:rgba(255,255,255,.18) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:var(--lime,#b7ff00);background-clip:content-box}

/* scroll progress */
.wd-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--lime,#b7ff00),#fff 60%,var(--lime,#b7ff00));box-shadow:0 0 14px var(--lime,#b7ff00)}
html.fx-no-progress .wd-progress{display:none}

/* film grain */
.wd-grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9990;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:wdGrain 1.2s steps(6) infinite}
@keyframes wdGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
html.fx-no-grain .wd-grain{display:none}

/* scroll reveal (only armed by JS on below-the-fold elements) */
.wd-pre{opacity:0;transform:translate3d(0,34px,0);transition:opacity calc(.9s / var(--wd-speed)) var(--wd-ease-out),transform calc(1s / var(--wd-speed)) var(--wd-ease-out),filter calc(.9s / var(--wd-speed)) var(--wd-ease-out);transition-delay:var(--d,0s);will-change:opacity,transform}
.wd-pre[data-reveal="left"]{transform:translate3d(-48px,0,0)}.wd-pre[data-reveal="right"]{transform:translate3d(48px,0,0)}
.wd-pre[data-reveal="zoom"]{transform:scale(.92)}.wd-pre[data-reveal="blur"]{transform:translate3d(0,20px,0);filter:blur(14px)}
.wd-pre.wd-in{opacity:1;transform:none;filter:none}
html.fx-no-reveal .wd-pre{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}


html.wd-fx:not(.wd-fx-ready) [data-split]:not(.wd-split){opacity:0}
.wd-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wd-split .w>i{display:inline-block;font-style:inherit;transform:translate3d(0,110%,0) rotate(4deg);transition:transform calc(1.1s / var(--wd-speed)) var(--wd-ease-out);transition-delay:calc(var(--i,0) * .055s + .1s)}
.wd-split.wd-in .w>i{transform:none}
html.fx-no-reveal .wd-split .w>i{transform:none!important;transition:none!important}

/* marquee (infinite text scroll) */
.wd-marquee{position:relative;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wd-marquee-track{display:inline-flex;align-items:center;gap:0;min-width:100%;animation:wdMarquee calc(var(--mq,40s) / var(--wd-speed)) linear infinite;will-change:transform}
.wd-marquee.rev .wd-marquee-track{animation-direction:reverse}
.wd-marquee:hover .wd-marquee-track{animation-play-state:paused}
.wd-marquee-track>*{flex:none}
@keyframes wdMarquee{to{transform:translate3d(-50%,0,0)}}
html.fx-no-marquee .wd-marquee{-webkit-mask-image:none;mask-image:none;white-space:normal}
html.fx-no-marquee .wd-marquee-track{animation:none;flex-wrap:wrap;justify-content:center}
html.fx-no-marquee .wd-marquee-track [aria-hidden="true"]{display:none}

/* spotlight cards: glow follows the pointer */
.wd-spot{position:relative;isolation:isolate}
.wd-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb,183,255,0),.16),transparent 55%)}
.wd-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb,183,255,0),.75),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.wd-spot:hover::before,.wd-spot:hover::after{opacity:1}
html.fx-no-spotlight .wd-spot::before,html.fx-no-spotlight .wd-spot::after{display:none}

/* magnetic buttons + soft lift */
.wd-mag{transition:transform .35s var(--wd-ease-out)}

/* cursor glow (optional) */
.wd-cursor{position:fixed;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;z-index:9980;opacity:0;
  background:radial-gradient(circle,rgba(var(--accent-rgb,183,255,0),.12),transparent 62%);transition:opacity .4s;mix-blend-mode:screen}
html.fx-on-cursor .wd-cursor.on{opacity:1}
@media (hover:none){.wd-cursor{display:none}}

/* parallax helper */
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .wd-grain,.wd-marquee-track{animation:none!important}
  .wd-pre,.wd-split .w>i{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}
