/* ═══════════════════════════════════════════════════════════════════════
   TIKLIVE // COUCHE « VIVANTE » — 2026-09-01

   POURQUOI CE FICHIER : la page etait juste. Elle etait aussi immobile — le
   champ d'etoiles mis a part, tout ce qui se trouvait sous le heros ne bougeait
   plus d'un pixel. Cette couche ajoute le mouvement de fond (aurores, grille
   d'horizon, cometes) et les reactions au curseur, SANS toucher a la mise en
   page ni aux couleurs : rose #ff2d6b, cyan #25f4ee, fonds #07080c / #0e1118.

   Ou elle se place : chargee APRES hud.css, donc elle gagne a specificite
   egale. Elle n'ecrase rien volontairement — elle n'ajoute que des couches
   decoratives et des etats de survol.

   Regle tenue partout : `prefers-reduced-motion` REDUIT le mouvement au lieu
   de le supprimer (bloc unique en fin de fichier — lire son commentaire avant
   d'y toucher), et aucune de ces couches n'intercepte le curseur.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═════════ 1. AURORES ═════════
   Trois nappes de couleur enormes et tres diluees qui derivent lentement
   derriere toute la page. C'est ce qui empeche les sections du bas d'etre du
   noir plat : meme immobile, l'oeil percoit une lumiere qui respire.
   `filter:blur()` sur un element fixe est compose par le GPU une seule fois,
   il n'est pas recalcule au defilement. */
.tlx-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.tlx-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
    will-change:transform}
.tlx-aurora .a1{width:52vw;height:52vw;left:-12vw;top:-10vw;
    background:radial-gradient(circle,rgba(255,45,107,.20),transparent 66%);
    animation:tlxAur1 34s ease-in-out infinite}
.tlx-aurora .a2{width:46vw;height:46vw;right:-10vw;top:26vh;
    background:radial-gradient(circle,rgba(37,244,238,.15),transparent 66%);
    animation:tlxAur2 41s ease-in-out infinite}
.tlx-aurora .a3{width:60vw;height:60vw;left:18vw;bottom:-28vw;
    background:radial-gradient(circle,rgba(120,90,255,.14),transparent 66%);
    animation:tlxAur3 47s ease-in-out infinite}
@keyframes tlxAur1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.16)}}
@keyframes tlxAur2{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(-8vw,-9vh,0) scale(.92)}}
@keyframes tlxAur3{0%,100%{transform:translate3d(0,0,0) scale(.96)}50%{transform:translate3d(-11vw,-6vh,0) scale(1.14)}}

/* ═════════ 2. GRILLE D'HORIZON ═════════
   Le sol en perspective qui file vers le fond de l'ecran. Il donne une
   direction et une vitesse au decor — l'element qui manquait le plus.
   Pose en bas de la fenetre, masque en fondu vers le haut pour ne jamais
   entrer en concurrence avec le texte. */
