/* ==========================================================================
   Kuto — couche « motion » (animations & effets)
   Désactivable dans Personnaliser > Kuto > Animations & effets
   Toujours neutralisée par prefers-reduced-motion.
   ========================================================================== */

/* --- Préchargement : voile noir + trait rouge --------------------------- */
.kuto-loader {
	position: fixed; inset: 0; z-index: 9999; background: var(--bg);
	display: grid; place-items: center;
	transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.kuto-loader__mark {
	font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 8vw, 96px);
	letter-spacing: 0.3em; color: var(--text); padding-left: 0.3em;
	animation: loaderMark 1.2s var(--ease) both;
}
.kuto-loader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--line); }
.kuto-loader__bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: loaderBar 1.1s var(--ease) both; }
.is-loaded .kuto-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderMark { from { opacity: 0; letter-spacing: 0.6em; filter: blur(6px); } to { opacity: 1; letter-spacing: 0.3em; filter: blur(0); } }
@keyframes loaderBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Hero : séquence d'entrée orchestrée -------------------------------- */
.has-motion .hero__eyebrow,
.has-motion .hero__subtitle,
.has-motion .hero__text,
.has-motion .hero__actions,
.has-motion .hero__scroll,
.has-motion .site-header__inner > * {
	opacity: 0; transform: translateY(22px);
	transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.has-motion .hero__title { clip-path: inset(0 0 100% 0); transform: translateY(6%); transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); }
.has-motion.is-loaded .hero__title { clip-path: inset(0 0 -10% 0); transform: none; transition-delay: 0.35s; }
.has-motion.is-loaded .site-header__inner > *, .has-motion.is-loaded .hero__eyebrow,
.has-motion.is-loaded .hero__subtitle, .has-motion.is-loaded .hero__text,
.has-motion.is-loaded .hero__actions, .has-motion.is-loaded .hero__scroll { opacity: 1; transform: none; }
.has-motion.is-loaded .hero__eyebrow { transition-delay: 0.25s; }
.has-motion.is-loaded .hero__subtitle { transition-delay: 0.7s; }
.has-motion.is-loaded .hero__text { transition-delay: 0.82s; }
.has-motion.is-loaded .hero__actions { transition-delay: 0.95s; }
.has-motion.is-loaded .hero__scroll { transition-delay: 1.4s; }
.has-motion.is-loaded .site-header__inner > * { transition-delay: 1.1s; }

/* Nuage rouge qui respire lentement + léger parallaxe (JS) */
.has-motion .hero__bg::before { animation: heroBreath 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroBreath { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, 1%, 0); } }
.has-motion .hero__bg { will-change: transform; }
.has-motion .hero__inner { will-change: transform, opacity; }

/* Boutons : flèche qui glisse, lueur du bouton rouge */
.btn { position: relative; overflow: hidden; }
.btn .icon { transition: transform 0.4s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:hover .icon--send { transform: translate(3px, -3px); }
.btn--primary::after {
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: skewX(-20deg); transition: left 0.6s var(--ease);
}
.btn--primary:hover::after { left: 120%; }
.has-motion .btn--primary { box-shadow: 0 12px 34px -14px var(--accent-2); }

/* Liens de nav : soulignement rouge animé */
.nav-list a { position: relative; }
.nav-list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent-2);
	transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease);
}
.nav-list a:hover::after, .nav-list a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* --- Révélations au scroll --------------------------------------------- */
.has-motion .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.has-motion .rv.is-in { opacity: 1; transform: none; }
.has-motion .rv--line { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.has-motion .rv--line.is-in { clip-path: inset(0 0 0 0); }
.has-motion .rv--scale { transform: scale(0.96); }
.has-motion .rv--scale.is-in { transform: none; }
.has-motion .rv--wordmark { transform: translateY(18%); clip-path: inset(0 0 100% 0); transition: transform 1.3s var(--ease), clip-path 1.3s var(--ease), opacity 0.4s; }
.has-motion .rv--wordmark.is-in { transform: none; clip-path: inset(0 0 -10% 0); }

/* Section « À propos » : cadre image qui se dévoile, petite image qui glisse */
.has-motion .about__media .about__img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.has-motion .about__media.is-in .about__img { clip-path: inset(0 0 0 0); }
.has-motion .about__media .about__img-2 { opacity: 0; transform: translate(-20px, 20px); transition: opacity 0.9s var(--ease) 0.6s, transform 0.9s var(--ease) 0.6s; }
.has-motion .about__media.is-in .about__img-2 { opacity: 1; transform: none; }

/* Trait rouge des surtitres : se dessine */
.has-motion .eyebrow__line { transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease) 0.15s; }
.has-motion .is-in .eyebrow__line, .has-motion.is-loaded .site-header .eyebrow__line { transform: scaleX(1); }

