/* =========================================================
   Thème : Ce sont des rats
   Horreur domestique et silencieuse. Pas de monstre, pas de rouge :
   du placoplâtre, de l'isolant jaune, du graphite.
   L'ouverture montre la chambre à travers un trou du plafond,
   et la page s'assombrit d'une partie à l'autre.
   maison → grenier → dessins → nuit → trappe
   ========================================================= */

@property --bg { syntax: "<color>"; inherits: true; initial-value: #1d2024; }
@property --zoom { syntax: "<number>"; inherits: true; initial-value: 1; }

.theme-rats {
  --bg: #1d2024;
  --surface: #25282d;
  --ink: #ddd7ca;              /* blanc cassé de placoplâtre */
  --ink-muted: #8f8b82;
  --accent: #c9b46a;           /* isolant jaune */
  --accent-2: #b9bcc4;         /* graphite clair */
  --graphite: #9a9ca3;
  --font-display: "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive;
  --font-body: "Source Serif 4", Georgia, serif;
  --measure: 34em;

  transition: --bg 2.4s ease;
}

.theme-rats[data-mood="maison"]  { --bg: #1d2024; }
.theme-rats[data-mood="grenier"] { --bg: #1c1a15; }
.theme-rats[data-mood="dessins"] { --bg: #17181b; }
.theme-rats[data-mood="nuit"]    { --bg: #101113; }
.theme-rats[data-mood="trappe"]  { --bg: #08090a; }

/* ---------- Ouverture : le judas dans le plafond ---------- */
.theme-rats .hero {
  position: relative;
  height: 180svh;              /* on reste sur l'image le temps du recul */
  background: #070708;
}
.hero__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 32rem;
  display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
}
.hero__peephole {
  position: absolute; inset: 0; z-index: -1;
  display: grid; place-items: center;
}
/* L'image contient déjà le trou du plafond : on s'en approche puis on recule */
.hero__peephole img {
  height: 100%; width: auto; max-width: none; aspect-ratio: 1;
  transform: scale(var(--zoom));
  transform-origin: 32% 50%;   /* l'enfant endormie */
  filter: brightness(2.1) contrast(1.08) saturate(.75);
}
@media (min-width: 60rem) {
  .hero__peephole { justify-items: end; }
}

.hero__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #070708 6%, rgb(7 7 8 / .55) 30%, transparent 52%);
}

.theme-rats .hero__content {
  position: relative; z-index: 1;
  width: min(100%, 76rem); margin: 0 auto;
  padding: 6rem var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
}
.theme-rats .hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, min(11vw, 14vh), 7.5rem);
  line-height: .85;
  color: var(--graphite);
  /* trait de crayon : léger halo gris et grain irrégulier */
  text-shadow: 0 0 1px rgb(220 220 225 / .6), 0 2px 24px rgb(0 0 0 / .9);
  max-width: 9ch;
}
.theme-rats .hero__subtitle { margin-top: 1.2rem; font-style: italic; }
.theme-rats .hero__meta { margin-top: .4rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.theme-rats .hero__start {
  display: inline-block; margin-top: 1.8rem;
  padding: .75rem 1.2rem;
  font-family: var(--font-ui); font-size: .95rem; text-decoration: none;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 2px;
}
.theme-rats .hero__start:hover { border-color: var(--accent); }

/* ---------- Sommaire ---------- */
.theme-rats .toc { padding-top: clamp(3rem, 8vh, 5rem); }
.theme-rats .toc a { font-size: 1.05rem; }
.theme-rats .toc a::before { color: var(--accent); font-family: var(--font-ui); font-size: .9rem; }

/* ---------- Texte ---------- */
.theme-rats .chapter__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  line-height: .95;
  color: var(--graphite);
}
.theme-rats .chapter__num { color: var(--accent); }

.theme-rats .story p { line-height: 1.75; }
.lead { font-size: var(--step-1); line-height: 1.5 !important; }
.theme-rats .dialogue { padding-left: 0; text-indent: 0; }

/* Trois coups : la colonne de texte tressaute trois fois, une seule fois */
.knock.is-seen { animation: knock 1.8s 1 .2s; }
@keyframes knock {
  0%, 4%, 30%, 34%, 60%, 64%, 100% { transform: none; }
  2%  { transform: translateY(-3px); }
  32% { transform: translateY(-3px); }
  62% { transform: translateY(-3px); }
}

/* Dernière phrase : arrive lentement, à part */
.last-line {
  margin-top: 5em !important;
  font-size: var(--step-2); line-height: 1.3 !important;
  font-style: italic;
}
.js-fx .last-line { opacity: 0; transform: translateY(.3em); transition: opacity 3.5s ease, transform 3.5s ease; }
.js-fx .last-line.is-seen { opacity: 1; transform: none; }

/* ---------- Illustrations ---------- */
.theme-rats .illu__frame { background: #0c0c0d; }


/* ---------- Source ---------- */

/* Sans effets : trou grand ouvert, texte immédiatement visible */
.fx-off .hero__peephole img { --zoom: 1; }
.fx-off .hero { height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero__peephole img { --zoom: 1; }
  .theme-rats .hero { height: auto; }
}