/* ── motion ──
   Entrances, scroll reveals and hover feedback for the public site. All of it
   switches off for people who ask their device for less motion (end of file).
   Scroll reveals only hide things once jpf.js has marked them (data-jpf-anim),
   so without JavaScript every part of the page still shows. */

:root { --jpf-ease:cubic-bezier(.22,.61,.36,1); --jpf-ease-out:cubic-bezier(.16,1,.3,1); }

@keyframes jpf-fade-up { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes jpf-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes jpf-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes jpf-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(107,229,154,.7); } 70% { box-shadow:0 0 0 7px rgba(107,229,154,0); } }

/* scroll reveal */
[data-jpf-anim] {
	opacity:0; transform:translateY(26px);
	transition:opacity .7s var(--jpf-ease-out), transform .7s var(--jpf-ease-out);
	transition-delay:calc(var(--jpf-i, 0) * 80ms);
}
[data-jpf-anim="left"] { transform:translateX(-34px); }
[data-jpf-anim="right"] { transform:translateX(34px); }
[data-jpf-anim].is-in { opacity:1; transform:none; }
/* once in, hover effects should answer at once, not after the stagger delay */
[data-jpf-anim].is-done { transition-delay:0s; }

/* hero: the words of the showing slide come in one after another, each time it shows */
.jpf-hero__slide.is-active .jpf-hero__eyebrow,
.jpf-hero__slide.is-active .jpf-hero__title,
.jpf-hero__slide.is-active .jpf-hero__text,
.jpf-hero__slide.is-active .jpf-hero__btns { animation:jpf-fade-up .9s var(--jpf-ease-out) both; }
.jpf-hero__slide.is-active .jpf-hero__title { animation-delay:.12s; }
.jpf-hero__slide.is-active .jpf-hero__text { animation-delay:.26s; }
.jpf-hero__slide.is-active .jpf-hero__btns { animation-delay:.4s; }
.jpf-hero__slide { transition:opacity .9s var(--jpf-ease), visibility .9s; }
.jpf-hero__dot { transition:background-color .3s ease, width .35s var(--jpf-ease); }
.jpf-hero__dot.is-active { width:max(36px, calc(54 * var(--jpf-u))); }

/* page banner */
.jpf-banner__title { animation:jpf-fade-up .8s var(--jpf-ease-out) both .05s; }
.jpf-banner__standfirst { animation:jpf-fade-up .8s var(--jpf-ease-out) both .18s; }
.jpf-crumbs { animation:jpf-fade-in .6s ease both; }
.jpf-banner__crest { animation:jpf-fade-in 1.4s ease both .2s; }
.jpf-banner { border-bottom:0; }
.jpf-banner::after {
	content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--jpf-gold);
	transform-origin:left; animation:jpf-grow-x 1s var(--jpf-ease-out) both .25s;
}

/* the live dot in the top bar */
.jpf-topbar__status .jpf-dot { animation:jpf-pulse 2.2s ease-out infinite; }

/* buttons: lift, and a light sweeps across */
.jpf-btn {
	position:relative; overflow:hidden;
	transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--jpf-ease), box-shadow .2s ease;
}
.jpf-btn::after {
	content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
	transform:skewX(-20deg); pointer-events:none;
}
.jpf-btn:hover { transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(6,38,68,.55); }
.jpf-btn:hover::after { left:130%; transition:left .7s ease; }
.jpf-btn:active { transform:translateY(0); box-shadow:none; }
.jpf-btn svg, .jpf-more svg, .jpf-tile__arrow svg { transition:transform .25s var(--jpf-ease); }
.jpf-btn:hover svg:last-child, .jpf-more:hover svg, .jpf-tile:hover .jpf-tile__arrow svg { transform:translateX(4px); }
.jpf-more { transition:gap .25s var(--jpf-ease), color .2s ease; }
.jpf-more:hover { gap:12px; }

