/*
  Mise en scène : tableaux plein écran (fondu + lent zoom), voile pour la lisibilité,
  et six styles de sous-titres « façon Insta » choisis par sous-titre dans la timeline :
  pop, serif, mix, highlight, type, arabic, hand (écriture manuscrite, pour les fonds noirs).
  Un mot est visible dès qu'il reçoit la classe .on (posée par app.js à l'instant où il est dit).
*/

:root {
  --accent: #f7b6d2;
  --ink: #fffaf2;
  --night: #0d1418;
  --shadow: 0 2px 22px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5);
  --fade: 2.4s;
  --mono-fade: 2.8s;
}

* { box-sizing: border-box; margin: 0; }

html, body {
  height: 100%;
  background: var(--night);
  color: var(--ink);
  overflow: hidden;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tableaux ---------- */

#stage { position: fixed; inset: 0; overflow: hidden; cursor: pointer; }

.layer {
  position: absolute;
  background-color: #000;
  inset: -4%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--fade) ease-in-out, filter var(--mono-fade) ease-in-out;
  will-change: transform, opacity;
}
.layer.visible { opacity: 1; }

/* Le tableau perd ses couleurs (passages « rose » et final) ; .cut retire les transitions une frame */
#stage.mono .layer { filter: grayscale(1) brightness(.55) contrast(1.05); }
#stage.cut .layer { transition: none; }

.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 50%, rgba(10, 16, 20, .38), transparent 75%),
    linear-gradient(to bottom, rgba(10, 16, 20, .35), transparent 22%, transparent 70%, rgba(10, 16, 20, .55));
}
.veil::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#credit {
  position: absolute;
  left: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  max-width: 70%;
  font: italic 300 .8rem/1.3 "Cormorant Garamond", serif;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity 1.5s ease;
  text-shadow: var(--shadow);
}
#credit.visible { opacity: .85; }

#progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}
#progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: background 2s ease;
}

#pause-badge {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  font-size: 2.2rem;
  opacity: 0;
  transition: opacity .3s ease;
  text-shadow: var(--shadow);
  pointer-events: none;
}
#stage.paused #pause-badge { opacity: .8; }

/* ---------- Sous-titres : socle commun ---------- */

#captions { position: absolute; inset: 0; pointer-events: none; }

.cap {
  position: absolute;
  left: 50%;
  width: min(88vw, 760px);
  translate: -50% -50%;
  text-align: center;
  text-shadow: var(--shadow);
  transition: opacity .45s ease, filter .45s ease;
}
.cap.pos-center { top: 50%; }
.cap.pos-high { top: 30%; }
.cap.pos-low { top: 70%; }
.cap.out { opacity: 0; filter: blur(6px); }

.cap .w {
  display: inline-block;
  margin: 0 .14em;
  opacity: 0;
}
.cap .w.on { opacity: 1; }
.cap .w.em { color: var(--accent); }

.cap .sub {
  display: block;
  margin-top: .8rem;
  font: italic 300 clamp(1rem, 3.6vw, 1.35rem)/1.3 "Cormorant Garamond", serif;
  opacity: 0;
  animation: fade-in .8s .6s ease forwards;
}

/* pop : mots qui « sautent », mot clé en écriture manuscrite */
.style-pop { font: 800 clamp(1.7rem, 7.4vw, 3.4rem)/1.1 "Syne", sans-serif; text-transform: uppercase; }
.style-pop .w { transform: scale(.5); }
.style-pop .w.on { animation: pop .42s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.style-pop .w.em {
  font: 400 1.9em/1 "Pinyon Script", cursive;
  text-transform: none;
  rotate: -5deg;
  text-shadow: 0 0 22px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .6);
}

/* serif : italique élégante, mots qui sortent du flou */
.style-serif { font: italic 400 clamp(1.8rem, 7.6vw, 3.4rem)/1.2 "Playfair Display", serif; }
.style-serif .w { filter: blur(10px); transform: translateY(10px); }
.style-serif .w.on { animation: unblur .7s ease forwards; }
.style-serif .w.em { font-weight: 700; }

/* mix : petites capitales espacées + mot clé géant en serif */
.style-mix { font: 600 clamp(.85rem, 3.4vw, 1.15rem)/1.6 "Inter", sans-serif; text-transform: uppercase; letter-spacing: .32em; }
.style-mix .w { transform: translateY(8px); }
.style-mix .w.on { animation: rise .5s ease forwards; }
.style-mix .w.em {
  display: block;
  margin: .1em 0 .15em;
  font: italic 300 clamp(3.4rem, 17vw, 7rem)/.95 "Cormorant Garamond", serif;
  letter-spacing: 0;
  text-transform: none;
}

