/* ==========================================================================
   ArtStart — theme styles
   Loaded on the front end and inside the block editor canvas.
   ========================================================================== */

:root {
	--as-cream: #fbf6ee;
	--as-ink: #18171c;
	--as-red: #c8391e;
	--as-coral: #f0573a;
	--as-blue: #2e4bdb;
	--as-yellow: #ffc93c;
	--as-peach: #fde3d6;
	--as-lavender: #e6e0f8;
	--as-peri: #b5c2f8;
	--as-salmon: #f6b5a3;
	--as-white: #fff;
	--as-muted: #4b4853;
	--as-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--as-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
	--as-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--as-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--as-out: cubic-bezier(0.22, 1, 0.36, 1);
	--as-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--as-radius: 32px;
	--as-gutter: clamp(16px, 2.8vw, 40px);
	--as-pad: clamp(24px, 4.2vw, 60px);
}

/* ---------------------------------------------------------------- base */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

.wp-site-blocks > * { margin-block-start: 0; }
.as-block { margin-block: 0 !important; box-sizing: border-box; }
.as-block *, .as-block *::before, .as-block *::after { box-sizing: border-box; }
.as-block img { max-width: 100%; display: block; }
.as-block p { margin: 0; }
.as-block h1, .as-block h2, .as-block h3 { margin: 0; font-family: var(--as-display); }
.as-block ul { list-style: none; margin: 0; padding: 0; }
.as-block a { text-decoration: none; color: inherit; }
.as-block figure { margin: 0; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

:where(.as-block) :focus-visible {
	outline: 3px solid var(--as-blue);
	outline-offset: 3px;
	border-radius: 8px;
}

.as-wrap {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
}

.as-panel {
	position: relative;
	width: min(1360px, 100% - var(--as-gutter) * 2);
	margin-inline: auto;
	border-radius: var(--as-radius);
	padding: var(--as-pad);
}

/* colour helpers */
.as-bg--peach { background: var(--as-peach); }
.as-bg--lavender { background: var(--as-lavender); }
.as-bg--yellow { background: var(--as-yellow); }
.as-bg--blue { background: var(--as-blue); color: #fff; }
.as-bg--salmon { background: var(--as-salmon); }
.as-bg--periwinkle { background: var(--as-peri); }
.as-c-red { color: var(--as-red); }
.as-c-blue { color: var(--as-blue); }

.as-icon { width: 1em; height: 1em; flex: none; }

/* ------------------------------------------------------------- type bits */

.as-h2 {
	font-size: clamp(2.25rem, 1.4rem + 2.7vw, 3.6rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
}
.as-h2--xl { font-size: clamp(2.6rem, 1.5rem + 3.5vw, 4.25rem); }
.as-block-line { display: block; }

.as-lead {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.6;
	color: var(--as-muted);
	max-width: 30em;
}

.as-kicker {
	font-family: var(--as-display);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}
.as-kicker--red { color: var(--as-red); }
.as-kicker--blue { color: var(--as-blue); }
.as-kicker--yellow { color: var(--as-yellow); }
.as-kicker--ink { color: var(--as-ink); }

.as-pill {
	display: inline-block;
	font-family: var(--as-display);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	margin-bottom: 1.1rem !important;
}
.as-pill--lavender { background: var(--as-lavender); }
.as-pill--white { background: #fff; }

.as-caption {
	position: absolute;
	left: 6%;
	bottom: 6%;
	max-width: 88%;
	background: #fff;
	color: var(--as-ink);
	font-family: var(--as-display);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.45rem 0.7rem;
	border-radius: 6px;
	transform: rotate(-1.5deg);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}

/* --------------------------------------------------------------- buttons */

.as-btns { display: flex; flex-wrap: wrap; gap: 16px; }

/*
 * Buttons with an ink shadow PRESS DOWN into it on hover.
 * Flat buttons sink 2px and fill with a contrasting colour from the bottom.
 * Every label rolls up to a fresh copy of itself.
 */
.as-btn {
	--bg: var(--as-ink);
	--fg: #fff;
	--bd: transparent;
	--sh: transparent;
	--fill: var(--as-blue);
	--fg-h: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 60px;
	padding: 0 1.9rem;
	border-radius: 999px;
	border: 2px solid var(--bd);
	background: var(--bg);
	color: var(--fg) !important;
	font-family: var(--as-display);
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--sh);
	transition:
		transform 0.45s var(--as-out),
		box-shadow 0.45s var(--as-out),
		color 0.45s var(--as-inout),
		border-color 0.45s var(--as-inout);
	isolation: isolate;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* colour fill that rises from the bottom (flat + outline buttons) */
.as-btn::before {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	top: 100%;
	height: 220%;
	border-radius: 50% 50% 0 0 / 30% 30% 0 0;
	background: var(--fill);
	z-index: -1;
	transition: transform 0.6s var(--as-inout), border-radius 0.6s var(--as-inout);
	pointer-events: none;
}

.as-btn:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }
.as-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--sh); transition-duration: 0.12s; }

.as-btn--flat:hover, .as-btn--white:hover, .as-btn--dark:hover, .as-btn--outline:hover, .as-btn--ghost:hover { transform: translateY(2px); color: var(--fg-h) !important; }
.as-btn--flat:active, .as-btn--white:active, .as-btn--dark:active, .as-btn--outline:active, .as-btn--ghost:active { transform: translateY(3px) scale(0.98); }
.as-btn--flat:hover::before, .as-btn--white:hover::before, .as-btn--dark:hover::before, .as-btn--outline:hover::before, .as-btn--ghost:hover::before {
	transform: translateY(-62%);
	border-radius: 0;
}

/* rolling label */
.as-btn__label { display: inline-block; height: 1.2em; line-height: 1.2; overflow: hidden; }
.as-btn__roll {
	display: block;
	text-shadow: 0 1.2em 0 currentColor;
	transition: transform 0.55s var(--as-inout);
}
.as-btn:hover .as-btn__roll { transform: translateY(-1.2em); }

/* arrow slips out right and back in from the left */
.as-btn__arrow { font-size: 1.05em; }
.as-btn:hover .as-btn__arrow { animation: asArrowLoop 0.6s var(--as-inout); }
@keyframes asArrowLoop {
	45% { transform: translateX(130%); opacity: 0; }
	46% { transform: translateX(-130%); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

.as-btn--sm { min-height: 52px; padding: 0 1.6rem; font-size: 1rem; }

.as-btn--blue { --bg: var(--as-blue); --bd: var(--as-ink); --sh: var(--as-ink); }
.as-btn--red { --bg: var(--as-red); --bd: var(--as-ink); --sh: var(--as-ink); }
.as-btn--yellow { --bg: var(--as-yellow); --fg: var(--as-ink); --bd: var(--as-ink); --sh: var(--as-ink); }
.as-btn--white { --bg: #fff; --fg: var(--as-ink); --fill: var(--as-ink); }
.as-btn--dark { --bg: var(--as-ink); --fill: var(--as-blue); }
.as-btn--outline { --bg: transparent; --fg: var(--as-ink); --bd: var(--as-ink); --fill: var(--as-ink); }
.as-btn--ghost { --bg: transparent; --fg: #fff; --bd: #fff; --fill: #fff; --fg-h: var(--as-blue); }

/* flat versions (inside cards) lose the ink border + shadow and use the fill instead */
.as-btn.as-btn--flat { --bd: transparent; --sh: transparent; --fill: var(--as-ink); }
.as-btn--flat.as-btn--dark { --fill: var(--as-blue); }
.as-btn--flat.as-btn--yellow { --fg-h: var(--as-yellow); }
.as-icard--yellow .as-btn--flat.as-btn--dark, .as-card--yellow .as-btn--flat { --fill: var(--as-ink); }
.as-icard--yellow .as-btn--flat.as-btn--dark { --fill: #fff; --fg-h: var(--as-ink); }

.as-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--as-display);
	font-weight: 700;
	color: var(--as-red) !important;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size 0.4s var(--as-ease);
}
.as-textlink:hover { background-size: 100% 2px; }
.as-textlink .as-icon { transition: transform 0.5s var(--as-out); }
.as-textlink:hover .as-icon { transform: translateX(4px); }

/* --------------------------------------------------------------- sparkles */

.as-sparkle { display: block; }
.as-twinkle { animation: asTwinkle 3.2s ease-in-out infinite; transform-origin: center; }
.as-spin { animation: asSpin 14s linear infinite; }

@keyframes asTwinkle {
	0%, 100% { transform: scale(1) rotate(0deg); }
	45% { transform: scale(0.72) rotate(18deg); }
	60% { transform: scale(1.12) rotate(-6deg); }
}
@keyframes asSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   HEADER + MEGA MENU
   ========================================================================== */

.wp-block-template-part:has(> .as-header),
.as-site-header-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transition: transform 0.45s var(--as-ease);
}
.wp-block-template-part.is-hidden { transform: translateY(-110%); }

.as-header { position: relative; z-index: 100; }

.as-header__bar {
	position: relative;
	background: rgb(251 246 238 / 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid rgb(24 23 28 / 0.08);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.as-header.is-scrolled .as-header__bar { box-shadow: 0 10px 30px -18px rgb(24 23 28 / 0.35); }

.as-header__inner {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
	min-height: 86px;
	display: flex;
	align-items: center;
	gap: 24px;
}

/* logo */
.as-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--as-ink);
	font-family: var(--as-display);
	font-weight: 700;
	font-size: 1.75rem;
	letter-spacing: -0.03em;
	flex: none;
}
.as-logo__mark { width: 42px; height: 38px; overflow: visible; }
.as-logo__sun, .as-logo__sq, .as-logo__tri { transform-box: fill-box; transform-origin: center; transition: transform 0.5s var(--as-out); }
.as-logo:hover .as-logo__sun { transform: scale(1.12); }
.as-logo:hover .as-logo__sq { transform: rotate(102deg); }
.as-logo:hover .as-logo__tri { transform: translate(3px, 2px) rotate(-14deg); }
.as-logo__img { max-height: 44px; width: auto; }

/* nav */
.as-nav { margin-left: auto; }
.as-nav__list { display: flex; align-items: center; gap: 4px; }
.as-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--as-ink);
	font-family: var(--as-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.as-nav__link:hover, .as-nav__item.is-open > .as-nav__link { background: var(--as-lavender); }
.as-nav__chev { font-size: 0.9em; opacity: 0.7; transition: transform 0.5s var(--as-out); }
.as-nav__item.is-open .as-nav__chev { transform: rotate(180deg); }

.as-header__actions { display: flex; align-items: center; gap: 10px; }
.as-nav ~ .as-header__actions { margin-left: 8px; }

.as-iconbtn {
	width: 44px;
	height: 44px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--as-ink);
	font-size: 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.5s var(--as-out);
}
.as-iconbtn:hover { background: rgb(24 23 28 / 0.06); transform: rotate(-8deg) scale(1.06); }

.as-burger { display: none; position: relative; }
.as-burger span {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.35s var(--as-ease), opacity 0.2s ease;
}
.as-burger span:nth-child(1) { top: 15px; }
.as-burger span:nth-child(2) { top: 21px; }
.as-burger span:nth-child(3) { top: 27px; }

/* search bar */
.as-searchbar { border-top: 1px solid rgb(24 23 28 / 0.08); }
.as-searchbar__inner {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	font-size: 22px;
}
.as-searchbar input {
	flex: 1;
	border: 0;
	background: transparent;
	font: 500 1.25rem/1.2 var(--as-display);
	color: var(--as-ink);
	outline: none;
	min-width: 0;
}
.as-searchbar:not([hidden]) { animation: asDropIn 0.4s var(--as-ease) both; }

/* mega panel */
.as-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	width: min(1376px, 100% - 32px);
	transform: translateX(-50%);
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 40px 80px -30px rgb(24 23 28 / 0.45), 0 0 0 1px rgb(24 23 28 / 0.05);
	overflow: hidden;
	color: var(--as-ink);
}
.as-mega:not([hidden]) { animation: asMegaIn 0.45s var(--as-ease) both; }
.as-mega.is-closing { animation: asMegaOut 0.22s ease both; }
@keyframes asMegaIn {
	from { opacity: 0; transform: translate(-50%, -12px) scale(0.985); }
	to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes asMegaOut { to { opacity: 0; transform: translate(-50%, -8px) scale(0.99); } }

.as-mega__inner {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr minmax(240px, 300px);
	gap: 36px;
	padding: 34px 36px;
}
.as-mega__intro { padding-right: 28px; border-right: 1px solid rgb(24 23 28 / 0.08); }
.as-mega__title { font-family: var(--as-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 0.6rem !important; }
.as-mega__desc { color: var(--as-muted); font-size: 0.98rem; margin-bottom: 1.4rem !important; }

.as-mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; align-content: start; }
.as-mega__links a {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 10px;
	border-radius: 14px;
	transition: background-color 0.25s ease, transform 0.5s var(--as-out);
}
.as-mega__links a:hover { background: var(--as-cream); transform: translateX(3px); }
.as-mega:not([hidden]) .as-mega__links li { animation: asFadeUp 0.5s var(--as-ease) both; animation-delay: calc(0.08s + var(--i, 0) * 0.035s); }
.as-mega__ltext { display: grid; gap: 2px; }
.as-mega__ltext strong { font-family: var(--as-display); font-size: 1rem; font-weight: 700; }
.as-mega__ltext small { font-size: 0.85rem; color: #6c6975; }

.as-tile {
	width: 42px;
	height: 42px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 12px;
	font-size: 20px;
	transition: transform 0.5s var(--as-out);
}
a:hover > .as-tile { transform: rotate(-8deg) scale(1.08); }
.as-tile--sm { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
.as-tile--yellow { background: #fff1c7; color: #8a5a00; }
.as-tile--blue { background: #dfe5ff; color: var(--as-blue); }
.as-tile--peach { background: var(--as-peach); color: var(--as-red); }
.as-tile--lavender { background: var(--as-lavender); color: #5a3fc0; }
.as-tile--salmon { background: #fde0d8; color: var(--as-red); }
.as-tile--periwinkle { background: #e4e9ff; color: #3043a8; }

.as-mega__feature {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--as-cream);
	border-radius: 18px;
	padding: 12px 12px 18px;
	transition: transform 0.5s var(--as-out);
}
.as-mega__feature:hover { transform: translateY(-4px) rotate(-0.6deg); }
.as-mega__fimg {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 8px;
}
.as-mega__fimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--as-ease); }
.as-mega__feature:hover .as-mega__fimg img { transform: scale(1.06); }
.as-mega__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--as-yellow);
	font: 700 0.72rem/1 var(--as-display);
	text-transform: uppercase;
	padding: 6px 9px;
	border-radius: 999px;
	transform: rotate(-3deg);
}
.as-mega__ftitle, .as-mega__ftext, .as-mega__flink { padding-inline: 6px; }
.as-mega__ftitle { font-family: var(--as-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.as-mega__ftext { font-size: 0.9rem; color: var(--as-muted); }
.as-mega__flink { display: inline-flex; align-items: center; gap: 6px; color: var(--as-red); font: 700 0.92rem var(--as-display); margin-top: 4px; }

.as-mega__foot {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 36px;
	border-top: 1px solid rgb(24 23 28 / 0.08);
	background: #fdfbf7;
	font-size: 0.9rem;
	color: var(--as-muted);
}
.as-mega__foot > span { display: inline-flex; align-items: center; gap: 8px; }

.as-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--as-ink); }
.as-status i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1fae5b;
	box-shadow: 0 0 0 0 rgb(31 174 91 / 0.6);
	animation: asPulse 2s ease-out infinite;
}
@keyframes asPulse { 70% { box-shadow: 0 0 0 8px rgb(31 174 91 / 0); } 100% { box-shadow: 0 0 0 0 rgb(31 174 91 / 0); } }

/* page dim behind an open mega menu */
.as-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgb(24 23 28 / 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.as-scrim.is-on { opacity: 1; pointer-events: auto; }

/* mobile drawer */
.as-drawer { position: fixed; inset: 0; z-index: 200; }
.as-drawer__scrim { position: absolute; inset: 0; background: rgb(24 23 28 / 0.45); animation: asFade 0.3s ease both; }
.as-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	background: var(--as-cream);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	animation: asSlideIn 0.45s var(--as-ease) both;
}
.as-drawer.is-closing .as-drawer__panel { animation: asSlideOut 0.3s ease both; }
.as-drawer.is-closing .as-drawer__scrim { animation: asFade 0.3s ease reverse both; }
@keyframes asSlideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes asSlideOut { to { transform: translateX(100%); } }

.as-drawer__top { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgb(24 23 28 / 0.08); }
.as-drawer__list { padding: 10px 20px; }
.as-drawer__list > li { border-bottom: 1px solid rgb(24 23 28 / 0.08); animation: asFadeUp 0.5s var(--as-ease) both; animation-delay: calc(0.12s + var(--i, 0) * 0.05s); }
.as-drawer__list summary, .as-drawer__plain {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 4px;
	font: 700 1.3rem var(--as-display);
	letter-spacing: -0.02em;
	cursor: pointer;
	list-style: none;
}
.as-drawer__list summary::-webkit-details-marker { display: none; }
.as-drawer__list summary .as-icon { transition: transform 0.5s var(--as-out); }
.as-drawer__list details[open] summary .as-icon { transform: rotate(180deg); }
.as-drawer__list details ul { padding: 0 0 16px; display: grid; gap: 4px; }
.as-drawer__list details[open] ul { animation: asFadeUp 0.35s var(--as-ease) both; }
.as-drawer__list details a { display: flex; gap: 12px; align-items: center; padding: 8px 4px; font-weight: 600; }
.as-drawer__all { color: var(--as-red) !important; font-family: var(--as-display); }
.as-drawer__cta { padding: 24px 20px 32px; display: grid; gap: 16px; justify-items: start; margin-top: auto; }

/* ==========================================================================
   HERO
   ========================================================================== */

.as-hero { padding-top: 20px; }
.as-hero__panel {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 20px;
	min-height: 700px;
	overflow: clip;
}

.as-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--as-ink);
	color: #fff;
	font: 700 0.8rem/1 var(--as-display);
	text-transform: uppercase;
	padding: 0.9rem 1.4rem;
	border-radius: 999px;
	transform: rotate(-3deg);
	margin-bottom: 2.2rem !important;
}
.as-hero__pillstar { width: 12px; height: 12px; color: var(--as-yellow); animation: asSpin 6s linear infinite; }

.as-hero__title {
	font-size: clamp(3rem, 1.6rem + 4.6vw, 5.4rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.04em;
}
.as-hero__line { display: block; }

/* word masks (used by all reveal headlines) */
.as-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.as-word__in { display: inline-block; }

.as-squiggle { display: block; width: 220px; height: 24px; overflow: visible; }
.as-hero__squiggle { margin: 18px 0 30px; }

.as-hero__copy { max-width: 620px; }
.as-hero__text { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.62; color: var(--as-muted); max-width: 24em; margin-bottom: 2.2rem !important; }

/* hero art — every piece is positioned in % of a fixed-ratio stage */
.as-hero__art {
	position: relative;
	aspect-ratio: 660 / 670;
	width: 100%;
	max-width: 660px;
	justify-self: end;
	container-type: inline-size;
	--px: 0;
	--py: 0;
	--sy: 0;
}
[data-depth] {
	translate: calc(var(--px, 0) * var(--depth, 0) * 14px) calc((var(--py, 0) * 14px + var(--sy, 0) * -40px) * var(--depth, 0));
	transition: translate 0.9s var(--as-ease);
}

.as-hero__wave { position: absolute; left: 4%; top: 2%; width: 24%; overflow: visible; z-index: 1; }
.as-hero__sun {
	position: absolute;
	left: 4.5%;
	top: 12.5%;
	width: 65%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--as-yellow);
}

.as-photo { position: absolute; z-index: 2; }
.as-photo__frame {
	--rot: 0deg;
	position: relative;
	display: block;
	background: #fff;
	padding: 3.6% 3.6% 3.6%;
	box-shadow: 10px 10px 0 var(--as-ink);
	transform: rotate(var(--rot));
	transition: transform 0.6s var(--as-out), box-shadow 0.6s var(--as-out);
}
.as-photo:hover .as-photo__frame { transform: rotate(0deg) scale(1.03); box-shadow: 14px 14px 0 var(--as-ink); }
.as-photo__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar, 1); background: #eee; }
.as-photo .as-caption { left: 9%; bottom: 9%; }

