/* ==========================================================================
   Mobile — direction « vitrine de joaillerie » (0.9.40)
   Halo de toucher, éclats en croix fine, reflet de lumière, ambiance des
   sections sombres, relief des boutons et cartes, apparitions au scroll.
   Chargé en dernier ; tout est limité aux écrans étroits / tactiles et coupé
   en mouvement réduit. Le bureau n'est pas modifié.
   ========================================================================== */

/* ---- Halo + éclats (créés par js/mobile-fx.js) -------------------------------- */
.hoaji-sparkles {
	position: fixed;
	inset: 0;
	z-index: 999;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.hoaji-burst {
	position: absolute;
	inset: 0;
}

/* Lumière de vitrine : diffusion douce autour du point de contact. */
.hoaji-halo {
	position: absolute;
	width: 168px;
	height: 168px;
	margin: -84px 0 0 -84px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(218, 178, 100, 0.5) 0%, rgba(199, 164, 103, 0.24) 38%, rgba(199, 164, 103, 0) 70%);
	opacity: 0;
	will-change: transform, opacity;
	animation: hoaji-halo 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hoaji-halo.is-dark {
	background: radial-gradient(circle, rgba(255, 238, 196, 0.6) 0%, rgba(226, 201, 148, 0.28) 36%, rgba(226, 201, 148, 0) 70%);
	mix-blend-mode: screen;
}

@keyframes hoaji-halo {
	0% {
		opacity: 0;
		transform: scale(0.35);
	}

	28% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1.25);
	}
}

/* Éclat de pierre : croix très fine + point lumineux, jamais une « paillette ». */
.hoaji-glint {
	--gc: #b8914a;
	position: absolute;
	width: var(--g, 12px);
	height: var(--g, 12px);
	margin: calc(var(--g, 12px) / -2) 0 0 calc(var(--g, 12px) / -2);
	background: radial-gradient(circle, #fff 0%, var(--gc) 14%, rgba(255, 255, 255, 0) 30%);
	opacity: 0;
	will-change: transform, opacity;
	animation: hoaji-glint 640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
}

.hoaji-glint.is-dark {
	--gc: #fff1cc;
}

.hoaji-glint::before,
.hoaji-glint::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	margin-top: -0.5px;
	background: linear-gradient(90deg, transparent, var(--gc), transparent);
}

.hoaji-glint::after {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	margin: 0 0 0 -0.5px;
	background: linear-gradient(180deg, transparent, var(--gc), transparent);
}

@keyframes hoaji-glint {
	0% {
		opacity: 0;
		transform: scale(0.2) rotate(var(--rot, 0deg));
	}

	35% {
		opacity: 1;
		transform: scale(1) rotate(var(--rot, 0deg));
	}

	100% {
		opacity: 0;
		transform: scale(0.45) rotate(calc(var(--rot, 0deg) + 20deg));
	}
}

/* ---- Reflet de lumière (light sweep), déclenché par le script ------------------ */
@keyframes hoaji-sweep {
	0% {
		transform: translateX(-130%);
		opacity: 1;
	}

	100% {
		transform: translateX(130%);
		opacity: 1;
	}
}

@media (max-width: 1023px), (hover: none) {
	.button--primary,
	.button--outline-inverse,
	.button--slim-inverse {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.button--primary::before,
	.button--outline-inverse::before,
	.button--slim-inverse::before {
		content: "";
		position: absolute;
		inset: -1px;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(105deg, transparent 36%, rgba(255, 250, 235, 0.5) 47%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 250, 235, 0.5) 53%, transparent 64%);
		opacity: 0;
		transform: translateX(-130%);
		animation: none;
	}

	.button--outline-inverse::before,
	.button--slim-inverse::before {
		background: linear-gradient(105deg, transparent 36%, rgba(226, 201, 148, 0.16) 47%, rgba(255, 244, 214, 0.42) 50%, rgba(226, 201, 148, 0.16) 53%, transparent 64%);
	}

	.button.is-sweeping::before,
	.wc-block-cart__submit-button.is-sweeping::after,
	.wc-block-components-checkout-place-order-button.is-sweeping::after {
		animation: hoaji-sweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
	}
}

