/* ============================================================
 * Animations homepage — Phase 1 (socle natif, 0 dépendance) · dev1
 * DA : navy --color-primary, or --color-gold, crème --color-cream.
 * transform/opacity uniquement ; reveals pilotés par l'observer de main.js
 * (.sfc-reveal[data-reveal] -> .is-visible) ; état initial caché seulement si
 * JS actif (html.sfc-js) ; tout neutralisé sous prefers-reduced-motion.
 * Chargé uniquement sur la page d'accueil (is_front_page).
 * ============================================================ */

/* ---------- Reveals directionnels au scroll ---------- */
html.sfc-js .sfc-reveal[data-reveal="up"],
html.sfc-js .sfc-reveal[data-reveal="left"],
html.sfc-js .sfc-reveal[data-reveal="right"],
html.sfc-js .sfc-reveal[data-reveal="zoom"] {
	opacity: 0;
	will-change: opacity, transform;
	transition: opacity 650ms cubic-bezier(.22, 1, .36, 1),
	            transform 650ms cubic-bezier(.22, 1, .36, 1);
}
html.sfc-js .sfc-reveal[data-reveal="up"]    { transform: translateY(28px); }
html.sfc-js .sfc-reveal[data-reveal="left"]  { transform: translateX(-36px); }
html.sfc-js .sfc-reveal[data-reveal="right"] { transform: translateX(36px); }
html.sfc-js .sfc-reveal[data-reveal="zoom"]  { transform: scale(.96); }
html.sfc-js .sfc-reveal[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Hero : entrée séquencée au chargement ---------- */
html.sfc-js .sfc-hero .sfc-hero__title,
html.sfc-js .sfc-hero .sfc-hero__subtitle,
html.sfc-js .sfc-hero .sfc-hero__cta {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms cubic-bezier(.22, 1, .36, 1),
	            transform 700ms cubic-bezier(.22, 1, .36, 1);
}
html.sfc-js .sfc-hero.is-loaded .sfc-hero__title    { opacity: 1; transform: none; transition-delay: 140ms; }
html.sfc-js .sfc-hero.is-loaded .sfc-hero__subtitle { opacity: 1; transform: none; transition-delay: 300ms; }
html.sfc-js .sfc-hero.is-loaded .sfc-hero__cta      { opacity: 1; transform: none; transition-delay: 460ms; }

/* ---------- Hero : titre mot-à-mot (Phase 2 · SplitType) ---------- */
html.sfc-js .sfc-hero--split .sfc-hero__title {
	opacity: 1;
	transform: none;
	transition: none;
}
html.sfc-js .sfc-hero--split .sfc-hero__title .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(32px);
	will-change: opacity, transform;
	transition: opacity 720ms cubic-bezier(.22, 1, .36, 1),
	            transform 720ms cubic-bezier(.22, 1, .36, 1);
}
html.sfc-js .sfc-hero.is-loaded.sfc-hero--split .sfc-hero__title .word {
	opacity: 1;
	transform: none;
}

/* ---------- Hero : Ken Burns (Phase 2, image de fond, desktop) ----------
 * Calque ::before reprenant le dégradé d'assombrissement (lisibilité préservée)
 * + l'image via la var --sfc-hero-img posée en inline par hero.php. */
@media (min-width: 1025px) {
	.sfc-hero--has-image::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: linear-gradient(rgba(26, 38, 64, 0.55), rgba(26, 38, 64, 0.55)), var(--sfc-hero-img);
		background-size: cover;
		background-position: center;
		transform: scale(1.04);
		animation: sfc-hero-kenburns 34s ease-in-out infinite alternate;
		pointer-events: none;
	}
	.sfc-hero--has-image .sfc-hero__inner { position: relative; z-index: 1; }
}
@keyframes sfc-hero-kenburns {
	from { transform: scale(1.04); }
	to   { transform: scale(1.13); }
}

/* ---------- Hero : indice de scroll ---------- */
.sfc-hero__scrollcue {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	display: block;
	color: var(--color-cream, #F5EDE0);
	opacity: .85;
	pointer-events: none;
	transition: opacity 400ms ease;
	animation: sfc-scrollcue 1.9s ease-in-out infinite;
}
.sfc-hero__scrollcue svg { display: block; width: 26px; height: 26px; }
.sfc-hero.is-scrolled .sfc-hero__scrollcue { opacity: 0; }
@keyframes sfc-scrollcue {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 768px) { .sfc-hero__scrollcue { bottom: 14px; } }

/* ---------- Catégories : halo or au hover ---------- */
.sfc-categories__circle { transition: transform var(--transition-base), box-shadow 320ms ease; }
.sfc-categories__card:hover .sfc-categories__circle {
	box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-gold, #C9A961) 55%, transparent);
}

/* ---------- Traiteur : zoom image au hover (conteneur déjà overflow:hidden) ---------- */
.sfc-traiteur__media img { transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.sfc-traiteur__card:hover .sfc-traiteur__media img { transform: scale(1.05); }

/* ---------- Citation (bande navy) : voile doré animé discret ---------- */
.sfc-quote { position: relative; overflow: hidden; }
.sfc-quote__inner { position: relative; z-index: 1; }
.sfc-quote::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: 0;
	background: radial-gradient(closest-side at 24% 30%,
		color-mix(in srgb, var(--color-gold, #C9A961) 14%, transparent), transparent 70%);
	opacity: .8;
	pointer-events: none;
	animation: sfc-quote-sheen 16s ease-in-out infinite alternate;
}
@keyframes sfc-quote-sheen {
	from { transform: translate3d(-3%, -2%, 0); }
	to   { transform: translate3d(4%, 3%, 0); }
}

/* ---------- Boutons : micro-interaction (lift + sweep doré) ---------- */
.sfc-btn {
	position: relative;
	overflow: hidden;
	transition: transform 220ms ease, background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sfc-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 60%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
	transform: skewX(-20deg);
	transition: left 650ms ease;
	pointer-events: none;
}
.sfc-btn:hover { transform: translateY(-2px); }
.sfc-btn:hover::after { left: 150%; }

/* ---------- Tablette / mobile : reveals plus discrets ---------- */
@media (max-width: 768px) {
	html.sfc-js .sfc-reveal[data-reveal="up"]    { transform: translateY(18px); }
	html.sfc-js .sfc-reveal[data-reveal="left"]  { transform: translateX(-20px); }
	html.sfc-js .sfc-reveal[data-reveal="right"] { transform: translateX(20px); }
}

/* ---------- Accessibilité : on coupe tout ---------- */
@media (prefers-reduced-motion: reduce) {
	html.sfc-js .sfc-reveal[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	html.sfc-js .sfc-hero .sfc-hero__title,
	html.sfc-js .sfc-hero .sfc-hero__subtitle,
	html.sfc-js .sfc-hero .sfc-hero__cta,
	html.sfc-js .sfc-hero--split .sfc-hero__title .word {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.sfc-quote::before,
	.sfc-hero--has-image::before { animation: none; }
	.sfc-hero__scrollcue { display: none; }
	.sfc-traiteur__card:hover .sfc-traiteur__media img,
	.sfc-btn:hover { transform: none; }
	.sfc-btn::after { display: none; }
}