/* ==========================================================================
   KokoroWorks — Le voile paysage
   Le monde se vit en paysage. Sur appareil tactile en portrait, cette nuit
   couvre tout : Kokomi à l'étroit à l'arrivée, le monde endormi en cours
   de visite (body.monde-entre). Tout l'affichage est décidé ici, en CSS
   pur — voile.js (mêmes conditions, jamais de désaccord) ne fait que geler
   et réveiller le monde derrière. Hors tactile et sous reduced-motion, le
   voile n'existe pas : ces parcours-là ne demandent rien au visiteur.
   ========================================================================== */
.voile-paysage { display: none; }

@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html.js .voile-paysage {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 300; /* au-dessus du seuil (200) : la nuit du voile prime */
    place-content: center;
    justify-items: center;
    row-gap: var(--s4);
    padding: var(--s6);
    text-align: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* la même nuit que le seuil (.seuil-voile, livre.css) : au dégel, le
       voile se dissout dans un noir identique — transition invisible */
    background: radial-gradient(120vw 110svh at 50% 46%, #0B0810 30%, #020103 78%);
    color: var(--papier-lueur);
    /* le voile paraît vite (portrait, ci-dessous) et se dissout lentement :
       la visibilité n'échappe au lecteur d'écran qu'une fois le fondu fini */
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--allume), visibility 0s .9s;
  }
}
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) and (orientation: portrait) {
  html.js .voile-paysage {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s var(--allume);
  }
  /* les animations ne vivent qu'en portrait : à chaque apparition du voile,
     elles repartent de zéro — l'aide différée recompte ses 4 s */
  html.js .voile-paysage .voile-picto { animation: voile-pivote 2.4s var(--pose) infinite; }
  html.js .voile-paysage .voile-zzz { animation: voile-derive 3s var(--derive) infinite alternate; }
  html.js .voile-paysage .voile-aide { animation: voile-aide-nait .8s var(--allume) 4s both; }
}

/* ---- Les deux humeurs : l'étroit à l'arrivée, le dodo en cours de visite */
.voile-humeur {
  display: grid;
  justify-items: center;
  row-gap: var(--s4);
}
.voile-paysage .voile-dodo { display: none; }
body.monde-entre .voile-paysage .voile-etroit { display: none; }
body.monde-entre .voile-paysage .voile-dodo { display: grid; }

.voile-humeur img {
  width: min(46vw, 240px);
  max-height: 38svh; /* les petits téléphones : le texte garde sa place */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--lueur) 18%, transparent));
}
/* l'arrivée, sobre : le cœur du studio, seul dans la nuit — il respire
   à peine, comme la lueur du seuil */
.voile-coeur { margin-bottom: var(--s2); }
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) and (orientation: portrait) {
  html.js .voile-paysage .voile-coeur { animation: voile-coeur-bat 3.2s var(--derive) infinite alternate; }
}
@keyframes voile-coeur-bat {
  from { opacity: .75; }
  to   { opacity: 1; }
}
.voile-zzz {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--papier-lueur) 80%, transparent);
  margin-bottom: calc(-1 * var(--s3));
}
.voile-titre {
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: clamp(1.3rem, 5.5vw, 1.6rem);
  line-height: 1.25;
  max-width: 18ch;
}
.voile-texte {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 26ch;
  color: color-mix(in srgb, var(--papier-lueur) 92%, transparent);
}
.voile-aide {
  font-size: .85rem;
  max-width: 26ch;
  color: color-mix(in srgb, var(--papier-lueur) 70%, transparent);
  opacity: 0; /* elle n'apparaît qu'au bout de ~4 s de portrait (animation) */
}

/* ---- Le picto : un téléphone qui montre le geste, sans un mot ---- */
.voile-picto { overflow: visible; }
.voile-picto-corps { fill: none; stroke: var(--papier-lueur); stroke-width: 2.5; }
.voile-picto-ecran { fill: color-mix(in srgb, var(--lueur) 35%, transparent); }
.voile-picto-bouton { fill: var(--papier-lueur); }

@keyframes voile-pivote {
  0%, 12%  { transform: rotate(0deg); }
  42%, 66% { transform: rotate(90deg); }
  94%, 100% { transform: rotate(0deg); }
}
@keyframes voile-derive {
  from { transform: translateY(2px); }
  to   { transform: translateY(-4px); }
}
@keyframes voile-aide-nait {
  from { opacity: 0; }
  to   { opacity: 1; }
}