.tlx-horizon{position:fixed;left:0;right:0;bottom:0;height:44vh;z-index:0;pointer-events:none;
    overflow:hidden;perspective:220px;perspective-origin:50% 0%;
    -webkit-mask:linear-gradient(180deg,transparent,#000 62%);
            mask:linear-gradient(180deg,transparent,#000 62%)}
.tlx-horizon i{position:absolute;left:-50%;right:-50%;top:0;height:280%;display:block;
    transform:rotateX(76deg);transform-origin:50% 0%;
    background-image:
        linear-gradient(90deg,rgba(255,45,107,.16) 1px,transparent 1px),
        linear-gradient(180deg,rgba(37,244,238,.14) 1px,transparent 1px);
    background-size:76px 76px;
    animation:tlxHorizon 5.5s linear infinite;
    will-change:background-position}
@keyframes tlxHorizon{to{background-position:0 76px,0 76px}}

/* ═════════ 3. COMETES ═════════
   Trois trainees qui traversent l'ecran a intervalles longs et irreguliers.
   Volontairement rares : une comete toutes les quelques secondes surprend,
   une toutes les demi-secondes fait sapin de Noel. */
.tlx-comets{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.tlx-comets i{position:absolute;width:190px;height:1.5px;border-radius:2px;opacity:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 62%,#fff);
    box-shadow:0 0 10px rgba(255,255,255,.55);
    transform:rotate(22deg);will-change:transform,opacity}
.tlx-comets .c1{top:12%;left:-220px;animation:tlxComet 9s linear infinite;animation-delay:1.5s}
.tlx-comets .c2{top:38%;left:-220px;animation:tlxComet 13s linear infinite;animation-delay:6s;
    background:linear-gradient(90deg,transparent,rgba(255,45,107,.8) 62%,#ff85a8)}
.tlx-comets .c3{top:66%;left:-220px;animation:tlxComet 17s linear infinite;animation-delay:11s;
    background:linear-gradient(90deg,transparent,rgba(37,244,238,.8) 62%,#9ffffb)}
@keyframes tlxComet{
    0%{transform:translate3d(0,0,0) rotate(22deg);opacity:0}
    4%{opacity:1}
    17%{opacity:1}
    22%{opacity:0}
    100%{transform:translate3d(118vw,52vh,0) rotate(22deg);opacity:0}
}

/* ═════════ 4. BARRE DE PROGRESSION ═════════
   Sous la barre de navigation. C'est le retour visuel le moins cher qui
   existe : le visiteur voit sa position dans la page bouger en continu. */
.tlx-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:1001;pointer-events:none;
    transform:scaleX(0);transform-origin:0 50%;
    background:linear-gradient(90deg,var(--rose),var(--rose-2) 45%,var(--cyan));
    box-shadow:0 0 12px rgba(255,45,107,.6)}

/* ═════════ 5. LUMIERE SOUS LE CURSEUR ═════════
   Une carte survolee s'eclaire a l'endroit exact du pointeur (--mx/--my sont
   ecrites par alive.js).

   Fait en `background-image` et NON avec un element ou un pseudo-element :
   ::before et ::after sont deja pris (liseret du haut, rail lumineux de
   hud.css), et une couche posee par-dessus la carte passerait devant le texte
   — il aurait fallu repositionner tous les enfants, ce qui casse ceux qui sont
   deja en absolu (`.tlx-step .num`, `.tlx-pop`). Un fond, lui, se peint entre
   la couleur de la carte et son contenu : rien a reordonner.

   `@property` sert uniquement au fondu : sans lui la variable existe quand
   meme, le halo apparait simplement d'un coup. */
@property --lit{syntax:'<number>';inherits:false;initial-value:0}
.tlx-lit{--lit:0;
    background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
        rgba(255,45,107,calc(.17 * var(--lit))),transparent 64%);
    transition:--lit .3s var(--ease),border-color .18s var(--ease),transform .22s var(--ease)}
.tlx-mode.tlx-lit,.tlx-step.tlx-lit{
    background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
        rgba(37,244,238,calc(.15 * var(--lit))),transparent 64%)}
.tlx-lit:hover{--lit:1}

/* ═════════ 6. INCLINAISON 3D ═════════
   La fenetre de demo du heros suit le curseur. `transition:none` pendant le
   suivi, sinon le mouvement traine d'un cran derriere la souris ; la remise a
   plat, elle, est bien amortie. */
.tlx-tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.tlx-tilt.tracking{transition:none}

/* ═════════ 7. HEROS : CADEAUX QUI MONTENT ═════════
   Des emojis de cadeaux TikTok qui remontent derriere le texte. C'est le sujet
   du produit, montre au lieu d'etre ecrit. */
.tlx-floaties{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.tlx-floaty{position:absolute;bottom:-40px;font-size:22px;line-height:1;opacity:0;
    filter:drop-shadow(0 0 10px rgba(255,45,107,.45));
    animation:tlxFloat linear forwards;will-change:transform,opacity}
@keyframes tlxFloat{
    0%{transform:translate3d(0,0,0) scale(.7) rotate(-8deg);opacity:0}
    12%{opacity:.85}
    75%{opacity:.5}
    100%{transform:translate3d(var(--dx,20px),calc(-1 * var(--rise,420px)),0) scale(1.1) rotate(10deg);opacity:0}
}

/* ═════════ 8. TITRE QUI TOURNE ═════════
   Le dernier mot du titre change tout seul. Largeur laissee au contenu pour
   que la ligne ne saute pas d'une hauteur a l'autre. */
.tlx-hero h1 .g{display:inline-block;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.tlx-hero h1 .g.swap{opacity:0;transform:translateY(-.22em)}
.tlx-hero h1 .g::after{content:"";display:inline-block;width:2px;height:.82em;margin-left:.06em;
    vertical-align:-.06em;background:var(--cyan);box-shadow:0 0 9px var(--cyan);
    animation:tlxCaret 1.05s steps(1) infinite}
@keyframes tlxCaret{50%{opacity:0}}

/* ═════════ 9. ARRIVEE DES SECTIONS ═════════
   Le reveal existant montait le bloc de 18px. On y ajoute un leger flou et une
   mise a l'echelle : la difference entre « ca apparait » et « ca arrive ».
   Le flou n'est applique que pendant la transition, jamais a l'etat final. */
.tlx-reveal{filter:blur(7px);transform:translateY(26px) scale(.985);
    transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.tlx-reveal.in{filter:none;transform:none}

/* Les traits de part et d'autre des sur-titres se deploient a l'arrivee. */
.tlx-kicker::before,.tlx-kicker::after{width:0;transition:width .7s .18s var(--ease)}
.tlx-reveal.in .tlx-kicker::before,.tlx-reveal.in .tlx-kicker::after{width:22px}

/* ═════════ 10. BOUTONS ═════════
   Respiration continue sur l'appel a l'action principal, et un reflet qui
   balaie le bouton au survol. */
.tlx-btn-primary,.tl-nav-cta{position:relative;overflow:hidden}
.tlx-btn-primary{animation:tlxBreathe 3.4s ease-in-out infinite}
@keyframes tlxBreathe{
    0%,100%{box-shadow:0 10px 28px -10px rgba(255,45,107,.7)}
    50%{box-shadow:0 14px 40px -10px rgba(255,45,107,.95)}
}
.tlx-btn-primary::after,.tl-nav-cta::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:55%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
    transform:skewX(-18deg);pointer-events:none;opacity:0}
.tlx-btn-primary:hover::after,.tl-nav-cta:hover::after{opacity:1;animation:tlxSheen .75s var(--ease)}
@keyframes tlxSheen{to{left:125%}}

/* ═════════ 11. BARRE DE STATS ═════════
   Un balayage lumineux traverse la barre en boucle lente : elle cesse d'etre
   une simple rangee de chiffres. */
.tlx-stats{position:relative;overflow:hidden}
.tlx-stats::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(37,244,238,.07),transparent);
    animation:tlxScan 7s linear infinite}
@keyframes tlxScan{to{left:130%}}

/* Le point du badge « live » du heros gagne une onde. */
.tlx-pill .dot{position:relative}
.tlx-pill .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;
    border:1px solid var(--cyan);opacity:0;animation:tlxPing 2.4s ease-out infinite}
@keyframes tlxPing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}

/* ═════════ 12. MOUVEMENT REDUIT ═════════
   ATTENTION AVANT DE TOUCHER A CE BLOC : sous Windows, decocher « Afficher les
   animations dans Windows » (Parametres > Accessibilite > Effets visuels) suffit
   a rendre `prefers-reduced-motion: reduce` vrai dans Chrome et Edge. Beaucoup
   de monde a ce reglage sans le savoir — souvent pour gagner en fluidite. Tout
   couper leur donnait une page entierement figee, ce qui est precisement le
   defaut qu'on corrige ici.

   On REDUIT donc au lieu de supprimer : on garde les mouvements larges, lents
   et reguliers (aurores, sol), et on retire ce qui saute aux yeux ou suit le
   curseur (cometes, cadeaux qui montent, inclinaison 3D, reflets, clignotements).
   Le meme partage est fait cote JS dans alive.js et space-bg.js. */
@media (prefers-reduced-motion: reduce){
    .tlx-comets{display:none}
    .tlx-btn-primary,.tlx-stats::after,.tlx-pill .dot::after,
    .tlx-hero h1 .g::after,.tlx-floaty{animation:none !important}
    .tlx-hero h1 .g::after{display:none}
    .tlx-btn-primary::after,.tl-nav-cta::after{display:none}
    /* Le sol garde sa direction, quatre fois plus lentement. Les aurores, elles,
       tournent deja sur 34 a 47 s : rien a ralentir. */
    .tlx-horizon i{animation-duration:22s}
    /* L'arrivee des sections reste, sans flou ni mise a l'echelle. */
    .tlx-reveal{filter:none;transform:translateY(12px)}
    .tlx-reveal.in{transform:none}
    .tlx-tilt{transform:none !important}
}

/* Sur mobile on garde les aurores (gratuites, elles font tout le travail) et
   on retire ce qui coute ou encombre un petit ecran. */
@media (max-width:760px){
    .tlx-horizon{height:30vh}
    .tlx-comets{display:none}
    .tlx-floaties{display:none}
}