/* Robert Saxton — effets « ouverture de chapitre ».
   Activés livre par livre (body.fx) et seulement quand le script a posé html.fx-on :
   sans script, ou avec « réduire les animations », la page reste entière et immobile. */

/* ---------- Tome 1 : braises qui montent derrière les sapins ---------- */
.embers { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; bottom: 40px; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
	background: #ffb070; box-shadow: 0 0 6px 1px rgba(255, 120, 50, .75), 0 0 16px 3px rgba(191, 58, 36, .35);
	animation: ember var(--d) linear var(--w) infinite; }
@keyframes ember {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }
	10% { opacity: .9; }
	50% { transform: translate(calc(var(--x) * .6), -32vh) scale(.8); opacity: .7; }
	100% { transform: translate(var(--x), -64vh) scale(.3); opacity: 0; }
}

/* ---------- Ouverture de chapitre ---------- */
/* Le filet se trace, le numéro se pose. */
.fx-on .fx main section .ch { opacity: 0; transition: opacity .6s ease; }
.fx-on .fx main section .ch::after { width: 0; transition: width 1.1s cubic-bezier(.2, .7, .1, 1) .15s; }
.fx-on .fx main section.in .ch { opacity: 1; }
.fx-on .fx main section.in .ch::after { width: 2.5rem; }

/* Le titre apparaît comme de l'encre qui sèche : flou, puis net. */
.fx-on .fx main section h2 { opacity: 0; filter: blur(7px); letter-spacing: .04em;
	transition: opacity 1s ease .2s, filter 1.2s ease .2s, letter-spacing 1.4s cubic-bezier(.2, .7, .1, 1) .2s; }
.fx-on .fx main section.in h2 { opacity: 1; filter: blur(0); letter-spacing: 0; }

