/* New Tech "alive" layer: premium micro-motion on top of luxe.css. Transform/opacity only (GPU), no layout shift.
   Everything is gated on html.nt-motion (set by nt-motion.js only when reduced motion is off) and stops under html.nt-paused. */
:root{--al-gold:#f5c542;--al-gold2:#ffe08a;--al-ease:cubic-bezier(.22,.8,.24,1)}

/* Header: glow + gentle shrink after scrolling */
header.site{transition:box-shadow .4s var(--al-ease),background-color .4s var(--al-ease)}
html.nt-motion header.site .logo-box,html.nt-motion header.site .logo-svg{transition:transform .4s var(--al-ease);transform-origin:left center}
html.al-scrolled header.site{box-shadow:0 10px 30px -14px rgba(0,0,0,.75),0 1px 0 rgba(245,197,66,.28),0 0 26px -6px rgba(245,197,66,.22)}
html.nt-motion.al-scrolled header.site .logo-box,html.nt-motion.al-scrolled header.site .logo-svg{transform:scale(.9)}

/* Nav underline glide */
header.site nav.main a{position:relative}
header.site nav.main a::after{content:"";position:absolute;left:12%;right:12%;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--al-gold),transparent);transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .35s var(--al-ease),opacity .35s;pointer-events:none}
header.site nav.main a:hover::after,header.site nav.main a:focus-visible::after,header.site nav.main a[aria-current]::after{transform:scaleX(1);opacity:1}

/* Rewards dot pulse */
html.nt-motion .nt-hdr-dot{animation:al-dot 2.4s ease-in-out infinite}
@keyframes al-dot{0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,.55)}50%{box-shadow:0 0 0 6px rgba(245,197,66,0)}}

/* Buttons: shine sweep + press depth */
.btn,.gcat-chip{position:relative;overflow:hidden;isolation:isolate}
html.nt-motion .btn{transition:transform .18s var(--al-ease),box-shadow .25s var(--al-ease),filter .25s}
html.nt-motion .btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,240,190,.38) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
html.nt-motion .btn:hover::before,html.nt-motion .btn:focus-visible::before,html.nt-motion a:hover>.btn::before{transition:transform .75s var(--al-ease);transform:translateX(120%)}
html.nt-motion .btn:hover{box-shadow:0 8px 22px -10px rgba(245,197,66,.55)}
html.nt-motion .btn:active{transform:translateY(2px) scale(.98);filter:brightness(.95)}

/* Tap ripple */
.al-rip{position:absolute;z-index:-1;border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;background:radial-gradient(circle,rgba(255,230,160,.55),rgba(255,230,160,0) 70%);transform:scale(0);opacity:1;pointer-events:none;animation:al-rip .6s var(--al-ease) forwards}
@keyframes al-rip{to{transform:scale(22);opacity:0}}

/* Card 3D tilt + glow (JS sets --rx/--ry/--mx/--my on fine pointers only) */
html.nt-motion .al-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .5s var(--al-ease),box-shadow .4s var(--al-ease);will-change:auto}
html.nt-motion .al-tilt.al-on{transition:transform .12s linear,box-shadow .4s var(--al-ease);will-change:transform;box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(245,197,66,.35),0 0 30px -8px rgba(245,197,66,.3)}
.al-tilt{position:relative}
.al-tilt>.al-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,228,150,.16),transparent 45%);z-index:2}
.al-tilt.al-on>.al-glare{opacity:1}

/* Scroll reveal stagger for cards inside grids */
html.nt-motion .al-st{opacity:0;transform:translateY(18px);transition:opacity .7s var(--al-ease),transform .7s var(--al-ease);transition-delay:var(--al-d,0ms)}
html.nt-motion .al-st.al-in{opacity:1;transform:none}
html.nt-paused .al-st{opacity:1!important;transform:none!important}

