/* ==========================================================================
   Supercord — experience layer (v2.3)
   Weaving loader · needle & thread cursor · running-stitch hovers ·
   cloth ripple · fabric unroll · stitched scroll progress · zoom lens
   ========================================================================== */

/* ---------- Loader ---------- */
.sc-loader { display: none; }
.sc-loading .sc-loader {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background:
		radial-gradient(ellipse at 50% 45%, rgba(227, 200, 144, 0.08), transparent 60%),
		var(--green);
	color: var(--gold-soft);
	clip-path: inset(0 0 0 0);
	transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1);
}
.sc-loading .sc-loader.is-done { clip-path: inset(0 0 100% 0); }
.sc-loader.is-done .sc-loader__inner { opacity: 0; transform: translateY(-30px); transition: opacity 0.4s, transform 0.6s var(--ease); }
.sc-loading body { overflow: hidden; }

.sc-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }

/* Mini loom: warp threads drop in, weft shuttles across, over-under */
.sc-loader__loom { position: relative; width: 84px; height: 84px; margin-bottom: 6px; }
.sc-loader__warp,
.sc-loader__weft { position: absolute; display: block; }
.sc-loader__warp {
	top: 0; bottom: 0;
	left: calc(5px + var(--i) * 14px);
	width: 4px;
	background: var(--gold);
	transform: scaleY(0);
	transform-origin: top;
	animation: warp-in 0.45s var(--ease) forwards;
	animation-delay: calc(var(--i) * 60ms);
	z-index: 1;
}
.sc-loader__weft {
	left: 0; right: 0;
	top: calc(5px + var(--i) * 14px);
	height: 4px;
	/* weft covers every other warp thread -> real plain weave */
	background: repeating-linear-gradient(90deg, var(--gold-soft) 0 19px, transparent 19px 23px, var(--gold-soft) 23px 28px);
	z-index: 2;
	clip-path: inset(0 100% 0 0);
	animation: weft-in 0.5s var(--ease) forwards;
	animation-delay: calc(0.4s + var(--i) * 110ms);
}
.sc-loader__weft:nth-child(even) { background-position: 14px 0; clip-path: inset(0 0 0 100%); }
@keyframes warp-in { to { transform: scaleY(1); } }
@keyframes weft-in { to { clip-path: inset(0 0 0 0); } }

.sc-loader__logo {
	position: relative;
	overflow: hidden;
	/* shine only on the letters, not as a box */
	-webkit-mask: url("../images/logo.png") center / contain no-repeat;
	mask: url("../images/logo.png") center / contain no-repeat;
}
.sc-loader__logo img {
	width: min(260px, 60vw); height: auto;
	clip-path: inset(0 100% 0 0);
	animation: logo-in 0.9s var(--ease) 0.55s forwards;
}
.sc-loader__logo::after {
	content: "";
	position: absolute; top: 0; bottom: 0; left: -40%;
	width: 30%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-18deg);
	animation: logo-shine 1.6s ease-in-out 1.3s infinite;
}
@keyframes logo-in { to { clip-path: inset(0 0 0 0); } }
@keyframes logo-shine { 0% { left: -40%; } 60%, 100% { left: 130%; } }

.sc-loader__line {
	margin: -6px 0 6px;
	font-family: var(--serif);
	font-style: italic;
	color: var(--on-green-muted);
	opacity: 0;
	animation: rise 0.7s var(--ease) 0.9s forwards;
}
.sc-loader__bar { position: relative; width: min(240px, 60vw); height: 20px; }
.sc-loader__thread {
	position: absolute; left: 0; top: 50%;
	height: 2px; margin-top: -1px;
	width: calc(var(--lp, 0) * 100%);
	background: repeating-linear-gradient(90deg, var(--gold-soft) 0 9px, transparent 9px 15px);
	transition: width 0.25s linear;
}
.sc-loader__bar::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 50%;
	height: 1px;
	background: rgba(227, 200, 144, 0.15);
}
.sc-loader__needle {
	position: absolute; top: 50%;
	left: calc(var(--lp, 0) * 100%);
	width: 26px; height: 26px;
	margin: -13px 0 0 -6px;
	color: var(--gold-soft);
	transition: left 0.25s linear;
}
.sc-loader__needle svg { width: 100%; height: 100%; transform: rotate(-135deg); stroke-width: 1.7; animation: needle-bob 0.4s ease-in-out infinite; }
.sc-loader__pct { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--on-green-muted); margin: 0; font-variant-numeric: tabular-nums; }

