/* Bohey — the illustrated legend (D-035): the drawings of the place mat around the story, page « La légende du loup ».
   Loaded only where a drawing is shown (inc/conte.php) and in the editor. The drawings fade into the kraft paper:
   their edges are transparent. Motion (drawings coming up, pencil circles, the note written by hand, the eyes) only
   for visitors who accept it. */

/* ===== Page and scenes ===== */
.bohey-conte-page { overflow-x: clip; } /* drawings bleeding to the edges never scroll the page sideways */
.bohey-conte {
	--marge: max(var(--gouttiere), (100vw - var(--max)) / 2); /* from the text column to the edge of the screen */
	--crayon: var(--wp--preset--font-family--kalam);
}
@media (min-width: 900px) { .bohey-conte { padding-block: 44px; } }
.bohey-conte__scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 56px; align-items: center; }
.bohey-conte__scene > * { margin: 0 !important; }

/* Texts */
.bohey-conte__texte { max-width: 40rem; }
.bohey-conte--chapitre:not(.bohey-conte--carte):not(.bohey-conte--brasserie) .bohey-conte__texte,
.bohey-conte--final .bohey-conte__texte { margin-inline: auto !important; }
.bohey-conte__texte p { font-size: 1.12rem; line-height: 1.75; }
.bohey-conte__texte p.is-style-manuscrit { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height: 1.1; } /* as everywhere on the site */
.bohey-conte__texte h2 { margin: 0 0 .5em; text-align: center; font: 700 clamp(1.45rem, 1.3rem + .6vw, 1.85rem)/1.2 var(--crayon); font-variation-settings: normal; color: var(--accent); }

/* Hand-written notes around the drawings (absolute even in the editor, which puts every block in relative position) */
.bohey-conte-note { position: absolute !important; z-index: 1; margin: 0 !important; font: 700 clamp(1.05rem, 4.4cqi, 1.6rem)/1.15 var(--crayon); color: var(--bois); text-shadow: 0 0 .3em var(--kraft), 0 0 .1em var(--kraft); rotate: -6deg; }

/* ===== Drawings ===== */
.bohey-conte-illu { position: relative; container-type: inline-size; }
.bohey-conte-illu__cadre { display: block; }
.bohey-conte-illu__dessin { display: block; width: 100%; height: auto; }
/* In the editor the theme does not draw the picture in the group: it shows as a background. */
.bohey-conte-illu:not(.is-dessine) { background: center / 100% auto no-repeat; }
.bohey-conte-illu--tete:not(.is-dessine) { aspect-ratio: 1583 / 1954; background-image: url(../images/legende/tete-loup-480.webp); }
.bohey-conte-illu--carte:not(.is-dessine) { aspect-ratio: 1916 / 1638; background-image: url(../images/legende/carte-800.webp); }
.bohey-conte-illu--brasserie:not(.is-dessine) { aspect-ratio: 1976 / 1350; background-image: url(../images/legende/brasserie-640.webp); }
.bohey-conte-illu--loup-gauche:not(.is-dessine) { aspect-ratio: 1731 / 1706; background-image: url(../images/legende/loup-gauche-480.webp); }
.bohey-conte-illu--loup-droite:not(.is-dessine) { aspect-ratio: 1852 / 1707; background-image: url(../images/legende/loup-droite-480.webp); }

/* ===== Opening: title, the wolf's head, the lead ===== */
/* Until Fraunces arrives, Georgia scaled to its width: the title breaks at the same place, so nothing below it jumps
   when the font loads (measured: « La légende » 4.48 em in Fraunces 800, 5.40 em in Georgia Bold). */
@font-face { font-family: "Fraunces secours"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 100 900; size-adjust: 83%; }
.bohey-conte--entete { padding-top: 16px !important; }
.bohey-conte--entete .bohey-conte__scene { grid-template-areas: "kicker" "titre" "dessin" "chapo"; row-gap: 0; }
.bohey-conte--entete .bohey-conte__texte { display: contents; }
.bohey-conte--entete .is-style-manuscrit { grid-area: kicker; margin: 0 !important; }
.bohey-conte__titre { grid-area: titre; margin: .1em 0 .2em !important; text-wrap: balance; font-family: Fraunces, "Fraunces secours", serif; font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.75rem); line-height: 1; color: var(--bois-fonce); }
.bohey-conte--entete .bohey-conte-illu { grid-area: dessin; width: min(74vw, 400px); justify-self: center; margin: 4px 0 0 !important; } /* phones: centred under the title */
.bohey-conte__chapo { grid-area: chapo; max-width: 40rem; margin: 20px 0 0 !important; font: 600 clamp(1.4rem, 1.15rem + 1vw, 1.75rem)/1.45 var(--wp--preset--font-family--fraunces); font-variation-settings: "SOFT" 100; color: var(--bois); }
.bohey-conte__texte p.bohey-conte__chapo { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); line-height: 1.45; } /* over the size of the story's paragraphs */
.bohey-conte__chapo::first-letter { float: left; margin: .1em .1em 0 0; font-size: 2.75em; line-height: .8; color: var(--accent); } /* two lines high */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
	.bohey-conte__chapo::first-letter { float: none; margin: 0 .1em 0 0; font-size: 1em; line-height: inherit; -webkit-initial-letter: 2; initial-letter: 2; } /* sits exactly on the second line */
}
@media (min-width: 900px) {
	.bohey-conte--entete .bohey-conte__scene {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas: ". dessin" "kicker dessin" "titre dessin" "chapo dessin" ". dessin";
	}
	.bohey-conte--entete .bohey-conte-illu { width: 100%; max-width: 480px; justify-self: end; margin: 0 !important; }
}