.as-photo--a { left: 43%; top: 4%; width: 51%; z-index: 3; }
.as-photo--a .as-photo__frame { --rot: 3deg; --ar: 1 / 1.08; }
.as-photo--b { left: 3%; top: 52%; width: 49%; z-index: 4; }
.as-photo--b .as-photo__frame { --rot: -4deg; --ar: 1.32; }

.as-tape {
	position: absolute;
	z-index: 2;
	width: 30%;
	height: 9%;
	min-height: 22px;
	opacity: 0.92;
	mix-blend-mode: multiply;
}
.as-tape--yellow { top: -4%; left: 26%; background: var(--as-yellow); transform: rotate(-4deg); }
.as-tape--blue { top: -6%; left: 30%; background: var(--as-blue); transform: rotate(14deg); mix-blend-mode: normal; opacity: 0.85; }

.as-badge {
	position: absolute;
	left: 64%;
	top: 68%;
	width: 25.5%;
	aspect-ratio: 1;
	z-index: 5;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--as-red);
	color: #fff;
	text-align: center;
}
.as-badge__text {
	display: block;
	max-width: 70%;
	font: 700 clamp(0.8rem, 4.1cqw, 1.7rem)/1.02 var(--as-display);
	letter-spacing: -0.02em;
	transform: rotate(-14deg);
	transition: transform 0.5s var(--as-out);
}
.as-badge:hover .as-badge__text { transform: rotate(-4deg) scale(1.08); }
.as-badge__ring { position: absolute; inset: 0; animation: asSpin 22s linear infinite; }
.as-badge__ring svg { width: 100%; height: 100%; overflow: visible; }
.as-badge__ring text { font: 700 11.5px var(--as-display); letter-spacing: 3.2px; fill: rgb(255 255 255 / 0.55); }

