/*
 * Alimentaly : diaporama du hero de l'accueil (10/11/2026, v2).
 * Le cadre garde exactement la taille de l'ancienne image (1265 x 879) : la mise en page ne bouge pas.
 * L'ovale (symbole vert/rouge + "a" translucide) est centre dans ce cadre, sur toute la largeur.
 * Les photos sont decoupees par un masque tire du contour exact de l'ovale (retreci de 4 px) :
 * uploads/2026/11/alimentaly-hero-ovale-masque.png. Aucune photo ne depasse du symbole.
 * Relais en fondu sur l'opacite seule (carte graphique, sans JavaScript).
 * Rythme (v4) : 2,5 s par photo, fondu 0,8 s, cycle 7,5 s ; premiere transition a 1 s apres l'arrivee. Ordre : burrata, parmigiano, gorgonzola (ordre des IDs dans inc/alimentaly-home.php).
 * Pour changer : duree du cycle, delais (n x 2,5 s - 1,5 s, le -1,5 avance la 1re transition a 1 s) et % des keyframes (0,8/7,5 ; 2,5/7,5 ; 3,3/7,5).
 */
.al-hero-anim{position:relative;width:100%;aspect-ratio:1265/879;margin:0}
.al-hero-anim__frame{position:absolute;left:0;width:100%;top:50%;transform:translateY(-50%);aspect-ratio:1411/848}
.al-hero-anim__photos{position:absolute;inset:0;overflow:hidden;isolation:isolate;
	-webkit-mask-image:url(/wp-content/uploads/2026/11/alimentaly-hero-ovale-masque.png);mask-image:url(/wp-content/uploads/2026/11/alimentaly-hero-ovale-masque.png);
	-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.al-bleed-right .al-hero-anim__photos img,
.al-hero-anim__photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:0;
	animation:al-hero-fade 7.5s ease-in-out infinite both;will-change:opacity}
.al-hero-anim__photos img:nth-child(1){animation-delay:-1.5s}
.al-hero-anim__photos img:nth-child(2){animation-delay:1s}
.al-hero-anim__photos img:nth-child(3){animation-delay:3.5s}
.al-bleed-right .al-hero-anim__overlay,
.al-hero-anim__overlay{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* La photo entrante passe au-dessus et apparait ; la sortante reste pleine dessous, puis s'efface (pas de flash blanc). */
@keyframes al-hero-fade{
	0%{opacity:0;z-index:2}
	10.667%{opacity:1}
	33.333%{z-index:2}
	33.334%{z-index:1}
	44%{opacity:1;z-index:1}
	44.001%{opacity:0}
	100%{opacity:0;z-index:1}
}

/* Visiteurs ayant demande moins d'animations : premiere photo fixe. */
@media (prefers-reduced-motion:reduce){
	.al-hero-anim__photos img{animation:none;opacity:0}
	.al-hero-anim__photos img:nth-child(1){opacity:1}
}

/*
 * Fleche "fait main" sous les boutons du hero (10/11/2026) : trace une boucle ovale puis pointe vers le bas, en boucle.
 * Balisage ajoute par inc/alimentaly-home.php (filtre render_block_spectra/buttons). Positionnee hors flux :
 * la mise en page du hero ne bouge pas. Couleur : --al-hint-color. Rythme : cycle 4,2 s
 * (boucle 0-38 %, pointe 38-48 %, petit rebond 52-68 %, effacement 80-92 %). Masquee quand le hero s'empile (<= 1024 px).
 * Longueurs des traces (pour stroke-dasharray) : boucle 286, pointe 45.
 */
.al-scroll-hint-host{position:relative}
.al-scroll-hint{--al-hint-color:var(--ast-global-color-0);position:absolute;left:64px;top:calc(100% + clamp(16px,2vw,28px));display:block;width:clamp(72px,7.2vw,104px);line-height:0;color:var(--al-hint-color);border-radius:12px}
.al-scroll-hint svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
	animation:al-hint-move 4.2s infinite;animation-delay:.6s}
.al-scroll-hint__loop{stroke-dasharray:287;stroke-dashoffset:287;animation:al-hint-loop 4.2s infinite;animation-delay:.6s}
.al-scroll-hint__head{stroke-dasharray:46;stroke-dashoffset:46;animation:al-hint-head 4.2s infinite;animation-delay:.6s}
.al-scroll-hint:hover{--al-hint-color:var(--ast-global-color-6)}
.al-scroll-hint:focus-visible{outline:2px solid var(--ast-global-color-0);outline-offset:6px}
#al-suite{scroll-margin-top:110px}

@keyframes al-hint-loop{
	0%{stroke-dashoffset:287;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
	38%,100%{stroke-dashoffset:0}
}
@keyframes al-hint-head{
	0%,38%{stroke-dashoffset:46;animation-timing-function:ease-out}
	48%,100%{stroke-dashoffset:0}
}
@keyframes al-hint-move{
	0%,52%{opacity:1;transform:translateY(0);animation-timing-function:ease-in-out}
	60%{transform:translateY(6px);animation-timing-function:ease-in-out}
	68%{transform:translateY(0)}
	80%{opacity:1}
	92%,100%{opacity:0;transform:translateY(0)}
}

@media (max-width:1024px){.al-scroll-hint{display:none}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Moins d'animations demandees : fleche dessinee, immobile. */
@media (prefers-reduced-motion:reduce){
	.al-scroll-hint svg,.al-scroll-hint__loop,.al-scroll-hint__head{animation:none;stroke-dashoffset:0;opacity:1}
}
/* Chargement differe des photos 2 et 3 (13/11/2026) : tant qu'elles ne sont pas chargees (classe is-ready ajoutee
 * par le script du hero, inc/alimentaly-home.php), la 1re photo reste fixe ; le diaporama demarre ensuite. */
.al-hero-anim:not(.is-ready) .al-hero-anim__photos img{animation:none;opacity:0}
.al-hero-anim:not(.is-ready) .al-hero-anim__photos img:nth-child(1){opacity:1}