/* highlight : coup de pinceau coloré derrière le mot clé */
.style-highlight { font: 400 clamp(1.9rem, 8vw, 3.6rem)/1.25 "DM Serif Display", serif; }
.style-highlight .w { transform: translateY(6px); }
.style-highlight .w.on { animation: rise .45s ease forwards; }
.style-highlight .w.em {
  color: var(--night);
  text-shadow: none;
  padding: 0 .18em;
  background: linear-gradient(100deg, transparent 2%, var(--accent) 6%, var(--accent) 94%, transparent 98%) no-repeat 0 60% / 0% 78%;
  border-radius: .2em .5em .3em .6em;
}
.style-highlight .w.em.on { animation: rise .45s ease forwards, brush .6s .15s ease forwards; }

/* type : machine à écrire, apparition sèche + curseur */
.style-type { font: 400 clamp(1.45rem, 6.2vw, 2.5rem)/1.45 "Courier Prime", monospace; letter-spacing: .02em; }
.style-type .w { margin: 0 .2em; }
.style-type .w.em { background: rgba(255, 250, 242, .92); color: var(--night); text-shadow: none; padding: 0 .15em; }
.style-type .w.on:not(:has(~ .w.on))::after {
  content: "▍";
  margin-left: .1em;
  color: var(--accent);
  animation: blink .8s steps(1) infinite;
}

/* arabic : calligraphie dorée, de droite à gauche */
.style-arabic { direction: rtl; font: 700 clamp(2.1rem, 9.4vw, 4.4rem)/1.5 "Aref Ruqaa", "Amiri", serif; }
.style-arabic .w {
  background: linear-gradient(180deg, #fff3cf, #e9c46a 55%, #c98a2b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)) blur(8px);
}
.style-arabic .w.on { animation: glow 1s ease forwards; }
.style-arabic .w.em { color: transparent; }
.style-arabic .sub { direction: ltr; }

/* hand : écriture manuscrite blanche, chaque mot se « trace » de gauche à droite */
.style-hand { font: 500 clamp(2rem, 8.6vw, 3.6rem)/1.25 "Caveat", cursive; }
.style-hand .w { opacity: 1; clip-path: inset(0 100% 0 0); }
.style-hand .w.on { animation: write .45s ease-out forwards; }
.style-hand .w.em { color: var(--ink); font-weight: 600; }

@keyframes write { to { clip-path: inset(0 -10% 0 0); } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
@keyframes unblur { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes brush { to { background-size: 100% 78%; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade-in { to { opacity: .9; } }
@keyframes glow {
  to { opacity: 1; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)) blur(0); }
}

/* ---------- Écrans d'ouverture et de fin ---------- */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 24px 16px;
  text-align: center;
  background: rgba(13, 20, 24, .45);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: opacity 1.6s ease;
  z-index: 10;
}
.screen[hidden] { display: none; }
.screen.leaving { opacity: 0; pointer-events: none; }

.kicker {
  font: 600 .8rem/1 "Inter", sans-serif;
  letter-spacing: .4em;
  text-transform: uppercase;
  opacity: .85;
}
.screen h1, .screen h2 {
  font: 400 clamp(4rem, 20vw, 8rem)/1 "Pinyon Script", cursive;
  color: var(--accent);
  text-shadow: var(--shadow);
}
.hint { font: italic 300 clamp(1.15rem, 4.6vw, 1.5rem)/1.45 "Cormorant Garamond", serif; }
.arabic { font: 700 clamp(2.2rem, 10vw, 3.6rem)/1.4 "Aref Ruqaa", "Amiri", serif; color: #e9c46a; }

.screen button {
  margin-top: .8rem;
  padding: .95em 2.4em;
  border: 1px solid rgba(255, 250, 242, .7);
  border-radius: 999px;
  background: rgba(255, 250, 242, .1);
  color: var(--ink);
  font: 600 .85rem/1 "Inter", sans-serif;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, opacity .3s ease;
}
.screen button:hover:not(:disabled) { background: rgba(255, 250, 242, .25); }
.screen button:disabled { opacity: .5; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .cap .w.on { animation: none !important; opacity: 1; filter: none; transform: none; clip-path: none; }
  .style-highlight .w.em { background-size: 100% 78%; }
}