.as-hero__star { position: absolute; left: 51%; top: 88%; width: 9.5%; color: var(--as-ink); z-index: 6; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */

.as-marquee { padding: 28px 0 10px; overflow: clip; }
.as-marquee__band {
	background: var(--as-ink);
	color: var(--as-yellow);
	padding: 18px 0;
	overflow: hidden;
	width: 104%;
	margin-left: -2%;
}
.as-marquee__band.is-tilted { transform: rotate(-1.4deg); }
.as-marquee__track { display: flex; width: max-content; animation: asMarquee 46s linear infinite; }
.as-speed--slow .as-marquee__track { animation-duration: 70s; }
.as-speed--fast .as-marquee__track { animation-duration: 28s; }
.is-reverse .as-marquee__track { animation-direction: reverse; }
.as-marquee__seq { display: flex; align-items: center; flex: none; }
.as-marquee__word, .as-marquee__star {
	font: 800 clamp(1.3rem, 1rem + 1vw, 1.85rem)/1 var(--as-display);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	white-space: nowrap;
}
.as-marquee__star { margin: 0 0.45em; display: inline-block; animation: asSpin 5s linear infinite; }
@keyframes asMarquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   THREE WAYS
   ========================================================================== */

.as-ways { padding: clamp(60px, 7vw, 96px) 0 clamp(50px, 6vw, 80px); }
.as-ways__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(32px, 3vw, 44px); }
.as-ways__head .as-h2 { max-width: 13em; }
.as-ways__intro { max-width: 24em; color: var(--as-muted); font-size: 1.05rem; padding-bottom: 0.4rem; margin-right: 4%; }

