/* =========================================================
   TROIS MONDES — section epinglee : trois photos incurvees sur un grand cercle (Three.js) glissent
   en carrousel, puis un travelling compense (la camera recule, la focale s'allonge) aplatit l'arc
   jusqu'a ce que la photo centrale remplisse l'ecran ; elle est ensuite remplacee par les deux autres
   par un balayage, le nom du monde change en bas, un cercle compte 1 / 2 / 3.
   Mecanique relevee sur sobha-privy-collection.com (section « The three worlds », 30/09/2026),
   code reecrit. Polices : equivalents libres (Pinyon Script, Cormorant Garamond, Jost).
   ========================================================= */
.tm { position: relative; height: 500vh; background: #000; color: #fff; font-family: "Jost", system-ui, sans-serif; }
.tm__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tm__fond { position: absolute; inset: -20vh 0; background: #000 center / cover no-repeat; opacity: .55; will-change: transform; }
.tm__scene { position: absolute; inset: 0; }
.tm__scene canvas { display: block; width: 100%; height: 100%; }

/* Titre en deux lignes : ecriture calligraphiee + capitales */
.tm__titre { position: absolute; z-index: 2; left: 0; right: 0; top: 19vh;   /* le bas de « MONDES » chevauche legerement le haut de la photo */ margin: 0; text-align: center; font-weight: 300; line-height: 1; pointer-events: none; will-change: transform, opacity; }
.tm__titre-script { display: block; font-family: "Pinyon Script", cursive; font-size: clamp(56px, 8.4vw, 132px); line-height: .9; }
.tm__titre-caps { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: clamp(64px, 9.6vw, 150px); letter-spacing: .02em; text-transform: uppercase; margin-top: -.12em; }

/* Nom du monde en cours (bas de l'ecran) */
.tm__mondes { position: absolute; left: 0; right: 0; bottom: 9vh; height: 1.2em; margin: 0; padding: 0; list-style: none;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: clamp(44px, 6vw, 96px); text-align: center; overflow: hidden; pointer-events: none; }
.tm__mondes li { position: absolute; inset: 0; transform: translateY(110%); opacity: 0; transition: transform .9s cubic-bezier(.7, 0, .3, 1), opacity .9s; }
.tm__mondes li.est-actif { transform: none; opacity: 1; }
.tm__mondes li.est-passe { transform: translateY(-110%); opacity: 0; }

/* Cercle de progression + numero, au centre */
.tm__compteur { position: absolute; left: 50%; top: 70%; width: 120px; height: 120px; margin: -60px 0 0 -60px; opacity: 0; transition: opacity 1s cubic-bezier(.7, 0, .3, 1); pointer-events: none; }
.tm__compteur.est-visible { opacity: 1; }
.tm__compteur svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tm__compteur circle { fill: none; stroke-width: 1.2; }
.tm__compteur .tm__piste { stroke: rgba(255,255,255,.25); }
.tm__compteur .tm__trace { stroke: #fff; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tm__compteur span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 500; }

@media (max-width: 767px) {
  .tm__titre { top: 16vh; }
  .tm__compteur { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
}