/*
 * Un peu de vie (inc/motion.php, assets/js/motion.js). Additif : la charte en
 * ligne reste celle du site ; les accents reprennent l'or et le fil du pied de
 * page. Aucun mouvement si le visiteur a demandé moins d'animations.
 * Vérifié par tests/e2e/motion.spec.ts.
 */

/* ---------- Apparitions au défilement (classe posée par motion.js) ---------- */

.kadef-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s var(--kadef-ease), transform 0.8s var(--kadef-ease);
}

.kadef-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Cartes produits ---------- */

/* Le lien de la photo devient le cadre du zoom et de la seconde photo. */
ul.products li.product .woocommerce-LoopProduct-link {
	position: relative;
	display: block;
	overflow: hidden;
}

ul.products li.product .woocommerce-LoopProduct-link img {
	transition: transform 0.9s var(--kadef-ease), opacity 0.6s var(--kadef-ease);
}

ul.products li.product .kadef-card-alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

/* Filet or qui se dessine sous le nom du produit. */
ul.products li.product .woocommerce-loop-product__title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin-top: 0.35em;
	background: var(--kadef-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s var(--kadef-ease);
}

/* Survol uniquement sur les appareils qui en ont un (pas d'état collé au doigt). */
@media (hover: hover) {
	ul.products li.product:hover .woocommerce-LoopProduct-link img {
		transform: scale(1.05);
	}

	ul.products li.product.kadef-has-alt:hover .woocommerce-LoopProduct-link img:not(.kadef-card-alt) {
		opacity: 0;
	}

	ul.products li.product.kadef-has-alt:hover .kadef-card-alt {
		opacity: 1;
	}

	ul.products li.product:hover .woocommerce-loop-product__title::after {
		transform: scaleX(1);
	}
}

ul.products li.product:focus-within .woocommerce-loop-product__title::after {
	transform: scaleX(1);
}

/*
 * Badges : « Angebot! » d'Astra (pastille blanche à ombre) et « Neu » du thème,
 * en étiquette de couturier (trait or, petites capitales espacées).
 */
.woocommerce ul.products li.product .ast-onsale-card,
ul.products li.product .kadef-badge {
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 4;
	padding: 0.35em 0.75em;
	border: 1px solid var(--kadef-gold);
	border-radius: 0;
	background: var(--kadef-cream-soft);
	box-shadow: none;
	color: var(--kadef-ink);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

ul.products li.product .kadef-badge--new {
	background: var(--kadef-ink);
	color: var(--kadef-cream-soft);
}

/* Remise (« -20 % ») : même étiquette de couturier, chiffre en rouge de
   charte comme le prix soldé. */
.woocommerce ul.products li.product .ast-onsale-card,
.woocommerce span.onsale {
	color: var(--kadef-danger);
}

/* Les deux badges : « Neu » sous « Angebot! ». */
ul.products li.product .ast-onsale-card ~ .kadef-badge--new {
	top: 3.9em;
}

@media (max-width: 544px) {
	.woocommerce ul.products li.product .ast-onsale-card,
	ul.products li.product .kadef-badge {
		top: 0.75em;
		left: 0.75em;
	}

	ul.products li.product .ast-onsale-card ~ .kadef-badge--new {
		top: 3.1em;
	}
}

/* ---------- Panier : point de couture à chaque ajout ---------- */

.ast-site-header-cart .ast-icon-shopping-bag::before {
	content: "";
	position: absolute;
	inset: -0.55em;
	border: 1px dashed var(--kadef-gold);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.ast-site-header-cart.kadef-cart-stitched .ast-icon-shopping-bag::before {
	animation: kadef-stitch-ring 1.4s var(--kadef-ease);
}

.ast-site-header-cart.kadef-cart-stitched .ast-icon-shopping-bag .ast-icon {
	display: inline-block;
	animation: kadef-cart-sway 0.9s var(--kadef-ease);
	transform-origin: 50% 0;
}

@keyframes kadef-stitch-ring {
	0% {
		opacity: 0;
		transform: scale(0.5) rotate(0deg);
	}

	30% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1.15) rotate(120deg);
	}
}

@keyframes kadef-cart-sway {
	0%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(-12deg);
	}

	55% {
		transform: rotate(8deg);
	}

	80% {
		transform: rotate(-3deg);
	}
}

/* ---------- Boutons : reflet or qui traverse au survol ---------- */