/* --- Portfolio : filtres animés, survol des pièces --------------------- */
.work { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.work.is-leaving { opacity: 0; transform: scale(0.94); pointer-events: none; }
.work.is-entering { animation: workIn 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes workIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.work__caption { transform: translateY(8px); }
.work:hover .work__caption, .work:focus-within .work__caption { transform: none; }
.work::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); transition: box-shadow 0.4s;
}
.work:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.filter { position: relative; transition: background 0.35s var(--ease), border-color 0.35s, color 0.35s, transform 0.25s var(--ease); }
.filter:active { transform: scale(0.96); }

/* --- Étapes : le chiffre fantôme s'allume au survol -------------------- */
.step__ghost { transition: color 0.5s var(--ease), transform 0.6s var(--ease); }
.step:hover .step__ghost { color: rgba(224, 19, 79, 0.55); transform: translate(-4px, -4px) scale(1.06); }

/* --- Témoignages : défilement continu (JS) ------------------------------ */
.quotes.is-auto { scroll-snap-type: none; }
.quote { transition: border-color 0.4s, transform 0.5s var(--ease); }
.quote:hover { border-color: var(--line-strong); transform: translateY(-3px); }

/* --- FAQ : ouverture fluide ------------------------------------------- */
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.acc__panel[hidden] { display: grid; }
.acc__panel > .acc__content { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc.is-open .acc__panel > .acc__content { opacity: 1; transform: none; transition-delay: 0.1s; }

/* --- Formulaire : champ qui s'allume, trait rouge qui se dessine ------- */
.field { position: relative; }
.field::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent-2);
	transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }
.field label { transition: color 0.3s; }
.field:focus-within label { color: var(--accent-2); }

/* --- Curseur personnalisé (desktop uniquement) -------------------------- */
@media (hover: hover) and (pointer: fine) {
	.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor .quotes { cursor: none; }
	.kuto-cursor { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; will-change: transform; }
	.kuto-cursor__dot {
		position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
		transition: transform 0.25s var(--ease), opacity 0.25s;
	}
	.kuto-cursor__ring {
		position: absolute; top: -18px; left: -18px; width: 36px; height: 36px; border-radius: 50%;
		border: 1px solid rgba(255, 46, 106, 0.8); background: transparent;
		transition: transform 0.35s var(--ease), background 0.35s, border-color 0.35s, opacity 0.35s;
	}
	.kuto-cursor.is-hover .kuto-cursor__ring { transform: scale(1.7); background: rgba(224, 19, 79, 0.12); border-color: transparent; }
	.kuto-cursor.is-hover .kuto-cursor__dot { transform: scale(0.5); }
	.kuto-cursor.is-view .kuto-cursor__ring { transform: scale(2.4); background: rgba(14, 16, 19, 0.85); border-color: transparent; }
	.kuto-cursor.is-view .kuto-cursor__dot { opacity: 0; }
	.kuto-cursor__label {
		position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
		font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #fff;
		opacity: 0; transition: opacity 0.3s; white-space: nowrap;
	}
	.kuto-cursor.is-view .kuto-cursor__label { opacity: 1; }
	.kuto-cursor.is-down .kuto-cursor__ring { transform: scale(0.8); }
	.kuto-cursor.is-hidden { opacity: 0; }
}

/* --- Sans motion / reduced motion : tout visible, rien ne bouge -------- */
.no-motion .rv, .no-motion .hero__title, .no-motion .about__img, .no-motion .about__img-2 { opacity: 1; transform: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
	.kuto-loader { display: none; }
	.has-motion .rv, .has-motion .hero__title, .has-motion .hero__eyebrow, .has-motion .hero__subtitle, .has-motion .hero__text,
	.has-motion .hero__actions, .has-motion .hero__scroll, .has-motion .site-header__inner > *,
	.has-motion .about__img, .has-motion .about__img-2, .has-motion .eyebrow__line { opacity: 1; transform: none; clip-path: none; }
	.kuto-cursor { display: none; }
	.has-cursor, .has-cursor a, .has-cursor button { cursor: auto; }
}

/* ==========================================================================
   Effets supplémentaires (v1.1)
   ========================================================================== */