.as-ways__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

.as-card {
	--rot: 0deg;
	--ry: 0px;
	--rr: 0deg;
	--hy: 0px;
	--tx: 0deg;
	--ty: 0deg;
	position: relative;
	border-radius: 24px;
	padding: 16px 16px 30px;
	transform: perspective(1000px) translateY(calc(var(--ry) + var(--hy))) rotate(calc(var(--rot) + var(--rr))) rotateX(var(--tx)) rotateY(var(--ty));
	transition: transform 0.7s var(--as-out), box-shadow 0.5s ease;
	will-change: transform;
}
.as-card:nth-child(3n + 1) { --rot: -2deg; }
.as-card:nth-child(3n + 2) { --rot: 1.2deg; margin-top: 26px; }
.as-card:nth-child(3n + 3) { --rot: -0.8deg; }
.as-card:hover { --rot: 0deg; --hy: -10px; box-shadow: 0 30px 50px -28px rgb(24 23 28 / 0.5); }

.as-card--yellow { background: var(--as-yellow); }
.as-card--blue { background: var(--as-blue); color: #fff; }
.as-card--white { background: #fff; }
.as-card--red { background: var(--as-red); color: #fff; }
.as-card--lavender { background: var(--as-lavender); }

.as-card__media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 364 / 212; background: rgb(0 0 0 / 0.1); }
.as-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--as-ease); }
.as-card:hover .as-card__img { transform: scale(1.07); }
.as-card__media .as-caption { left: 4%; bottom: 7%; }

.as-card__body { padding: 30px 12px 0; }
.as-card .as-kicker { color: inherit; }
.as-card--white .as-kicker { color: var(--as-red); }
.as-card__title { font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 0.8rem !important; }
.as-card__text { font-size: 1.03rem; line-height: 1.55; opacity: 0.9; }
.as-card__meta { font-family: var(--as-display); font-weight: 700; font-size: 0.95rem; margin-top: 1.4rem !important; }
.as-card__btn { margin-top: 1.8rem; }

/* ==========================================================================
   ABOUT
   ========================================================================== */

.as-about { padding: 10px 0 clamp(40px, 5vw, 60px); }
.as-about__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	min-height: 520px;
	padding-block: clamp(36px, 4vw, 50px);
	overflow: clip;
}
.as-about__copy .as-h2 { margin-bottom: 1.6rem; }
.as-about__copy .as-lead { margin-bottom: 2.2rem; }

