/* ─── Le tapis en 3D (scene3d.js) ────────────────────────────────────────────
   Deux toiles posées dans la page (le corps, positionné), une seule scène.
   Elles défilent avec elle : sur ordinateur, une fenêtre deux fois haute
   comme l'écran, replacée quand on approche de son bord ; au doigt, toute la
   page. Sans WebGL ou sans module, rien ne change : le tapis dessiné
   reste.
   · Dessous, sous toute la page : le tapis et les ombres qui tombent sur lui
     (celles des objets et des papiers).
   · Dessus, entre la page et la lumière du feuillage (.h-lumiere, z 50) : les
     objets et leurs ombres sur les papiers. Sous la barre (z 100), qui n'est
     pas sur la table.
   Aucune des deux ne prend les clics : scene3d.js écoute la fenêtre et ne
   retient que les gestes qui commencent sur un objet. */
.scene3d {
  /* dans la page, et non fixées : voir « Deux toiles » dans scene3d.js */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.scene3d--dessus { z-index: 40; }
.scene3d canvas { display: block; }

html.scene3d-survol body { cursor: grab; }
html.scene3d-survol body * { cursor: inherit !important; }
html.scene3d-tient,
html.scene3d-tient * {
  cursor: grabbing !important;
  user-select: none;
}

/* Le dessin garde sa place (script.js le cale toujours, et la caméra se
   règle sur lui) mais ne se voit plus. */
html.scene3d-prete body.home .h-tapis { background: transparent; }
html.scene3d-prete body.home .h-tapis__plan { opacity: 0; }

/* ─── Les papiers sur la table ───────────────────────────────────────────────
   Les cartes projet sont de vraies feuilles, tenues en haut par une punaise.
   Leur double 3D (scene3d.js) porte leur ombre, relevée en bas et aux coins.
   Au survol, la feuille ne grandit plus à plat : elle pivote autour de sa
   punaise, son bas monte vers l'œil. C'est une vraie rotation en perspective,
   à la distance de la caméra 3D (--scene3d-persp), et le double pivote du
   même angle : l'ombre s'allonge sous le bas de la feuille. Le papier, un peu
   plus face au soleil, s'éclaircit d'autant.
   --soulevement va de 0 (posé) à 1 (soulevé) ; scene3d.js le lit à chaque
   image pour suivre la transition. */
@property --soulevement {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
/* La charnière et le grain valent avec ou sans la 3D : réservés à la 3D,
   ils changeaient à son arrivée, et toutes les cartes glissaient de
   quelques pixels et changeaient de papier d'un coup (la pente tourne
   autour de transform-origin). La page semblait se recharger. */
.h-projects__grid .pcard__papier {
  transform-origin: 50% 0;   /* la charnière : la punaise, en haut */
  /* le grain du papier, celui de la feuille « À propos » */
  background:
    url("assets/accueil/texture-papier.jpg") center / cover,
    var(--papier);
  /* en lumière douce : le grain seul, sans la teinte ni le voile de la photo */
  background-blend-mode: soft-light;
}
html.scene3d-prete .h-projects__grid .pcard__papier {
  transform: perspective(var(--scene3d-persp, 2400px)) rotateX(calc(var(--soulevement) * 9deg));
  transition:
    rotate 1100ms var(--courbe),
    scale 1100ms var(--courbe),
    --soulevement 1100ms var(--courbe);
  will-change: rotate, scale, transform;
}
/* La punaise 3D prend la place de son rendu figé (voir « La punaise, en
   attendant la 3D » dans styles-v3.css), au même endroit. */
html.scene3d-prete .h-projects__grid .pcard__papier::before { content: none; }
/* la lumière sur la feuille qui se lève : plus claire vers le bas, qui monte */
html.scene3d-prete .h-projects__grid .pcard__papier::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(to bottom,
    rgb(255 250 238 / 0) 15%,
    rgb(255 250 238 / 0.09) 65%,
    rgb(255 250 238 / 0.16));
  opacity: var(--soulevement);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html.scene3d-prete .h-projects__grid .pcard:hover .pcard__papier {
    --soulevement: 1;
    scale: 1.008;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.scene3d-prete .h-projects__grid .pcard__papier { transition: none; }
}

/* ─── La lumière avance avec la page ─────────────────────────────────────────
   Le feuillage glisse d'un tiers du défilement : son calque est allongé de
   toute sa course (--lumiere-course, scene3d.js) pour qu'aucun bord ne
   paraisse. Le glissement est une animation liée au défilement, sur
   translate : le navigateur la joue avec le défilement lui-même, au trackpad
   comme à la molette, sans attendre de script. L'arrivée et le balancement
   (styles-v3.css) jouent sur transform. Au doigt, ou sans ces animations,
   la lumière reste fixe. */
body.home .h-lumiere::before {
  bottom: auto;
  height: calc(124% + var(--lumiere-course, 0px));
}
@keyframes lumiere-avance {
  to { translate: 0 calc(-1 * var(--lumiere-course, 0px)); }
}
@supports (animation-timeline: scroll()) {
  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body.home .h-lumiere::before {
      animation:
        ombre-arrive 2.6s var(--courbe) both,
        ombre-bouge 9s ease-in-out 2.6s infinite alternate,
        lumiere-avance linear both;
      animation-timeline: auto, auto, scroll(root block);
    }
  }
}

/* ─── Le feuillage sur les papiers ───────────────────────────────────────────
   Un calque par papier (scene3d.js le pose) : la même photo, en gris et
   contrastée comme .h-lumiere, en produit. Les feuilles assombrissent le
   papier, le soleil le laisse clair. Il suit le papier (pente, survol) et
   reste dans sa forme (coins, clip-path). L'image est posée dans le calque
   à sa place dans la page (--fx, --fy, --fw, --fh), et glisse des deux tiers
   du défilement (la lumière en avance d'un tiers) : une animation liée au
   défilement, sans script. */
.h-feuillage {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
  /* une ombre d'été, à peine chaude, pas un voile gris */
  filter: grayscale(1) sepia(0.35) contrast(1.3) brightness(1.22);
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
}
.h-feuillage::before {
  content: "";
  position: absolute;
  left: var(--fx, 0px);
  top: var(--fy, 0px);
  width: var(--fw, 100%);
  height: var(--fh, 100%);
  background: url("assets/accueil/ombre-feuillage.jpg") 0 0 / 100% 100% no-repeat;
}
@keyframes feuillage-glisse {
  to { translate: 0 calc((1 - 0.3) * var(--defil-max, 0px)); }
}
@supports (animation-timeline: scroll()) {
  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .h-feuillage::before {
      animation: feuillage-glisse linear both;
      animation-timeline: scroll(root block);
    }
  }
}
/* le fond de l'enveloppe porte son calque : il lui faut une boîte à lui */
.h-enveloppe__fond { position: relative; }

