/* Styles de src/partials/worlds_cinema.php — sortis de la page (i102b). */

/* La hauteur du conteneur DIT combien de temps la scène reste épinglée :
   un écran par monde, plus un pour respirer. Sans JS, elle est ignorée. */
.wc{position:relative;
  /* Sortie de gouttière : la scène occupe toute la largeur de la fenêtre même
     si un parent la contraint. Sans ça, un liseré noir encadrait l'image et
     cassait l'effet « on y est ». */
  width:100vw;margin-inline:calc(50% - 50vw)}
.wc-stage{position:relative;border-radius:0;overflow:hidden;background:#07060a}

/* ── ÉTAT PAR DÉFAUT : bande horizontale, glissable au doigt ───────────── */
.wc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.wc-track::-webkit-scrollbar{display:none}
.wc-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;
  height:min(84svh,820px);overflow:hidden;background:#07060a}
@media(max-width:700px){.wc-slide{height:min(80svh,700px)}}

/* ── LE MONDE, EN GRAND ────────────────────────────────────────────────── */
.wc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Pas encore de paysage déposé : on réutilise le portrait, flouté et sombre.
   Il donne la couleur du monde sans prétendre être un décor. */
.wc-slide--nobg .wc-bg{filter:blur(26px) saturate(1.15) brightness(.62);transform:scale(1.14)}

/* Un voile : le texte doit rester lisible sur n'importe quelle image, et la
   photo doit se détacher du décor au lieu de s'y fondre. */
.wc-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,6,10,.5) 0%,rgba(7,6,10,.12) 24%,
             rgba(7,6,10,.2) 46%,rgba(7,6,10,.62) 74%,rgba(7,6,10,.93) 100%)}

/* ── LA MISE EN PAGE : le texte d'un côté, la photo de l'autre ─────────── */
.wc-inner{position:relative;z-index:3;height:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,64px);
  padding:clamp(16px,3vh,34px) clamp(20px,5vw,64px) clamp(66px,10vh,108px)}

/* Un second voile, LATÉRAL et seulement sur grand écran : certains décors sont
   clairs (un ciel de crépuscule, une montagne au soleil) et le texte blanc s'y
   perdait. On assombrit le côté où il se trouve, pas le décor entier. */
@media(min-width:861px){
  .wc-slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(7,6,10,.66) 0%,rgba(7,6,10,.38) 32%,transparent 56%)}
}
.wc-cap{text-align:start;max-width:30ch;flex:0 1 auto}
.wc-eyebrow{font-family:var(--mono,ui-monospace),monospace;font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--or-clair,#e6cf9a);opacity:.95;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}
.wc-world{font-family:var(--serif,serif);font-weight:500;
  font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.08;margin:.3em 0 0;
  color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6);text-wrap:balance}

/* LA PHOTO. Un cadre, une ombre portée, un liseré doré : elle ne se fond pas
   dans le décor, elle s'y pose. C'est la photo qui sort de la cabine. */
.wc-photo{flex:0 0 auto;position:relative;border-radius:14px;overflow:hidden;
  height:min(60svh,540px);aspect-ratio:2/3;max-width:44vw;
  box-shadow:0 26px 70px rgba(0,0,0,.62),0 0 0 1px rgba(242,201,76,.42);
  background:#0d0b12}
.wc-photo img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:860px){
  /* Sur un téléphone, la photo passe DEVANT le texte : c'est elle qui fait
     comprendre en une seconde, le nom du monde se lit juste après. */
  .wc-inner{flex-direction:column-reverse;justify-content:center;gap:clamp(12px,2.4vh,22px)}
  .wc-cap{text-align:center;max-width:24ch}
  .wc-photo{height:min(46svh,380px);max-width:70vw}
}
@media(max-width:860px) and (max-height:620px){
  .wc-photo{height:min(40svh,300px)}
  .wc-world{font-size:clamp(1.4rem,6vw,2rem)}
}

/* ── COMMANDES ─────────────────────────────────────────────────────────
   Ce sont de VRAIES ancres : sans JavaScript, elles font défiler la bande. */
.wc-nav{position:absolute;inset:0;z-index:4;pointer-events:none}
.wc-arrow{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,6,.5);border:1px solid rgba(242,201,76,.5);color:var(--or-clair,#e6cf9a);
  text-decoration:none;font-size:1.3rem;line-height:1;backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s}
