/* =====================================================================
   Décolle — FX : transitions de page, 3D, micro-interactions
   Chargé après style.css sur toutes les pages. Aucune dépendance.
   Tous les effets dégradent proprement (et respectent reduced-motion).
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Transition de page ("décollage")                                */
/* ------------------------------------------------------------------ */
.pt {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #221a52 0%, #0c0b1c 55%, #07060f 100%);
  transform: translateY(0);
  animation: ptUp .9s cubic-bezier(.7,.02,.32,1) .12s forwards;
}
.pt.is-cover { animation: ptDown .5s cubic-bezier(.7,.02,.32,1) forwards; pointer-events: all; }
@keyframes ptUp   { from { transform: translateY(0); }     to { transform: translateY(-101%); } }
@keyframes ptDown { from { transform: translateY(-101%); } to { transform: translateY(0); } }

.pt__rocket { width: clamp(70px, 12vw, 104px); filter: drop-shadow(0 16px 30px rgba(124,92,255,.7)); animation: ptRocket .9s cubic-bezier(.7,.02,.32,1) forwards; }
@keyframes ptRocket { 0% { transform: translateY(60px) scale(.85); opacity: 0; } 22% { opacity: 1; } 100% { transform: translateY(-58vh) scale(.4); opacity: 0; } }

.pt__label { position: absolute; bottom: 16%; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: #fff; letter-spacing: -.02em; opacity: 0; animation: ptLabel .9s ease forwards; }
.pt__label .dot { color: var(--cyan); }
@keyframes ptLabel { 0%,60% { opacity: 0; } 75% { opacity: .9; } 100% { opacity: 0; } }

/* lignes de "warp" radiales */
.pt__warp { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.pt__warp i { position: absolute; left: 0; top: 0; width: 2px; height: 26vh; border-radius: 2px;
  background: linear-gradient(transparent, rgba(160,180,255,.85), transparent); transform-origin: center top; opacity: 0;
  transform: rotate(var(--a, 0deg)) translateY(0) scaleY(0);
  animation: warp .9s ease-out forwards; }
@keyframes warp {
  0%   { opacity: 0; transform: rotate(var(--a,0deg)) translateY(0) scaleY(0); }
  45%  { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--a,0deg)) translateY(-46vh) scaleY(1.7); }
}

/* ------------------------------------------------------------------ */
/* 2. Barre de progression de défilement                              */
/* ------------------------------------------------------------------ */
.scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.scroll-prog i { display: block; height: 100%; width: 0; background: var(--grad-brand); box-shadow: 0 0 12px rgba(124,92,255,.7); transition: width .1s linear; }

/* ------------------------------------------------------------------ */
/* 3. Révélations enrichies (override de style.css)                   */
/* ------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(36px) scale(.985); filter: blur(7px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* ------------------------------------------------------------------ */
/* 4. Cartes 3D (inclinaison au survol — piloté par fx.js)            */
/* ------------------------------------------------------------------ */
.tilt { transition: transform .3s var(--ease), box-shadow .3s var(--ease); will-change: transform; }
.tilt__shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(180px 180px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.30), transparent 60%);
  transition: opacity .3s var(--ease); mix-blend-mode: soft-light; z-index: 2; }
.tilt.is-tilting .tilt__shine { opacity: 1; }

/* ------------------------------------------------------------------ */
/* 5. Boutons magnétiques + brillance                                 */
/* ------------------------------------------------------------------ */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); }
.btn--primary:hover::after { animation: sheen .8s var(--ease); }
@keyframes sheen { to { left: 160%; } }
.mag { transition: transform .25s var(--ease); }

/* ------------------------------------------------------------------ */
/* 6. Aurores animées dans les sections sombres                       */
/* ------------------------------------------------------------------ */
.section--space { isolation: isolate; }
.section--space::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .8;
  background:
    radial-gradient(45% 55% at 12% 18%, rgba(124,92,255,.22), transparent 70%),
    radial-gradient(40% 50% at 88% 82%, rgba(34,211,238,.16), transparent 70%);
  animation: aurora 18s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.section--space > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* 7. Champ d'étoiles interactif (canvas, posé par fx.js)             */
/* ------------------------------------------------------------------ */
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* lueur qui suit la souris dans le hero */
.hero__spot { position: absolute; width: 540px; height: 540px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(124,92,255,.18), transparent 60%); transform: translate(-50%, -50%);
  left: 50%; top: 40%; transition: left .3s ease-out, top .3s ease-out; mix-blend-mode: screen; }

