/* Portail de l'accueil · les toiles en nuage de grains (portail.js + nuage-de-points.js).
   Fond clair (--paper) : les grains portent la couleur de la toile, leur opacité vient de l'écart au papier.
   Trois états :
   - sans JS : composition fixe, la première toile nette à droite (::before), le texte à gauche ;
   - .portail--fixe (mouvement réduit, sans WebGL) : la même composition, posée par portail.js, avec sa légende ;
   - .portail--vivant : la section s'allonge de 1,6 écran ; la scène et les mots restent collés pendant
     le voyage (0 → 1 sur 1,4 écran), puis la peinture entière s'en va et la sélection arrive. */

.portail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(calc(100svh - var(--header) - 56px), auto);
  isolation: isolate; overflow: clip; background: var(--paper); }
.portail > * { grid-area: 1 / 1; }

/* La scène : le canvas, la légende, les instruments des coins. On y glisse pour tourner la toile. */
.portail-scene { position: relative; z-index: 0; min-height: 100%; }
.portail-ciel { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--courbe-sortie); }
.portail--pret .portail-ciel { opacity: 1; }
.portail--vivant { touch-action: pan-y; cursor: grab; }
.portail--vivant[data-tourne] { cursor: grabbing; }
.portail--vivant[data-tourne] .portail-centre { user-select: none; }

/* Le texte : à gauche sur ordinateur, en bas sur téléphone ; jamais posé sur les grains (ils s'éteignent
   avant lui), donc toujours sur le papier : contraste AA garanti. */
.portail-centre { position: relative; z-index: 2; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-block: clamp(40px, 8vh, 96px) calc(clamp(40px, 8vh, 96px) + var(--portail-decalage, 0px)); pointer-events: none; will-change: transform; }
.portail-centre > * { pointer-events: auto; max-width: min(40%, 34rem); transform-origin: 50% 50%; }
.portail-centre .etiquette { margin: 0 0 1.25rem; color: var(--ink-soft); }
.portail-centre h1 { margin: 0 0 1.5rem; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem); }
.portail-centre h1 em { font-style: italic; }
.portail-centre .lead { margin: 0 0 2rem; max-width: min(40%, 26ch); color: var(--ink); }
.portail-entrer { gap: .6em; }
.portail-entrer::after { content: "↓"; font-size: 1.05em; line-height: 1; transition: transform var(--d-court) var(--courbe-sortie); }
@media (hover: hover) and (pointer: fine) { .portail-entrer:hover::after { transform: translateY(2px); } }

/* Mise au point en cascade : l'étiquette, le nom, puis le bouton (la phrase est animée par site.js).
   Une fois finie (.portail--libre), plus d'animation : les mots sont libres de tourner et de s'envoler. */
.js .portail-centre > .etiquette, .js .portail-centre > h1, .js .portail-entrer { animation: portail-net 900ms var(--courbe-sortie) both; }
.js .portail-centre > h1 { animation-delay: 90ms; }
.js .portail-entrer { animation-delay: 720ms; }
.js .portail--libre .portail-centre > * { animation: none; }
@keyframes portail-net { from { opacity: 0; filter: blur(8px); transform: translateY(.25em); } }

/* La toile nette du repli, et la légende (titre · série, et la pause du changement de toile) */
.portail-toile { position: absolute; left: 0; top: 0; margin: 0; z-index: 1; opacity: 0; pointer-events: none; transform-origin: 0 0; }
.portail-toile a, .portail-toile img { display: block; width: 100%; height: 100%; }
.portail-toile img { object-fit: fill; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 48px -18px rgb(0 0 0 / .28); }
.portail--fixe .portail-toile { opacity: 1; pointer-events: auto; transition: opacity 600ms var(--courbe-sortie); }
.portail--fixe .portail-toile:not(.chargee) { opacity: 0; }

.portail-legende { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 2 * var(--gutter)); margin: 0;
  font: 500 var(--t-etiquette)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0 4px 0 14px; border-radius: 999px; background: color-mix(in oklab, var(--paper) 86%, transparent);
  opacity: 0; cursor: auto; }
.portail-legende.visible { opacity: 1; }
.portail-legende a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--ink); text-decoration: none; transition: opacity 200ms var(--courbe-sortie), filter 200ms var(--courbe-sortie); }
.portail-legende a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portail-legende a .s { color: var(--ink-soft); flex: 0 1 auto; }
.portail-legende a .s::before { content: "·"; padding: 0 .6em; }
.portail-legende a:hover { color: var(--accent); }
.portail-legende.change a { opacity: 0; filter: blur(4px); }
.portail-pause { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background-color var(--d-instant) var(--courbe-sortie), color var(--d-instant) var(--courbe-sortie); }
.portail-pause:hover { background: var(--paper-2); color: var(--ink); }
.portail-compteur { position: absolute; right: 12px; top: 12px; z-index: 4; font: 500 12px/1 var(--mono); color: var(--ink-soft); background: var(--paper); padding: 6px 10px; border-radius: 999px; }

/* Vivant : la section s'allonge, la scène et le texte restent à l'écran pendant le voyage */
.portail--vivant { grid-template-rows: calc(100svh - var(--header)); height: calc(260svh - var(--header)); }
.portail--vivant > .portail-scene, .portail--vivant > .portail-centre { position: sticky; top: var(--header); align-self: start; height: calc(100svh - var(--header)); }
/* Grille à une case : sans ceci, le calque des instruments s'étirerait sur toute la hauteur (coins écartés) */
.portail > .instr-portail { align-self: end; }
.portail--vivant .instr-portail { opacity: calc(1 - var(--vol, 0) * 8); }
/* Les instruments vivent dans la scène collante (portail.js les y déplace) : toujours dans les coins bas,
   au-dessus de la bande « Nouveau » au chargement ; les mots leur laissent la place (padding de .portail-centre). */
.portail--vivant .instr-portail, .portail--vivant .instr-portail.en-flux { position: absolute; padding-top: 0; bottom: var(--portail-decalage, 0px); }

/* Sans JavaScript : la première toile, nette, à droite (même toile que la première de data-oeuvres) */
html:not(.js) .portail::before { content: ""; grid-area: 1 / 1; z-index: 1; margin: 12vh var(--gutter) 12vh 50%;
  background: url("/img/oeuvres/sommeil-bleu-md.webp") center / contain no-repeat; }

@media (max-width: 759px) {
  .portail-centre { justify-content: flex-end; padding-block: 24px calc(84px + var(--portail-decalage, 0px)); }
  .portail-centre > *, .portail-centre .lead { max-width: 100%; }
  .portail-centre .etiquette { margin-bottom: .9rem; }
  .portail-centre h1 { margin-bottom: 1rem; font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .portail-centre .lead { margin-bottom: 1.4rem; }
  .portail--vivant { height: calc(250svh - var(--header)); }
  html:not(.js) .portail::before { margin: 16px var(--gutter) 0; height: 38svh; background-position: center top; }
  html:not(.js) .portail-centre { justify-content: flex-start; padding-top: calc(38svh + 40px); padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .portail-centre > .etiquette, .js .portail-centre > h1, .js .portail-entrer { animation: portail-fondu 300ms linear both; }
  @keyframes portail-fondu { from { opacity: 0; } }
}