/* =====================================================================
   Marble polish layer (pl-*) — depth and sober motion for the three hand-built
   pages: blog, carrera, contacto. Opt-in per element through data-pl* attributes.

   Ported from <delivery>/assets/css/marble-polish.css (T2, reviewed-pages-batch-1).
   Faithful port: only colour is tokenized (#fff -> --ms-on-dark; each #000 mask
   stop carries a declared exemption). Script: assets/js/pl-polish.js.
   ===================================================================== */
/*
 * Marble Headhunter - Polish layer v1.0 (opt-in)
 * Depth and sober motion for the hand-built main pages. Nothing here applies unless an element
 * carries a data-pl* attribute. Static decoration (guides, ghost numeral, band, lede rule, ring)
 * is always visible; every hidden state is gated by html.pl-on, which marble-polish.js adds only
 * when motion is allowed. Transform, opacity, clip-path and stroke-dashoffset only: no layout shift.
 * Tokens come from marble-tokens.css; no raw colours.
 */
:root { --pl-ease: var(--ms-ease, cubic-bezier(0.2, 0.7, 0.2, 1)); }

/* ---------- Section depth ---------- */
[data-pl], [data-pl-num] { isolation: isolate; overflow-x: clip; }

/* faint column guides: four columns of the grid, fading in and out vertically */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
[data-pl~="guides"]::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	inset-block: 0; inset-inline: 0; margin-inline: auto;
	width: min(var(--ms-container-max), calc(100% - 2 * var(--ms-gutter)));
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--ms-ink) 7%, transparent) 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
		linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--ms-ink) 7%, transparent) 0) 0 0 / 100% 100% no-repeat;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

/* ghost numeral: very large, thin, behind the header; drifts against the scroll */
[data-pl-num]::after {
	content: attr(data-pl-num); position: absolute; z-index: -1; pointer-events: none; user-select: none;
	inset-block-start: calc(var(--ms-section-y) * 0.62); inset-inline-start: calc(max(var(--ms-gutter), calc((100% - var(--ms-container-max)) / 2)) - 0.06em);
	font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(9rem, 4rem + 17vw, 20rem); line-height: 0.8; letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ms-brand) 6.5%, transparent);
	transform: translate3d(0, calc(var(--pl-p, 0) * -2.25rem), 0);
}
[data-pl-side="r"]::after { inset-inline-start: auto; inset-inline-end: max(var(--ms-gutter), calc((100% - var(--ms-container-max)) / 2)); }
@media (max-width: 64rem) { [data-pl-num]::after { font-size: clamp(6rem, 3rem + 20vw, 11rem); inset-block-start: 3.5rem; } }

/* soft brand band */
[data-pl~="band"] { background: linear-gradient(180deg, transparent 0%, var(--ms-brand-tint) 10%, var(--ms-brand-tint) 90%, transparent 100%); }

