/**
 * JEL v2 (review drafts) — motion and polish layered on jel-base.css.
 *
 * Loaded only on pages using a -v2 template, after jel-base, so the live
 * pages are untouched until go-live (then fold this into jel-base.css).
 *
 * One easing everywhere: a quick start that settles slowly, so sections
 * feel placed rather than dropped. Everything is off under reduced motion.
 */

:root { --jel-ease: cubic-bezier(.2, .7, .2, 1); }

/* Anchor links (Get In Touch -> #contact) glide instead of jump, and land
   clear of the sticky header. */
html { scroll-behavior: smooth; }
.jel [id] { scroll-margin-top: 96px; }

/* ================= SCROLL REVEALS ================= */
.jel .jel-reveal {
	transform: translateY(22px);
	transition: opacity .9s var(--jel-ease), transform .9s var(--jel-ease);
}
/* Siblings arrive one after another. */
.jel .jel-trust-item:nth-child(2),
.jel .jel-card:nth-child(2),
.jel-about-page .abt-facts-row > :nth-child(2) { transition-delay: .1s; }
.jel .jel-trust-item:nth-child(3),
.jel .jel-card:nth-child(3),
.jel-about-page .abt-facts-row > :nth-child(3) { transition-delay: .2s; }
.jel .jel-trust-item:nth-child(4),
.jel .jel-card:nth-child(4),
.jel-about-page .abt-facts-row > :nth-child(4) { transition-delay: .3s; }

/* Photos settle into their frames with a slow zoom-out. clip-path keeps the
   visible area fixed while the image scales, so the gold offset frame never
   shifts. */
.jel .jel-hero-media img,
.jel .jel-about-media img,
.jel-about-page .abt-hero-media img,
.jel-about-page .abt-personal-media img {
	transform: scale(1.045);
	clip-path: inset(2.2%);
	transition: transform 1.6s var(--jel-ease), clip-path 1.6s var(--jel-ease);
}
.jel .jel-reveal.is-visible img { transform: none; clip-path: inset(0); }

/* The education card settles with a touch of scale on top of the rise. */
.jel-home .jel-edubar-row { transform: translateY(22px) scale(.985); }
.jel-home .jel-edubar-row.is-visible { transform: none; }

/* ================= PAGE LOAD ================= */
/* Hero copy rises in on load, line by line. */
@keyframes jel-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.jel-home .jel-hero-h1,
.jel-home .jel-hero-sub,
.jel-home .jel-hero-ctas { animation: jel-rise .9s var(--jel-ease) both; }
.jel-home .jel-hero-sub  { animation-delay: .15s; }
.jel-home .jel-hero-ctas { animation-delay: .3s; }

/* ================= HOVER ================= */
.jel .jel-btn {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease,
	            transform .3s var(--jel-ease), box-shadow .3s var(--jel-ease);
}
.jel .jel-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -16px rgba(43, 43, 40, .4);
}
.jel .jel-card { transition: transform .45s var(--jel-ease), box-shadow .45s var(--jel-ease); }
.jel .jel-quote-nav { transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--jel-ease); }
.jel .jel-quote-nav:not(:disabled):hover { transform: translateY(-1px); }

/* ================= QUIETER CHROME ================= */
/* No offset gold frames around the big photos; the photos stand on their own. */
.jel .jel-hero-media::after,
.jel .jel-about-media::after,
.jel-about-page .abt-hero-media::after,
.jel-about-page .abt-personal-media::after { display: none; }

/* Section labels are plain small caps: no leading or trailing gold dash. */
.jel .jel-eyebrow::before,
.jel .jel-eyebrow::after,
.jel .jel-quotes-head .jel-eyebrow::after,
.jel-about-page .abt-testimonial .jel-eyebrow::after { display: none; }
.jel .jel-eyebrow { gap: 0; }

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.jel .jel-reveal,
	.jel .jel-reveal img,
	.jel-home .jel-edubar-row,
	.jel-home .jel-hero-h1,
	.jel-home .jel-hero-sub,
	.jel-home .jel-hero-ctas {
		animation: none;
		transition: none;
		transform: none;
		clip-path: none;
		opacity: 1;
	}
	.jel .jel-btn:hover { transform: none; }
}