/* =========================================================================
   XenSupport — home-fx : la vitrine du hero devient un HOLOGRAMME VIVANT.
   Chargé uniquement sur la home. Léger, GPU only, gaté reduced-motion/tactile
   (la fenêtre garde son animation CSS de base si l'effet n'est pas activé).
   ========================================================================= */
.hero-window.is-live{animation:none;will-change:transform}
.hero-window.is-live .hw-grid{will-change:transform}
/* reflet qui glisse sur le verre, piloté par le curseur (--gx/--gy) */
.hero-window.is-live::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
    background:radial-gradient(260px circle at var(--gx,50%) var(--gy,38%), rgba(255,206,150,.22), transparent 62%);
    mix-blend-mode:screen;
}
/* halo réactif sous la fenêtre */
.hero-showcase.is-live .hero-showcase-glow{will-change:transform,opacity;transition:opacity .4s ease}

/* ── « encore » : cartes du catalogue qui surgissent + boot « power-on » ── */
.hero-window.is-live .hw-card{position:relative;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease}
.hero-window.is-live .hw-grid:hover .hw-card{filter:brightness(.82) saturate(.92)}
.hero-window.is-live .hw-grid .hw-card:hover{transform:translateY(-7px) scale(1.07);filter:brightness(1.12) saturate(1.05);box-shadow:0 16px 34px -10px rgba(255,122,24,.6),0 0 0 1px rgba(255,154,77,.45);z-index:3}
.hero-window .hw-scan{position:absolute;left:0;right:0;top:0;height:42%;z-index:5;pointer-events:none;opacity:0;border-radius:inherit;background:linear-gradient(180deg,transparent,rgba(255,180,110,.15) 58%,rgba(255,255,255,.26));mix-blend-mode:screen}
.hero-window.is-booting .hw-scan{animation:hwScan 1.05s cubic-bezier(.5,0,.3,1) forwards}
@keyframes hwScan{0%{opacity:0;transform:translateY(-110%)}14%{opacity:1}100%{opacity:0;transform:translateY(300%)}}

/* ── reveal 3D « déploiement » spectaculaire (cartes des grilles uniquement) ── */
html.xs-reveal [data-animate] [class*="-grid"] > .xs-rev,
html.xs-reveal [data-animate] [class*="-cards"] > .xs-rev,
html.xs-reveal [data-animate] .grid > .xs-rev,
html.xs-reveal [data-animate] .steps > .xs-rev{
    transform:perspective(1300px) rotateX(40deg) translateY(58px) scale(.91);
    filter:blur(10px);
    transition-delay:calc(var(--xs-i,0) * 120ms);
}
html.xs-reveal [data-animate].xs-in [class*="-grid"] > .xs-rev,
html.xs-reveal [data-animate].xs-in [class*="-cards"] > .xs-rev,
html.xs-reveal [data-animate].xs-in .grid > .xs-rev,
html.xs-reveal [data-animate].xs-in .steps > .xs-rev{
    transform:perspective(1300px) rotateX(0) translateY(0) scale(1);
    filter:blur(0);
}

/* ── récompense au clic des CTA : shockwave + étincelles orange ── */
.xs-reward-ring{position:fixed;z-index:9998;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;border:2px solid rgba(255,138,43,.85);animation:xsRewardRing .6s ease-out forwards}
@keyframes xsRewardRing{from{transform:scale(.4);opacity:.9}to{transform:scale(7);opacity:0}}
.xs-reward-spark{position:fixed;z-index:9998;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:2px;pointer-events:none;background:linear-gradient(135deg,#ffd6a0,#ff6a00);box-shadow:0 0 6px rgba(255,138,43,.6);animation:xsRewardSpark .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes xsRewardSpark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--ex,0),calc(var(--ey,0) + 28px)) scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.xs-reward-ring,.xs-reward-spark{display:none}}