/**
 * Homepage editorial line art. Loaded only on the homepage, and only when at
 * least one drawing is switched on (inc/editorial-art.php).
 *
 * Every rule is keyed on a body class the server prints only for a drawing
 * that is on — .smyn-art-face, .smyn-art-hand, .smyn-art-butterfly — so a
 * switched-off drawing has no rule that could match and its file is never
 * requested.
 *
 * THE LAYER. Each drawing is the background of a ::before that fills its
 * section behind the text. A background is clipped to its own box, which is
 * what lets a drawing enter from the window edge and be cropped there without
 * ever widening the page; the layer holds no content, so it cannot move the
 * layout, take a click, or be announced.
 *
 * STROKE. The files carry their colour — terracotta on cream, champagne on
 * ink, mocha on cream — and a 1.2px non-scaling stroke, so the line stays
 * hair-fine at every size. Opacity is set here, in the Brand Book's restrained
 * 0.2–0.35 range, so the type always leads.
 *
 * FOOTPRINT. Each layer is sized and capped to the empty space it occupies:
 * the drawing is cropped rather than allowed to pass behind a price, a row, a
 * card or a button. Where a width leaves no such space, the drawing is not
 * shown at that width at all.
 */

/* ---- the shared layer --------------------------------------------------- */

.smyn-art-face .smyn-b02x-root,
.smyn-art-hand .smyn-b03-root,
.smyn-art-butterfly .smyn-b06-root {
	position: relative;
	isolation: isolate; /* the layer sits above the section's own background, below everything in it */
}

.smyn-art-face .smyn-b02x-root::before,
.smyn-art-hand .smyn-b03-root::before,
.smyn-art-butterfly .smyn-b06-root::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	opacity: var(--smyn-art-opacity, .28);
	transform: translate3d(0, var(--smyn-art-y, 0px), 0);
}

/*
 * WHERE EACH ONE GOES. Each drawing lives in space the page leaves empty, and
 * is shown only at the widths where that space is wide enough to hold it
 * without touching the reading. The positions below follow the same column
 * proportions Elementor gives these sections (58/42, 76/24, 47/53), so they
 * move with the layout rather than with a guess about it.
 */

/* ---- A. the face: between "More than beautiful nails" and the photo ---- */

/* Phones: the text runs the full width, so the only clear ground is the
   top-right corner beside the two short heading lines — below the "01"
   marker, right of "beautiful nails.", above the first paragraph. The face
   fits there from brow to chin, drawn small; the layer ends at the chin, so
   the neck is cropped away instead of running behind text. */
.smyn-art-face .smyn-b02x-root::before {
	--smyn-art-opacity: .2;
	--smyn-art-h: 250px;
	background-image: url(../art/smyn-art-face.svg);
	background-size: auto var(--smyn-art-h);
	background-position: right -61px top 40px;
	bottom: auto;
	height: 232px;
	/* No scroll drift here: 24px would carry the cropped edge down to the
	   first paragraph. The fade-in still applies. */
	transform: none;
}

/* Tablets and small laptops: the text column reaches almost to the photo
   (60-124px apart). There is no room for a face, so there is none. */
@media (min-width: 768px) and (max-width: 1279px) {
	.smyn-art-face .smyn-b02x-root::before {
		display: none;
	}
}

/* Desktop: in the band between the text (it ends 554px in) and the photo
   (58% of the width, plus its 28px inset). The profile's features stand in
   that band, their far edge 25px short of the photo; the hair and the neck
   line pass behind the photo, as if the face were looking out from beside
   it. The drawing is 0.84 as wide as it is tall, and its features end at
   55% of its width, which is what the offset below solves for. */
@media (min-width: 1280px) {
	.smyn-art-face .smyn-b02x-root::before {
		--smyn-art-opacity: .30;
		--smyn-art-h: clamp(480px, calc(75vw - 470px), 820px);
		background-position: right calc(42vw - 0.378 * var(--smyn-art-h) - 3px) top 70px;
		height: calc(var(--smyn-art-h) + 70px);
		transform: translate3d(0, var(--smyn-art-y, 0px), 0);
	}
}

/* ---- B. the hand: between "One destination." and its note -------------- */

.smyn-art-hand .smyn-b03-root::before {
	display: none;
}

/* Only where the gap between the title (it ends 770px in) and the note (76%
   of the width, less 40px) can hold the hand with clear space either side.
   Centred in that gap, and ending above the first treatment row. */
@media (min-width: 1360px) {
	.smyn-art-hand .smyn-b03-root::before {
		display: block;
		--smyn-art-opacity: .32;
		/* 396px tall at most, from 14px down: with the full 24px of scroll
		   drift the fingertips still stop 12px above the first row. */
		--smyn-art-h: clamp(340px, calc((76vw - 860px) * 2), 396px);
		background-image: url(../art/smyn-art-hand.svg);
		background-size: auto var(--smyn-art-h);
		background-position: left calc(365px + 38vw - var(--smyn-art-h) / 4) top 14px;
		bottom: auto;
		height: calc(var(--smyn-art-h) + 14px);
	}
}

/* ---- C. the hand and butterfly: "Two specialists. One considered hour." */

.smyn-art-butterfly .smyn-b06-root::before {
	display: none;
}

/* In the empty lower half of the photo column, under the collage. The layer
   is exactly that column's width, so the wrist is cropped where the column
   meets the text beside it: the hand reaches in from the middle of the page. */
@media (min-width: 768px) {
	.smyn-art-butterfly .smyn-b06-root::before {
		display: block;
		--smyn-art-opacity: .34; /* mocha on cream is the softest pairing; it needs a little more */
		--smyn-art-w: 300px;
		background-image: url(../art/smyn-art-butterfly.svg);
		background-size: var(--smyn-art-w) auto;
		background-position: right 0 top 0;
		inset: auto;
		left: 28px;
		width: calc(48vw - 30px);
		top: 632px;
		height: calc(var(--smyn-art-w) * 0.965);
	}
}
@media (min-width: 1025px) {
	.smyn-art-butterfly .smyn-b06-root::before {
		--smyn-art-w: clamp(380px, 26vw, 480px);
		left: 70px;
		width: calc(47vw - 66px);
		top: 700px;
	}
}

/* ---- motion: a soft arrival and a few pixels of drift -----------------
 *
 * Only with the motion switch on (.smyn-art-motion) AND once the script has
 * run (.smyn-art-js on <html>): if the script never arrives, the drawings are
 * simply there, at rest. Reduced motion is honoured twice — the script does
 * not start, and this block is ignored.
 */
@media (prefers-reduced-motion: no-preference) {
	.smyn-art-js .smyn-art-motion.smyn-art-face .smyn-b02x-root::before,
	.smyn-art-js .smyn-art-motion.smyn-art-hand .smyn-b03-root::before,
	.smyn-art-js .smyn-art-motion.smyn-art-butterfly .smyn-b06-root::before {
		opacity: 0;
		transition: opacity 1.6s cubic-bezier(.22, .61, .36, 1);
		will-change: transform, opacity;
	}
	.smyn-art-js .smyn-art-motion.smyn-art-face .smyn-b02x-root.smyn-art-in::before,
	.smyn-art-js .smyn-art-motion.smyn-art-hand .smyn-b03-root.smyn-art-in::before,
	.smyn-art-js .smyn-art-motion.smyn-art-butterfly .smyn-b06-root.smyn-art-in::before {
		opacity: var(--smyn-art-opacity, .28);
	}
}