/**
 * Comm360 — Globe qui accélère au défilement (Accelerating Globe on Scroll, reprise fidèle d'Osmo).
 *
 * Globe filaire dessiné en CSS pur : anneaux arrière fixes (latitudes) +
 * anneaux avant animés par le script (longitudes, effet miroir). Aucune image
 * ni texture : tout est tracé par bordures, la couleur des anneaux vient de la
 * propriété color (currentColor sur les bordures).
 *
 * Activation par classe (la classe et l'attribut Osmo d'origine restent
 * reconnus) :
 *   - racine : .comm360-globe-defilement (ou .globe / [data-accelerating-globe]) —
 *     la structure interne est créée automatiquement par le script si absente.
 *
 * CSS repris verbatim de la fiche Osmo. SEULES adaptations (autorisées) :
 * l'alias .comm360-globe-defilement ajouté au sélecteur racine, et les deux
 * valeurs en dur de la racine passent en variables CSS personnalisables,
 * défauts identiques à la fiche :
 *   - --comm360-globe-defilement-couleur : couleur des anneaux (défaut #d500ff)
 *   - --comm360-globe-defilement-taille  : largeur du globe (défaut 37.5vw)
 */

.globe,
.comm360-globe-defilement {
  color: var(--comm360-globe-defilement-couleur, #d500ff);
  justify-content: center;
  align-items: center;
  width: var(--comm360-globe-defilement-taille, 37.5vw);
  display: flex;
  position: relative;
}

.globe__before {
  padding-top: 100%;
}

.globe__back {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.globe__back-circle {
  border: 1px solid;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
}

.globe__back-circle.is--1 {
  width: 50%;
  height: 16%;
  top: 0%;
}

.globe__back-circle.is--2 {
  width: 87.5%;
  height: 24%;
  top: 14%;
}

.globe__back-circle.is--3 {
  border-radius: 50%;
  width: 100%;
  height: 28%;
  top: 36%;
}

.globe__back-circle.is--4 {
  width: 87.5%;
  height: 24%;
  top: 62%;
}

.globe__back-circle.is--5 {
  width: 50%;
  height: 16%;
  top: 84%;
}

.globe__front, .globe__mirror {
  width: 100%;
  height: 100%;
  position: absolute;
}

.globe__mirror.is--duplicate {
  transform: scaleX(-1);
}

.globe__circle {
  width: 50%;
  height: 100%;
  position: absolute;
  left: auto;
  right: 50%;
  overflow: hidden;
}

.globe__circle-inner {
  border: 1px solid;
  border-radius: 50%;
  width: 200%;
  height: 100%;
  position: absolute;
}