/* Websites365 Editorial — motion, layout accents and editorial furniture. */

:root { --w365-progress: 0; --w365-mx: .5; --w365-my: .5; }

/* ---------- Scroll progress rule ---------- */
.w365-progress {
	position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
	background: var(--wp--preset--color--line);
}
.w365-progress::after {
	content: ""; display: block; height: 100%;
	width: calc(var(--w365-progress) * 100%);
	background: var(--wp--preset--color--signal);
	transition: width .12s linear;
}

/* ---------- Header ---------- */
.w365-header {
	position: sticky; top: 0; z-index: 80;
	backdrop-filter: saturate(140%) blur(8px);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, padding .3s ease;
}
.w365-scrolled .w365-header { border-bottom-color: var(--wp--preset--color--line); }
.w365-header .wp-block-navigation a {
	font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
	position: relative; padding-block: .25rem;
}
.w365-header .wp-block-navigation a::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
	background: var(--wp--preset--color--signal); transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.w365-header .wp-block-navigation a:hover::after { width: 100%; }

/* ---------- Full viewport sections ---------- */
body.w365-snap { scroll-behavior: smooth; }
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	body.w365-snap { scroll-snap-type: y proximity; }
	body.w365-snap .is-style-w365-viewport { scroll-snap-align: start; }
}
.is-style-w365-viewport {
	min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
	padding-block: clamp(4rem, 9vh, 7rem); position: relative; overflow: clip;
}
.is-style-w365-viewport::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background:
		linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--line) 55%, transparent) 1px, transparent 1px) 0 0 / 25% 100%;
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* ---------- Kicker / section index ---------- */
.is-style-w365-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--wp--preset--color--signal); font-weight: 500;
}
.w365-rule { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin-block: 2rem; }

/* ---------- Panels & path cards ---------- */
.is-style-w365-panel {
	border: 1px solid var(--wp--preset--color--line);
	background: color-mix(in srgb, var(--wp--preset--color--paper-deep) 45%, transparent);
	transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background .3s ease;
}
.is-style-w365-panel:hover { transform: translateY(-6px); border-color: var(--wp--preset--color--ink); }

.w365-path { position: relative; overflow: hidden; }
.w365-path img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: grayscale(.35) contrast(1.03); }
.w365-path:hover img { transform: scale(1.06); filter: grayscale(0); }
.w365-path .w365-arrow { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.w365-path:hover .w365-arrow { transform: translateX(8px); }

/* ---------- Editorial post cards ---------- */
.is-style-w365-cards { border-top: 1px solid var(--wp--preset--color--line); }
.is-style-w365-cards > li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 1.75rem; transition: background .35s ease;
}
.is-style-w365-cards > li:hover { background: color-mix(in srgb, var(--wp--preset--color--paper-deep) 60%, transparent); }
.is-style-w365-cards .wp-block-post-title a { background-image: linear-gradient(var(--wp--preset--color--signal), var(--wp--preset--color--signal));
	background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
	transition: background-size .4s cubic-bezier(.2,.7,.2,1); }
.is-style-w365-cards .wp-block-post-title a:hover { background-size: 100% 1px; }
.is-style-w365-cards .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--ink-soft); }
.w365-readmore { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.w365-readmore a::after { content: " \2192"; display: inline-block; transition: transform .3s ease; }
.w365-readmore a:hover::after { transform: translateX(6px); }

/* ---------- Featured lead ---------- */
.w365-lead .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; }
.w365-lead .wp-block-post-title { font-size: clamp(2rem, 4.5vw, 3.25rem); }

/* ---------- Reveal animation ---------- */
@media (prefers-reduced-motion: no-preference) {
	.w365-anim { opacity: 0; transform: translateY(18px); }
	.w365-anim.is-visible {
		opacity: 1; transform: none;
		transition: opacity .7s ease var(--w365-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--w365-delay, 0ms);
	}
}

/* ---------- Hero parallax accent ---------- */
.w365-hero-media img {
	transform: translate3d(calc((var(--w365-mx) - .5) * -14px), calc((var(--w365-my) - .5) * -14px), 0) scale(1.04);
	transition: transform .6s ease-out;
}

/* ---------- Footer ---------- */
.w365-footer a { color: inherit; }
.w365-footer { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 25%, transparent); }

/* ---------- Category / term intro ---------- */
.w365-term-intro {
	max-width: 46rem;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}
.w365-term-intro p { margin-block: 0.75rem; }
.w365-term-intro p:first-child::first-letter { color: var(--wp--preset--color--signal); }