/* ------------------------------------------------------------------ */
/* 8. Scène 3D du hero (planète + anneaux + lunes)                    */
/* ------------------------------------------------------------------ */
.scene { position: relative; width: min(440px, 94%); aspect-ratio: 1; margin: auto; perspective: 1100px; }
.scene__tilt { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .25s ease-out; }
.scene__spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: sceneSpin 16s ease-in-out infinite; }
@keyframes sceneSpin {
  0%, 100% { transform: rotateY(-11deg) rotateX(3deg); }
  50%      { transform: rotateY(11deg)  rotateX(-3deg); }
}

/* halo derrière la scène */
.scene__glow { position: absolute; left: 50%; top: 50%; width: 78%; height: 78%; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.55), rgba(47,107,255,.18) 45%, transparent 70%);
  filter: blur(26px); z-index: -1; animation: pulseGlow 6s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }

/* la planète */
.planet { position: absolute; left: 27%; top: 27%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, #cabfff 0%, #8b75ff 26%, #6b54f0 48%, #3f2fae 72%, #241a6b 100%);
  box-shadow:
    inset -16px -20px 46px rgba(5,4,20,.6),
    inset 12px 14px 30px rgba(200,210,255,.32),
    0 0 60px rgba(124,92,255,.5);
  overflow: hidden; transform: translateZ(2px); }
/* bandes / "rotation" de surface */
.planet::before { content: ""; position: absolute; inset: -20% -10%;
  background:
    radial-gradient(40% 22% at 30% 35%, rgba(180,200,255,.30), transparent 60%),
    radial-gradient(50% 26% at 70% 70%, rgba(60,40,140,.6), transparent 60%),
    repeating-linear-gradient(8deg, rgba(255,255,255,.05) 0 8px, transparent 8px 22px);
  animation: planetRoll 22s linear infinite; }
@keyframes planetRoll { to { transform: translateX(-40%); } }
/* reflet spéculaire */
.planet__spot { position: absolute; left: 22%; top: 18%; width: 26%; height: 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), transparent 70%); filter: blur(2px); }

/* anneaux */
.ring { position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%,-50%) rotateX(75deg); }
.ring--1 { border: 3px solid rgba(124,92,255,.5); box-shadow: 0 0 26px rgba(124,92,255,.45), inset 0 0 20px rgba(124,92,255,.3); }
.ring--2 { width: 102%; border: 2px dashed rgba(34,211,238,.45); transform: translate(-50%,-50%) rotateX(75deg) rotateZ(18deg); }

/* lunes en orbite */
.orbit3d { position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1;
  transform: translate(-50%,-50%) rotateX(75deg); transform-style: preserve-3d; }
.orbit3d--1 { animation: orbitSpin 9s linear infinite; }
.orbit3d--2 { width: 112%; animation: orbitSpin 15s linear infinite reverse; }
@keyframes orbitSpin { to { transform: translate(-50%,-50%) rotateX(75deg) rotateZ(360deg); } }
.moon { position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #b9c4e8 60%, #8794bf);
  box-shadow: 0 0 16px rgba(200,215,255,.7); transform: rotateX(-75deg); }
.moon--2 { width: 14px; height: 14px; margin-left: -7px; top: -7px;
  background: radial-gradient(circle at 35% 30%, #d8fbff, #56d6ee 60%, #22a7c4); box-shadow: 0 0 16px rgba(34,211,238,.7); }

/* la fusée flotte devant la scène */
.rocket-3d { position: absolute; left: 50%; top: 50%; width: 26%; transform: translate(-50%,-52%) translateZ(80px);
  filter: drop-shadow(0 22px 30px rgba(124,92,255,.55)); animation: bob 5s var(--ease) infinite; z-index: 5; }

/* ------------------------------------------------------------------ */
/* 9. Petites finitions                                               */
/* ------------------------------------------------------------------ */
.icon-badge { transition: transform .35s var(--ease); }
.card:hover .icon-badge, .channel:hover .channel__ico { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.brand__mark { transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }

/* ------------------------------------------------------------------ */
/* 10. Respect de prefers-reduced-motion                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pt { animation: none !important; transform: translateY(-101%) !important; }
  .pt__rocket, .pt__label, .pt__warp i { animation: none !important; opacity: 0 !important; }
  .scene__spin, .orbit3d, .planet::before, .scene__glow, .section--space::before { animation: none !important; }
  .reveal { transition: opacity .4s ease; transform: none; filter: none; }
  .tilt { transition: none !important; }
}

@media (max-width: 760px) {
  .scene { width: min(340px, 86%); }
  .hero__spot { display: none; }
}