/* --- Bandeau défilant sous le hero ------------------------------------- */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); padding: 16px 0; }
.ticker__track { display: flex; width: max-content; animation: tickerMove 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; }
.ticker__item { font-family: var(--font-display); font-weight: 300; font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0 22px; }
.ticker__item:nth-child(4n+1) { color: var(--text); }
.ticker__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes tickerMove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* --- Titres de section : mots qui montent un à un ----------------------- */
.split .word { display: inline-block; overflow: hidden; vertical-align: bottom; margin-right: 0.22em; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split .word > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--w, 0) * 70ms); }
.split.is-in .word > span, .is-in .split .word > span { transform: none; }

/* --- Barre de progression de lecture + header qui se cache --------------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.site-header { transition: transform 0.45s var(--ease), background 0.35s, padding 0.35s, backdrop-filter 0.35s; }
.site-header.is-hidden { transform: translateY(-110%); }

/* --- Hero : nuage rouge qui suit la souris ------------------------------ */
.has-mouse .hero__bg::before { transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(1.06); transition: transform 1.4s var(--ease); animation: none; }

/* --- Portfolio : inclinaison 3D + noir & blanc → couleur ---------------- */
.work-grid { perspective: 1200px; }
.work.is-tilting { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(0); transition: transform 0.15s linear, opacity 0.45s var(--ease); z-index: 2; }
.work.is-tilting:not(:hover) { transition: transform 0.6s var(--ease); }
.work__media { filter: saturate(0.7) contrast(1.02); transition: transform 0.9s var(--ease), filter 0.6s var(--ease); }
.work:hover .work__media { filter: saturate(1) contrast(1); }
.work__caption { backdrop-filter: blur(0); }

/* --- Étapes : ligne rouge qui relie les 3 cartes -------------------------- */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) 0.2s; opacity: 0.7; }
.steps.is-in::before { transform: scaleX(1); }
.step__num::after { content: ""; display: inline-block; width: 0; height: 1px; background: var(--accent-2); margin-left: 10px; vertical-align: middle; transition: width 0.6s var(--ease); }
.step:hover .step__num::after { width: 24px; }

/* --- Wordmark du footer : lettres en cascade ---------------------------- */
.rv--wordmark .ch { display: inline-block; transform: translateY(40%); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.6s; transition-delay: calc(var(--c, 0) * 80ms); }
.rv--wordmark.is-in .ch { transform: none; opacity: 1; }
.has-motion .rv--wordmark { clip-path: none; transform: none; opacity: 1; }

/* --- Formulaire : succès avec coche animée ------------------------------- */
.form__status.is-success { display: flex; align-items: center; gap: 12px; }
.form__status.is-success::before {
	content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: pop 0.5s var(--ease) both;
}
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.2); } to { transform: scale(1); } }
.form.is-sent .form__grid { opacity: 0.45; pointer-events: none; transition: opacity 0.5s; }

/* --- Retour en haut ------------------------------------------------------ */
.totop {
	position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--line-strong); background: rgba(14, 16, 19, 0.7); backdrop-filter: blur(8px);
	display: grid; place-items: center; color: var(--text);
	opacity: 0; transform: translateY(16px) scale(0.9); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.totop.is-visible { opacity: 1; transform: none; }
.totop:hover { border-color: var(--accent-2); background: var(--accent); }
.totop svg { width: 16px; height: 16px; }
.totop__ring { position: absolute; inset: -1px; border-radius: 50%; }
.totop__ring circle { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transform: rotate(-90deg); transform-origin: center; }

/* --- Sélecteur de langue : glissement ------------------------------------- */
.lang-switch a { position: relative; }
.lang-switch a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--accent-2); transform: scaleX(0); transition: transform 0.3s var(--ease); }
.lang-switch a:hover::after, .lang-switch a.is-current::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.ticker__track { animation: none; }
	.split .word > span, .rv--wordmark .ch { transform: none; opacity: 1; }
	.steps::before { transform: scaleX(1); }
}
@media (max-width: 900px) { .work.is-tilting { transform: none; } }

/* --- Menu mobile : liens en cascade --------------------------------------- */
@media (max-width: 860px) {
	.site-nav .nav-list li { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
	.site-nav.is-open .nav-list li { opacity: 1; transform: none; }
	.site-nav.is-open .nav-list li:nth-child(1) { transition-delay: 0.08s; }
	.site-nav.is-open .nav-list li:nth-child(2) { transition-delay: 0.14s; }
	.site-nav.is-open .nav-list li:nth-child(3) { transition-delay: 0.2s; }
	.site-nav.is-open .nav-list li:nth-child(4) { transition-delay: 0.26s; }
	.site-nav.is-open .nav-list li:nth-child(5) { transition-delay: 0.32s; }
	.site-nav.is-open .nav-list li:nth-child(6) { transition-delay: 0.38s; }
	body.nav-open .scroll-progress, body.nav-open .totop { opacity: 0; }
}