/* ============================================================
 * Animations homepage — Phase 1 (socle natif, 0 dépendance)
 * DA dev2 : blanc/pêche --color-cream, orange --color-gold.
 * Règles : transform/opacity uniquement ; reveals pilotés par
 * l'observer existant de main.js (.sfc-reveal[data-reveal] -> .is-visible) ;
 * état initial caché seulement si JS actif (html.sfc-js) -> fallback no-JS OK ;
 * tout est 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__actions {
	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: 120ms; }
html.sfc-js .sfc-hero.is-loaded .sfc-hero__subtitle { opacity: 1; transform: none; transition-delay: 260ms; }
html.sfc-js .sfc-hero.is-loaded .sfc-hero__actions  { opacity: 1; transform: none; transition-delay: 400ms; }

/* ---------- Hero : titre mot-à-mot (Phase 2 · SplitType) ----------
 * Quand JS a splitté le titre (.sfc-hero--split), on neutralise l'entrée bloc
 * du titre et on anime chaque mot (delais posés inline par le JS). */
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 : accent « battement de cils » (line-art doré) ---------- */
.sfc-hero__accent {
	display: block;
	width: 56px;
	margin: 0 auto 16px;
	color: var(--color-gold, #F76309);
	opacity: .9;
	pointer-events: none;
}
.sfc-hero__accent svg { display: block; width: 100%; height: auto; }
.sfc-hero__accent .sfc-eye {
	transform-box: fill-box;
	transform-origin: center;
	animation: sfc-lash-blink 7s ease-in-out infinite;
}
@keyframes sfc-lash-blink {
	0%, 86%, 100% { transform: scaleY(1); }
	90%           { transform: scaleY(.08); }
	94%           { transform: scaleY(1); }
}
/* Entrée : l'accent apparaît en premier, juste avant le titre. */
html.sfc-js .sfc-hero .sfc-hero__accent {
	opacity: 0;
	transform: translateY(16px);
	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__accent {
	opacity: .9;
	transform: none;
	transition-delay: 40ms;
}

/* ---------- Hero : Ken Burns du fond (desktop uniquement) ---------- */
@media (min-width: 1025px) {
	.sfc-hero--has-video .sfc-hero__video {
		animation: sfc-hero-kenburns 32s ease-in-out infinite alternate;
		transform-origin: center;
	}
}
@keyframes sfc-hero-kenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.12); }
}

/* ---------- Hero : indice de scroll ---------- */
.sfc-hero__scrollcue {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	display: block;
	color: var(--color-primary, rgba(34, 34, 34, 1));
	opacity: .85;
	pointer-events: none;
	transition: opacity 400ms ease, transform 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; } }

/* ---------- Produits phares : reveal staggered (zoom hover déjà natif) ---------- */
/* (les .sfc-featured__card reçoivent sfc-reveal data-reveal="up" dans le markup) */

/* ---------- Catégories : halo orange 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, #F76309) 60%, transparent);
}

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

/* ---------- Boutons : micro-interaction (lift + sweep de brillance) ---------- */
.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, .35), 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__actions,
	html.sfc-js .sfc-hero--split .sfc-hero__title .word {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.sfc-hero--has-video .sfc-hero__video,
	.sfc-formations-cta::before,
	.sfc-hero__accent .sfc-eye { animation: none; }
	html.sfc-js .sfc-hero .sfc-hero__accent { opacity: .9; transform: none; transition: none; }
	.sfc-hero__scrollcue { display: none; }
	.sfc-btn:hover { transform: none; }
	.sfc-btn::after { display: none; }
}