/* ============================================================
   SPHÈRE PORTAL — transition sphère → usage piloté sur /pme/.

   La sphère (bloc sécurité) est sticky. Sur 100vh de scroll :
     - elle SCALE (traversée) + FADE OUT
     - le bloc "Usage piloté" chevauche via margin-top:-100vh et
       FADE IN rapidement (progress 0.4 → 0.85) → apparaît d'un
       coup pendant que la sphère s'efface.
   Une fois la sphère invisible, le bloc entier est visible complet,
   le sticky se relâche et la page reprend son cours normal.

   Piloté par sphere-portal-scroll.js via CSS custom properties.
   ============================================================ */

.pme-sphere-portal {
    position: relative;
    isolation: isolate;
    /* Isole les repaints du portal pour ne pas peindre au-delà */
    contain: layout paint;
}

/* Piste de scroll bornée : 200vh = 100vh sphère sticky + 100vh de scroll
   pendant lesquels la sphère traverse (sinon la sphère resterait sticky
   sur toute la hauteur du bloc usage qui la suit → progress bloquée à 0). */
.pme-sphere-portal .pme-sphere-track {
    position: relative;
    height: 200vh;
}

/* Bloc sécurité en sticky DANS la piste — reste figé 100vh, puis relâche.
   translateZ(0) force une couche compositée GPU → opacity animée sans
   repaint massif de la zone (200vh de sphère + halo). */
.pme-sphere-portal .pme-sphere {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    z-index: 0;
    overflow: hidden;
    --sphere-scale: 1;
    --sphere-content-opacity: 1;
    --sphere-overall-opacity: 1;
    opacity: var(--sphere-overall-opacity);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
    contain: layout paint;
}

/* La sphère elle-même scale (container 3D + rings).
   Scale max réduit côté JS (18 → 10) pour limiter la surface de repaint. */
.pme-sphere-portal .pme-sphere__container {
    transform: translate(-50%, -50%) scale(var(--sphere-scale)) translateZ(0);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: transform 0s;
    will-change: transform;
}

/* Le contenu texte du bloc sécurité fade */
.pme-sphere-portal .pme-sphere__content {
    opacity: var(--sphere-content-opacity);
    transform: translateZ(0);
    transition: opacity 0s;
    will-change: opacity;
}

/* Le core central + bloom se dilatent aussi (couche compositée) */
.pme-sphere-portal .pme-sphere__core,
.pme-sphere-portal .pme-sphere__bloom {
    transform: scale(var(--sphere-scale)) translateZ(0);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}

/* Bloc "Usage piloté" en flux normal, chevauche la sphère sticky via
   margin-top:-100vh. Opacity pilotée par JS — apparaît d'un coup
   pendant la disparition de la sphère.
   translateZ(0) + contain : le bloc entier (300vh) passe en couche
   compositée GPU, opacity change SANS repaint layout. */
.pme-sphere-portal #usage-pilote,
.pme-sphere-portal .gg-showcase {
    position: relative;
    z-index: 1;
    background: var(--osm-night-1, #0b0b1e);
    margin-top: -100vh;
    margin-top: -100svh;
    opacity: var(--usage-opacity, 0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity 0s;
    will-change: opacity;
    contain: layout paint;
    /* Off tant qu'invisible pour ne pas capturer les clics de la sphère */
    pointer-events: var(--usage-events, none);
}

/* Fallbacks : reduced-motion → tout statique, bloc visible */
@media (prefers-reduced-motion: reduce) {
    .pme-sphere-portal .pme-sphere__container,
    .pme-sphere-portal .pme-sphere__core,
    .pme-sphere-portal .pme-sphere__bloom {
        transform: none !important;
    }
    .pme-sphere-portal .pme-sphere__content { opacity: 1 !important; }
    .pme-sphere-portal #usage-pilote,
    .pme-sphere-portal .gg-showcase {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ── MOBILE : effondre le scroll-jack (le JS le désactive déjà < 900px,
   mais le CSS gardait 200vh de track vide → 3+ écrans de scroll inutile).
   La sphère et le bloc "usage piloté" s'empilent simplement, compacts. ── */
@media (max-width: 900px) {
    .pme-sphere-portal .pme-sphere-track {
        height: auto;                    /* plus de piste 200vh */
    }
    .pme-sphere-portal .pme-sphere {
        position: relative;              /* plus sticky */
        height: auto;
        min-height: 44vh;                /* bloc sécurité décoratif : compact */
        padding: 32px 0;
    }
    /* Bloc "usage piloté" : coupe le gros padding-top 128px hérité */
    .pme-sphere-portal #usage-pilote,
    .pme-sphere-portal .gg-showcase {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .pme-sphere-portal .pme-sphere__container,
    .pme-sphere-portal .pme-sphere__core,
    .pme-sphere-portal .pme-sphere__bloom {
        transform: none !important;      /* pas de scale/traversée */
    }
    .pme-sphere-portal .pme-sphere__content { opacity: 1 !important; }
    .pme-sphere-portal #usage-pilote,
    .pme-sphere-portal .gg-showcase {
        margin-top: 0 !important;        /* plus de chevauchement -100vh */
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}