/* ===== The map and its labels (places measured on the place mat, in % of the drawing) ===== */
.bohey-conte--carte .bohey-conte-illu { width: 94%; justify-self: center; } /* phones: not edge to edge */
@media (min-width: 900px) {
	.bohey-conte--carte .bohey-conte__scene { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
	.bohey-conte--carte .bohey-conte-illu { width: auto; justify-self: stretch; margin: 0 calc(-.5 * var(--marge)) 0 0 !important; }
	.bohey-conte--carte .bohey-conte__texte h2, .bohey-conte--brasserie .bohey-conte__texte h2 { text-align: left; }
}
.bohey-conte-illu--carte { --k: 1; }
@media (max-width: 699px) { .bohey-conte-illu--carte { --k: 1.3; } } /* bigger words on phones, where the map is small */
.bohey-conte-illu--carte .bohey-conte-note { font: 400 calc(var(--k) * 2.6cqi)/1.08 var(--crayon); color: var(--encre); rotate: none; text-shadow: 0 0 .25em rgba(244, 232, 214, .9); }
.bohey-conte-illu--carte :is(.bohey-conte-note--brasserie, .bohey-conte-note--bohey, .bohey-conte-note--doncols, .bohey-conte-note--eglise, .bohey-conte-note--metres, .bohey-conte-note--bois strong) { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bohey-conte-note--brasserie { left: 40%; top: 35.4%; font-size: calc(var(--k) * 3.1cqi) !important; }
.bohey-conte-note--doncols { left: 39.6%; top: 45.2%; width: 6em; }
.bohey-conte-note--bohey { left: 64.5%; top: 48.8%; font-size: calc(var(--k) * 2.9cqi) !important; }
.bohey-conte-note--eglise { left: 22.6%; top: 56.8%; }
.bohey-conte-note--metres { left: 54.3%; top: 48.6%; translate: -50% -50%; rotate: -75deg !important; white-space: nowrap; font-size: calc(var(--k) * 1.8cqi) !important; }
.bohey-conte-note--bastogne { left: 59.5%; top: 15.4%; translate: -50% -50%; rotate: 39deg !important; white-space: nowrap; }
.bohey-conte-note--wiltz { left: 91.6%; top: 57.6%; translate: -50% -50%; rotate: 62deg !important; white-space: nowrap; }
.bohey-conte-note--statue { left: 55.4%; top: 59.6%; width: 7.4em; rotate: -4deg !important; }
.bohey-conte-note--bois { left: 1.5%; top: 38.6%; width: 25.5%; rotate: -6deg !important; color: var(--bois) !important; font-size: calc(var(--k) * 2.45cqi) !important; }
.bohey-conte-note--bois strong { font-size: 1.25em; color: var(--encre); }
@media (max-width: 699px) {
	.bohey-conte-note--brasserie { left: 38.5%; top: 29.2%; } /* phones: above the circled cross, for room */
	.bohey-conte-note--doncols { left: 35.8%; top: 41%; }
	.bohey-conte-note--bastogne { left: 61%; top: 16.6%; }
	.bohey-conte-note--eglise { left: 26.5%; top: 55%; }
	.bohey-conte-note--bois { left: 1.5%; top: 38%; width: 22%; font-size: calc(var(--k) * 2.6cqi) !important; line-height: 1.12; }
}

/* Pencil circles */
.bohey-conte-cercles { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0 !important; overflow: visible; pointer-events: none; } /* no flow-layout gap */
.bohey-conte-cercle { fill: none; stroke: var(--rouge); stroke-width: calc(9px * var(--k)); stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.bohey-conte-cercle.is-repasse { stroke-width: calc(5px * var(--k)); opacity: .32; }

/* ===== The brasserie, the wolf's lair? ===== */
.bohey-conte--brasserie .bohey-conte-illu { order: 2; margin-inline: calc(-1 * var(--gouttiere)) !important; margin-top: 17% !important; } /* phones: the text, then the drawing */
.bohey-conte-illu--brasserie .bohey-conte-note { left: 6%; top: -15%; width: max-content; rotate: -6deg; }
@media (min-width: 900px) {
	.bohey-conte--brasserie .bohey-conte__scene { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.bohey-conte--brasserie .bohey-conte-illu { order: 0; margin: 8% 0 0 calc(-.5 * var(--marge)) !important; }
	.bohey-conte-illu--brasserie .bohey-conte-note { top: -11%; rotate: -7deg; }
}

/* ===== Ending: the text between the two howling wolves ===== */
.bohey-conte--final { padding-bottom: 0 !important; }
.bohey-conte--final .bohey-conte__scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texte texte" "gauche droite"; gap: 84px 0; align-items: end; }
.bohey-conte--final .bohey-conte__texte { grid-area: texte; text-align: center; }
.bohey-conte-illu--loup-gauche { grid-area: gauche; margin-left: calc(-1 * var(--gouttiere)) !important; }
.bohey-conte-illu--loup-droite { grid-area: droite; margin-right: calc(-1 * var(--gouttiere)) !important; }
@media (min-width: 900px) {
	.bohey-conte--final .bohey-conte__scene { grid-template-columns: minmax(0, 1fr) minmax(0, 31rem) minmax(0, 1fr); grid-template-areas: "gauche texte droite"; gap: 0 32px; }
	.bohey-conte--final .bohey-conte__texte { align-self: center; padding-bottom: 6%; }
	.bohey-conte-illu--loup-gauche { margin-left: calc(-.6 * var(--marge)) !important; }
	.bohey-conte-illu--loup-droite { margin-right: calc(-.6 * var(--marge)) !important; }
}

/* ===== Motion ===== */
@property --bohey-regard { syntax: "<percentage>"; inherits: false; initial-value: 300%; }
@media (prefers-reduced-motion: no-preference) {
	/* The eyes first, then the whole head. */
	.bohey-conte-illu--tete .bohey-conte-illu__dessin {
		-webkit-mask-image: radial-gradient(ellipse 50% 40% at 47.75% 51.1%, #000 var(--bohey-regard), transparent calc(var(--bohey-regard) + 30%));
		mask-image: radial-gradient(ellipse 50% 40% at 47.75% 51.1%, #000 var(--bohey-regard), transparent calc(var(--bohey-regard) + 30%));
		animation: bohey-conte-regard 2.8s ease-in-out .2s both;
	}
	@keyframes bohey-conte-regard { 0%, 24% { --bohey-regard: 20%; } 100% { --bohey-regard: 170%; } }

	/* The other drawings come up out of the paper when they come into view (assets/js/conte.js: « is-pret » while
	   waiting, « is-vu » once seen; without the script, everything simply shows), then their notes. */
	.is-pret .bohey-conte-illu__dessin { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity 1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1); }
	.is-pret:is(.bohey-conte-illu--loup-gauche, .bohey-conte-illu--loup-droite) .bohey-conte-illu__dessin { transform: translateY(16%); transition-duration: 1.4s, 1.8s; }
	.is-pret.bohey-conte-illu--loup-droite .bohey-conte-illu__dessin { transition-delay: .25s; }
	.is-pret .bohey-conte-note { opacity: 0; transition: opacity .9s ease .8s; }
	.is-vu .bohey-conte-illu__dessin, .is-vu .bohey-conte-note { opacity: 1; transform: none; }

	/* « La brasserie / serait-elle / le repaire du loup ? » writes itself, line by line, left to right, in about two
	   seconds: a soft edge sweeps each line (assets/js/conte.js wraps them), instead of the fade of the other notes. */
	.is-pret .bohey-conte-note.is-ecrite { opacity: 1; transition: none; }
	.bohey-conte-note.is-ecrite > span { display: inline-block; }
	.is-pret .bohey-conte-note.is-ecrite > span { -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 230% 100% no-repeat; mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 230% 100% no-repeat; transition: -webkit-mask-position .55s cubic-bezier(.45, .05, .55, .95), mask-position .55s cubic-bezier(.45, .05, .55, .95); transition-delay: calc(.35s + var(--ligne) * .5s); }
	.is-vu .bohey-conte-note.is-ecrite > span { -webkit-mask-position: 0 0; mask-position: 0 0; }

	/* The pencil circles of the map draw themselves, one after the other, then go over again. */
	.is-pret .bohey-conte-cercle { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.02; transition: stroke-dashoffset 1s cubic-bezier(.55, .1, .35, 1); }
	.is-vu .bohey-conte-cercle { stroke-dashoffset: 0; }
	.is-vu .bohey-conte-cercle--bois { transition-delay: .9s; }
	.is-vu .bohey-conte-cercle--brasserie { transition-delay: 1.6s; }
	.is-vu .bohey-conte-cercle--statue { transition-delay: 2.3s; }
	.is-vu .bohey-conte-cercle.is-repasse { transition-duration: .7s; }
	.is-vu .bohey-conte-cercle--bois.is-repasse { transition-delay: 1.3s; }
	.is-vu .bohey-conte-cercle--brasserie.is-repasse { transition-delay: 2s; }
	.is-vu .bohey-conte-cercle--statue.is-repasse { transition-delay: 2.7s; }

}