/* ---------------------------------------------------------------------------
   Cornucopia — motion and the few pieces of chrome WordPress needs.
   The design itself lives in styles.css; this file only adds the movement
   that the original site did in JavaScript, plus menu, form and editor bits.
   --------------------------------------------------------------------------- */

:root {
	--co-ease: cubic-bezier(.16, 1, .3, 1);
}

html {
	scroll-padding-top: 7rem;
}

/* --- blocks that fade and rise into view ---------------------------------- */

.co-reveal {
	opacity: 0;
	transform: translateY(var(--co-y, 34px));
	will-change: opacity, transform;
}

.co-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 1.1s var(--co-ease) var(--co-d, 0s),
		transform 1.1s var(--co-ease) var(--co-d, 0s);
}

/* --- headings whose words rise one after another -------------------------- */

.co-rise > span > span {
	opacity: 0;
	transform: translateY(110%);
	will-change: opacity, transform;
}

.co-rise.is-in > span > span {
	opacity: 1;
	transform: none;
	transition:
		opacity 1s var(--co-ease) var(--d, 0s),
		transform 1s var(--co-ease) var(--d, 0s);
}

/* --- the gold rule that draws itself in ----------------------------------- */

.co-hair {
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
}

.co-hair.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 1.4s var(--co-ease),
		transform 1.4s var(--co-ease);
}

/* --- images that drift with the scroll ------------------------------------ */

.co-parallax {
	transform: translateY(70px) scale(1.12);
	will-change: transform;
}

/* --- the statement that lights up word by word ---------------------------- */

.co-lit > span {
	display: inline-block;
	opacity: .16;
}

/* --- the two client marquees --------------------------------------------- */

.co-marquee {
	animation: co-marquee 42s linear infinite;
}

@keyframes co-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* --- hero ---------------------------------------------------------------- */

.co-hero-eyebrow {
	letter-spacing: .9em;
	opacity: 0;
}

.co-hero-eyebrow.is-in {
	letter-spacing: .5em;
	opacity: 1;
	transition:
		letter-spacing 1.8s var(--co-ease),
		opacity 1.8s var(--co-ease);
}

.co-cue {
	animation: co-cue 2.6s ease-in-out infinite;
}

@keyframes co-cue {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(12px); }
}

.co-hero-media {
	will-change: transform;
}

/* --- header state -------------------------------------------------------- */

.co-header {
	transition: background-color .7s var(--co-ease), padding .7s var(--co-ease);
}

/* --- mobile menu --------------------------------------------------------- */

.co-menu {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s var(--co-ease), opacity .5s var(--co-ease);
}

.co-menu.is-open {
	max-height: 80vh;
	opacity: 1;
}

.co-burger span {
	transition: transform .4s var(--co-ease), opacity .3s linear;
}

.co-burger.is-open span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.co-burger.is-open span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* --- enquiry form messages ----------------------------------------------- */

.co-form-note {
	border-left: 1px solid var(--gold);
	padding: .9rem 0 .9rem 1.1rem;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--foreground);
	margin-bottom: 2.5rem;
}

.co-form-note--error {
	border-left-color: var(--destructive);
}

.co-honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- ordinary WordPress content (blog posts, extra pages) ----------------- */

.co-prose {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--muted-foreground);
}

.co-prose > * + * { margin-top: 1.5rem; }

.co-prose h1, .co-prose h2, .co-prose h3, .co-prose h4 {
	font-family: var(--font-display);
	font-weight: 300;
	letter-spacing: -.01em;
	color: var(--foreground);
	margin-top: 3rem;
}

.co-prose h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.co-prose h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

.co-prose a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
}

.co-prose a:hover { border-bottom-color: var(--gold); }

.co-prose img,
.co-prose figure { margin-top: 2.5rem; }

.co-prose ul, .co-prose ol { padding-left: 1.25rem; }
.co-prose li { margin-top: .5rem; }
.co-prose li::marker { color: var(--gold); }

.co-prose blockquote {
	border-left: 1px solid var(--gold);
	padding-left: 1.5rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--foreground);
}

.co-prose table { width: 100%; border-collapse: collapse; }
.co-prose th, .co-prose td { border-bottom: 1px solid var(--border); padding: .75rem 0; text-align: left; }

/* --- stillness ------------------------------------------------------------ */

.no-motion .co-reveal,
.no-motion .co-rise > span > span,
.no-motion .co-hair {
	opacity: 1;
	transform: none;
	transition: none;
}

.no-motion .co-parallax { transform: scale(1.06); }
.no-motion .co-lit > span { opacity: 1; }
.no-motion .co-marquee,
.no-motion .co-cue { animation: none; }
.no-motion .co-hero-eyebrow { opacity: 1; letter-spacing: .5em; }

@media (prefers-reduced-motion: reduce) {
	.co-reveal,
	.co-rise > span > span,
	.co-hair {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.co-parallax { transform: scale(1.06) !important; }
	.co-lit > span { opacity: 1 !important; }
	.co-marquee, .co-cue { animation: none !important; }
	.co-hero-eyebrow { opacity: 1; letter-spacing: .5em; }
	html { scroll-behavior: auto; }
}

/* --- WordPress admin bar --------------------------------------------------- */

body.admin-bar .co-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .co-header { top: 46px; }
}