/* navigation: a gold bar slides in under the item */
@media (min-width:861px) {
	.jpf-nav__item > a { position:relative; transition:background-color .2s ease, color .2s ease; }
	.jpf-nav__item > a::after {
		content:""; position:absolute; left:18px; right:18px; bottom:0; height:3px;
		background:var(--jpf-gold); transform:scaleX(0); transform-origin:left;
		transition:transform .3s var(--jpf-ease-out);
	}
	.jpf-nav__item > a:hover::after,
	.jpf-nav__item:focus-within > a::after,
	.jpf-nav__item.is-current > a::after { transform:scaleX(1); }
	.jpf-nav__sub { transform:translateY(10px); transition:opacity .22s ease, transform .25s var(--jpf-ease-out), visibility .22s; }
}
.jpf-nav__sub a { transition:background-color .18s ease, color .18s ease, padding-left .2s var(--jpf-ease); }
.jpf-nav__sub a:hover { padding-left:24px; }
@media (max-width:860px) {
	.jpf-nav.is-open { animation:jpf-fade-in .25s ease both; }
	.jpf-nav.is-open .jpf-nav__list > .jpf-nav__item { animation:jpf-fade-up .4s var(--jpf-ease-out) both; }
	.jpf-nav.is-open .jpf-nav__list > .jpf-nav__item:nth-child(2) { animation-delay:.04s; }
	.jpf-nav.is-open .jpf-nav__list > .jpf-nav__item:nth-child(3) { animation-delay:.08s; }
	.jpf-nav.is-open .jpf-nav__list > .jpf-nav__item:nth-child(4) { animation-delay:.12s; }
	.jpf-nav.is-open .jpf-nav__list > .jpf-nav__item:nth-child(5) { animation-delay:.16s; }
	.jpf-nav.is-open .jpf-nav__list > .jpf-nav__item:nth-child(n+6) { animation-delay:.2s; }
}
/* the menu button turns into a cross while the menu is open */
.jpf-burger span[aria-hidden] { transition:transform .3s var(--jpf-ease), opacity .2s ease; }
.jpf-burger[aria-expanded="true"] span:nth-child(2) { transform:translateY(calc(2px + clamp(3px,.9vw,4px))) rotate(45deg); }
.jpf-burger[aria-expanded="true"] span:nth-child(3) { opacity:0; }
.jpf-burger[aria-expanded="true"] span:nth-child(4) { transform:translateY(calc(-2px - clamp(3px,.9vw,4px))) rotate(-45deg); }

/* cards, people, tiles, files: lift on hover */
.jpf-card, .jpf-person, .jpf-tile, .jpf-file, .jpf-prow {
	transition:opacity .7s var(--jpf-ease-out), transform .35s var(--jpf-ease), box-shadow .3s ease, border-color .25s ease;
}
.jpf-card[data-jpf-anim], .jpf-person[data-jpf-anim], .jpf-tile[data-jpf-anim], .jpf-file[data-jpf-anim], .jpf-prow[data-jpf-anim] {
	transition:opacity .7s var(--jpf-ease-out), transform .7s var(--jpf-ease-out), box-shadow .3s ease, border-color .25s ease;
	transition-delay:calc(var(--jpf-i, 0) * 80ms);
}
.jpf-card[data-jpf-anim].is-done, .jpf-person[data-jpf-anim].is-done, .jpf-tile[data-jpf-anim].is-done, .jpf-file[data-jpf-anim].is-done, .jpf-prow[data-jpf-anim].is-done {
	transition:transform .35s var(--jpf-ease), box-shadow .3s ease, border-color .25s ease;
}
.jpf-card--link:hover, .jpf-person:hover, .jpf-tile:hover, .jpf-file:hover, .jpf-prow:hover {
	transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(6,38,68,.55);
}
.jpf-card__icon, .jpf-tile__icon, .jpf-file__icon { transition:transform .35s var(--jpf-ease), background-color .25s ease; }
.jpf-card--link:hover .jpf-card__icon, .jpf-tile:hover .jpf-tile__icon, .jpf-file:hover .jpf-file__icon { transform:scale(1.08) rotate(-3deg); }
.jpf-person__photo img, .jpf-prow__avatar img { transition:transform .6s var(--jpf-ease), opacity .6s ease; }
.jpf-person:hover .jpf-person__photo img, .jpf-prow:hover .jpf-prow__avatar img { transform:scale(1.05); }
.jpf-split__media .jpf-media img, .jpf-video .jpf-media img { transition:transform 1.2s var(--jpf-ease), opacity .6s ease; }
.jpf-split__media:hover .jpf-media img, .jpf-video:hover .jpf-media img { transform:scale(1.04); }
.jpf-iconitem__box { transition:background-color .2s ease, transform .35s var(--jpf-ease), box-shadow .3s ease; }
.jpf-iconitem:hover .jpf-iconitem__box { transform:translateY(-5px); box-shadow:0 14px 24px -14px rgba(6,38,68,.6); }

/* timeline: each milestone's marker pops in after it arrives */
.jpf-mile__body::before { transition:transform .45s var(--jpf-ease) .35s; }
.jpf-mile[data-jpf-anim]:not(.is-in) .jpf-mile__body::before { transform:scale(0); }

/* footer links */
.jpf-footer__col a { transition:color .2s ease, padding-left .2s var(--jpf-ease); }
.jpf-footer__col a:hover { padding-left:4px; }

/* pictures fade in as they finish loading */
.jpf-media img[data-jpf-img] { opacity:0; }
.jpf-media img[data-jpf-img].is-loaded { opacity:1; transition:opacity .6s ease, transform 1.2s var(--jpf-ease); }

@media (prefers-reduced-motion: reduce) {
	.jpf-site *, .jpf-site *::before, .jpf-site *::after {
		animation-duration:.01ms !important; animation-iteration-count:1 !important;
		transition-duration:.01ms !important; transition-delay:0s !important;
	}
	[data-jpf-anim], .jpf-media img[data-jpf-img] { opacity:1 !important; transform:none !important; }
}
@media print {
	[data-jpf-anim], .jpf-media img[data-jpf-img] { opacity:1 !important; transform:none !important; }
	.jpf-banner__title, .jpf-banner__standfirst, .jpf-hero__slide * { animation:none !important; }
}