/* ============================================================
   Intro animée S-Law (une fois par session) :
   écriture du mot au trait → point rouge → expansion rouge plein
   écran → second point sombre → ouverture du centre vers le site.
   Chorégraphie écriture en CSS ; phases plein écran pilotées par slaw-intro.js.
   ============================================================ */

#slaw-intro {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #101010;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#slaw-intro svg { width: min(80vw, 820px); height: auto; overflow: visible; }

/* désactivée : déjà vue cette session, reduced motion, ou terminée */
html.slaw-intro-off #slaw-intro { display: none; }

/* scroll figé tant que l'intro joue */
html.slaw-intro-lock { overflow: hidden; }

/* ===== Écriture : le S puis les 5 gestes du mot =====
   Les tirets sont exprimés en longueurs réelles de tracé (getTotalLength),
   PAS via pathLength="1" : Safari iOS n'applique pas pathLength au calcul
   des tirets, si bien qu'un dasharray de 1 unité y produisait un pointillé
   fin sur tout le mot — d'où les fragments de texte visibles avant l'heure.
   Si les tracés du SVG sont retouchés, remesurer ces longueurs. */
#slaw-intro-write-s path, #slaw-intro-write path {
	stroke-dasharray: var(--l);
	stroke-dashoffset: var(--l);
	animation: slaw-intro-draw linear forwards;
}
#slaw-intro-write-s .si0 { --l: 1430; animation-duration: 1.05s; animation-delay: .25s; } /* le S */
#slaw-intro-write .si1 { --l: 373; animation-duration: .28s; animation-delay: 1.35s; } /* trait montant du l */
#slaw-intro-write .si2 { --l: 791; animation-duration: .75s; animation-delay: 1.58s; } /* boucle du l */
#slaw-intro-write .si3 { --l: 308; animation-duration: .42s; animation-delay: 2.3s; }  /* a */
#slaw-intro-write .si4 { --l: 75;  animation-duration: .14s; animation-delay: 2.68s; } /* accent */
#slaw-intro-write .si5 { --l: 404; animation-duration: .5s;  animation-delay: 2.82s; } /* w */
@keyframes slaw-intro-draw { to { stroke-dashoffset: 0; } }

/* ===== Le point rouge apparaît (pop) une fois le mot écrit ===== */
#slaw-intro-dot {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
	animation: slaw-intro-pop .4s cubic-bezier(.34, 1.56, .64, 1) 3.45s forwards;
}
@keyframes slaw-intro-pop { to { transform: scale(1); } }

/* ===== Boules plein écran (créées par le JS) ===== */
.slaw-intro-ball {
	position: fixed;
	border-radius: 50%;
	transform: scale(1);
	will-change: transform;
	z-index: 2;
}

/* ============================================================
   Chorégraphie d'entrée de la home : le cadre blanc apparaît,
   PUIS chaque case du damier, en vague ordonnée (90ms d'écart).
   Jouée à la fin de l'intro (classe slaw-page-in posée par slaw-intro.js)
   ou immédiatement au chargement si l'intro a déjà été vue (script wp_head).
   Gardée par html.slaw-js : sans JavaScript, rien n'est masqué.
   ============================================================ */
html.slaw-js #frame-wrap { opacity: 0; }
html.slaw-js #damier > .brxe-block { opacity: 0; }

html.slaw-page-in #frame-wrap { animation: slaw-rise .8s ease-out forwards; }
html.slaw-page-in #damier > .brxe-block { animation: slaw-cell-in .6s ease-out forwards; }
html.slaw-page-in #damier > .brxe-block:nth-child(1) { animation-delay: .55s; }
html.slaw-page-in #damier > .brxe-block:nth-child(2) { animation-delay: .64s; }
html.slaw-page-in #damier > .brxe-block:nth-child(3) { animation-delay: .73s; }
html.slaw-page-in #damier > .brxe-block:nth-child(4) { animation-delay: .82s; }
html.slaw-page-in #damier > .brxe-block:nth-child(5) { animation-delay: .91s; }
html.slaw-page-in #damier > .brxe-block:nth-child(6) { animation-delay: 1s; }
html.slaw-page-in #damier > .brxe-block:nth-child(7) { animation-delay: 1.09s; }
html.slaw-page-in #damier > .brxe-block:nth-child(8) { animation-delay: 1.18s; }
html.slaw-page-in #damier > .brxe-block:nth-child(9) { animation-delay: 1.27s; }
html.slaw-page-in #damier > .brxe-block:nth-child(10) { animation-delay: 1.36s; }

