/* TJF scroll animations library. Pure CSS (scroll-driven animations), no JavaScript.
   Unsupported browsers and "reduce motion" users get the normal static page. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

/* Theme sets body{overflow-x:hidden}, which breaks sticky + scroll timelines. */
body.tjf-fx { overflow-x: clip; }

@keyframes tjf-rise      { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes tjf-from-left { from { opacity: 0; transform: translateX(-160px); } to { opacity: 1; transform: none; } }
@keyframes tjf-from-right{ from { opacity: 0; transform: translateX(220px) rotate(8deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes tjf-zoom-in   { from { opacity: 0; transform: scale(.75) rotate(-4deg); border-radius: 80px; } to { opacity: 1; transform: none; border-radius: 25px; } }
@keyframes tjf-drift     { from { transform: translateY(70px); } to { transform: translateY(-100px); } }
@keyframes tjf-pop-in    { from { opacity: 0; transform: scale(.4) rotate(-12deg); } 70% { opacity: 1; transform: scale(1.06) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes tjf-card-in   { from { opacity: 0; transform: translateY(160px) rotateX(25deg); } to { opacity: 1; transform: none; } }
@keyframes tjf-grow      { from { transform: scale(.7); border-radius: 48px; } to { transform: none; border-radius: 0; } }
@keyframes tjf-fill      { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes tjf-out-up    { to { transform: translateY(-50px); opacity: .5; } }
@keyframes tjf-out-down  { to { transform: translateY(90px) scale(1.06); } }
@keyframes tjf-fade-up   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes tjf-pin-grow  { from { transform: translateY(12%) scale(.55) rotate(-8deg); opacity: .6; } to { transform: none; opacity: 1; } }

/* Shared timing: --s / --e = start / end of the animation, as "cover" %.
   cover 0% = element's top reaches the bottom of the screen; 50% = centred. */
.tjf-reveal, .tjf-reveal-left, .tjf-reveal-right, .tjf-zoom, .tjf-pop, .tjf-expand,
.tjf-light-up .elementor-heading-title, .tjf-parallax img {
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-timeline: view();
	animation-range: cover calc(var(--s, 5%) + var(--later, 0%)) cover calc(var(--e, 40%) + var(--later, 0%));
}
.tjf-later { --later: 8%; }

.tjf-reveal       { animation-name: tjf-rise; }
.tjf-reveal-left  { animation-name: tjf-from-left;  --s: 0%; --e: 45%; }
.tjf-reveal-right { animation-name: tjf-from-right; --s: 0%; --e: 45%; }
.tjf-zoom         { animation-name: tjf-zoom-in;    --s: 0%; --e: 45%; overflow: hidden; }
.tjf-pop          { animation-name: tjf-pop-in;     --s: 5%; --e: 35%; }
.tjf-expand       { animation-name: tjf-grow;       --s: 0%; --e: 50%; overflow: hidden; }
.tjf-parallax     { overflow: hidden; }
.tjf-parallax img { animation-name: tjf-drift; --s: 0%; --e: 100%; }

/* Light-up headings keep their own colour (dark or white). */
.tjf-light-up .elementor-heading-title {
	animation-name: tjf-fill; --s: 15%; --e: 50%;
	-webkit-text-fill-color: transparent;
	background: linear-gradient(90deg, currentColor 45%, color-mix(in srgb, currentColor 20%, transparent) 55%) 100% 0 / 220% 100% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

/* Elementor lazy-load hides backgrounds until a section is near the screen; keep
   the heading solid until then so it is never invisible. */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) :is(.tjf-light-up, .tjf-pin-light) .elementor-heading-title { -webkit-text-fill-color: currentColor; }
@media screen and (max-height: 1024px) {
	.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) :is(.tjf-light-up, .tjf-pin-light) .elementor-heading-title { -webkit-text-fill-color: currentColor; }
}
@media screen and (max-height: 640px) {
	.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) :is(.tjf-light-up, .tjf-pin-light) .elementor-heading-title { -webkit-text-fill-color: currentColor; }
}

/* Stagger: the container is the timeline; its items follow one after another.
   Items with their own movement class (tjf-reveal, tjf-pop, ...) keep their own. */
.tjf-stagger, .tjf-stagger-pop { view-timeline: --tjf-group block; }
:is(.tjf-stagger, .tjf-stagger-pop) > .elementor-element,
:is(.tjf-stagger, .tjf-stagger-pop) > .e-con-inner > .elementor-element {
	--gs: 5%; --ge: 25%;
}
:is(.tjf-stagger, .tjf-stagger-pop) > :nth-child(2), :is(.tjf-stagger, .tjf-stagger-pop) > .e-con-inner > :nth-child(2) { --gs: 10%; --ge: 30%; }
:is(.tjf-stagger, .tjf-stagger-pop) > :nth-child(3), :is(.tjf-stagger, .tjf-stagger-pop) > .e-con-inner > :nth-child(3) { --gs: 15%; --ge: 35%; }
:is(.tjf-stagger, .tjf-stagger-pop) > :nth-child(4), :is(.tjf-stagger, .tjf-stagger-pop) > .e-con-inner > :nth-child(4) { --gs: 20%; --ge: 40%; }
:is(.tjf-stagger, .tjf-stagger-pop) > :nth-child(n+5), :is(.tjf-stagger, .tjf-stagger-pop) > .e-con-inner > :nth-child(n+5) { --gs: 25%; --ge: 45%; }
:is(.tjf-stagger, .tjf-stagger-pop) > .elementor-element:not(.tjf-reveal, .tjf-reveal-left, .tjf-reveal-right, .tjf-zoom, .tjf-pop, .tjf-expand, .tjf-stagger, .tjf-stagger-pop, .tjf-cards, [class*="tjf-pin"]),
:is(.tjf-stagger, .tjf-stagger-pop) > .e-con-inner > .elementor-element:not(.tjf-reveal, .tjf-reveal-left, .tjf-reveal-right, .tjf-zoom, .tjf-pop, .tjf-expand, .tjf-stagger, .tjf-stagger-pop, .tjf-cards, [class*="tjf-pin"]) {
	animation: tjf-rise linear both;
	animation-timeline: --tjf-group;
	animation-range: cover calc(var(--gs) + var(--later, 0%)) cover calc(var(--ge) + var(--later, 0%));
}
.tjf-stagger-pop > .elementor-element:not(.tjf-reveal, .tjf-reveal-left, .tjf-reveal-right, .tjf-zoom, .tjf-pop, .tjf-expand, .tjf-stagger, .tjf-stagger-pop, .tjf-cards, [class*="tjf-pin"]),
.tjf-stagger-pop > .e-con-inner > .elementor-element:not(.tjf-reveal, .tjf-reveal-left, .tjf-reveal-right, .tjf-zoom, .tjf-pop, .tjf-expand, .tjf-stagger, .tjf-stagger-pop, .tjf-cards, [class*="tjf-pin"]) { animation-name: tjf-pop-in; }

/* Cards (Elementor posts, loop grid, ElementsKit/Jeg post blocks). */
.tjf-cards { perspective: 1200px; }
.tjf-cards :is(.jkit-post, .elementor-post, .e-loop-item, article) {
	animation: tjf-card-in linear both;
	animation-timeline: view();
	--s: 0%; --e: 35%;
	animation-range: cover var(--s) cover var(--e);
}
.tjf-cards :is(.jkit-post, .elementor-post, .e-loop-item, article):nth-child(3n+2) { --s: 8%;  --e: 43%; }
.tjf-cards :is(.jkit-post, .elementor-post, .e-loop-item, article):nth-child(3n+3) { --s: 16%; --e: 51%; }

/* First screen: only "exit" effects (start in the normal position). */
.tjf-exit-fade, .tjf-exit-drift img {
	animation: tjf-out-up linear both;
	animation-timeline: scroll(root);
	animation-range: 0 800px;
}
.tjf-exit-drift img { animation-name: tjf-out-down; }

/* Pinned story (desktop). */
@media (min-width: 1025px) {
	.tjf-pin {
		view-timeline: --tjf-pin block;
		height: var(--tjf-pin-length, 240vh);
		justify-content: flex-start;
		padding-top: 0;
		padding-bottom: 0;
	}
	.tjf-pin-inner {
		position: sticky;
		top: var(--tjf-header, 75px);
		height: calc(100vh - var(--tjf-header, 75px));
		align-items: center;
	}
	.tjf-pin-grow, .tjf-pin-1, .tjf-pin-2, .tjf-pin-3, .tjf-pin-4, .tjf-pin-light .elementor-heading-title {
		animation: tjf-fade-up linear both;
		animation-timeline: --tjf-pin;
	}
	.tjf-pin-grow { animation-name: tjf-pin-grow; animation-range: contain 0% contain 45%; }
	.tjf-pin-1    { animation-range: contain 0% contain 12%; }
	.tjf-pin-2    { animation-range: contain 25% contain 45%; }
	.tjf-pin-3    { animation-range: contain 45% contain 65%; }
	.tjf-pin-4    { animation-range: contain 60% contain 80%; }
	.tjf-pin-light .elementor-heading-title {
		animation-name: tjf-fill;
		animation-range: contain 5% contain 50%;
		-webkit-text-fill-color: transparent;
		background: linear-gradient(90deg, currentColor 45%, color-mix(in srgb, currentColor 25%, transparent) 55%) 100% 0 / 220% 100% no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
	}
}
/* Phones and tablets: pinned items just reveal. */
@media (max-width: 1024px) {
	.tjf-pin-grow, .tjf-pin-1, .tjf-pin-2, .tjf-pin-3, .tjf-pin-4, .tjf-pin-light {
		animation: tjf-rise linear both;
		animation-timeline: view();
		animation-range: cover 5% cover 40%;
	}
}

} /* @supports */
} /* reduced motion */