/* La lumière du feuillage sur toute la page, un peu moins marquée : le
   tapis 3D et ses ombres portent déjà du relief. Dès le dessin, et non à
   l'arrivée de la 3D : elle s'éclaircissait d'un coup. */
body.home .h-lumiere { opacity: 0.78; }

/* ─── La barre sur téléphone ─────────────────────────────────────────────────
   Collée en haut sur toute la largeur, elle finissait à 6 px sous ses mots :
   les objets et le tapis passaient dessous au ras des liens. Un peu d'air
   en bas. */
@media (max-width: 40rem) {
  body.home .h-header { padding-bottom: 0.875rem; }
}

/* ─── Les passages de page ───────────────────────────────────────────────────
   En partant vers le playground, le tapis dessiné s'éteignait (voir « Le
   tapis s'éteint », styles-v3.css) ; il est maintenant invisible, et c'est
   la table 3D qui doit s'éteindre à sa place, objets compris. Au retour,
   elle se rallume au rythme de l'ombre qui se lève. */
@media (prefers-reduced-motion: no-preference) {
  body.accueil.se-vide .scene3d {
    animation: tapis-s-eteint var(--vt-pose) var(--courbe-trajet) forwards;
  }
  html[data-vt="etale"] body.accueil:not(.se-vide) .scene3d {
    animation: tapis-s-allume var(--vt-lever) var(--courbe-trajet) backwards;
  }
}

/* ─── Au doigt : rien ne se redessine quand on défile ───────────────────────
   Sur téléphone et tablette, les deux toiles couvrent toute la page et
   défilent avec elle : scene3d.js les dessine une fois, et le défilement ne
   fait plus que déplacer une image. La lumière
   du feuillage reste fixe et ne se balance plus : un calque plein écran en
   lumière douce, recomposé à chaque image, c'était autant de moins pour le
   défilement. Son arrivée joue toujours. */
@media (pointer: coarse) {
  .scene3d { bottom: 0; }
  body.home .h-lumiere::before { animation-name: ombre-arrive; animation-iteration-count: 1; }
}