/* Skydancer mixed media: torn paper, watercolor wash, drawn lines, handwriting.
   Every piece takes its color from a CSS variable, so it follows the brand palette.
   Pieces are decoration: they are aria-hidden and never catch clicks. */

@font-face {
	font-family: "Skydancer Hand";
	src: url("fonts/nothing-you-could-do-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

.skyd-mm {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Torn paper: a white fiber rim under a colored, grained body. */
.skyd-scrap { filter: drop-shadow(0 2px 2px rgba(31, 42, 54, 0.14)) drop-shadow(0 12px 16px rgba(31, 42, 54, 0.08)); }
.skyd-scrap > i {
	position: absolute;
	inset: 0;
	-webkit-mask: var(--_m) center / 100% 100% no-repeat;
	mask: var(--_m) center / 100% 100% no-repeat;
}
.skyd-scrap > i:first-child { --_m: var(--_rim); background: var(--skyd-rim, #FBFAF7); }
.skyd-scrap > i:last-child {
	--_m: var(--_body);
	background-color: var(--c, var(--skyd-field-2, #7ED6D5));
	background-image: var(--skyd-mm-grain);
	background-size: 384px;
	background-blend-mode: soft-light;
}
.skyd-scrap--strip { aspect-ratio: 1200 / 520; --_body: var(--skyd-mm-strip); --_rim: var(--skyd-mm-strip-rim); }
.skyd-scrap--corner { aspect-ratio: 1; --_body: var(--skyd-mm-corner); --_rim: var(--skyd-mm-corner-rim); }
.skyd-scrap--fragment { aspect-ratio: 600 / 440; --_body: var(--skyd-mm-fragment); --_rim: var(--skyd-mm-fragment-rim); }
.skyd-scrap--square { aspect-ratio: 1; --_body: var(--skyd-mm-square); --_rim: var(--skyd-mm-square-rim); }
.skyd-scrap--field { aspect-ratio: 900 / 1100; --_body: var(--skyd-mm-field); --_rim: var(--skyd-mm-field-rim); }
.skyd-scrap--band { aspect-ratio: 1600 / 360; --_body: var(--skyd-mm-band); --_rim: var(--skyd-mm-band-rim); }
.skyd-scrap--scrap { aspect-ratio: 360 / 300; --_body: var(--skyd-mm-scrap); --_rim: var(--skyd-mm-scrap-rim); }

/* Watercolor wash. */
.skyd-wash {
	aspect-ratio: 1000 / 700;
	background-color: var(--c, var(--skyd-field-2, #7ED6D5));
	background-image: var(--skyd-mm-grain);
	background-size: 384px;
	background-blend-mode: soft-light;
	-webkit-mask: var(--skyd-mm-wash) center / 100% 100% no-repeat;
	mask: var(--skyd-mm-wash) center / 100% 100% no-repeat;
}

/* Drawn lines: inline SVG strokes in currentColor. */
.skyd-line { color: var(--c, var(--skyd-ink, #1F2A36)); overflow: visible; }
.skyd-line path { fill: none; stroke: currentColor; stroke-width: var(--w, 2); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Handwritten note: occasional, beside an image, never a heading. */
.skyd-hand {
	font-family: "Skydancer Hand", cursive;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--c, var(--skyd-ink, #1F2A36));
	transform: rotate(var(--r, -6deg));
	transform-origin: left center;
}
@media (min-width: 768px) { .skyd-hand { font-size: 28px; } }

/* Heavy and light in one heading, like the wordmark: *light words* in the
   editor become <em>, set light and upright. */
:is(h1, h2, h3, p)[class*="__title"] em,
[class*="__word"] em { font-style: normal; font-weight: 300; }

@media (prefers-reduced-motion: no-preference) {
	.skyd-mm[data-drift] { animation: skyd-drift 14s ease-in-out infinite alternate; }
	@keyframes skyd-drift { to { transform: translate3d(0, -8px, 0) rotate(var(--rot, 0deg)); } }
}