/* ============================================================
   SPACE STAGE — mises en scène spatiales des sections contenu
   Brands = convoi de ravitaillement · Jeux = escadrille
   Pricing = station marchande · Témoignages = transmissions.

   Règles :
   - Les composants existants (logos du marquee, .game-card,
     cartes pricing, cartes d'avis) ne sont JAMAIS reconstruits :
     on ajoute des calques de décor et des wrappers.
   - État par défaut = tableau posé complet (sans JS /
     reduced-motion, tout est visible et léché). GSAP ne joue
     que les entrées.
   - Les boucles CSS infinies n'animent jamais une propriété
     que GSAP possède sur le même nœud (opacity GSAP ↔ pulse
     en filter/transform ici).
   ============================================================ */

/* ------------------------------------------------------------
   1. BRANDS — LE CONVOI DE RAVITAILLEMENT
   Le marquee existant devient un convoi cargo : rail porteur,
   remorqueur en tête (::before du track = il défile avec),
   chaque logo arrimé dans un conteneur.
   ------------------------------------------------------------ */
body.ship .brands-carousel {
    position: relative;
    /* vu à travers la vitre : légère plongée (le parallax GSAP
       cible .brands__container, jamais ce nœud) */
    transform: perspective(900px) rotateX(6deg);
    transform-origin: 50% 100%;
    padding-bottom: 18px;
}

/* Desktop : le convoi s'étend en pleine largeur (déborde du
   conteneur 1200px, le header reste centré) — plus de logos
   visibles, sensation de flotte plus large */
@media (min-width: 768px) {
    body.ship .brands-carousel {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Section marques : bande défilante épurée pleine largeur */
@media (min-width: 768px) {
    body.ship .brands-carousel {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* ------------------------------------------------------------
   2. JEUX — L'ESCADRILLE D'ESCORTE
   Le conteneur du carrousel arrive de la profondeur (GSAP) ;
   traînées de réacteur en calque sous les cartes. Le script
   inline garde la propriété exclusive de #gamesTrack/.game-card.
   ------------------------------------------------------------ */
body.ship .games-showcase {
    position: relative;
}

/* Traînées de réacteur (opacity possédée par GSAP → la pulsation
   vit en filter uniquement) */
body.ship .squadron-trails {
    position: absolute;
    inset: 6% 0 30% 0;
    pointer-events: none;
    opacity: 0.16;
    animation: stage-trails-pulse 2.8s ease-in-out infinite alternate;
}

body.ship .squadron-trails span {
    position: absolute;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(270deg, rgba(0, 240, 255, 0.85), rgba(41, 85, 255, 0.3) 60%, transparent);
    filter: blur(0.5px);
}

body.ship .squadron-trails span:nth-child(1) {
    top: 22%;
    right: 12%;
    width: 34%;
}

body.ship .squadron-trails span:nth-child(2) {
    top: 46%;
    right: 30%;
    width: 42%;
}

body.ship .squadron-trails span:nth-child(3) {
    top: 64%;
    right: 8%;
    width: 28%;
}

body.ship .squadron-trails span:nth-child(4) {
    top: 82%;
    right: 40%;
    width: 36%;
}

@keyframes stage-trails-pulse {
    from {
        filter: brightness(0.7);
    }

    to {
        filter: brightness(1.5);
    }
}

/* ------------------------------------------------------------
   3. PRICING — DOCKS HOLOGRAPHIQUES
   Les cartes existantes flottent doucement dans un dock (wrapper
   — la carte elle-même reste la cible GSAP pour la donne + flare).
   ------------------------------------------------------------ */
/* Docks holographiques : le wrapper flotte (transform CSS),
   la carte à l'intérieur reste la cible GSAP (donne + flare) */
body.ship .holo-dock {
    position: relative;
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: stretch;
    animation: stage-holo-float 5.4s ease-in-out infinite alternate;
    will-change: transform;
    contain: layout style;
}

body.ship .holo-dock.is-paused,
body.ship .holo-dock.anim-paused,
.is-paused .holo-dock,
.anim-paused .holo-dock {
    animation-play-state: paused !important;
}

body.ship .holo-dock>* {
    width: 100%;
}

body.ship .holo-dock--blue {
    max-width: 380px;
}

body.ship .holo-dock--gold {
    max-width: 400px;
    /* L'offre Gratuite passe en PREMIER (elle est avant dans le DOM) :
       plus d'order:-1 sur le Premium — le paiement vient après. */
    z-index: 2;
}

@keyframes stage-holo-float {
    from {
        transform: translateY(-4px);
    }

    to {
        transform: translateY(4px);
    }
}

body.ship .holo-dock--blue {
    animation-delay: -2.7s;
}

/* Voile scanline holographique par-dessus le dock */
body.ship .holo-dock::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0.09;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.5) 0 1px,
            transparent 1px 4px);
}

/* ------------------------------------------------------------
   4. TÉMOIGNAGES & MÉGA-BLOC 2 (RÉASSURANCE -> FAQ -> FOOTER)
   Fond continu #050811 avec masque d'entrée alpha progressif
   ------------------------------------------------------------ */
body.ship .fleet-comms-section {
    position: relative;
    background: transparent;
    overflow: hidden;
    z-index: 2;
    padding-top: 60px;
    padding-bottom: 50px;
    margin-top: 0px;
    contain: layout paint; /* Confinement strict : isole le défilement des 28 images du reste de la page */
}

body.ship .fleet-comms-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(5, 8, 17, 0.4) 60px, rgba(5, 8, 17, 0.85) 150px, #050811 240px, #050811 100%),
                radial-gradient(circle at 50% 10%, rgba(36, 80, 254, 0.06) 0%, transparent 60%),
                radial-gradient(circle at 80% 45%, rgba(169, 10, 255, 0.04) 0%, transparent 50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 160px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 160px);
}

