/* Chez Ali – accueil « triptyque » : trois arches percées dans le fond de la page (ciel étoilé, js/fonds.js).
   js/triptyque.js découpe les arches (clip-path), fait avancer la vidéo au défilement et anime les textes. */

.triptyque { position: relative; height: 520svh; }
.triptyque__scene { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* Ce qu'on voit à travers les arches : la vidéo (image d'attente dessous), un voile, la description. */
.triptyque__arches { position: absolute; inset: 0; background: var(--deep); }
.triptyque__fond, .triptyque__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.triptyque__fond { background: url("../media/header-poster.webp") center / cover no-repeat; }
@media (max-width: 700px) { .triptyque__fond { background-image: url("../media/header-poster-960.webp"); } }
/* Voile vert sombre : il s'intensifie quand les textes passent, pour qu'ils restent lisibles. */
.triptyque__voile {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(3, 26, 15, .2), rgba(3, 26, 15, .75));
  opacity: var(--voile, .22);
}


/* Fondu de fin : un voile presque noir qui monte pendant que la section suivante recouvre la vidéo. */
.triptyque__nuit { position: absolute; inset: 0; background: #020f08; opacity: 0; pointer-events: none; }
/* La section suivante remonte d'un écran : elle défile par-dessus la scène encore épinglée. */
.triptyque + section { position: relative; z-index: 1; margin-top: -100svh; }

/* Titre : « Chez » en grotesque grasse, « Ali » en fine italique, point doré.
   Le calque est coupé au niveau du sommet des arches : les lettres qui montent y disparaissent. */
.triptyque__haut { position: absolute; inset: 0; pointer-events: none; }
.triptyque__titre {
  position: absolute; left: 50%; top: 47%; margin: 0; translate: -50% -50%;
  display: flex; align-items: baseline; gap: .22em; white-space: nowrap;
  font: 800 clamp(64px, 12vw, 190px)/1 var(--display); letter-spacing: -.035em; color: #fffaf0;
  text-shadow: 0 12px 50px rgba(2, 18, 10, .55);
}
.triptyque__titre .mot { display: inline-flex; padding: .06em 0 .14em; }
.triptyque__titre .mot--fin { font-weight: 200; font-style: italic; letter-spacing: -.02em; padding-right: .06em; }
.triptyque__titre .c, .triptyque__titre .point { display: inline-block; will-change: translate; }
.triptyque__titre .point { margin-left: -.18em; color: var(--gold); font-weight: 800; }
.triptyque__ar {
  position: absolute; left: 50%; top: calc(47% + clamp(48px, 7.4vw, 118px)); margin: 0; translate: -50% 0;
  font: 400 clamp(44px, 5.8vw, 92px)/1.2 var(--arabic); color: var(--gold-2); white-space: nowrap;
  text-shadow: 0 6px 24px rgba(2, 18, 10, .6);
}

/* Description, dans les arches (les piliers passent devant) : les mots apparaissent en se défloutant. */
.triptyque__intro { position: absolute; inset: 0; display: grid; place-content: center; gap: .5em; pointer-events: none; padding: 0 var(--gutter); visibility: hidden; }
.triptyque__intro .bloc { margin: 0; font: 500 clamp(28px, 3.9vw, 58px)/1.12 var(--display); letter-spacing: -.02em; color: #fffaf0; text-shadow: 0 8px 30px rgba(2, 18, 10, .6); }
.triptyque__intro .bloc > span { display: block; }
.triptyque__intro .bloc--1 { translate: -12% 0; }
.triptyque__intro .bloc--2 { translate: 16% 0; }
.triptyque__intro .w { display: inline-block; margin-right: .26em; will-change: filter, opacity; }
.triptyque__intro .w--or { color: var(--gold-2); }


@media (max-width: 700px) {
  .triptyque { height: 440svh; }
  .triptyque__titre { top: 44%; font-size: clamp(56px, 18vw, 96px); }
  .triptyque__ar { top: calc(44% + 14vw); }
  .triptyque__intro .bloc { font-size: clamp(22px, 7vw, 34px); }
  .triptyque__intro .bloc--1, .triptyque__intro .bloc--2 { translate: 0 0; }
}

/* Animations réduites : pas de scène épinglée, tout est posé à plat sur l'image fixe. */
@media (prefers-reduced-motion: reduce) {
  .triptyque + section { margin-top: 0; }
  .triptyque__nuit { display: none; }
  .triptyque { height: auto; }
  .triptyque__scene { position: relative; height: auto; min-height: 100svh; display: grid; align-content: center; gap: 40px; padding: 120px var(--gutter) 90px; }
  .triptyque__haut, .triptyque__titre, .triptyque__ar { position: relative; inset: auto; left: auto; top: auto; translate: none; justify-self: center; padding: 0; visibility: visible; }
  .triptyque__video, .triptyque__intro { display: none; }
}