/**
 * Curriki Motion: shared timing, keyframes and hover polish.
 * Which elements start hidden / animate in is generated from cm_targets() in
 * curriki-motion.php. Nothing here hides content on its own.
 */
:root {
	--cm-dur: 0.8s;
	--cm-ease: cubic-bezier(0.22, 0.8, 0.26, 1);
	--cm-step: 85ms;
}

/* ---------------------------------------------------------------
 * Entrance keyframes. Only `backwards` fill is used (see PHP), so once an
 * element has arrived it goes back to its own styles and hover effects
 * keep working.
 * ------------------------------------------------------------- */
@keyframes cm-up    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes cm-left  { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes cm-right { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes cm-scale { from { opacity: 0; transform: scale(0.93) translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cm-fade  { from { opacity: 0; } to { opacity: 1; } }
/* A small overshoot, for buttons, badges, tabs and pills: they "land". */
@keyframes cm-pop   { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: none; } }
@keyframes cm-zoom  { from { transform: scale(1.12); } to { transform: none; } }
@keyframes cm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes cm-pulse { 0% { box-shadow: 0 0 0 0 rgba(248, 175, 44, 0.55); } 70% { box-shadow: 0 0 0 18px rgba(248, 175, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 175, 44, 0); } }
@keyframes cm-ring  { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* ---------------------------------------------------------------
 * Reading-progress bar (created by motion.js).
 * ------------------------------------------------------------- */
.cm-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.cm-progress.is-visible { opacity: 1; }
.cm-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #F8AF2C, #2E8DF5); border-radius: 0 4px 4px 0; }
body.admin-bar .cm-progress { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .cm-progress { top: 46px; } }

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

	/* -----------------------------------------------------------
	 * Header: soft shadow once the page has moved (sticky header).
	 * --------------------------------------------------------- */
	.elementor-location-header .elementor-sticky { transition: box-shadow 0.3s ease; }
	body.cm-scrolled .elementor-location-header .elementor-sticky--active { box-shadow: 0 8px 28px rgba(8, 72, 146, 0.12); }

	/* -----------------------------------------------------------
	 * Review pages: hover polish.
	 * --------------------------------------------------------- */
	.crt-review .crt-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	.crt-review .crt-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(8, 72, 146, 0.13); }

	.crt-review .crt-more-card .crt-logo-box img { transition: transform 0.4s ease; }
	.crt-review .crt-more-card:hover .crt-logo-box img { transform: scale(1.07); }

	.crt-review .crt-back-link svg { transition: transform 0.25s ease; }
	.crt-review .crt-back-link:hover svg { transform: translateX(-5px); }

	.crt-review .crt-hero-logo { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.crt-review .crt-hero-logo:hover { transform: scale(1.05) rotate(-1.5deg); }

	.crt-review .crt-sidebar-nav a { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
	.crt-review .crt-sidebar-nav a:hover { transform: translateX(4px); }

	.crt-review .crt-gallery-frame img { transition: transform 0.7s ease; }
	.crt-review .crt-gallery-frame:hover img { transform: scale(1.03); }

	.crt-review .crt-gallery-arrow { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
	.crt-review .crt-gallery-arrow:hover { transform: scale(1.12); }

	.crt-review .crt-pills .crt-pill, .crt-review .crt-hero-badges .crt-pill { transition: transform 0.2s ease; }
	.crt-review .crt-hero-badges .crt-pill:hover { transform: translateY(-2px); }

	/* Footer social icons. */
	.elementor-location-footer .elementor-social-icon { transition: transform 0.25s ease, background-color 0.25s ease; }
	.elementor-location-footer .elementor-social-icon:hover { transform: translateY(-4px) scale(1.06); }

	/* Form submit buttons across the site (newsletter + grant updates). */
	.elementor-button, .noptin_form_submit, .elementor-field-type-submit button { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
	.elementor-button:hover, .noptin_form_submit:hover, .elementor-field-type-submit button:hover { transform: translateY(-2px); }
	.elementor-button:active, .noptin_form_submit:active, .elementor-field-type-submit button:active { transform: translateY(0) scale(0.98); }

	/* -----------------------------------------------------------
	 * 404 page: the magnifier sways, the background shapes drift.
	 * --------------------------------------------------------- */
	.c404-num svg { transform-origin: 50% 50%; animation: cm-sway 5s ease-in-out infinite; }
	@keyframes cm-sway { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-7px); } }
	.c404::before { animation: cm-drift 15s ease-in-out infinite alternate; }
	.c404::after { animation: cm-drift 19s ease-in-out infinite alternate-reverse; }
	@keyframes cm-drift { from { transform: translate(0, 0); } to { transform: translate(28px, -24px); } }
}

/* ---------------------------------------------------------------
 * Site-wide polish (v1.1): shapes that float, pieces that land after
 * their card, hover feedback. Same family as the review pages.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	/* Hero background shapes: drift on their own, and (motion.js) lag a
	   little behind the scroll. `translate` is a separate property from
	   `transform`, so the two never fight each other. */
	.hero-blob, .courses-hero-blob, .partners-hero-blob, .wb-hero-blob { translate: 0 var(--cm-py, 0px); will-change: transform; }
	.hero-blob.b1, .courses-hero-blob.c1, .partners-hero-blob.c1, .wb-hero-blob.c1 { animation: cm-float 13s ease-in-out infinite; }
	.hero-blob.b2, .courses-hero-blob.c2, .partners-hero-blob.c2, .wb-hero-blob.c2 { animation: cm-float 17s ease-in-out infinite reverse; }

	/* Home: the video play button breathes, inviting the click. */
	.video-card .play-btn, .wb-video-card .wb-play { animation: cm-ring 2.6s ease-out infinite; border-radius: 50%; }

	/* Small pieces inside a card pop in a beat after the card itself. */
	html.cm-on .belief-card.cm-in .belief-num,
	html.cm-on .action-card.cm-in .action-icon,
	html.cm-on .pillar.cm-in .ic {
		animation: cm-pop 0.75s var(--cm-ease) backwards;
		animation-delay: calc(var(--cm-i, 0) * var(--cm-step) + 0.3s);
	}
	.action-card .action-icon, .pillar .ic { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.action-card:hover .action-icon, .pillar:hover .ic { transform: rotate(-7deg) scale(1.12); }
	.belief-card, .action-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
	.belief-card:hover, .action-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(8, 72, 146, 0.13); }

	/* We Believe: each reason in the two "fit" columns steps in one by one. */
	html.cm-on .fit-col.cm-in li { animation: cm-up 0.6s var(--cm-ease) backwards; }
	html.cm-on .fit-col.cm-in li:nth-child(1) { animation-delay: 0.35s; }
	html.cm-on .fit-col.cm-in li:nth-child(2) { animation-delay: 0.5s; }
	html.cm-on .fit-col.cm-in li:nth-child(3) { animation-delay: 0.65s; }
	html.cm-on .fit-col.cm-in li:nth-child(4) { animation-delay: 0.8s; }

	/* We Believe: grade tabs. Every time a stage is picked, the photo slides
	   in from the left and settles with a slow zoom while the text rises in
	   line by line from the right. (An inactive panel is display:none, so
	   becoming active restarts these.) */
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-media { animation: cm-left 0.8s var(--cm-ease) backwards; overflow: hidden; }
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-media img { animation: cm-zoom 1.5s var(--cm-ease) backwards; }
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-body > * { animation: cm-right 0.7s var(--cm-ease) backwards; }
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-body > :nth-child(1) { animation-delay: 0.10s; }
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-body > :nth-child(2) { animation-delay: 0.20s; }
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-body > :nth-child(3) { animation-delay: 0.30s; }
	html.cm-on .grade-panels.cm-in .grade-panel.active .grade-panel-body > :nth-child(4) { animation-delay: 0.40s; }
	.grade-tab { transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
	.grade-tab:hover { transform: translateY(-2px); }

	/* Donation call to action: the main button pulses softly. */
	html.cm-on .wb-donate .btn.btn-primary.cm-in {
		animation: cm-pop var(--cm-dur) var(--cm-ease) backwards, cm-pulse 2.8s ease-out infinite;
		animation-delay: calc(var(--cm-i, 0) * var(--cm-step)), calc(var(--cm-i, 0) * var(--cm-step) + 1.6s);
	}
	html.cm-on .wb-donate .btn.btn-primary.cm-in:hover { animation-play-state: running, paused; }
}