/* Le reste de la section suit, bloc par bloc. */
.fx-on .fx .story p, .fx-on .fx .chars article, .fx-on .fx .words > div, .fx-on .fx .featured-quote, .fx-on .fx .reviews figure,
.fx-on .fx .excerpt-page, .fx-on .fx .bk-listen, .fx-on .fx .facts, .fx-on .fx .where-book, .fx-on .fx .others, .fx-on .fx .era figcaption,
.fx-on .fx .season figure, .fx-on .fx .season-list li, .fx-on .fx main .note {
	opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.fx-on .fx section.in .story p, .fx-on .fx section.in .chars article, .fx-on .fx section.in .words > div, .fx-on .fx section.in .featured-quote,
.fx-on .fx section.in .reviews figure, .fx-on .fx section.in .excerpt-page, .fx-on .fx section.in .bk-listen, .fx-on .fx section.in .facts,
.fx-on .fx section.in .where-book, .fx-on .fx section.in .others, .fx-on .fx section.in .era figcaption, .fx-on .fx section.in .season figure,
.fx-on .fx section.in .season-list li, .fx-on .fx main section.in .note { opacity: 1; transform: none; }
/* Décalage : chaque bloc arrive un temps après le précédent. */
.fx-on .fx section.in :is(.story p, .chars article, .words > div, .reviews figure, .season-list li):nth-child(1) { transition-delay: .45s; }
.fx-on .fx section.in :is(.story p, .chars article, .words > div, .reviews figure, .season-list li):nth-child(2) { transition-delay: .6s; }
.fx-on .fx section.in :is(.story p, .chars article, .words > div, .reviews figure, .season-list li):nth-child(3) { transition-delay: .75s; }
.fx-on .fx section.in :is(.story p, .chars article, .words > div, .reviews figure, .season-list li):nth-child(n+4) { transition-delay: .9s; }
.fx-on .fx section.in .featured-quote, .fx-on .fx section.in .excerpt-page, .fx-on .fx section.in .facts { transition-delay: .45s; }
.fx-on .fx section.in .where-book, .fx-on .fx section.in .bk-listen, .fx-on .fx section.in .era figcaption { transition-delay: .7s; }
.fx-on .fx section.in .others, .fx-on .fx main section.in .note { transition-delay: 1s; }

/* La lettrine rougeoit une fois, comme une braise qu'on attise. */
.fx-on .tome-1.fx section.in .story .dropcap { animation: kindle 2.4s ease .5s both; }
@keyframes kindle { 0% { color: #5a1a10; text-shadow: none; } 45% { color: #ff7a45; text-shadow: 0 0 18px rgba(255, 110, 50, .7); } 100% { color: var(--red); text-shadow: 0 0 0 transparent; } }

/* ---------- Tome 1 : traverser les 500 ans (lié au défilement, --p de 0 à 1) ---------- */
.era-img { position: relative; overflow: hidden; border-radius: var(--r); }
.era-img img { border-radius: 0; }
.fx-on .fx .eras { --p: 0; }
/* Le présent s'éloigne. */
.fx-on .fx .era.now .era-img::after { content: ""; position: absolute; inset: 0; background: #0a0b0f; opacity: calc(var(--p) * .55); pointer-events: none; }
/* Le passé sort de la brume. */
.fx-on .fx .era.past img { transform: scale(calc(1.08 - var(--p) * .08)); }
.fx-on .fx .era.past .era-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(222, 218, 208, .95), rgba(190, 186, 176, .9)); opacity: calc(1 - var(--p) * 1.15); }
/* Le fil entre les deux époques se remplit de braise : premier segment, puis second. */
.fx-on .fx .gate::before { background: linear-gradient(#ff7a45, var(--red)) top / 100% calc(clamp(0, var(--p) * 2, 1) * 100%) no-repeat, var(--line); }
.fx-on .fx .gate::after { background: linear-gradient(var(--red), #ff7a45) top / 100% calc(clamp(0, var(--p) * 2 - 1, 1) * 100%) no-repeat, var(--line); }
.fx-on .fx .gate::before, .fx-on .fx .gate::after { width: 2px; }
.fx-on .fx .gate-n { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }

/* ---------- Tome 2 : givre et aurore ---------- */
/* La lettrine se dégivre : blanc de givre, puis le vert du livre. */
.fx-on .tome-2.fx section.in .story .dropcap { animation: thaw 2.6s ease .5s both; }
@keyframes thaw { 0% { color: #eef8f9; text-shadow: 0 0 14px rgba(160, 225, 235, .95); } 100% { color: var(--red); text-shadow: 0 0 0 transparent; } }
/* Un reflet de givre parcourt le filet quand il se trace. */
.fx-on .tome-2.fx main section .ch::after { opacity: 1; background: linear-gradient(90deg, var(--red) 0 35%, #dff6f8 50%, var(--red) 65% 100%) 100% 0 / 300% 100% no-repeat; }
.fx-on .tome-2.fx main section.in .ch::after { animation: glint 1.8s ease .5s both; }
@keyframes glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* L'aurore et la neige glissent à des vitesses différentes (--y = défilement en px). */
.fx-on .tome-2.fx .bk-hero { --y: 0; }
.fx-on .tome-2.fx .aurora { translate: 0 calc(var(--y) * .35px); }
.fx-on .tome-2.fx .snow.s1 { translate: 0 calc(var(--y) * .18px); }
.fx-on .tome-2.fx .snow.s2 { translate: 0 calc(var(--y) * .08px); }
.fx-on .tome-2.fx .bk-bg img { translate: 0 calc(var(--y) * .12px); }
/* Le givre gagne les bords de la photo du lac (--f de 0 à 1). */
.tome-2 .season figure { position: relative; }
.fx-on .tome-2.fx .season figure { --f: 0; }
.fx-on .tome-2.fx .season figure::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; opacity: var(--f);
	background: radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(236, 246, 248, .55) 72%, rgba(248, 252, 253, .92) 100%);
	box-shadow: inset 0 0 40px 6px rgba(255, 255, 255, .5); }

@media (max-width: 899px) {
	.fx-on .fx .gate::before { background: linear-gradient(90deg, #ff7a45, var(--red)) left / calc(clamp(0, var(--p) * 2, 1) * 100%) 100% no-repeat, var(--line); }
	.fx-on .fx .gate::after { background: linear-gradient(90deg, var(--red), #ff7a45) left / calc(clamp(0, var(--p) * 2 - 1, 1) * 100%) 100% no-repeat, var(--line); }
	.fx-on .fx .gate::before, .fx-on .fx .gate::after { width: auto; height: 2px; }
	.embers i { bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) { .embers { display: none; } }