/* GS Concept — intro « pavés qui se posent » + hero vivant. Préfixe gi-. */

/* Rideau CSS posé avant que le JS démarre : même couleur que le lit de sable dessiné par l'intro.
   Garde-fou : retiré par CSS seul à 2,6 s si le JS meurt ; aucune intro sans scripts. */
@media(prefers-reduced-motion:no-preference){html.gi-pre::after{content:"";position:fixed;inset:0;z-index:99998;background:radial-gradient(ellipse at 50% 48%,#baac8a 0%,#b0a280 50%,#82765c 100%);pointer-events:none;animation:gi-cover .01s linear 2.6s forwards}}
@media(scripting:none){html.gi-pre::after{display:none}}
@keyframes gi-cover{to{opacity:0;visibility:hidden}}
@keyframes gi-force-out{to{opacity:0;visibility:hidden;pointer-events:none}}

/* L'intro : deux moitiés de canvas qui s'écartent au centre */
#gi-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;background:transparent;animation:gi-force-out .01s linear 2.6s forwards}
#gi-intro.gi-out{opacity:0;pointer-events:none;transition:opacity .3s ease}
.gi-half{position:absolute;top:0;bottom:0;overflow:visible;will-change:transform}
.gi-half canvas{display:block}
#gi-intro.gi-open .gi-half{box-shadow:0 0 54px rgba(20,14,4,.55)}
/* « GS Concept » : texte net posé sur la plaque (la plaque elle-même est dessinée en canvas) */
.gi-brand{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.gi-brand span{font:800 40px/1 'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.015em;color:#f6f3ea;text-shadow:0 1px 0 rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.35);white-space:nowrap;opacity:0}
.gi-brand .gi-logo{display:block;max-width:none;opacity:0;user-select:none;-webkit-user-drag:none}
.gi-brand i{display:block;width:34%;height:3px;border-radius:3px;background:#5fd47a;opacity:0;transform:scaleX(0);transform-origin:50% 50%}

/* Hero : le titre arrive mot par mot, le reste du bloc suit, le fond se pose */
.gi-word{display:inline-block}.gi-word>i{display:inline-block;font-style:normal;opacity:0;filter:blur(4px);transform:translateY(.4em);transition:opacity .42s ease,transform .5s cubic-bezier(.2,.8,.2,1),filter .42s;transition-delay:calc(var(--gi-i)*40ms)}
html.gi-show .gi-word>i{opacity:1;filter:none;transform:none}
.gi-hero .eco-entree>*{animation:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.gi-hero .eco-entree>:nth-child(1){transition-delay:0s}
.gi-hero .eco-entree>:nth-child(3){transition-delay:.14s}
.gi-hero .eco-entree>:nth-child(4){transition-delay:.22s}
.gi-hero .eco-entree>:nth-child(5){transition-delay:.3s}
html.gi-hold .gi-hero .eco-entree>:not(h1){opacity:0;transform:translateY(16px)}
.gi-hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gi-parallax{scale:1.045;will-change:translate;transition:scale 1.6s cubic-bezier(.2,.7,.2,1)}
html:not(.gi-show) .gi-parallax{scale:1.11}
.gi-garanties{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 0;padding:0;list-style:none}
.gi-garanties li{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:30px;background:rgba(255,255,255,.11);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:650}
.gi-garanties li span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#72e38d;color:#102219;font-weight:900}
@media(max-width:767px){[data-hero-slide]{background-position:65% center!important}}
@media(prefers-reduced-motion:reduce){html.gi-pre::after,#gi-intro,.gi-hero-canvas{display:none!important}.gi-word>i{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}.gi-parallax{scale:1;translate:none!important;transition:none!important}html.gi-hold .gi-hero .eco-entree>:not(h1){opacity:1!important;transform:none!important}.gi-hero .eco-entree>*{transition:none!important}}