/* orbit ring (injected by JS as an empty svg) */
.pl-ring { position: absolute; z-index: -1; pointer-events: none; overflow: visible; width: clamp(18rem, 36vw, 34rem); aspect-ratio: 1; inset-block-start: var(--pl-ring-y, 6%); inset-inline-end: -8vw; transform: rotate(calc(var(--pl-sp, 0.5) * 100deg - 30deg)); }
[data-pl-ring="l"] > .pl-ring { inset-inline-end: auto; inset-inline-start: -10vw; }
.pl-ring circle { fill: none; stroke: color-mix(in srgb, var(--ms-ink) 16%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pl-ring .pl-ring__dot { fill: var(--ms-brand); stroke: none; }
@media (max-width: 40rem) { .pl-ring { width: 78vw; inset-inline-end: -30vw; } [data-pl-ring="l"] > .pl-ring { inset-inline-start: -30vw; } }

/* ---------- Lede: the short paragraph beside a thin section gets a scroll-drawn rule ---------- */
[data-pl~="lede"] .ms-header__side { position: relative; padding-inline-start: clamp(1.25rem, 2.4vw, 2rem); }
[data-pl~="lede"] .ms-header__side::before { content: ""; position: absolute; inset-block: 0.25rem; inset-inline-start: 0; width: 1px; background: var(--ms-line-strong); transform-origin: top; }
[data-pl~="lede"] .ms-header__side .ms-lede, [data-pl~="lede"] .ms-header__side > p { font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.6; color: var(--ms-ink); }
@media (max-width: 64rem) { [data-pl~="lede"] .ms-header__side { padding-inline-start: 0; padding-block-start: 1.25rem; } [data-pl~="lede"] .ms-header__side::before { inset: 0 0 auto; width: auto; height: 1px; transform-origin: left; } }

/* ---------- Rows: a short brand hairline signs the top rule, children settle in ---------- */
[data-pl-rows] { position: relative; }
[data-pl-rows]::before { content: ""; position: absolute; z-index: 1; inset-block-start: -1px; inset-inline-start: 0; width: clamp(3rem, 7vw, 5.5rem); height: 2px; background: var(--ms-brand); transform-origin: left; pointer-events: none; }

/* ---------- Plates: photos already on the page clip in, settle and drift (at most 22px) ---------- */
[data-pl-plate] { overflow: hidden; }
[data-pl-plate] img { transform: scale(1.04); translate: 0 calc(var(--pl-p, 0) * -1 * min(4%, 1.4rem)); }

/* ---------- Offset keyline behind a framed plate ---------- */
[data-pl-frame] { position: relative; isolation: isolate; }
[data-pl-frame]::after { content: ""; position: absolute; inset: 0; translate: clamp(0.6rem, 1.4vw, 1.1rem) clamp(0.6rem, 1.4vw, 1.1rem); border: 1px solid color-mix(in srgb, var(--ms-brand) 38%, transparent); pointer-events: none; z-index: -1; }

/* ---------- Stick: heading column pinned on the left, the list reads on the right (header + list sections) ---------- */
@media (min-width: 64.01rem) {
	[data-pl-layout="stick"] > .ms-container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
	[data-pl-layout="stick"] .ms-title { font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.3rem); }
	[data-pl-layout="stick"] > .ms-container > .ms-header { grid-column: 1 / span 5; grid-row: 1 / span 8; position: sticky; top: 7.5rem; display: block; margin: 0; }
	[data-pl-layout="stick"] > .ms-container > .ms-header .ms-header__side { margin-block-start: 1.75rem; justify-self: start; max-width: 32ch; padding-block-end: 0; }
	[data-pl-layout="stick"] > .ms-container > :not(.ms-header) { grid-column: 7 / -1; }
}

/* ---------- Cross: the heading runs over the top edge of the plate below it ---------- */
@media (min-width: 64.01rem) {
	[data-pl-cross] { --pl-pull: clamp(3rem, 6vw, 5.5rem); }
	[data-pl-cross] .ms-header { position: relative; z-index: 3; margin-block-end: calc(-1 * var(--pl-pull)); }
	[data-pl-cross] .ms-header__main { text-shadow: 0 0 0.5em color-mix(in srgb, var(--ms-ground) 85%, transparent), 0 0 0.14em color-mix(in srgb, var(--ms-ground) 70%, transparent); }
	[data-pl-cross] [data-pl-plate] ~ * { margin-block-start: var(--pl-pull); }
}

/* ---------- Dark: a vinotinto (or practice deep) section, same recipe as the approved Headhunting band ---------- */
html [data-pl~="dark"] {
	background: var(--ms-dark); color: var(--ms-on-dark);
	--ms-ink: var(--ms-on-dark); --ms-ink-soft: var(--ms-on-dark-soft, rgb(255 255 255 / 0.76)); --ms-ink-subtle: rgb(255 255 255 / 0.6);
	--ms-brand: var(--ms-brand-on-dark); --ms-line: rgb(255 255 255 / 0.16); --ms-line-strong: rgb(255 255 255 / 0.3);
}
html [data-pl~="dark"] * { border-color: rgb(255 255 255 / 0.16); }
html [data-pl~="dark"] a:not(.ms-cta) { color: var(--ms-on-dark); }
html [data-pl~="dark"] [data-pl-plate] img { filter: grayscale(1) contrast(1.05) brightness(0.9); }

/* =====================================================================
   Motion (armed only while html.pl-on)
   ===================================================================== */
html.pl-on [data-pl-num]::after { transition: opacity 1.4s ease; }
html.pl-on [data-pl-num]:not(.pl-seen)::after { opacity: 0; }

html.pl-on .pl-ring circle:first-child { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.pl-on .pl-ring.pl-in circle:first-child { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--pl-ease) 0.2s; }
html.pl-on .pl-ring .pl-ring__dot { transition: opacity 1s ease 1.6s; }
html.pl-on .pl-ring:not(.pl-in) .pl-ring__dot { opacity: 0; }

html.pl-on [data-pl~="lede"] .ms-header__side::before { transform: scaleY(var(--pl-sp, 0)); }
@media (max-width: 64rem) { html.pl-on [data-pl~="lede"] .ms-header__side::before { transform: scaleX(var(--pl-sp, 0)); } }

html.pl-on [data-pl-rows]::before { transition: transform 1s var(--pl-ease) 0.15s; }
html.pl-on [data-pl-rows]:not(.pl-in)::before { transform: scaleX(0); }
html.pl-on [data-pl-rows]:not(.pl-in) > * { opacity: 0; transform: translate3d(0, 0.9rem, 0); }
html.pl-on [data-pl-rows].pl-in > * { transition: opacity 0.7s ease calc(var(--pl-i, 0) * 70ms), transform 0.9s var(--pl-ease) calc(var(--pl-i, 0) * 70ms); }

html.pl-on [data-pl-plate] img { transition: clip-path 1.1s var(--pl-ease), transform 1.4s var(--pl-ease); }
html.pl-on [data-pl-plate]:not(.pl-in) img { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
html.pl-on [data-pl-plate="x"]:not(.pl-in) img { clip-path: inset(0 100% 0 0); }
html.pl-on [data-pl-plate].pl-in img { clip-path: inset(0 0 0 0); }

html.pl-on [data-pl-frame]::after { transition: opacity 1s ease 0.5s, translate 1.2s var(--pl-ease) 0.5s; }
html.pl-on [data-pl-frame]:not(.pl-in)::after { opacity: 0; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	[data-pl-num]::after, .pl-ring, [data-pl-plate] img { transform: none !important; translate: none !important; }
}