/* Logo TNC animé (page d'accueil)
   Chargé sur la page d'accueil par tnc_enqueue_assets() dans functions.php.
   Les trois calques glissent en diagonale, puis le trait, le nom et la promesse apparaissent.
   Couleurs reprises des variables de la charte, avec une valeur de secours. */

.tnc-logo-anime {
	--tnc-logo-c1: var(--color-primary, #BB2649);
	--tnc-logo-c2: #C05E5A; /* teinte intermédiaire entre le bordeaux et le doré */
	--tnc-logo-c3: var(--color-accent, #C4956A);
	--tnc-logo-ink: var(--color-text, #1C1C1C);
	--tnc-logo-rule: var(--color-accent, #C4956A);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 3vw, 28px);
	text-align: center;
}

.tnc-logo-anime__svg {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	overflow: visible;
}

.tnc-logo-anime__layer--1 { fill: var(--tnc-logo-c1); }
.tnc-logo-anime__layer--2 { fill: var(--tnc-logo-c2); }
.tnc-logo-anime__layer--3 { fill: var(--tnc-logo-c3); }

@keyframes tnc-logo-leve {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tnc-logo-glisse {
	from { opacity: 0; transform: translate(var(--tnc-logo-d), var(--tnc-logo-d)); }
	to   { opacity: 1; transform: none; }
}
@keyframes tnc-logo-monte {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tnc-logo-trait {
	from { transform: scaleX(0); }
	to   { transform: none; }
}

.tnc-logo-anime__layer--1 {
	animation: tnc-logo-leve .8s cubic-bezier(.2, .7, .2, 1) both;
}
.tnc-logo-anime__layer--2 {
	--tnc-logo-d: -66px;
	animation: tnc-logo-glisse .9s cubic-bezier(.2, .7, .2, 1) .45s both;
}
.tnc-logo-anime__layer--3 {
	--tnc-logo-d: -132px;
	animation: tnc-logo-glisse .9s cubic-bezier(.2, .7, .2, 1) .75s both;
}

/* Signature : après le logo (1,7 s) */
.tnc-logo-anime__sig {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 2.4vw, 20px);
	min-width: 0;
	max-width: 100%;
	color: var(--tnc-logo-ink);
}
.tnc-logo-anime__rule {
	width: 64px;
	height: 1px;
	background: var(--tnc-logo-rule);
	animation: tnc-logo-trait .6s ease-out 1.7s both;
}
.tnc-logo-anime__name {
	font-family: var(--font-heading, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: clamp(17px, 3.4vw, 28px);
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.25;
	text-wrap: balance;
	animation: tnc-logo-monte .7s ease-out 1.9s both;
}
.tnc-logo-anime__tag {
	font-family: var(--font-body, 'DM Sans', sans-serif);
	font-weight: 400;
	font-size: clamp(12px, 1.9vw, 14px);
	letter-spacing: .05em;
	line-height: 1.5;
	text-wrap: balance;
	animation: tnc-logo-monte .7s ease-out 2.1s both;
}

/* Visiteurs qui ont réduit les animations : le logo s'affiche directement */
@media (prefers-reduced-motion: reduce) {
	.tnc-logo-anime__layer,
	.tnc-logo-anime__rule,
	.tnc-logo-anime__name,
	.tnc-logo-anime__tag {
		animation: none;
	}
}

/* Déclenchement à l'apparition à l'écran : le script ajoute --armed (animations en pause),
   puis --play quand le logo est visible. Sans JavaScript, tout démarre au chargement. */
.tnc-logo-anime--armed:not(.tnc-logo-anime--play) .tnc-logo-anime__layer,
.tnc-logo-anime--armed:not(.tnc-logo-anime--play) .tnc-logo-anime__rule,
.tnc-logo-anime--armed:not(.tnc-logo-anime--play) .tnc-logo-anime__name,
.tnc-logo-anime--armed:not(.tnc-logo-anime--play) .tnc-logo-anime__tag {
	animation-play-state: paused;
}

/* Section d'accueil qui porte le logo */
.section-signature {
	padding-block: clamp(64px, 10vw, 112px);
	background: var(--color-secondary, #F0EEE9);
	border-top: 1px solid var(--color-light, #D4C5BE);
}

/* Variante hero : logo seul, aligné à gauche au-dessus de l'accroche.
   Pour le centrer, remplacer align-items par center. */
.tnc-logo-anime--hero {
	align-items: flex-start;
	margin-bottom: clamp(20px, 3vw, 32px);
}
.tnc-logo-anime--hero .tnc-logo-anime__svg {
	max-width: clamp(190px, 26vw, 280px);
}