/* Quick version for pages opened later in the same visit */
.sc-quick .sc-loader__loom,
.sc-quick .sc-loader__line,
.sc-quick .sc-loader__pct { display: none; }
.sc-quick .sc-loader__logo img { animation-delay: 0s; animation-duration: 0.45s; }

/* Hold the hero entrance until the loader lifts */
.sc-loading .hero__title,
.sc-loading .hero__since,
.sc-loading .hero .stats__item,
.sc-loading .hero__scroll,
.sc-loading .hero__img,
.sc-loading .page-hero__title,
.sc-loading .page-hero__sub,
.sc-loading .page-hero__meta,
.sc-loading .page-hero__mono { animation-play-state: paused; }

/* ---------- Needle & thread cursor ---------- */
.sc-cursor,
.sc-cursor-ring,
.sc-thread-canvas,
.sc-stamp { display: none; }
.sc-cursor-active .sc-cursor,
.sc-cursor-active .sc-cursor-ring,
.sc-cursor-active .sc-thread-canvas { display: block; }
.sc-cursor-active,
.sc-cursor-active * { cursor: none !important; }
.sc-cursor-active input,
.sc-cursor-active textarea,
.sc-cursor-active select,
.sc-cursor-active [contenteditable="true"] { cursor: text !important; }
.sc-cursor-active select,
.sc-cursor-active input[type="checkbox"],
.sc-cursor-active input[type="range"] { cursor: pointer !important; }

.sc-thread-canvas {
	position: fixed; inset: 0;
	width: 100vw; height: 100vh;
	pointer-events: none;
	z-index: 9998;
}
.sc-cursor {
	position: fixed; top: 0; left: 0;
	width: 30px; height: 30px;
	pointer-events: none;
	z-index: 9999;
	color: var(--gold);
	transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
	transition: opacity 0.2s;
	will-change: transform;
}
.sc-cursor svg {
	width: 100%; height: 100%;
	transform: rotate(90deg);
	stroke-width: 1.9;
	filter: drop-shadow(0 0 1px rgba(11, 39, 37, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
	transition: transform 0.3s var(--ease);
}
.sc-cursor .svg-thread { display: none; }
.sc-cursor.is-hover svg { transform: rotate(75deg) scale(1.1); }
.sc-cursor.is-down svg { transform: rotate(90deg) translate(3px, -3px) scale(0.9); }
.sc-cursor.is-hidden,
.sc-cursor-ring.is-hidden,
.sc-cursor-ring.is-text { opacity: 0; }

/* Embroidery hoop that trails the needle */
.sc-cursor-ring {
	position: fixed; top: 0; left: 0;
	width: 44px; height: 44px;
	margin: -22px 0 0 -22px;
	pointer-events: none;
	z-index: 9997;
	transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0);
	transition: opacity 0.25s;
	will-change: transform;
}
.sc-cursor-ring::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 1.5px dashed rgba(200, 164, 95, 0.75);
	animation: spin 9s linear infinite;
	transition: transform 0.4s var(--ease), background-color 0.3s, border-color 0.3s;
}
.sc-cursor-ring::after {
	content: attr(data-label);
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font: 700 0.62rem/1 var(--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--green);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.25s, transform 0.35s var(--ease);
}
.sc-cursor-ring.is-hover::before {
	transform: scale(1.55);
	background: rgba(200, 164, 95, 0.12);
	border-color: var(--gold);
}
.sc-cursor-ring.has-label::before {
	transform: scale(1.9);
	background: rgba(227, 200, 144, 0.95);
	border-style: solid;
}
.sc-cursor-ring.has-label::after { opacity: 1; transform: scale(1); }
.sc-cursor-ring.has-label + .sc-cursor,
.sc-cursor-ring.has-label ~ .sc-cursor { opacity: 0.001; }

/* Cross-stitch mark left on click */
.sc-stamp {
	display: block;
	position: fixed;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	pointer-events: none;
	z-index: 9996;
	animation: stamp 0.9s var(--ease) forwards;
}
.sc-stamp::before,
.sc-stamp::after {
	content: "";
	position: absolute; left: 50%; top: 0; bottom: 0;
	width: 2px; margin-left: -1px;
	background: var(--gold);
	border-radius: 2px;
}
.sc-stamp::before { transform: rotate(45deg); }
.sc-stamp::after { transform: rotate(-45deg); }
@keyframes stamp {
	0% { transform: scale(0) rotate(-90deg); opacity: 1; }
	35% { transform: scale(1.15) rotate(0deg); opacity: 1; }
	100% { transform: scale(0.8) rotate(0deg); opacity: 0; }
}

