/* ==========================================================================
   GTA — Motion layer (loader + scroll cinématique sur photos réelles)
   Chargé sur toutes les pages via includes/header.php + footer.php.
   Progressive enhancement : sans JS/GSAP, tout reste lisible et statique.
   Respecte prefers-reduced-motion.
   ========================================================================== */

/* ---- Loader (animation du logo au chargement) ---- */
.gta-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 42%,#0b1b3a 0%,#070b1c 62%);overflow:hidden}
.gta-loader.is-done{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease}
.gta-loader .gl-stars{position:absolute;inset:0}
.gta-loader .gl-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
.gta-loader .gl-core{position:relative;width:132px;height:132px;display:grid;place-items:center}
.gta-loader .gl-ring{position:absolute;inset:0;width:132px;height:132px;overflow:visible}
.gta-loader .gl-ring circle{fill:none;stroke:#3B9AE8;stroke-width:3;stroke-linecap:round}
.gta-loader .gl-logo{width:74px;height:74px;border-radius:16px;object-fit:cover;opacity:0;transform:scale(.6);
  box-shadow:0 12px 40px rgba(8,104,200,.5)}
.gta-loader .gl-name{margin-top:22px;font-family:'Poppins',sans-serif;font-weight:700;color:#fff;
  letter-spacing:.22em;font-size:.82rem;display:flex;justify-content:center;flex-wrap:wrap}
.gta-loader .gl-name span{opacity:0;transform:translateY(10px);display:inline-block;white-space:pre}
.gta-loader .gl-bar{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);
  width:130px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.gta-loader .gl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0D8BF2,#9B59B6)}
.gta-loader .gl-skip{position:absolute;bottom:22px;right:22px;color:#8ea0d8;font-size:.72rem;
  letter-spacing:.08em;border:1px solid #26315e;padding:7px 14px;border-radius:999px;cursor:pointer;
  font-family:'Poppins',sans-serif;background:transparent}
html.gta-loading{overflow:hidden}

/* ---- Hero cinématique : on "entre" dans la photo réelle au scroll ---- */
[data-hero]{position:relative;isolation:isolate}
[data-hero-bg]{will-change:transform,opacity;transform-origin:50% 45%;backface-visibility:hidden}
[data-hero-content]{will-change:transform,opacity}

/* ---- Parallax générique ---- */
[data-parallax]{will-change:transform}

/* ---- Reveal au scroll (plus riche que le fade AOS) ---- */
.mo-ready [data-reveal]{opacity:0;transform:translateY(38px) scale(.985);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.mo-ready [data-reveal].mo-in{opacity:1;transform:none}
.mo-ready [data-reveal][data-reveal="clip"]{clip-path:inset(0 0 22% 0)}
.mo-ready [data-reveal][data-reveal="clip"].mo-in{clip-path:inset(0 0 0 0)}

/* ---- Bandeau détail flottant (parallax sur photo) ---- */
.mo-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);
  color:#0868C8;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.8rem;
  box-shadow:0 14px 40px -14px rgba(8,104,200,.5);backdrop-filter:blur(4px)}

/* ---- Comparaison "réel vs. rendu" (démonstration d'authenticité) ---- */
.mo-compare{position:relative;overflow:hidden;border-radius:20px}
.mo-compare img{display:block;width:100%;height:100%;object-fit:cover}
.mo-compare .mo-after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.mo-compare .mo-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;cursor:ew-resize;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.mo-compare .mo-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;color:#0868C8;display:grid;place-items:center;font-size:1rem;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mo-compare .mo-tag{position:absolute;top:12px;padding:5px 11px;border-radius:999px;font-size:.7rem;font-weight:700;color:#fff;background:rgba(10,10,20,.6);backdrop-filter:blur(4px)}

@media (prefers-reduced-motion: reduce){
  .gta-loader{display:none!important}
  html.gta-loading{overflow:auto}
  .mo-ready [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
  [data-hero-bg],[data-parallax],[data-hero-content]{transform:none!important}
}