.as-about__art { position: relative; aspect-ratio: 1; width: min(100%, 440px); justify-self: center; }
.as-target { position: absolute; inset: 5%; }
.as-target__ring, .as-target__dot { position: absolute; border-radius: 50%; inset: 0; margin: auto; }
.as-target__ring--1 { background: var(--as-yellow); width: 100%; height: 100%; }
.as-target__ring--2 { background: var(--as-coral); width: 75%; height: 75%; }
.as-target__ring--3 { background: #fff; width: 50%; height: 50%; }
.as-target__dot {
	background: var(--as-blue);
	width: 24%;
	height: 24%;
	translate: calc(var(--fx, 0) * 1px) calc(var(--fy, 0) * 1px);
	transition: translate 0.6s var(--as-out);
}
.as-target__ring--1 { animation: asBreathe 6s ease-in-out infinite; }
.as-target__ring--2 { animation: asBreathe 6s ease-in-out -2s infinite; }
.as-target__ring--3 { animation: asBreathe 6s ease-in-out -4s infinite; }
@keyframes asBreathe { 50% { scale: 1.035; } }

.as-about__photowrap { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; border: 18px solid var(--as-yellow); }
.as-about__photo { width: 100%; height: 100%; object-fit: cover; }

.as-dot { position: absolute; border-radius: 50%; background: #fff; animation: asFloat 7s ease-in-out infinite; }
.as-dot--1 { width: 22px; height: 22px; left: -18%; top: 9%; }
.as-dot--2 { width: 16px; height: 16px; right: 3%; top: 6%; animation-delay: -2s; }
.as-dot--3 { width: 12px; height: 12px; right: -12%; top: 52%; animation-delay: -4s; }
.as-dot--4 { width: 28px; height: 28px; right: -3%; bottom: 8%; animation-delay: -1s; }
.as-dot--5 { width: 15px; height: 15px; left: -12%; bottom: 3%; animation-delay: -3s; }
@keyframes asFloat { 50% { transform: translate(6px, -12px); } }
.as-about__star { position: absolute; right: 2%; top: -4%; width: 9%; color: var(--as-ink); }

/* ==========================================================================
   EVENTS
   ========================================================================== */

.as-events { padding: clamp(10px, 2vw, 20px) 0 clamp(70px, 8vw, 120px); }
.as-events__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.as-events__head .as-h2 { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.9rem); }
.as-events__list { display: grid; gap: 16px; }

.as-event {
	--hx: 0px;
	display: grid;
	grid-template-columns: 100px 1fr auto;
	align-items: center;
	gap: 0 30px;
	background: #fff;
	border-radius: 22px;
	padding: 20px 24px 20px 22px;
	transform: translateX(var(--hx));
	transition: transform 0.5s var(--as-out), box-shadow 0.4s ease;
}
.as-event:hover { --hx: 6px; box-shadow: 0 18px 40px -26px rgb(24 23 28 / 0.45); }

.as-event__date {
	width: 98px;
	height: 98px;
	border-radius: 14px;
	display: grid;
	place-content: center;
	text-align: center;
	transform: rotate(var(--tilt, -3deg));
	transition: transform 0.6s var(--as-out);
}
.as-event:hover .as-event__date { transform: rotate(calc(var(--tilt, -3deg) * -1.4)) scale(1.06); }
.as-event__date small { font: 700 0.85rem/1 var(--as-display); text-transform: uppercase; }
.as-event__date strong { font: 800 1.9rem/1.1 var(--as-display); letter-spacing: -0.02em; }

.as-event__info { display: grid; gap: 4px; min-width: 0; }
.as-event__info .as-kicker { margin: 0; }
.as-event__name { font: 700 clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem)/1.15 var(--as-display); letter-spacing: -0.02em; }
.as-event__meta { color: #6a6772; font-size: 1rem; }
.as-event__btn { min-width: 140px; }

/* ==========================================================================
   EDUCATORS
   ========================================================================== */

.as-educators { padding-bottom: clamp(70px, 7vw, 100px); }
.as-edu__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 30px;
	min-height: 600px;
	overflow: clip;
	color: #fff;
}
.as-edu__copy .as-h2 { margin-bottom: 1.8rem; }
.as-edu__copy .as-lead { color: rgb(255 255 255 / 0.9); margin-bottom: 2.6rem; }

.as-edu__art { position: relative; aspect-ratio: 600 / 510; width: 100%; max-width: 600px; justify-self: end; --px: 0; --py: 0; --sy: 0; }
.as-photo--c { left: 5%; top: 3%; width: 62%; }
.as-photo--c .as-photo__frame { --rot: -2.5deg; --ar: 1.45; }
.as-photo--d { left: 48%; top: 42%; width: 50%; z-index: 3; }
.as-photo--d .as-photo__frame { --rot: 3deg; --ar: 1.35; }
.as-edu__art .as-photo__frame { box-shadow: 8px 8px 0 var(--as-ink); padding: 3.4%; }
.as-edu__star { position: absolute; right: 0; top: -2%; width: 10%; color: var(--as-yellow); }

/* ==========================================================================
   IMPACT
   ========================================================================== */