/* ---- Écrans étroits ------------------------------------------------------------ */
@media (max-width: 1023px) {
	/* Boutons : relief de métal poli, bordure fine, état tactile soigné. */
	.button--primary {
		background-image: linear-gradient(180deg, #dfc48c 0%, #c7a467 52%, #b48f4d 100%);
		border-color: #d6b97e;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(90, 60, 20, 0.28), 0 10px 20px -10px rgba(150, 104, 58, 0.55);
		transition: transform 260ms var(--ease-luxe), box-shadow 320ms var(--ease-luxe);
	}

	.button--outline-inverse,
	.button--slim-inverse {
		border-color: rgba(226, 201, 148, 0.78);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 18px -12px rgba(0, 0, 0, 0.7);
	}

	.button:active {
		transform: scale(0.985);
	}

	.button--primary:active {
		box-shadow: inset 0 2px 4px rgba(90, 60, 20, 0.3), 0 0 22px rgba(226, 201, 148, 0.5);
	}

	.button--outline-inverse:active,
	.button--slim-inverse:active {
		background-color: rgba(199, 164, 103, 0.16);
		box-shadow: inset 0 0 0 1px rgba(226, 201, 148, 0.5), 0 0 20px rgba(199, 164, 103, 0.3);
	}

	/* Cartes : ombre douce et profonde, lecture du bijou, tap raffiné. */
	.product-card__media,
	.jewel-card__media {
		box-shadow: 0 16px 32px -18px rgba(17, 17, 18, 0.42), 0 3px 6px rgba(17, 17, 18, 0.05);
		transition: transform 280ms var(--ease-luxe), box-shadow 340ms var(--ease-luxe), border-color 340ms var(--ease-luxe);
	}

	.product-card__media::before,
	.jewel-card__media::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		border-radius: inherit;
		box-shadow: inset 0 -46px 54px -44px rgba(17, 17, 18, 0.3), inset 0 0 0 1px rgba(199, 164, 103, 0.18);
	}

	.product-card:active .product-card__media,
	.jewel-card:active .jewel-card__media {
		transform: scale(0.985);
		border-color: rgba(199, 164, 103, 0.75);
		box-shadow: 0 0 0 1px rgba(199, 164, 103, 0.28), 0 14px 26px -14px rgba(150, 104, 58, 0.5);
	}

	/* Apparitions : fondu + montée lente, rythme cinématique. */
	.js .reveal {
		transform: translateY(24px);
		transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: calc(var(--reveal-i, 0) * 90ms);
	}

	.js .reveal.is-visible {
		transform: none;
	}

	/* Ambiance des sections sombres : vignettage lumineux + glow champagne. */
	.hero-page__scrim {
		background:
			radial-gradient(80% 55% at 82% 26%, rgba(199, 164, 103, 0.18) 0%, rgba(199, 164, 103, 0) 68%),
			radial-gradient(130% 100% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.4) 100%),
			linear-gradient(0deg, rgba(17, 17, 18, 0.92) 0%, rgba(17, 17, 18, 0.6) 42%, rgba(17, 17, 18, 0.12) 100%);
	}

	.media-frame--hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			radial-gradient(60% 45% at 74% 44%, rgba(226, 201, 148, 0.14) 0%, rgba(226, 201, 148, 0) 70%),
			radial-gradient(125% 95% at 50% 42%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4) 100%);
		animation: hoaji-ambient 9s ease-in-out infinite alternate;
	}

	.band--dark.section--dark,
	.photo-band,
	.about-immersive,
	.site-footer {
		box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.45);
	}

	.band--dark.section--dark:not(.shop-selection):not(.filters-band):not(.guide-more-band)::before {
		background: radial-gradient(closest-side, rgba(199, 164, 103, 0.24) 0%, rgba(150, 104, 58, 0.1) 60%, rgba(150, 104, 58, 0) 100%);
	}

	/* Images joaillerie : léger volume, lumière plus noble. */
	.contact-visual,
	.about-immersive__media img {
		box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.85), 0 0 46px -18px rgba(199, 164, 103, 0.28);
	}

	/* Profondeur : le script règle --py (±12 px) ; l'échelle évite tout bord vide. */
	.fx-parallax {
		transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
		will-change: transform;
	}
}

@keyframes hoaji-ambient {
	from {
		opacity: 0.78;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hoaji-sparkles {
		display: none;
	}

	.media-frame--hero::after {
		animation: none;
	}

	.fx-parallax {
		transform: none;
	}

	.button.is-sweeping::before {
		animation: none;
	}
}

/* ---- Menu hamburger : retour tactile luxueux (tiroir ivoire) ------------------- */
@media (max-width: 1023px) {
	.mobile-menu a,
	.mobile-drawer__utility-link {
		position: relative;
		transition: background-color 300ms var(--ease-luxe), border-color 300ms var(--ease-luxe), padding-left 300ms var(--ease-luxe);
	}

	.mobile-menu a:active,
	.mobile-drawer__utility-link:active {
		background: linear-gradient(90deg, rgba(199, 164, 103, 0.2), rgba(199, 164, 103, 0) 85%);
		border-left-color: var(--color-accent);
	}

	.mobile-drawer .js-menu-close:active,
	.mobile-drawer .mobile-menu__submenu-toggle:active {
		background-color: rgba(199, 164, 103, 0.16);
		border-radius: var(--radius-pill);
	}
}