.wc-arrow:hover,.wc-arrow:focus-visible{background:rgba(242,201,76,.92);color:#17110a;
  border-color:var(--or,#d9b877);transform:translateY(-50%) scale(1.06)}
.wc-prev{inset-inline-start:clamp(8px,2.4vw,26px)}
.wc-next{inset-inline-end:clamp(8px,2.4vw,26px)}
@media(max-width:560px){.wc-arrow{width:44px;height:44px;font-size:1.1rem}}

.wc-dots{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:clamp(22px,3.4vh,38px);z-index:5;
  display:flex;gap:8px;justify-content:center;pointer-events:none}
.wc-dots a{pointer-events:auto;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.34);transition:background .25s,transform .25s;
  text-indent:-9999px;overflow:hidden}
.wc-dots a:hover,.wc-dots a:focus-visible{background:rgba(255,255,255,.7)}
.wc-dots a[aria-current="true"]{background:var(--or,#d9b877);transform:scale(1.45)}

/* ── ÉTAT ÉPINGLÉ : seulement quand le script a pris la main ─────────────
   COMBIEN DE DÉFILEMENT PAR MONDE. Un écran entier par monde paraissait juste
   sur le papier et long dans la main : on traversait un couloir sombre où rien
   d'autre n'arrivait. 0,85 écran laisse largement le temps de voir le décor
   s'installer et la photo se poser, sans donner l'impression que la page a
   cessé d'avancer. */
.wc.is-cine{height:calc((var(--wc-n) * 0.85 + 0.35) * 100svh)}
.wc.is-cine .wc-stage{position:sticky;top:0;height:100svh}
.wc.is-cine .wc-track{display:block;overflow:visible;scroll-snap-type:none;height:100%}
.wc.is-cine .wc-slide{position:absolute;inset:0;height:100%;
  opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s}
.wc.is-cine .wc-slide.on{opacity:1;visibility:visible}

/* Le décor respire lentement pendant qu'on le regarde : l'atmosphère s'installe. */
.wc.is-cine .wc-bg{transform:scale(1.12);transition:transform 8s ease-out}
.wc.is-cine .wc-slide.on .wc-bg{transform:scale(1)}
.wc.is-cine .wc-slide--nobg .wc-bg{transform:scale(1.26)}
.wc.is-cine .wc-slide--nobg.on .wc-bg{transform:scale(1.14)}

/* Et la personne arrive APRÈS le décor, pas en même temps : le monde s'ouvre,
   puis quelqu'un y entre. C'est ce demi-temps qui fait l'effet. */
.wc.is-cine .wc-photo{opacity:0;transform:translateY(34px) scale(.965);
  transition:opacity .7s .3s ease,transform .85s .3s cubic-bezier(.2,.8,.28,1)}
.wc.is-cine .wc-slide.on .wc-photo{opacity:1;transform:none}
.wc.is-cine .wc-cap{opacity:0;transform:translateY(16px);transition:opacity .7s .16s ease,transform .7s .16s ease}
.wc.is-cine .wc-slide.on .wc-cap{opacity:1;transform:none}

/* L'éclat qui traverse au changement de monde — le « shik » de la transformation. */
.wc-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.5) 47%,
             rgba(242,201,76,.55) 52%,transparent 61%)}
.wc.is-cine .wc-slide.on .wc-sweep{animation:wcSweep 1.05s cubic-bezier(.3,.8,.3,1)}
@keyframes wcSweep{0%{opacity:1;transform:translateX(-130%)}100%{opacity:0;transform:translateX(130%)}}

@media (prefers-reduced-motion:reduce){
  .wc.is-cine .wc-slide,.wc.is-cine .wc-bg,
  .wc.is-cine .wc-cap,.wc.is-cine .wc-photo{transition:none}
  .wc.is-cine .wc-bg{transform:none}
  .wc.is-cine .wc-slide--nobg .wc-bg{transform:scale(1.14)}
  .wc.is-cine .wc-photo{opacity:1;transform:none}
  .wc.is-cine .wc-slide.on .wc-sweep{animation:none}
  .wc-track{scroll-behavior:auto}
}