.as-impact { padding: 0 0 clamp(70px, 7vw, 100px); }
.as-impact__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(36px, 4vw, 52px); }
.as-impact__title {
	font-size: clamp(3rem, 1.4rem + 5.6vw, 6.6rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.045em;
	margin-bottom: 1.6rem !important;
}
.as-impact__accent { display: inline-block; }
.as-impact .as-lead { margin-inline: auto; text-align: center; max-width: 34em; }

.as-impact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.as-icard {
	--ry: 0px;
	--rr: 0deg;
	--rs: 1;
	--hy: 0px;
	border-radius: 24px;
	padding: 34px 32px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 320px;
	transform: translateY(calc(var(--ry) + var(--hy))) rotate(var(--rr)) scale(var(--rs));
	transition: transform 0.6s var(--as-out), box-shadow 0.4s ease;
}
.as-icard:hover { --hy: -8px; --rr: -0.8deg; box-shadow: 0 30px 50px -30px rgb(24 23 28 / 0.55); }
.as-icard--red { background: var(--as-red); color: #fff; }
.as-icard--yellow { background: var(--as-yellow); }
.as-icard--white { background: #fff; }
.as-icard--white .as-icard__icon { color: var(--as-blue); }
.as-icard--blue { background: var(--as-blue); color: #fff; }
.as-icard--lavender { background: var(--as-lavender); }

.as-icard__icon { font-size: 46px; line-height: 0; margin-bottom: 30px; display: inline-block; }
.as-icard__icon .as-icon { stroke-width: 1.8; }
.as-icard:hover .as-icard__icon--heart { animation: asBeat 0.9s ease-in-out infinite; }
.as-icard:hover .as-icard__icon--box { animation: asHop 0.7s var(--as-spring) infinite alternate; }
.as-icard:hover .as-icard__icon:not(.as-icard__icon--heart):not(.as-icard__icon--box) { animation: asWiggle 0.6s ease-in-out infinite; }
@keyframes asBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(0.96); } 45% { transform: scale(1.14); } }
@keyframes asHop { to { transform: translateY(-8px) rotate(-8deg); } }
@keyframes asWiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

.as-icard__title { font-size: clamp(1.6rem, 1.3rem + 0.7vw, 1.95rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.8rem !important; }
.as-icard__text { font-size: 1.03rem; line-height: 1.55; max-width: 21em; margin-bottom: 1.8rem !important; }
.as-icard .as-btn { margin-top: auto; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.as-newsletter { padding-bottom: clamp(60px, 6vw, 80px); }
.as-nl__panel {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: 40px 60px;
	padding-block: clamp(36px, 4vw, 52px);
}
.as-nl__copy .as-h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem); margin-bottom: 1.2rem; max-width: 11em; }
.as-nl__text { font-size: 1.1rem; line-height: 1.55; max-width: 28em; }
.as-nl__form label { display: block; font: 700 1.05rem var(--as-display); margin-bottom: 10px; }
.as-nl__row { display: flex; gap: 14px; }
.as-nl__row input {
	flex: 1;
	min-width: 0;
	height: 60px;
	border: 2px solid var(--as-ink);
	border-radius: 999px;
	background: #fff;
	padding: 0 26px;
	font: 500 1.08rem var(--as-body);
	color: var(--as-ink);
	transition: box-shadow 0.5s var(--as-out), transform 0.5s var(--as-out);
}
.as-nl__row input:focus { outline: none; box-shadow: 4px 4px 0 var(--as-ink); transform: translate(-2px, -2px); }
.as-nl__row .as-btn { min-width: 184px; }
.as-nl__msg { min-height: 1.5em; margin-top: 10px !important; font-weight: 700; }
.as-nl__form.is-loading .as-btn { opacity: 0.7; pointer-events: none; }
.as-nl__form.is-done .as-nl__row { animation: asPop 0.5s var(--as-spring); }
.as-nl__form.is-error .as-nl__row { animation: asShake 0.45s ease; }
.as-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.as-nl__star { position: absolute; right: clamp(24px, 4vw, 56px); top: 18px; width: 44px; color: var(--as-ink); }
@keyframes asShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes asPop { 50% { transform: scale(1.03); } }

.as-confetti { position: fixed; z-index: 999; pointer-events: none; width: 10px; height: 14px; border-radius: 2px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.as-footer { background: var(--as-ink); color: #dddae4; padding-top: clamp(50px, 5vw, 64px); }
.as-footer .as-logo { color: #fff; margin-bottom: 1.4rem; }
.as-footer__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 40px; }
.as-footer__about p { color: #b3b0bd; font-size: 1rem; line-height: 1.55; margin-bottom: 1rem !important; max-width: 17em; }
.as-footer__col .as-kicker { margin-bottom: 1.2rem; }
.as-footer__col ul { display: grid; gap: 12px; }
.as-footer__col a { color: #f1eff5; font-size: 1.05rem; background: linear-gradient(var(--as-yellow), var(--as-yellow)) 0 100% / 0 2px no-repeat; transition: background-size 0.35s var(--as-ease), color 0.2s; }
.as-footer__col a:hover { color: #fff; background-size: 100% 2px; }
.as-footer__muted, .as-footer__muted a { color: #9d9aa8 !important; }
.as-footer__col li { font-size: 1.05rem; }

.as-socials { display: flex; gap: 10px; margin-top: 22px; }
.as-socials a {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid #fff;
	color: #fff;
	font-size: 20px;
	background: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s var(--as-out);
}
.as-socials a:hover { background-color: var(--as-yellow) !important; border-color: var(--as-yellow); color: var(--as-ink); transform: translateY(-4px) rotate(-8deg); }

.as-funders {
	background: var(--as-cream);
	color: var(--as-ink);
	border-radius: 28px;
	padding: 30px 40px 40px;
	margin: 30px 0 50px;
}
.as-funders__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.as-funders__title { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; }
.as-funders__head p { color: var(--as-muted); font-size: 0.95rem; }
.as-funders__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.as-funder {
	min-height: 84px;
	border: 2px dashed #8f8c99;
	border-radius: 14px;
	display: grid;
	place-items: center;
	padding: 12px;
	font: 700 0.95rem var(--as-display);
	color: #55525d;
	text-align: center;
	transition: transform 0.5s var(--as-out), border-color 0.3s;
}
.as-funder > a { display: grid; place-items: center; width: 100%; height: 100%; }
.as-funder.has-logo { border-style: solid; border-color: transparent; background: #fff; }
.as-funder img { max-height: 54px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.3s, opacity 0.3s; }
.as-funder:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--as-ink); }
.as-funder:hover img { filter: none; opacity: 1; }

.as-footer__bottom { border-top: 1px solid rgb(255 255 255 / 0.1); padding: 30px 0 40px; font-size: 0.95rem; color: #b3b0bd; }
.as-footer__bottom .as-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.as-footer__bottom ul { display: flex; gap: 6px; }
.as-footer__bottom a { color: #dddae4; }
.as-footer__bottom a:hover { color: var(--as-yellow); }

/* ==========================================================================
   AMBIENT MOTION — small things that never stop moving
   (individual transform properties — rotate / scale / translate — are used so
   these loops never fight hover or reveal transforms)
   ========================================================================== */

@keyframes asFlow { to { transform: translateX(104px); } }
@keyframes asSway { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }
@keyframes asSwaySm { 0%, 100% { rotate: -1deg; } 50% { rotate: 1.2deg; } }
@keyframes asBreatheS { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes asWobble { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes asDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes asKen { from { scale: 1; } to { scale: 1.07; } }
@keyframes asTileIdle { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }
@keyframes asHeartIdle { 0%, 70%, 100% { scale: 1; } 76% { scale: 1.2; } 82% { scale: 0.95; } 88% { scale: 1.12; } }
@keyframes asHopIdle { 0%, 60%, 100% { translate: 0 0; rotate: 0deg; } 70% { translate: 0 -9px; rotate: -8deg; } 80% { translate: 0 0; rotate: 4deg; } 88% { translate: 0 -3px; rotate: 0deg; } }
@keyframes asWaveIdle { 0%, 55%, 100% { rotate: 0deg; } 65% { rotate: -12deg; } 75% { rotate: 10deg; } 85% { rotate: -6deg; } }
@keyframes asNudge { 0%, 78%, 100% { translate: 0 0; } 84% { translate: 4px 0; } 90% { translate: 0 0; } 95% { translate: 3px 0; } }
@keyframes asRock { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: 25deg; } 88% { rotate: -8deg; } }
@keyframes asOrbit { to { rotate: 360deg; } }

/* flowing squiggles */
.as-squiggle { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.as-squiggle__path { animation: asFlow 2.6s linear infinite; }

/* hero */
.as-hero__pill { animation: asSwaySm 5s ease-in-out infinite; }
.as-hero__wave { animation: asSway 6s ease-in-out infinite; transform-origin: 50% 60%; }
.as-hero__sun { animation: asBreatheS 7s ease-in-out infinite; }
.as-tape { animation: asSwaySm 4s ease-in-out infinite; }
.as-tape--blue { animation-delay: -2s; }
.as-badge { animation: asWobble 6s ease-in-out infinite; }
.as-hero__star2 { position: absolute; left: 88%; top: 2%; width: 4.5%; color: var(--as-blue); animation: asTwinkle 2.6s ease-in-out -1s infinite; }
.as-hero__dot { position: absolute; border-radius: 50%; animation: asDrift 5s ease-in-out infinite; }
.as-hero__dot--1 { width: 14px; height: 14px; left: 34%; top: 7%; background: var(--as-blue); }
.as-hero__dot--2 { width: 10px; height: 10px; left: 96%; top: 52%; background: var(--as-red); animation-delay: -2.5s; }

/* cards */
.as-card__media .as-caption, .as-photo .as-caption { animation: asSwaySm 5s ease-in-out infinite; }
.as-card:nth-child(2) .as-caption { animation-delay: -1.6s; }
.as-card:nth-child(3) .as-caption { animation-delay: -3.2s; }
.as-card__img { animation: asKen 14s ease-in-out infinite alternate; }

/* events: date tiles idle-wobble, out of step with each other */
.as-event__date { animation: asTileIdle 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }

/* about: orbiting dots around the target */
.as-orbit { position: absolute; inset: -2%; pointer-events: none; }
.as-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgb(46 75 219 / 0.25); animation: asOrbit 60s linear infinite; }
.as-orbit__spin { position: absolute; inset: 0; animation: asOrbit 11s linear infinite; }
.as-orbit__spin i { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--as-blue); }
.as-orbit__spin--b { animation-duration: 17s; animation-direction: reverse; }
.as-orbit__spin--b i { background: var(--as-red); width: 10px; height: 10px; margin-left: -5px; top: auto; bottom: -5px; }

/* educators */
.as-edu__art .as-photo--c { animation: asDrift 7s ease-in-out infinite; }
.as-edu__art .as-photo--d { animation: asDrift 8s ease-in-out -3s infinite; }
.as-edu__star2 { position: absolute; left: 0; bottom: 4%; width: 5%; color: #fff; animation: asTwinkle 2.8s ease-in-out -1.2s infinite; }
.as-edu__ring { position: absolute; right: 4%; bottom: -2%; width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--as-yellow); opacity: 0.8; animation: asDrift 6s ease-in-out infinite; }

/* impact icons keep doing their thing */
.as-icard__icon--heart { animation: asHeartIdle 2.6s ease-in-out infinite; }
.as-icard__icon--box { animation: asHopIdle 3.4s ease-in-out infinite; }
.as-icard__icon--users, .as-icard__icon--star, .as-icard__icon--palette, .as-icard__icon--gift, .as-icard__icon--brush, .as-icard__icon--calendar { animation: asWaveIdle 3.8s ease-in-out infinite; transform-origin: 50% 80%; }
.as-impact__accent { position: relative; }
.as-impact__underline { position: absolute; left: 2%; right: 4%; bottom: -0.06em; width: 94%; height: 0.2em; }

/* small arrows nudge every few seconds */
.as-btn__arrow, .as-textlink .as-icon, .as-mega__flink .as-icon { animation: asNudge 3.6s ease-in-out infinite; }

/* logo square rocks now and then */
.as-logo__sq { animation: asRock 5s var(--as-out) infinite; }
.as-footer .as-logo__sq { animation-delay: -2.5s; }

/* ==========================================================================
   INTRO + REVEALS
   The hero intro is pure CSS (plays on load).
   Scroll reveals: GSAP drives them when it loads (html.as-gsap);
   otherwise these CSS fallbacks run (html.as-js without .as-gsap).
   ========================================================================== */

@keyframes asFade { from { opacity: 0; } }
@keyframes asFadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes asDropIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes asWordUp { from { transform: translateY(110%) rotate(4deg); } }
@keyframes asRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes asDraw { to { stroke-dashoffset: 0; } }
@keyframes asScaleIn { from { transform: scale(0); } }
@keyframes asPhotoIn {
	from { opacity: 0; transform: translateY(-60px) rotate(calc(var(--rot) + 14deg)) scale(0.85); }
	to { opacity: 1; transform: rotate(var(--rot)); }
}
@keyframes asBob { 50% { transform: translateY(-9px) rotate(-0.6deg); } }
@keyframes asBadgeIn { from { opacity: 0; transform: scale(0.2) rotate(-200deg); } }
@keyframes asPillIn { from { opacity: 0; transform: translateY(-20px) rotate(-14deg); } }

/* --- hero intro (on load) --- */
.as-js .as-hero .as-anim { animation: asRise 0.9s var(--as-out) both; animation-delay: var(--d, 0s); }
.as-js .as-hero .as-hero__pill { animation: asPillIn 0.9s var(--as-spring) 0.05s both, asSwaySm 5s ease-in-out 1s infinite; }
.as-js .as-hero__title .as-word__in { animation: asWordUp 1.1s var(--as-out) both; animation-delay: calc(0.15s + var(--i, 0) * 0.07s); }
.as-js .as-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.as-js .as-hero .as-draw path { animation: asDraw 1.3s var(--as-out) 0.7s forwards, asFlow 2.6s linear infinite; }
.as-js .as-hero .as-hero__wave path { animation: asDraw 1.6s var(--as-out) 1.1s forwards; }
.as-js .as-hero__sun { animation: asScaleIn 1.1s var(--as-spring) 0.25s backwards, asBreatheS 7s ease-in-out 1.4s infinite; }
.as-js .as-hero .as-photo--a .as-photo__frame { animation: asPhotoIn 1.1s var(--as-out) 0.45s backwards; }
.as-js .as-hero .as-photo--b .as-photo__frame { animation: asPhotoIn 1.1s var(--as-out) 0.65s backwards; }
.as-js .as-hero .as-photo--a { animation: asBob 7s ease-in-out 1.6s infinite; }
.as-js .as-hero .as-photo--b { animation: asBob 8s ease-in-out 2.4s infinite reverse; }
.as-js .as-badge { animation: asBadgeIn 1.2s var(--as-out) 1s backwards, asWobble 6s ease-in-out 2.2s infinite; }
.as-js .as-hero__star.as-twinkle { animation: asScaleIn 0.8s var(--as-spring) 1.3s backwards, asTwinkle 3.2s ease-in-out 2.1s infinite; }
.as-js .as-header .as-logo__mark > * { animation: asScaleIn 0.8s var(--as-spring) backwards; }
.as-js .as-header .as-logo__sq { animation: asScaleIn 0.8s var(--as-spring) 0.15s backwards, asRock 5s var(--as-out) 1.5s infinite; }
.as-js .as-header .as-logo__tri { animation-delay: 0.3s; }

/* --- CSS fallback reveals (no GSAP) --- */
.as-js:not(.as-gsap) [data-reveal] {
	opacity: 0;
	transition: opacity 0.9s var(--as-out), transform 1s var(--as-out);
	transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.11s);
}
.as-js:not(.as-gsap) [data-reveal].is-in,
.as-js:not(.as-gsap) [data-reveal="words"],
.as-js:not(.as-gsap) [data-reveal="target"],
.as-js:not(.as-gsap) [data-reveal="photo"] { opacity: 1; }
.as-js:not(.as-gsap) [data-reveal=""]:not(.is-in) { transform: translateY(30px); }
.as-js:not(.as-gsap) [data-reveal="panel"]:not(.is-in) { transform: translateY(40px) scale(0.97); }
.as-js:not(.as-gsap) [data-reveal="pop"]:not(.is-in) { transform: scale(0.85) rotate(-4deg); }
.as-js:not(.as-gsap) .is-done, .as-js:not(.as-gsap) .is-done .as-event__date { transition-delay: 0s !important; }
.as-js:not(.as-gsap) [data-reveal="words"] .as-word__in { transform: translateY(110%) rotate(3deg); transition: transform 1s var(--as-out); transition-delay: calc(var(--i, 0) * 0.06s); }
.as-js:not(.as-gsap) [data-reveal="words"].is-in .as-word__in { transform: none; }
.as-js:not(.as-gsap) .as-card[data-reveal="card"]:not(.is-in) { --ry: 80px; --rr: 7deg; }
.as-js:not(.as-gsap) .as-icard[data-reveal="card"]:not(.is-in) { --ry: 60px; --rr: -3deg; --rs: 0.94; }
.as-js:not(.as-gsap) [data-reveal="row"]:not(.is-in) { transform: translateX(-50px); }
.as-js:not(.as-gsap) [data-reveal="photo"]:not(.is-in) .as-photo__frame { transform: translateY(70px) rotate(calc(var(--rot) * -4)) scale(0.85); }
.as-js:not(.as-gsap) [data-reveal="target"] .as-target__ring,
.as-js:not(.as-gsap) [data-reveal="target"] .as-target__dot { transition: transform 1.1s var(--as-spring); }
.as-js:not(.as-gsap) [data-reveal="target"]:not(.is-in) .as-target__ring,
.as-js:not(.as-gsap) [data-reveal="target"]:not(.is-in) .as-target__dot { transform: scale(0); }
.as-js:not(.as-gsap) .is-in .as-draw path { animation: asDraw 1.2s var(--as-out) forwards, asFlow 2.6s linear infinite; }

/* --- GSAP mode: GSAP owns these transforms, so CSS must not transition them --- */
.as-gsap .as-card,
.as-gsap .as-icard { transition: box-shadow 0.6s var(--as-out) !important; will-change: transform; }
.as-gsap [data-depth], .as-gsap .as-target__dot { transition: none; }
.as-gsap .as-draw path { animation: asFlow 2.6s linear infinite; }

/* sliding highlight behind the main nav (GSAP mode) */
/* glow is positioned against the header bar so mega panels keep full width */
.as-nav__glow {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--as-lavender);
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}
.as-nav__link { position: relative; z-index: 1; }
.as-gsap .as-nav__link:hover, .as-gsap .as-nav__item.is-open > .as-nav__link { background: transparent; }

/* ==========================================================================
   EDITOR
   ========================================================================== */

.as-editor-preview .as-ssr a,
.as-editor-preview .as-ssr button,
.as-editor-preview .as-ssr input,
.as-editor-preview .as-ssr summary { pointer-events: none; }
.as-editor-preview .as-header { position: relative; }
.as-editor-preview .as-drawer, .as-editor-preview .as-searchbar { display: none !important; }
.editor-styles-wrapper .wp-block-template-part:has(.as-header) { position: relative; top: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
	.as-nav__link { padding: 10px 10px; font-size: 0.95rem; }
	.as-mega__inner { grid-template-columns: 240px 1fr; }
	.as-mega__feature { display: none; }
}

@media (max-width: 1023px) {
	.as-nav, .as-search-toggle { display: none; }
	.as-burger { display: inline-grid; }
	.as-header__actions { margin-left: auto; }
	.as-header__inner { min-height: 72px; }
	.as-logo { font-size: 1.5rem; }

	.as-hero__panel, .as-about__panel, .as-edu__panel, .as-nl__panel { grid-template-columns: 1fr; }
	.as-hero__panel { min-height: 0; padding-bottom: calc(var(--as-pad) + 20px); }
	.as-hero__art { justify-self: center; max-width: 560px; margin-top: 20px; }
	.as-about__art { width: min(80%, 420px); }
	.as-edu__art { justify-self: center; margin-top: 10px; }
	.as-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	:root { --as-radius: 24px; }
	.as-header__cta { display: none; }
	.as-hero__pill { margin-bottom: 1.6rem !important; }
	.as-btns .as-btn { flex: 1 1 auto; }
	.as-card:nth-child(3n + 2) { margin-top: 0; }
	.as-ways__intro { margin-right: 0; }
	.as-event { grid-template-columns: 72px 1fr; gap: 14px 18px; padding: 18px; }
	.as-event__date { width: 70px; height: 70px; border-radius: 12px; }
	.as-event__date strong { font-size: 1.4rem; }
	.as-event__btn { grid-column: 1 / -1; width: 100%; }
	.as-nl__row { flex-direction: column; }
	.as-nl__row input { flex: none; width: 100%; }
	.as-nl__star { top: -18px; right: 18px; width: 36px; }
	.as-br { display: none; }
	.as-funders__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.as-nl__row .as-btn { width: 100%; }
	.as-funders { padding: 26px 22px 28px; }
	.as-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.as-marquee__band { padding: 14px 0; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

/* Visitors whose device asks for less motion.
   Appearance → ArtStart Motion decides what they get (html[data-as-motion]). */
@media (prefers-reduced-motion: reduce) {
	/* "gentle" (default): keep fades + small loops, drop the big movement */
	html[data-as-motion="gentle"] [data-depth] { translate: none !important; }
	html[data-as-motion="gentle"] .as-marquee__track { animation-duration: 90s; }
	html[data-as-motion="gentle"] .as-card__img { animation: none; }

	/* "off": everything still */
	html[data-as-motion="off"] *, html[data-as-motion="off"] *::before, html[data-as-motion="off"] *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}
	html[data-as-motion="off"] .as-marquee__track { animation: none !important; }
	html[data-as-motion="off"] [data-reveal] { opacity: 1 !important; }
	html[data-as-motion="off"] .as-draw path { stroke-dashoffset: 0 !important; }
	html[data-as-motion="off"] [data-depth] { translate: none !important; }
}