/* Shared styles across sections (keep minimal – each section carries its own scoped CSS). */

/* Page base: ivory background, brand text colour & font. */
body {
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
}

/*
 * Watermark motif (tone-on-tone line drawing: raised arm, hand on the breast), a touch darker than
 * the background it sits on. Decorative only. ONE per section, sides alternating down the page
 * (hero L · avantages R · soins L · docteur R · gynécologie L · examens R · cabinet L · articles R · faq L · footer R).
 * Usage inside a section that is position:relative:
 *   <span class="wm wm--l" aria-hidden="true"></span>   (left or right edge)
 * Orientation: always the breast and the hand facing the text, the back flush with the screen edge
 * (the drawing's back is on its right, so the left motif is mirrored and the right one is not).
 * Size / strength / placement can be tuned per section with --wm-size, --wm-a, top/bottom.
 */
.wm {
	position: absolute;
	z-index: 0;
	width: var(--wm-size, clamp(360px, 38vw, 580px));
	aspect-ratio: 1;
	pointer-events: none;
	background-color: rgba(var(--c-text-rgb), var(--wm-a, 0.07));
	-webkit-mask: url(../img/gynecologue-tanger-dr-sefrioui.svg) center / contain no-repeat;
	mask: url(../img/gynecologue-tanger-dr-sefrioui.svg) center / contain no-repeat;
}
.wm--l { left: 0; transform: translateX(-18%) scaleX(-1); }
.wm--r { right: 0; transform: translateX(18%); }
@media (max-width: 767px) {
	.wm { --wm-size: 280px; --wm-a: 0.06; }
}
/* Desktop: same treatment as the hero motif – 800px, pushed 120px further past the screen edge */
@media (min-width: 1024px) {
	.wm { --wm-size: 800px; }
	.wm--l { margin-left: -120px; }
	.wm--r { margin-right: -120px; }
}

/*
 * Soft blush glow (round, very light) filling the empty area of a section, on the side opposite the
 * motif and diagonally from it. Decorative only; the section's inner wrapper sits above it (z-index 1).
 *   <span class="wm-glow wm-glow--r" aria-hidden="true"></span>   (+ top or bottom per section)
 */
.wm-glow {
	position: absolute;
	z-index: 0;
	width: var(--glow-size, clamp(360px, 44vw, 680px));
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(var(--c-blush-rgb), 1), rgba(var(--c-blush-rgb), 0.5) 50%, rgba(var(--c-blush-rgb), 0));
}
.wm-glow--l { left: 0; transform: translateX(-45%); }
.wm-glow--r { right: 0; transform: translateX(45%); }
@media (max-width: 767px) {
	.wm-glow { --glow-size: 320px; }
}
/* Very slow drift while scrolling (CSS only, where supported; off with reduced motion) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wm { animation: wm-drift linear both; animation-timeline: view(); }
	}
}
@keyframes wm-drift { from { translate: 0 48px; } to { translate: 0 -48px; } }

/*
 * ─── Motion system (one behaviour for every section) ──────────────────────────────────
 * Only compositor-friendly properties are animated (opacity, translate, transform): no layout, no CLS.
 * :root.js-reveal (strong specificity: beats section transitions) is set on <html> by a tiny inline script in <head> (skipped with reduced motion),
 * assets/js/sections.js (deferred, IntersectionObserver) adds .is-in; .rv-all = safety net (shows all).
 *
 *   data-reveal          block: fade + rise when it enters the viewport (auto-staggered by the script)
 *   data-reveal="media"  photo block: fade + the <img> settles from a slight zoom
 *   [pathLength] inside  SVG lines draw themselves · .rv-fill = soft icon fill that fades in after
 *   data-enter           above the fold (hero, page header): CSS-only entrance, never hidden (LCP-safe)
 *   data-enter="fade"    same with a fade, for non-LCP elements (buttons, signature)
 */
:root.js-reveal [data-reveal] {
	opacity: 0;
	translate: 0 var(--motion-y);
	/* Reveal props use the stagger delay; hover props (cards) keep their own instant timing. */
	transition-property: opacity, translate, transform, box-shadow, border-color, background-color;
	transition-duration: var(--motion-dur), var(--motion-dur), var(--motion-hover), var(--motion-hover), var(--motion-hover), var(--motion-hover);
	transition-timing-function: var(--motion-ease);
	transition-delay: var(--rv-d, 0s), var(--rv-d, 0s), 0s, 0s, 0s, 0s;
}
:root.js-reveal [data-reveal].is-in,
:root.rv-all [data-reveal] {
	opacity: 1;
	translate: none;
}
/* Photos: the block fades, the image settles (transform only) */
:root.js-reveal [data-reveal="media"] { translate: none; }
:root.js-reveal [data-reveal="media"] img {
	transform: scale(1.06);
	transition: transform 1.4s var(--motion-ease) var(--rv-d, 0s);
}
:root.js-reveal [data-reveal="media"].is-in img,
:root.rv-all [data-reveal="media"] img { transform: none; }
/* Icons: lines draw, then the soft fill appears */
:root.js-reveal [data-reveal] [pathLength] {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--motion-draw) var(--motion-ease) calc(var(--rv-d, 0s) + .25s);
}
:root.js-reveal [data-reveal].is-in [pathLength],
:root.rv-all [pathLength] { stroke-dashoffset: 0; }
:root.js-reveal [data-reveal] .rv-fill {
	opacity: 0;
	transition: opacity .6s ease calc(var(--rv-d, 0s) + .8s);
}
:root.js-reveal [data-reveal].is-in .rv-fill,
:root.rv-all .rv-fill { opacity: 1; }
/* Above the fold: CSS-only entrance on load (no JS wait). Text only rises (stays opaque = LCP-safe). */
@keyframes rv-rise { from { translate: 0 14px; } to { translate: none; } }
@keyframes rv-fade-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes rv-settle { from { transform: scale(1.04); } to { transform: none; } }
:root.js-reveal [data-enter] { animation: rv-rise var(--motion-dur) var(--motion-ease) var(--en-d, 0s) both; }
:root.js-reveal [data-enter="fade"] { animation-name: rv-fade-rise; }
:root.js-reveal [data-enter="settle"] { animation: rv-settle 1.6s var(--motion-ease) both; }

/* Scroll lock while the mobile header menu is open. */
.hd-lock {
	overflow: hidden;
}