.woocommerce a.button,
.woocommerce button.button,
.wp-block-button__link,
.elementor-button {
	background-image: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--kadef-gold) 40%, transparent) 50%, transparent 60%);
	background-repeat: no-repeat;
	background-size: 250% 100%;
	background-position: 150% 0;
}

@media (hover: hover) {
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.wp-block-button__link:hover,
	.elementor-button:hover {
		background-position: -50% 0;
		transition: background-position 0.8s var(--kadef-ease), color 0.2s, background-color 0.2s, border-color 0.2s;
	}
}

/* Les boutons-icônes des cartes (ajout au panier) gardent leur aspect. */
.woocommerce ul.products li.product .ast-on-card-button {
	background-image: none;
}

/* ---------- Liens : soulignement or ---------- */

/* Menu principal (desktop) : un fil or se tend sous l'entrée survolée. */
@media (min-width: 922px) {
	.main-header-menu > .menu-item > .menu-link {
		background-image: linear-gradient(var(--kadef-gold), var(--kadef-gold));
		background-repeat: no-repeat;
		background-position: 50% calc(50% + 0.95em);
		background-size: 0 1px;
		transition: background-size 0.4s var(--kadef-ease), color 0.2s;
	}

	.main-header-menu > .menu-item:hover > .menu-link,
	.main-header-menu > .menu-item > .menu-link:focus-visible {
		background-size: calc(100% - 2em) 1px;
	}
}

/* Liens dans le texte : le soulignement prend l'or et s'écarte du mot. */
.entry-content p a:not(.button):not(.wp-block-button__link),
.entry-content li a:not(.button):not(.wp-block-button__link),
.elementor-widget-text-editor a {
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: text-decoration-color 0.3s, text-underline-offset 0.3s var(--kadef-ease);
}

.entry-content p a:not(.button):not(.wp-block-button__link):hover,
.entry-content li a:not(.button):not(.wp-block-button__link):hover,
.elementor-widget-text-editor a:hover {
	text-decoration-color: var(--kadef-gold);
	text-underline-offset: 0.3em;
}

/* ---------- Page 404 : l'aiguille a perdu son fil ---------- */

.kadef-404-art {
	max-width: 15rem;
	margin: 0 auto 1.5rem;
}

.kadef-404-art svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.kadef-404-art__seam {
	fill: none;
	stroke: var(--kadef-gold-dark);
	stroke-width: 1;
	stroke-dasharray: 7 6;
}

.kadef-404-art__needle {
	fill: none;
	stroke: var(--ast-global-color-3, #57534e);
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.kadef-404-art__eye {
	fill: none;
	stroke: var(--ast-global-color-3, #57534e);
	stroke-width: 1;
}

.kadef-404-art__yarn {
	fill: none;
	stroke: var(--kadef-gold);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: kadef-yarn-escape 2.4s var(--kadef-ease) 0.3s both;
}

.kadef-404-art__knot {
	fill: var(--kadef-gold);
	animation: kadef-knot-drop 0.6s var(--kadef-ease) 2.3s both;
}

@keyframes kadef-yarn-escape {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes kadef-knot-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.kadef-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	margin-top: 2rem;
}

.kadef-404-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.75rem;
	border: 1px solid var(--kadef-ink);
	color: var(--kadef-ink);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s var(--kadef-ease), color 0.3s var(--kadef-ease);
}

.kadef-404-links .kadef-404-links__store,
.kadef-404-links a:hover,
.kadef-404-links a:focus-visible {
	background: var(--kadef-ink);
	color: var(--kadef-cream-soft);
}

.kadef-404-links .kadef-404-links__store:hover,
.kadef-404-links .kadef-404-links__store:focus-visible {
	background: transparent;
	color: var(--kadef-ink);
}

/* ---------- Mouvement réduit : tout est affiché, rien ne bouge ---------- */

@media (prefers-reduced-motion: reduce) {
	.kadef-reveal {
		opacity: 1;
		transform: none;
	}

	ul.products li.product .woocommerce-LoopProduct-link img,
	ul.products li.product .woocommerce-loop-product__title::after,
	.main-header-menu > .menu-item > .menu-link {
		transition: none;
	}

	ul.products li.product:hover .woocommerce-LoopProduct-link img {
		transform: none;
	}

	.kadef-404-art__yarn,
	.kadef-404-art__knot {
		animation: none;
	}
}