body.ship .fleet-comms-section > * {
    position: relative;
    z-index: 1;
}

body.ship .testimonials-carousel {
    position: relative;
}

/* Liseré d'interception au-dessus de chaque flux */
body.ship .carousel-row {
    position: relative;
}

body.ship .carousel-row::before {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: -6px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(179, 102, 255, 0.35), transparent);
}

/* Continuité sans couture pour FAQ et Footer dans le Méga-Bloc 2 */
body.ship .faq-section {
    position: relative;
    background: #050811;
    z-index: 2;
    padding-top: 90px;
    padding-bottom: 70px;
    margin-bottom: 0;
}

body.ship .footer {
    position: relative;
    background: #050811;
    z-index: 2;
    margin-top: 0;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------------
   Mobile : décors allégés
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    body.ship .brands-carousel {
        transform: perspective(700px) rotateX(4deg);
        padding-bottom: 4px;
    }

    body.ship .squadron-trails {
        display: none;
    }

    /* Pricing : les cartes touchaient les bords → marge interne et
       largeurs qui rentrent dans le viewport (le float ne déborde plus) */
    body.ship #pricing .pricing__container {
        padding-left: 16px;
        padding-right: 16px;
        gap: 18px;
    }

    body.ship #pricing .holo-dock,
    body.ship #pricing .holo-dock--blue,
    body.ship #pricing .holo-dock--gold {
        /* flex-basis 100% (pas seulement width) → chaque carte prend
           toute la ligne et s'empile verticalement, plus de côte-à-côte
           écrasé ni de débordement coupé */
        flex: 1 1 100%;
        min-width: 0;
        max-width: min(300px, calc(100vw - 32px));
        width: 100%;
        margin-inline: auto;
    }

    body.ship #pricing .pricing-card-glass {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* le léger flottement latéral n'a plus de place sur mobile → vertical seul */
    body.ship #pricing .holo-dock {
        animation-name: stage-holo-float;
    }

    body.ship .fleet-comms-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}