/* Home hero: parallax + floating glints */
html.nt-motion .x-hero .x-stage{transform:translate3d(0,var(--al-py,0px),0)}
html.nt-motion .x-hero .x-orb{translate:0 var(--al-po,0px)}
html.nt-motion .x-pill{animation:al-float 7s ease-in-out infinite}
html.nt-motion .x-pill.x-p2{animation-delay:-3.5s}
@keyframes al-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.al-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.al-motes i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#fff3c4,rgba(245,197,66,.6) 45%,transparent 70%);opacity:0}
html.nt-motion .al-motes i{animation:al-mote var(--t,14s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes al-mote{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.85}85%{opacity:.5}100%{transform:translate3d(var(--dx,20px),-110vh,0);opacity:0}}
.x-hero{position:relative}
.x-hero>.al-sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
html.nt-motion .x-hero>.al-sweep::before{content:"";position:absolute;top:-50%;bottom:-50%;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,226,140,.07),transparent);transform:skewX(-14deg);animation:al-sweep 11s ease-in-out infinite}
@keyframes al-sweep{0%,55%{left:-40%}100%{left:120%}}

/* Page hero glow (non-home pages) */
html.nt-motion .nt-pagehero{position:relative}
html.nt-motion .nt-pagehero h1{background:linear-gradient(100deg,currentColor 40%,var(--al-gold2) 50%,currentColor 60%) 0 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;animation:al-h1 9s ease-in-out infinite}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){html.nt-motion .nt-pagehero h1{background:none;animation:none}}
@keyframes al-h1{0%,70%{background-position:100% 0}100%{background-position:-50% 0}}

/* Games hub: chips + challenge shimmer + card art */
html.nt-motion .gcat-chip{transition:transform .25s var(--al-ease),background-color .3s,box-shadow .3s}
html.nt-motion .gcat-chip:hover{transform:translateY(-2px)}
html.nt-motion .gcat-chip[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(245,197,66,.5),0 6px 18px -8px rgba(245,197,66,.6)}
html.nt-motion .gcat-chip svg{transition:transform .4s var(--al-ease)}
html.nt-motion .gcat-chip:hover svg{transform:rotate(-8deg) scale(1.12)}
html.nt-motion .gcat-ic svg,html.nt-motion .h-pi,html.nt-motion .x-ic{transition:transform .5s var(--al-ease)}
html.nt-motion .gcat-h:hover .gcat-ic svg,html.nt-motion .x-tile:hover .x-ic,html.nt-motion .h-tile:hover .h-pi{transform:translateY(-3px) rotate(-6deg)}
#wk-challenges{position:relative}
html.nt-motion #wk-challenges:not(:empty)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,228,150,.09) 50%,transparent 70%) 0 0/250% 100% no-repeat;animation:al-shim 4.5s ease-in-out infinite}
@keyframes al-shim{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.game-card .gc-art{transition:transform .7s var(--al-ease),filter .5s}
html.nt-motion .game-card:hover .gc-art{transform:scale(1.045);filter:saturate(1.12) brightness(1.05)}
.game-card{overflow:hidden}

/* Balance pulse when a number changes */
html.nt-motion .al-pulse{display:inline-block;animation:al-pulse .9s var(--al-ease)}
@keyframes al-pulse{0%{transform:scale(1);text-shadow:none}35%{transform:scale(1.18);text-shadow:0 0 14px rgba(245,197,66,.9)}100%{transform:scale(1);text-shadow:none}}

/* Footer: animated gold divider */
footer.site{position:relative}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(245,197,66,.25) 20%,var(--al-gold2) 50%,rgba(245,197,66,.25) 80%,transparent) 0 0/200% 100%}
html.nt-motion footer.site::before{animation:al-div 8s linear infinite}
@keyframes al-div{to{background-position:-200% 0}}

/* Pause everything when the user pauses or the tab is hidden */
html.nt-paused .al-motes i,html.nt-paused .x-pill,html.al-hidden .al-motes i,html.al-hidden .x-pill,html.nt-paused .x-hero>.al-sweep::before,html.nt-paused footer.site::before,html.al-hidden footer.site::before,html.nt-paused .nt-pagehero h1,html.nt-paused #wk-challenges::after,html.al-hidden #wk-challenges::after,html.nt-paused .nt-hdr-dot{animation-play-state:paused!important}

/* Game pages: no ambient extras in or near the play area */
html[data-lx="game"] .al-motes,html[data-lx="game"] .al-sweep{display:none}

@media (prefers-reduced-motion:reduce){.al-motes,.al-rip,.al-glare{display:none!important}.al-st{opacity:1!important;transform:none!important}.al-tilt{transform:none!important}}