/* The hoop already says "View" when the needle cursor is on */
.sc-cursor-active .swatch__img::after,
.sc-cursor-active .offer-tile span::after { display: none; }

/* ---------- Running-stitch border on hover (cards & buttons) ---------- */
.infra-card,
.post-card,
.link-card,
.standard,
.norm,
.contact__form,
.lightbox__info { position: relative; }
.infra-card::before,
.link-card::before,
.standard::before,
.contact__form::before,
.btn::after {
	--sc: rgba(200, 164, 95, 0.95);
	content: "";
	position: absolute;
	inset: 8px;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--sc) 55%, transparent 0) 0 0 / 11px 1.5px repeat-x,
		linear-gradient(90deg, var(--sc) 55%, transparent 0) 0 100% / 11px 1.5px repeat-x,
		linear-gradient(0deg, var(--sc) 55%, transparent 0) 0 0 / 1.5px 11px repeat-y,
		linear-gradient(0deg, var(--sc) 55%, transparent 0) 100% 0 / 1.5px 11px repeat-y;
	opacity: 0;
	transition: opacity 0.35s var(--ease), inset 0.45s var(--ease);
}
.btn::after { --sc: rgba(11, 39, 37, 0.55); inset: 7px; border-radius: 1px; }
.infra-card--dark::before { --sc: rgba(227, 200, 144, 0.8); }
.infra-card:hover::before,
.link-card:hover::before,
.standard:hover::before,
.btn:hover::after {
	opacity: 1;
	inset: 10px;
	animation: stitch-run 0.9s linear infinite;
}
.btn:hover::after { inset: 5px; }
.contact__form:focus-within::before { opacity: 1; inset: 12px; animation: stitch-run 1.4s linear infinite; }
@keyframes stitch-run {
	to { background-position: 11px 0, -11px 100%, 0 -11px, 100% 11px; }
}

/* ---------- Cloth ripple: photos wave like fabric on hover ---------- */
@media (hover: hover) and (pointer: fine) {
	.offer-tile:hover img,
	.about-home__img:hover img,
	.about-page__img:hover img,
	.sus-feature__media:hover img,
	.link-card:hover img { filter: url(#sc-cloth) saturate(1.12); }
	.swatch:hover .swatch__img img {
		filter: url(#sc-cloth) drop-shadow(0 18px 22px rgba(11, 39, 37, 0.35));
	}
}

/* ---------- Offer tiles unroll like a bolt of fabric ---------- */
.js-motion [data-reveal="unroll"] { opacity: 1; transform: none; }
.js-motion [data-reveal="unroll"] img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.18, 1) var(--d, 0ms), transform 1s var(--ease), filter 0.6s;
}
.js-motion [data-reveal="unroll"] > span {
	opacity: 0;
	translate: 0 18px;
	transition: opacity 0.7s var(--ease), translate 0.7s var(--ease), transform 0.5s var(--ease);
	transition-delay: calc(var(--d, 0ms) + 0.7s);
}
.js-motion [data-reveal="unroll"].is-in img { clip-path: inset(0 0 0 0); }
.js-motion [data-reveal="unroll"].is-in > span { opacity: 1; translate: 0 0; }
/* the "roll" shadow that travels down while it unrolls */
.js-motion [data-reveal="unroll"] .offer-roll {
	position: absolute; left: 0; right: 0; top: 0;
	height: 26px;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(227, 200, 144, 0.6) 45%, rgba(0, 0, 0, 0.25));
	border-radius: 13px;
	opacity: 0;
	pointer-events: none;
}
.js-motion [data-reveal="unroll"].is-in .offer-roll { animation: roll-down 1.3s cubic-bezier(0.77, 0, 0.18, 1) var(--d, 0ms) both; }
@keyframes roll-down {
	0% { top: -13px; opacity: 1; }
	92% { opacity: 1; }
	100% { top: calc(100% - 13px); opacity: 0; }
}