@keyframes slaw-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes slaw-cell-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ============================================================
   Entrée de page (CHAQUE chargement, via slaw-page-in) :
   logo → items du menu en cascade rapide → H1 → breadcrumb.
   Après l'intro à la 1re visite, immédiate ensuite. Court (~1s)
   pour ne pas ralentir la navigation.
   ============================================================ */
html.slaw-js #site-logo,
html.slaw-js #nav-burger,
html.slaw-js #main-menu > *,
html.slaw-js [id$="-hero-title"],
html.slaw-js [id$="-bc"],
html.slaw-js #hero-slogan { opacity: 0; }

html.slaw-page-in #site-logo { animation: slaw-drop-in .6s ease-out .1s forwards; }
html.slaw-page-in #nav-burger { animation: slaw-drop-in .6s ease-out .3s forwards; }
html.slaw-page-in #main-menu > * { animation: slaw-drop-in .5s ease-out forwards; }
html.slaw-page-in #main-menu > *:nth-child(1) { animation-delay: .2s; }
html.slaw-page-in #main-menu > *:nth-child(2) { animation-delay: .26s; }
html.slaw-page-in #main-menu > *:nth-child(3) { animation-delay: .32s; }
html.slaw-page-in #main-menu > *:nth-child(4) { animation-delay: .38s; }
html.slaw-page-in #main-menu > *:nth-child(5) { animation-delay: .44s; }
html.slaw-page-in #main-menu > *:nth-child(6) { animation-delay: .5s; }
html.slaw-page-in #main-menu > *:nth-child(7) { animation-delay: .56s; }
html.slaw-page-in #main-menu > *:nth-child(8) { animation-delay: .62s; }
html.slaw-page-in [id$="-hero-title"] { animation: slaw-rise .7s ease-out .35s forwards; }
html.slaw-page-in #hero-slogan { animation: slaw-rise .7s ease-out .35s forwards; }
html.slaw-page-in [id$="-bc"] { animation: slaw-fade-in .6s ease-out .6s forwards; }

@keyframes slaw-drop-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes slaw-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Page Contact (pas de hero 100vh : carte + box dans le premier écran → entrée de page) */
html.slaw-js #slaw-map,
html.slaw-js #contact-mouse { opacity: 0; }
html.slaw-js #contact-over { opacity: 0; }
html.slaw-page-in #slaw-map { animation: slaw-fade-in .9s ease-out .1s forwards; }
html.slaw-page-in #contact-over { animation: slaw-from-right .7s ease-out .45s forwards; }
html.slaw-page-in #contact-mouse { animation: slaw-fade-in .6s ease-out .85s forwards; }
@keyframes slaw-from-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* Fiches avocats : chaque panneau d'onglet rejoue un fondu + montée à son affichage
   (display none → block relance l'animation à chaque activation ; forwards garantit
   l'état final visible quoi qu'il arrive) */
.av-tab-panel.active { animation: slaw-panel-in .35s ease-out forwards; }
@keyframes slaw-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	html.slaw-js #frame-wrap, html.slaw-js #damier > .brxe-block,
	html.slaw-js #site-logo, html.slaw-js #nav-burger, html.slaw-js #main-menu > *,
	html.slaw-js [id$="-hero-title"], html.slaw-js [id$="-bc"], html.slaw-js #hero-slogan,
	html.slaw-js #slaw-map, html.slaw-js #contact-over, html.slaw-js #contact-mouse { opacity: 1 !important; animation: none !important; }
	.av-tab-panel.active { animation: none !important; }
}