/**
 * Kinetic Campus — motion & component polish.
 * Content visible by default; `.js-anim` enables reveal initial states.
 */

:root {
	--kc-indigo: var(--wp--preset--color--deep-indigo, #ac1e2d);
	--kc-ink: var(--wp--preset--color--midnight-ink, #0b1220);
	--kc-gold: var(--wp--preset--color--sunbeam-gold, #c9a227);
	--kc-coral: var(--wp--preset--color--coral-spark, #f26b4e);
	--kc-teal: var(--wp--preset--color--lagoon-teal, #ac1e2d);
	--kc-cloud: var(--wp--preset--color--cloud-white, #f8fafc);
	--kc-white: var(--wp--preset--color--pure-white, #ffffff);
	--kc-mist: var(--wp--preset--color--slate-mist, #4a5378);
}

html {
	scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Arabic companion font */
[lang="ar"],
[dir="rtl"] {
	font-family: var(--wp--preset--font-family--arabic), var(--wp--preset--font-family--body), sans-serif;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
	font-family: var(--wp--preset--font-family--arabic), var(--wp--preset--font-family--heading), sans-serif;
	letter-spacing: 0;
}

/* ---- Buttons ---- */
.wp-element-button,
.wp-block-button__link {
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--kc-indigo) !important;
	color: var(--kc-cloud) !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	background: var(--kc-ink) !important;
	color: var(--kc-cloud) !important;
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--kc-indigo) !important;
	background: transparent !important;
	color: var(--kc-indigo) !important;
}

.school-hub-apply-btn .wp-block-button__link,
.school-hub-header-cta .wp-block-button__link,
.has-accent-background-color.wp-block-button__link,
.kc-btn-accent {
	background: var(--kc-gold) !important;
	color: var(--kc-ink) !important;
}

.school-hub-apply-btn .wp-block-button__link:hover,
.school-hub-header-cta .wp-block-button__link:hover {
	background: #a8861c !important;
	color: var(--kc-ink) !important;
	transform: translateY(-2px);
}

/* ---- Cards ---- */
.is-style-school-hub-card,
.school-hub-accreditation-card,
.school-hub-staff-card,
.school-hub-stat-card,
.obk-vm__value,
.kc-card {
	background: var(--kc-white);
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	box-shadow: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-school-hub-card::before,
.school-hub-accreditation-card::before,
.kc-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--kc-gold);
}

.school-hub-accreditation-card:nth-child(3n + 2)::before,
.kc-card:nth-child(3n + 2)::before,
.is-style-school-hub-card:nth-child(3n + 2)::before {
	background: var(--kc-teal);
}

.school-hub-accreditation-card:nth-child(3n + 3)::before,
.kc-card:nth-child(3n + 3)::before,
.is-style-school-hub-card:nth-child(3n + 3)::before {
	background: var(--kc-coral);
}

.is-style-school-hub-card:hover,
.school-hub-accreditation-card:hover,
.school-hub-staff-card:hover,
.school-hub-stat-card:hover,
.kc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.school-hub-accreditation-card:hover {
	transform: translateY(-4px) rotate(0.6deg);
}

.school-hub-accreditation-card:nth-child(even):hover {
	transform: translateY(-4px) rotate(-0.6deg);
}

.school-hub-accreditation-logo img {
	filter: grayscale(1);
	transition: filter 0.3s ease;
}

.school-hub-accreditation-card:hover .school-hub-accreditation-logo img {
	filter: none;
}

/* Stats */
.school-hub-stat-card p:first-child,
.school-hub-stat-number,
[data-count] {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-weight: 700;
	color: var(--kc-indigo);
	letter-spacing: -0.02em;
}

.school-hub-stat-card.has-primary-background-color [data-count],
.school-hub-stat-card.has-primary-background-color p:first-child {
	color: var(--kc-cloud);
}

/* Link underline sweep */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link),
.obk-vm__jump,
.school-hub-team-anchors a {
	background-image: linear-gradient(var(--kc-gold), var(--kc-gold));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	transition: background-size 0.3s ease;
}

.entry-content a:not(.wp-element-button):hover,
.school-hub-team-anchors a:hover {
	background-size: 100% 2px;
}

/* Staff photo zoom */
.obk-team__avatar,
.obk-team__photo,
.school-hub-staff-photo,
.school-hub-principal-photo {
	overflow: hidden;
}

.obk-team__avatar img,
.obk-team__photo img,
.school-hub-staff-photo img,
.school-hub-principal-photo img {
	transition: transform 0.35s ease;
}

.obk-team__card:hover .obk-team__photo img,
.school-hub-staff-card:hover .school-hub-staff-photo img {
	transform: scale(1.05);
}

/* Header shrink */
.school-hub-site-header {
	transition: box-shadow 0.25s ease;
}

.school-hub-site-header.is-scrolled {
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

.school-hub-site-header.is-scrolled .school-hub-header {
	padding-block: 0.55rem !important;
}

.school-hub-topbar {
	background: var(--kc-indigo) !important;
}

.school-hub-nav .wp-block-navigation__responsive-container-open {
	background: var(--kc-indigo) !important;
}

/* Dark band sections */
.school-hub-admissions-cta,
.obk-vm__values,
.obk-vm__story--vision,
.obk-vm--chapters .obk-vm__chapter,
.school-hub-page-hero.has-primary-background-color,
.obk-team__hero,
.kc-dark-band {
	background: var(--wp--preset--gradient--indigo-midnight, linear-gradient(135deg, #ac1e2d, #7f1520)) !important;
	color: var(--kc-cloud);
	position: relative;
}

/* Decorative kinetic shapes */
.kc-dark-band::before,
.school-hub-page-hero::before,
.obk-team__hero::before,
.obk-vm__cover::before,
.school-hub-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.08;
	background:
		radial-gradient(circle at 12% 20%, var(--kc-gold) 0 18%, transparent 19%),
		radial-gradient(circle at 88% 18%, var(--kc-coral) 0 12%, transparent 13%),
		radial-gradient(circle at 78% 78%, var(--kc-teal) 0 16%, transparent 17%);
	z-index: 0;
	animation: kc-drift 24s ease-in-out infinite alternate;
}

.school-hub-page-hero > *,
.obk-team__hero > *,
.obk-vm__cover > *,
.school-hub-hero > * {
	position: relative;
	z-index: 1;
}

@keyframes kc-drift {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to { transform: translate3d(1.5%, -1%, 0) rotate(4deg); }
}

/* Reveal — only when JS present and motion allowed */
.js-anim:not(.js-anim--reduced) .kc-reveal,
.js-anim:not(.js-anim--reduced) .obk-reveal,
.js-anim:not(.js-anim--reduced) [data-obk-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition-delay: calc(var(--i, 0) * 90ms + var(--obk-delay, 0s));
}

.js-anim:not(.js-anim--reduced) .kc-reveal.is-visible,
.js-anim:not(.js-anim--reduced) .obk-reveal.is-visible,
.js-anim:not(.js-anim--reduced) [data-obk-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Hero word stagger */
.js-anim:not(.js-anim--reduced) .kc-hero-title .kc-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.js-anim:not(.js-anim--reduced) .kc-hero-title .kc-word__inner {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 80ms);
}

.js-anim:not(.js-anim--reduced) .kc-hero-title.is-ready .kc-word__inner {
	transform: translateY(0);
}

/* Marquee */
.kc-marquee {
	overflow: hidden;
}

.kc-marquee__track {
	display: flex;
	width: max-content;
	gap: 2rem;
}

.js-anim:not(.js-anim--reduced) .kc-marquee--live .kc-marquee__track {
	animation: kc-marquee 28s linear infinite;
}

.kc-marquee:hover .kc-marquee__track,
.kc-marquee:focus-within .kc-marquee__track {
	animation-play-state: paused;
}

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

/* Mobile nav stagger */
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	transform: translateX(-12px);
	animation: kc-nav-in 0.4s ease forwards;
}

.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.1s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.2s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.3s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.35s; }
.js-anim:not(.js-anim--reduced) .school-hub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.4s; }

@keyframes kc-nav-in {
	to { opacity: 1; transform: none; }
}

/* Spotlight coral markers */
.school-hub-spotlight-section h2::after,
.obk-team__section-title::after {
	background: var(--kc-coral) !important;
}

.school-hub-spotlight-page .school-hub-stat-card.has-accent-background-color {
	background: var(--kc-coral) !important;
	color: var(--kc-ink) !important;
}

/* Vision gold keyword feel via labels */
.obk-vm__label,
.obk-vm__eyebrow,
.school-hub-page-kicker,
.obk-team__eyebrow {
	color: var(--kc-gold) !important;
}

/* Remap leftover Educaeet greens in layout CSS */
.school-hub-drawer-icon,
.school-hub-nav .wp-block-navigation__responsive-container-open,
.obk-team__card--lead .obk-team__role,
.obk-vm__float-badge {
	background: var(--kc-indigo) !important;
}

.kc-marquee a {
	color: var(--kc-gold) !important;
	text-decoration: none !important;
	font-weight: 700;
}

.kc-marquee__track span {
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 500;
}

.obk-vm__value-icon,
.school-hub-value-icon {
	background-color: var(--kc-indigo) !important;
}

.obk-vm__value:nth-child(3n + 1) .obk-vm__value-icon {
	border-color: var(--kc-gold) !important;
}
.obk-vm__value:nth-child(3n + 2) .obk-vm__value-icon {
	border-color: var(--kc-teal) !important;
	background-color: var(--kc-teal) !important;
}
.obk-vm__value:nth-child(3n + 3) .obk-vm__value-icon {
	border-color: var(--kc-coral) !important;
	background-color: var(--kc-coral) !important;
}

.school-hub-spotlight-gallery img {
	transition: filter 0.35s ease, transform 0.35s ease;
}

.school-hub-spotlight-gallery .wp-block-image:hover img {
	filter: url(#kc-duotone) grayscale(0.2) contrast(1.05);
	transform: scale(1.03);
}

/* Fallback hover without SVG filter */
@supports not (filter: url(#x)) {
	.school-hub-spotlight-gallery .wp-block-image:hover img {
		filter: sepia(0.35) saturate(1.4) hue-rotate(190deg);
	}
}

.wp-site-blocks {
	background: var(--kc-cloud);
}

/* Reduced motion — everything visible, no movement */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.kc-reveal,
	.obk-reveal,
	[data-obk-reveal],
	.kc-hero-title .kc-word__inner {
		opacity: 1 !important;
		transform: none !important;
	}
}