/* ---------- Scroll progress as a stitched thread with a needle ---------- */
.scroll-progress {
	transform: none;
	background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px);
	clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
	height: 3px;
}
.scroll-needle {
	position: fixed;
	top: -10px;
	left: 0;
	z-index: 201;
	width: 24px; height: 24px;
	color: var(--gold);
	pointer-events: none;
	transform: translateX(calc(var(--p, 0) * 100vw - 20px));
	opacity: 0;
	transition: opacity 0.3s;
}
.scroll-needle.is-on { opacity: 1; }
.scroll-needle svg { width: 100%; height: 100%; transform: rotate(-135deg); stroke-width: 1.8; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.scroll-needle .svg-thread { display: none; }
.admin-bar .scroll-needle { top: 22px; }
@media (max-width: 782px) { .admin-bar .scroll-needle { top: 36px; } }

/* ---------- Back to top as a spool that winds as you scroll ---------- */
.to-top svg.svg-spool {
	width: 24px; height: 24px;
	transform: rotate(var(--spin, 0deg));
	transition: none;
}
.to-top::after {
	content: "";
	position: absolute;
	top: -7px; left: 50%;
	width: 0; height: 0;
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom-color: var(--gold);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s, transform 0.3s var(--ease);
}
.to-top:hover::after { opacity: 1; transform: none; }
.to-top:hover svg.svg-spool { transform: rotate(var(--spin, 0deg)) translateY(-2px); }

/* ---------- Nav: underline becomes a running stitch ---------- */
@media (min-width: 901px) {
	.nav-menu > li > a::after {
		background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 10px);
	}
	.nav-menu > li > a:hover::after { animation: nav-stitch 0.6s linear infinite; }
}
@keyframes nav-stitch { to { background-position: 10px 0; } }

/* ---------- Lightbox: fabric magnifier ---------- */
.lightbox__media { position: relative; overflow: hidden; }
.lightbox__lens {
	position: absolute;
	width: 180px; height: 180px;
	margin: -90px 0 0 -90px;
	border-radius: 50%;
	pointer-events: none;
	background-repeat: no-repeat;
	background-color: var(--cream);
	box-shadow: 0 0 0 3px var(--gold-soft), 0 0 0 5px var(--green), 0 16px 40px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s, transform 0.25s var(--ease);
	z-index: 2;
}
.lightbox__lens::after {
	content: "";
	position: absolute; inset: 10px;
	border-radius: 50%;
	border: 1px dashed rgba(200, 164, 95, 0.7);
}
.lightbox__media.is-zoom .lightbox__lens { opacity: 1; transform: scale(1); }
.lightbox__hint {
	position: absolute;
	left: 50%; bottom: 14px;
	transform: translateX(-50%);
	background: rgba(11, 39, 37, 0.85);
	color: var(--gold-soft);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 7px 14px;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.3s;
}
.lightbox__media.is-zoom .lightbox__hint { opacity: 0; }
@media (hover: none), (pointer: coarse) { .lightbox__hint, .lightbox__lens { display: none; } }


/* ---------- Photo frames: stitched corner appears on hover ---------- */
.about-page__img,
.about-home__img { position: relative; }
.about-page__img::after,
.about-home__img::after {
	content: "";
	position: absolute;
	right: 14px; bottom: 14px;
	width: 64px; height: 64px;
	border-right: 2px dashed var(--gold-soft);
	border-bottom: 2px dashed var(--gold-soft);
	opacity: 0;
	transform: translate(-12px, -12px);
	transition: opacity 0.4s, transform 0.5s var(--ease);
	pointer-events: none;
	z-index: 2;
}
.about-page__img::before,
.about-home__img::before {
	content: "";
	position: absolute;
	left: 14px; top: 14px;
	width: 64px; height: 64px;
	border-left: 2px dashed var(--gold-soft);
	border-top: 2px dashed var(--gold-soft);
	opacity: 0;
	transform: translate(12px, 12px);
	transition: opacity 0.4s, transform 0.5s var(--ease);
	pointer-events: none;
	z-index: 2;
}
.about-page__img:hover::after,
.about-home__img:hover::after,
.about-page__img:hover::before,
.about-home__img:hover::before { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sc-loader { display: none !important; }
	.scroll-needle { display: none; }
}

/* Keep scaled reveal photos inside their frames (no sideways scroll on phones) */
.certs-band__media,
.sus-feature__media { overflow: hidden; }

/* ==========================================================================
   Mobile width guard (v2.3.1)
   Mobile browsers widen the page to fit anything poking past the right edge,
   which shows up as a white strip. Keep everything inside the screen.
   ========================================================================== */

/* 1. The stitch needle waits at the end of its line: clip it to the line's band */
.stitch { overflow: hidden; height: 38px; }
.stitch--top { top: 20px; }
.stitch--footer { top: -19px; }

/* 2. On phones/tablets, sideways slide-ins become upward fades */
@media (max-width: 900px) {
	.js-motion [data-reveal="left"],
	.js-motion [data-reveal="right"] { transform: translate3d(0, 28px, 0); }
}

/* 3. Safety net: clip any horizontal overflow at the page level without
      breaking the sticky header (overflow: clip does not create a scroller) */
@supports (overflow-x: clip) {
	html,
	body { overflow-x: clip; }
}