/* ==========================================================================
   Littlesoms — Croissant « Someone find Soms » (home)
   Pattern littlesoms/home-spots (section SOUS « Little Soms trinkets »). Chargé après main.css
   (handle littlesoms-croissant) ; script assets/js/croissant.js (defer). Doc : CROISSANT.md (même dossier).

   CHANGER LE DESSIN : un seul fichier, assets/img/croissant.(webp|png|svg) — voir CROISSANT.md.

   COMMENT MODIFIER — tout se règle avec les variables --crs-* de `.ls-home-find` (section 1) :
   - Croissant ...... --crs-size (largeur), --crs-tilt (angle de repos), --crs-shadow (ombre portée).
   - Napperon ....... --crs-plate-color, --crs-plate-opacity, --crs-plate-scale (taille ÷ croissant).
   - Survol ......... --crs-hover-lift (montée), --crs-hover-turn (rotation), --crs-hover-scale,
                      --crs-hover-duration ; miettes : --crs-crumb-color, --crs-crumb-duration.
   - Explosion ...... (lues par croissant.js au moment du clic, nombres SANS unité)
                      --crs-count     nombre de petits croissants (0–40 ; 0 = pas d'explosion)
                      --crs-duration  durée en ms ; la navigation part à la fin
                      --crs-spread    portée, en largeurs de croissant (limitée à 55 % de l'écran)
                      --crs-gravity   chute ajoutée en fin de vol (× portée ; 0 = pas de gravité)
                      --crs-lift      élan vers le haut au départ (× portée)
                      --crs-size-min / --crs-size-max   taille d'un petit croissant (× largeur du grand)
                      --crs-spin      rotation maximale en degrés pendant le vol
   Exemple : .ls-home-find { --crs-count: 14; --crs-duration: 750; --crs-gravity: .4; }

   PRINCIPES (à garder) : le croissant est un vrai <a href> (marche sans JS) ; l'explosion n'anime que
   transform + opacity ; les petits croissants réutilisent l'image du grand (même fichier) ;
   prefers-reduced-motion = navigation immédiate, aucun mouvement.

   SOMMAIRE : 1. Variables · 2. Section · 3. Croissant (assiette, miettes, indice) · 4. Mouvement (survol,
   focus, pression, explosion) · 5. Mouvement réduit · 6. Petits écrans
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------- */
.ls-home-find {
	--crs-size: clamp(220px, 26vw + 60px, 400px);
	--crs-tilt: -4deg;
	--crs-shadow: drop-shadow(0 3px 2px rgb(10 12 5 / .35)) drop-shadow(0 16px 18px rgb(10 12 5 / .45));
	--crs-plate-color: var(--ls-lace, #e0dddc);
	--crs-plate-opacity: .16;
	--crs-plate-scale: 1.18;
	--crs-hover-lift: -10px;
	--crs-hover-turn: 5deg;
	--crs-hover-scale: 1.05;
	--crs-hover-duration: 650ms;
	--crs-crumb-color: var(--ls-gold-deep, #e9c75a);
	--crs-crumb-duration: 1.1s;
	/* explosion (croissant.js) */
	--crs-count: 18;
	--crs-duration: 900;
	--crs-spread: 1.5;
	--crs-gravity: .6;
	--crs-lift: .25;
	--crs-size-min: .16;
	--crs-size-max: .34;
	--crs-spin: 420;
}

/* 2. Section --------------------------------------------------------------- */
.ls-home-find {
	background: radial-gradient(38% 55% at 74% 52%, rgb(255 232 139 / .07), transparent 70%);
}
/* Sous les trinkets (même fond forest) : on ne cumule pas deux rythmes verticaux. */
.ls-trinkets + .ls-home-find {
	padding-block-start: calc(var(--ls-section-y, 6rem) * .3);
}
.ls-home-find__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.ls-home-find__grid > *,
.ls-home-find__text > *,
.ls-home-find__plate > * {
	margin-block: 0;
}
.ls-home-find__title {
	margin-block-end: clamp(1rem, 2.5vw, 1.75rem) !important;
	color: var(--ls-gold);
}
.ls-home-find__lead {
	max-inline-size: 38ch;
	font-size: var(--ls-fs-lead, 1.25rem);
	line-height: 1.5;
	color: var(--ls-gold);
}
.ls-home-find__plate {
	display: grid;
	justify-items: center;
	gap: .6rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.ls-home-find__grid { grid-template-columns: 7fr 5fr; }
}

/* 3. Croissant (assiette = napperon de dentelle) --------------------------- */
.ls-home-find__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding-block: 1rem 1.5rem;
	line-height: 0;
}
.ls-home-find__stage::before { /* napperon couché sous le croissant */
	content: "";
	position: absolute;
	left: 50%;
	bottom: .5rem;
	width: calc(var(--crs-size) * var(--crs-plate-scale));
	aspect-ratio: 1;
	translate: -50% 0;
	transform: scaleY(.36);
	transform-origin: 50% 100%;
	background: var(--crs-plate-color);
	opacity: var(--crs-plate-opacity);
	-webkit-mask: url(../svg/doily.svg) center / contain no-repeat;
	mask: url(../svg/doily.svg) center / contain no-repeat;
	pointer-events: none;
}
.ls-croissant {
	position: relative;
	display: inline-block;
	width: var(--crs-size);
	max-width: 100%;
	border-radius: 45%;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}
.ls-croissant__img {
	display: block;
	width: 100%;
	height: auto;
	rotate: var(--crs-tilt);
	filter: var(--crs-shadow);
	transition: transform var(--crs-hover-duration) var(--ls-spring, cubic-bezier(.34, 1.56, .64, 1));
	-webkit-user-drag: none;
	user-select: none;
}

/* Miettes dorées (survol / focus) : 2 nuages de points, un sous chaque pointe. */
.ls-croissant::before,
.ls-croissant::after {
	content: "";
	position: absolute;
	top: 74%;
	z-index: 1;
	width: 26%;
	height: 34%;
	opacity: 0;
	pointer-events: none;
	background:
		radial-gradient(circle, var(--crs-crumb-color) 0 3.4px, transparent 4px) 12% 8% / 30% 34% no-repeat,
		radial-gradient(circle, var(--ls-gold, #ffe88b) 0 2.4px, transparent 3px) 62% 0 / 26% 28% no-repeat,
		radial-gradient(circle, var(--crs-crumb-color) 0 2.2px, transparent 2.8px) 38% 48% / 24% 26% no-repeat,
		radial-gradient(circle, var(--ls-gold, #ffe88b) 0 3px, transparent 3.6px) 88% 58% / 28% 30% no-repeat,
		radial-gradient(circle, var(--crs-crumb-color) 0 2px, transparent 2.6px) 20% 88% / 22% 24% no-repeat,
		radial-gradient(circle, var(--ls-gold, #ffe88b) 0 1.6px, transparent 2.2px) 70% 92% / 20% 22% no-repeat;
}
.ls-croissant::before { left: 6%; }
.ls-croissant::after { right: 6%; scale: -1 1; }

/* Hint « click / tap the croissant » : un seul visible selon le pointeur. */
.ls-home-find__hint {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font: italic 500 clamp(1.05rem, 1rem + .3vw, 1.25rem)/1.2 var(--ls-font-serif, serif);
	letter-spacing: .01em;
	color: var(--ls-gold-a75, #c8b96e);
}
.ls-home-find__hint::before {
	content: "";
	width: .8em;
	height: .8em;
	background: var(--ls-gold, #ffe88b);
	-webkit-mask: url(../svg/sparkle-4.svg) center / contain no-repeat;
	mask: url(../svg/sparkle-4.svg) center / contain no-repeat;
}
.ls-home-find__hint--fine { display: none; }
@media (hover: hover) and (pointer: fine) {
	.ls-home-find__hint--fine { display: inline-flex; }
	.ls-home-find__hint--touch { display: none; }
}

/* 4. Mouvement : survol, focus, pression, explosion ------------------------ */
@media (prefers-reduced-motion: no-preference) {
	@media (hover: hover) {
		.ls-croissant:hover .ls-croissant__img {
			transform: translateY(var(--crs-hover-lift)) rotate(var(--crs-hover-turn)) scale(var(--crs-hover-scale));
		}
		.ls-croissant:hover::before,
		.ls-croissant:hover::after {
			animation: crs-crumbs var(--crs-crumb-duration) var(--ls-ease-out, ease-out) infinite;
		}
		.ls-croissant:hover::after { animation-delay: calc(var(--crs-crumb-duration) * .45); }
	}
	.ls-croissant:focus-visible .ls-croissant__img {
		transform: translateY(var(--crs-hover-lift)) rotate(var(--crs-hover-turn)) scale(var(--crs-hover-scale));
	}
	.ls-croissant:active .ls-croissant__img {
		transform: scale(.94);
		transition-duration: 120ms;
	}
	/* Pendant l'explosion (croissant.js) : le grand croissant reste soulevé, sans miettes de survol. */
	.ls-croissant.is-bursting::before,
	.ls-croissant.is-bursting::after { animation: none; opacity: 0; }
}
@keyframes crs-crumbs {
	0% { opacity: 0; transform: translateY(-6px); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translateY(46px); }
}

/* Calque de l'explosion : créé par croissant.js dans <body>, retiré à la fin. */
.ls-crumbs {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100000;
	width: 0;
	height: 0;
	pointer-events: none;
}
.ls-crumbs__bit {
	position: absolute;
	left: 0;
	top: 0;
	background: center / contain no-repeat;
	opacity: 0;
	will-change: transform, opacity;
}
.ls-crumbs__flash {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 232 139 / .5), rgb(255 232 139 / .14) 45%, transparent 68%);
	opacity: 0;
	will-change: transform, opacity;
}

/* 5. Mouvement réduit : rien ne bouge (le JS ne joue pas l'explosion non plus). */
@media (prefers-reduced-motion: reduce) {
	.ls-croissant__img { transition: none; }
	.ls-croissant::before,
	.ls-croissant::after { display: none; }
}

/* 6. Petits écrans ----------------------------------------------------------- */
@media (max-width: 1023px) {
	.ls-home-find__plate { margin-block-start: .5rem; }
}
@media (max-width: 639px) {
	.ls-home-find { --crs-size: min(78vw, 300px); }
	.ls-home-find__stage { padding-block: .5rem 1.25rem; }
}