/* How we work — illustrated.
   Colours follow the section: lines use the text colour, accents use --fratoz-accent (red;
   white on red sections). Timeline (seconds after the block scrolls into view):
   route line draws 0.2–3.2s · step 1 draws at 0.3s · step 2 at 1.3s · step 3 at 2.3s · loops start after. */

.fratoz-journey {
	--fratoz-accent: var(--wp--preset--color--red, #ab1f24);
	--fratoz-art-h: clamp(190px, 22vw, 300px);
	--fratoz-num: 3.25rem;
	position: relative;
}

.is-style-section-red .fratoz-journey,
.has-red-background-color .fratoz-journey {
	--fratoz-accent: var(--wp--preset--color--white, #fff);
}

.fratoz-journey__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fratoz-journey__step:nth-child(1) { --d: 0.3s; }
.fratoz-journey__step:nth-child(2) { --d: 1.3s; }
.fratoz-journey__step:nth-child(3) { --d: 2.3s; }

.fratoz-journey__art {
	height: var(--fratoz-art-h);
}

.fratoz-journey__art svg {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	overflow: visible;
}

.fratoz-art-faint { opacity: 0.25; }
.fratoz-art-accent-fill { fill: var(--fratoz-accent); }
.fratoz-art-accent-stroke { stroke: var(--fratoz-accent); }

.fratoz-journey__num {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: var(--fratoz-num);
	height: var(--fratoz-num);
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	background: var(--fratoz-accent);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--montserrat, inherit);
	font-size: 1.125rem;
	font-weight: 800;
}

.is-style-section-red .fratoz-journey__num {
	color: var(--wp--preset--color--red, #ab1f24);
}

.fratoz-journey__title {
	margin: var(--wp--preset--spacing--30, 1rem) 0 0;
	font-size: clamp(2rem, 3.4vw, 3rem);
}

.fratoz-journey__text {
	max-width: 22rem;
	margin: 0.6rem 0 0;
	opacity: 0.85;
}

/* Route line through the number tags: dashed, with a red dot travelling along it. */
.fratoz-journey__route {
	position: absolute;
	top: calc(var(--fratoz-art-h) + var(--wp--preset--spacing--40, 1.5rem) + var(--fratoz-num) / 2 - 1px);
	right: 0;
	left: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 18px);
	opacity: 0.5;
	transform-origin: left center;
}

.fratoz-journey__dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--fratoz-accent);
	box-shadow: 0 0 0 4px rgba(171, 31, 36, 0.3);
	opacity: 0;
}

/* ---------- Animation (only once view.js has added .is-ready) ---------- */

.fratoz-journey.is-ready .draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.fratoz-journey.is-ready.is-in .draw {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0s) + var(--i, 0) * 0.11s);
}

.fratoz-journey.is-ready .fill {
	opacity: 0;
}

.fratoz-journey.is-ready.is-in .fill {
	opacity: 1;
	transition: opacity 0.6s ease calc(var(--d, 0s) + 0.7s);
}

.fratoz-journey.is-ready .fratoz-journey__num,
.fratoz-journey.is-ready .fratoz-journey__title,
.fratoz-journey.is-ready .fratoz-journey__text {
	opacity: 0;
	transform: translateY(14px);
}

.fratoz-journey.is-ready.is-in .fratoz-journey__num,
.fratoz-journey.is-ready.is-in .fratoz-journey__title,
.fratoz-journey.is-ready.is-in .fratoz-journey__text {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fratoz-journey.is-ready.is-in .fratoz-journey__num { transition-delay: calc(var(--d) + 0.5s); }
.fratoz-journey.is-ready.is-in .fratoz-journey__title { transition-delay: calc(var(--d) + 0.6s); }
.fratoz-journey.is-ready.is-in .fratoz-journey__text { transition-delay: calc(var(--d) + 0.7s); }

.fratoz-journey.is-ready .fratoz-journey__route {
	transform: scaleX(0);
}

.fratoz-journey.is-ready.is-in .fratoz-journey__route {
	transform: scaleX(1);
	transition: transform 3s cubic-bezier(0.45, 0, 0.25, 1) 0.2s;
}

/* Idle loops — start once each step has finished drawing. */
.fratoz-journey.is-in .fratoz-journey__dot {
	animation: fratoz-route 5s cubic-bezier(0.45, 0, 0.55, 1) 3.4s infinite;
}

.fratoz-journey.is-in .fratoz-art-pencil {
	animation: fratoz-pencil 2.6s ease-in-out calc(var(--d) + 1.6s) infinite;
}

.fratoz-journey.is-in .fratoz-art-gear {
	animation: fratoz-spin 9s linear calc(var(--d) + 1s) infinite;
}

.fratoz-journey.is-in .fratoz-art-hammer {
	transform-origin: 0 0;
	animation: fratoz-hammer 1.4s cubic-bezier(0.5, 0, 0.75, 0) calc(var(--d) + 1.6s) infinite;
}

.fratoz-journey.is-in .fratoz-art-sparks {
	animation: fratoz-sparks 1.4s linear calc(var(--d) + 1.6s) infinite;
}

.fratoz-journey.is-in .fratoz-art-twinkle {
	transform-box: fill-box;
	transform-origin: center;
	animation: fratoz-twinkle 2.2s ease-in-out calc(var(--d) + 1.8s) infinite;
}

.fratoz-journey.is-in .fratoz-art-check {
	transform-box: fill-box;
	transform-origin: center;
	animation: fratoz-check 2.8s ease-in-out calc(var(--d) + 2.2s) infinite;
}

@keyframes fratoz-route {
	0% { left: 0; opacity: 0; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

@keyframes fratoz-pencil {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(-5px, 2px); }
	50% { transform: translate(-2px, -1px); }
	75% { transform: translate(-6px, 1px); }
}

@keyframes fratoz-spin {
	to { transform: rotate(360deg); }
}

@keyframes fratoz-hammer {
	0%, 100% { transform: rotate(0deg); }
	45% { transform: rotate(-22deg); }
	55% { transform: rotate(-22deg); }
	62% { transform: rotate(2deg); }
}

@keyframes fratoz-sparks {
	0%, 58% { opacity: 0; }
	64% { opacity: 1; }
	85%, 100% { opacity: 0; }
}

@keyframes fratoz-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.8); }
}

@keyframes fratoz-check {
	0%, 70%, 100% { transform: scale(1); }
	80% { transform: scale(1.12); }
}

/* ---------- Story "coffee": coffee → pixels → reality ----------
   Step delays: --d = 0.3s / 1.3s / 2.3s. Entrances run once; loops start after. */

/* Pixels stream along the route from the laptop (step 2) into the box (step 3). */
.fratoz-journey__pixel {
	position: absolute;
	top: 50%;
	left: 36%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: var(--fratoz-accent);
	opacity: 0;
}

.fratoz-journey.is-in .fratoz-journey__pixel {
	animation: fratoz-pixel 2.4s cubic-bezier(0.45, 0, 0.55, 1) calc(3.4s + var(--k) * 0.32s) infinite;
}

@keyframes fratoz-pixel {
	0% { left: 37%; opacity: 0; transform: scale(0.6) rotate(0deg); }
	12% { opacity: 1; }
	80% { opacity: 1; transform: scale(1) rotate(90deg); }
	100% { left: 69%; opacity: 0; transform: scale(1.4) rotate(90deg); }
}

/* Shared helpers. */
.fratoz-art-design,
.fratoz-art-clink,
.fratoz-art-idea,
.fratoz-art-ripple,
.fratoz-art-pop,
.fratoz-art-jump,
.fratoz-art-box,
.fratoz-art-boxdrop,
.fratoz-art-poplines,
.fratoz-art-cup-l,
.fratoz-art-cup-r {
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes fratoz-pop-in {
	from { opacity: 0; transform: scale(0); }
	to { opacity: 1; transform: scale(1); }
}

/* --- 01 Coffee: cups slide in and clink (spark!), steam flows up, the idea pops. --- */
.fratoz-journey.is-ready .fratoz-art-slide-l { opacity: 0; transform: translateX(-60px); }
.fratoz-journey.is-ready .fratoz-art-slide-r { opacity: 0; transform: translateX(60px); }

.fratoz-journey.is-ready.is-in .fratoz-art-slide-l,
.fratoz-journey.is-ready.is-in .fratoz-art-slide-r {
	opacity: 1;
	transform: none;
	transition: transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) var(--d), opacity 0.3s ease var(--d);
}

.fratoz-art-cup-l,
.fratoz-art-cup-r { transform-origin: 50% 100%; }

.fratoz-journey.is-in .fratoz-art-cup-l { animation: fratoz-clink-l 4s ease-in-out calc(var(--d) + 1.2s) infinite; }
.fratoz-journey.is-in .fratoz-art-cup-r { animation: fratoz-clink-r 4s ease-in-out calc(var(--d) + 1.2s) infinite; }

.fratoz-art-clink { opacity: 0; }
.fratoz-journey.is-in .fratoz-art-clink { animation: fratoz-spark 4s ease-out calc(var(--d) + 1.2s) infinite; }

.fratoz-journey.is-ready .steam {
	stroke-dasharray: 0.3 0.7;
	stroke-dashoffset: 1;
	opacity: 0;
}

.fratoz-journey.is-in .steam {
	opacity: 1;
	transition: opacity 0.6s ease calc(var(--d) + 0.8s);
	animation: fratoz-steam-flow 2.4s linear calc(var(--d) + 0.6s + var(--s) * 0.3s) infinite;
}

.fratoz-journey.is-ready .fratoz-art-idea { opacity: 0; transform: scale(0); }

.fratoz-journey.is-in .fratoz-art-idea {
	transform-origin: 30% 100%;
	animation:
		fratoz-pop-in 0.6s cubic-bezier(0.34, 1.7, 0.64, 1) calc(var(--d) + 0.9s) both,
		fratoz-idea 4s ease-in-out calc(var(--d) + 1.5s) infinite;
}

@keyframes fratoz-clink-l {
	0%, 18%, 40%, 100% { transform: rotate(0deg); }
	26% { transform: rotate(10deg); }
	31% { transform: rotate(6deg); }
}

@keyframes fratoz-clink-r {
	0%, 18%, 40%, 100% { transform: rotate(0deg); }
	26% { transform: rotate(-10deg); }
	31% { transform: rotate(-6deg); }
}

@keyframes fratoz-spark {
	0%, 23% { opacity: 0; transform: scale(0.4); }
	27% { opacity: 1; transform: scale(1.25); }
	38%, 100% { opacity: 0; transform: scale(1.5); }
}

@keyframes fratoz-steam-flow {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: -0.3; }
}

@keyframes fratoz-idea {
	0%, 60%, 100% { transform: rotate(0deg) scale(1); }
	66% { transform: rotate(-10deg) scale(1.12); }
	72% { transform: rotate(8deg) scale(1.05); }
	78% { transform: rotate(-4deg) scale(1); }
}

/* --- 02 Pixels: the lid opens, the design pops onto the screen, the cursor glides and clicks. --- */
.fratoz-art-lid { transform-origin: 120px 124px; }

.fratoz-journey.is-ready .fratoz-art-lid { opacity: 0; transform: scaleY(0.05); }

.fratoz-journey.is-ready.is-in .fratoz-art-lid {
	opacity: 1;
	transform: none;
	transition: transform 0.85s cubic-bezier(0.25, 1.3, 0.4, 1) var(--d), opacity 0.2s ease var(--d);
}

.fratoz-journey.is-ready .fratoz-art-design { transform: scale(0); }

.fratoz-journey.is-in .fratoz-art-design {
	animation:
		fratoz-pop-in 0.5s cubic-bezier(0.34, 1.8, 0.64, 1) calc(var(--d) + 0.9s) both,
		fratoz-pulse 3s ease-in-out calc(var(--d) + 1.6s) infinite;
}

.fratoz-journey.is-in .fratoz-art-cursor {
	animation: fratoz-cursor 3s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--d) + 1.1s) infinite;
}

.fratoz-art-ripple { opacity: 0; }

.fratoz-journey.is-in .fratoz-art-ripple {
	animation: fratoz-ripple 3s ease-out calc(var(--d) + 1.1s) infinite;
}

.fratoz-journey.is-in .fratoz-art-pixels {
	animation: fratoz-flicker 0.9s steps(2, end) calc(var(--d) + 1s) infinite;
}

@keyframes fratoz-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

@keyframes fratoz-cursor {
	0% { transform: translate(-34px, -26px); }
	35% { transform: translate(0, 0); }
	40% { transform: translate(0, 0) scale(0.88); }
	46% { transform: translate(0, 0) scale(1); }
	75% { transform: translate(18px, -12px); }
	100% { transform: translate(-34px, -26px); }
}

@keyframes fratoz-ripple {
	0%, 38% { opacity: 0; transform: scale(0.3); }
	42% { opacity: 1; }
	60%, 100% { opacity: 0; transform: scale(2.4); }
}

@keyframes fratoz-flicker {
	0% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* --- 03 Reality: the box drops in, flaps open, the real things spring out and keep hopping. --- */
.fratoz-art-boxdrop { transform-origin: 50% 100%; }
.fratoz-art-box { transform-origin: 50% 100%; }

.fratoz-journey.is-ready .fratoz-art-boxdrop { opacity: 0; transform: translateY(-70px); }

.fratoz-journey.is-ready.is-in .fratoz-art-boxdrop {
	animation: fratoz-box-drop 0.9s cubic-bezier(0.3, 0, 0.3, 1) var(--d) both;
}

/* Box gives a little jolt as pixels arrive. */
.fratoz-journey.is-in .fratoz-art-box {
	animation: fratoz-box-jolt 1.6s ease-in-out calc(var(--d) + 1.6s) infinite;
}

.fratoz-art-flap-l { transform-origin: 75px 114px; }
.fratoz-art-flap-r { transform-origin: 165px 114px; }

.fratoz-journey.is-in .fratoz-art-flap-l { animation: fratoz-flap-l 1.6s ease-in-out calc(var(--d) + 1.6s) infinite; }
.fratoz-journey.is-in .fratoz-art-flap-r { animation: fratoz-flap-r 1.6s ease-in-out calc(var(--d) + 1.6s) infinite; }

.fratoz-art-pop { transform-origin: 50% 100%; }

.fratoz-journey.is-ready .fratoz-art-pop { opacity: 0; transform: translateY(56px) scale(0.3); }

.fratoz-journey.is-ready.is-in .fratoz-art-pop {
	animation: fratoz-spring 0.75s cubic-bezier(0.34, 1.7, 0.64, 1) calc(var(--d) + 0.6s + var(--o) * 0.2s) both;
}

.fratoz-art-jump { transform-origin: 50% 100%; }

.fratoz-journey.is-in .fratoz-art-jump {
	animation: fratoz-hop 3.2s cubic-bezier(0.3, 0, 0.3, 1) calc(var(--d) + 1.8s + var(--o) * 0.18s) infinite;
}

.fratoz-art-poplines { opacity: 0; }

.fratoz-journey.is-in .fratoz-art-poplines {
	animation: fratoz-poplines 3.2s ease-out calc(var(--d) + 1.8s) infinite;
}

@keyframes fratoz-box-drop {
	0% { opacity: 0; transform: translateY(-70px) scale(1, 1); }
	55% { opacity: 1; transform: translateY(0) scale(1.06, 0.9); }
	75% { transform: translateY(-8px) scale(0.98, 1.03); }
	100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

@keyframes fratoz-box-jolt {
	0%, 70%, 100% { transform: scale(1, 1); }
	78% { transform: scale(1.04, 0.95); }
	86% { transform: scale(0.98, 1.03); }
}

@keyframes fratoz-flap-l {
	0%, 70%, 100% { transform: rotate(0deg); }
	80% { transform: rotate(-10deg); }
}

@keyframes fratoz-flap-r {
	0%, 70%, 100% { transform: rotate(0deg); }
	80% { transform: rotate(10deg); }
}

@keyframes fratoz-spring {
	from { opacity: 0; transform: translateY(56px) scale(0.3); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fratoz-hop {
	0%, 62%, 100% { transform: translateY(0) scale(1, 1); }
	68% { transform: translateY(2px) scale(1.05, 0.94); }
	78% { transform: translateY(-16px) scale(0.97, 1.04); }
	88% { transform: translateY(0) scale(1.03, 0.97); }
	94% { transform: translateY(0) scale(1, 1); }
}

@keyframes fratoz-poplines {
	0%, 74% { opacity: 0; transform: scale(0.6); }
	80% { opacity: 1; transform: scale(1.1); }
	92%, 100% { opacity: 0; transform: scale(1.3); }
}

/* ---------- Story "hands" (print style): giant hands, tiny objects, red panels ---------- */

.hand-cut {
	fill: var(--fratoz-hand-cut, var(--wp--preset--color--red, #ab1f24));
}

.is-style-section-ink .fratoz-journey { --fratoz-hand-cut: var(--wp--preset--color--ink, #141414); }

/* Hands colour: white on red/ink (print look), red on beige with beige cut lines (print look, inverted). */
.fratoz-journey.is-story-hands { --fratoz-hand: var(--wp--preset--color--white, #fff); }

.is-style-section-sand .fratoz-journey.is-story-hands,
.has-sand-background-color .fratoz-journey.is-story-hands {
	--fratoz-hand: var(--wp--preset--color--red, #ab1f24);
	--fratoz-hand-cut: var(--wp--preset--color--sand, #f5f1ed);
}

.fratoz-journey.is-story-hands .fratoz-journey__steps {
	gap: 0;
}

.fratoz-journey.is-story-hands .fratoz-journey__step {
	position: relative;
	overflow: hidden;
	min-height: clamp(560px, 50vw, 720px);
	padding: clamp(1.5rem, 3vw, 2.75rem);
}

.fratoz-journey.is-story-hands .fratoz-journey__step + .fratoz-journey__step {
	border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.fratoz-journey.is-story-hands .fratoz-journey__step:nth-child(1) { --d: 0.2s; }
.fratoz-journey.is-story-hands .fratoz-journey__step:nth-child(2) { --d: 0.7s; }
.fratoz-journey.is-story-hands .fratoz-journey__step:nth-child(3) { --d: 1.2s; }

/* Text sits on top; the hand fills the lower part and bleeds off the panel edges. */
.fratoz-journey.is-story-hands .fratoz-journey__num {
	margin-top: 0;
}

.fratoz-journey.is-story-hands .fratoz-journey__title,
.fratoz-journey.is-story-hands .fratoz-journey__text,
.fratoz-journey.is-story-hands .fratoz-journey__num {
	position: relative;
	z-index: 2;
}

.fratoz-journey.is-story-hands .fratoz-journey__art {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 62%;
	pointer-events: none;
}

.fratoz-journey.is-story-hands .fratoz-journey__art svg {
	width: auto;
	max-width: none;
	height: 100%;
	color: var(--fratoz-hand);
}

/* Peace hands keep their tiny objects in view: anchor right, bleed left. */
.fratoz-journey.is-story-hands .is-hand-peace .fratoz-journey__art {
	right: 0;
	left: auto;
}

/* Entrance: each hand slides in from its own edge. */
.fratoz-journey.is-story-hands.is-ready .fratoz-journey__art {
	opacity: 0;
}

.fratoz-journey.is-story-hands.is-ready .is-hand-coffee .fratoz-journey__art { transform: translateX(-45%); }
.fratoz-journey.is-story-hands.is-ready .is-hand-tap .fratoz-journey__art { transform: translate(35%, -12%); }
.fratoz-journey.is-story-hands.is-ready .is-hand-peace .fratoz-journey__art { transform: translateY(45%); }

.fratoz-journey.is-story-hands.is-ready.is-in .fratoz-journey__art {
	opacity: 1;
	transform: none;
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--d), opacity 0.5s ease var(--d);
}

/* Coffee: the cup swings gently from its handle, steam rises. */
.fratoz-journey.is-in .fratoz-hand-cup {
	transform-origin: 268px 226px;
	animation: fratoz-cup-swing 3.2s ease-in-out calc(var(--d) + 1.3s) infinite;
}

.fratoz-journey.is-in .fratoz-hand-steam {
	animation: fratoz-steam 2.4s ease-in-out calc(var(--d) + 1.3s) infinite;
}

@keyframes fratoz-cup-swing {
	0%, 100% { transform: rotate(0deg); }
	30% { transform: rotate(-5deg); }
	70% { transform: rotate(4deg); }
}

/* Pixels: the finger taps the tiny laptop; every tap throws pixels out of the screen. */
.fratoz-journey.is-in .is-hand-tap .fratoz-hand {
	animation: fratoz-tap 1.8s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d) + 1.3s) infinite;
}

.fratoz-hand-pixel {
	transform-box: fill-box;
	transform-origin: center;
}

.fratoz-journey.is-ready .fratoz-hand-pixel {
	opacity: 0;
}

.fratoz-journey.is-in .fratoz-hand-pixel {
	animation: fratoz-pixel-burst 1.8s ease-out calc(var(--d) + 1.3s + var(--p) * 0.04s) infinite;
}

@keyframes fratoz-tap {
	0%, 18%, 100% { transform: translate(0, 0); }
	9% { transform: translate(6px, -16px); }
}

@keyframes fratoz-pixel-burst {
	0%, 16% { opacity: 0; transform: translate(26px, 40px) scale(0.4); }
	24% { opacity: 1; }
	60% { opacity: 1; transform: translate(0, 0) scale(1); }
	80%, 100% { opacity: 0; transform: translate(-6px, -10px) scale(0.8); }
}

/* The real thing: both ✌️ wiggle, the tiny poster / bag / box pop up and bob. */
.fratoz-journey.is-in .fratoz-hand-solid {
	transform-origin: 160px 620px;
	animation: fratoz-peace 2.6s ease-in-out calc(var(--d) + 1.3s) infinite;
}

.fratoz-journey.is-in .fratoz-hand-outline {
	transform-origin: 520px 640px;
	animation: fratoz-peace 2.6s ease-in-out calc(var(--d) + 1.6s) infinite reverse;
}

.fratoz-hand-thing {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.fratoz-journey.is-ready .fratoz-hand-thing {
	opacity: 0;
	transform: scale(0.2) translateY(30px);
}

.fratoz-journey.is-in .fratoz-hand-thing {
	opacity: 1;
	transform: none;
	transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 0.9s + var(--t) * 0.2s), opacity 0.3s ease calc(var(--d) + 0.9s + var(--t) * 0.2s);
	animation: fratoz-bob 3s ease-in-out calc(var(--d) + 2.4s + var(--t) * 0.4s) infinite;
}

@keyframes fratoz-peace {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-3.5deg); }
	50% { transform: rotate(1deg); }
	75% { transform: rotate(-2deg); }
}

@keyframes fratoz-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Phones: one step under the other; the route becomes a vertical line on the left. */
@media (max-width: 781px) {
	.fratoz-journey__steps {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60, 3.5rem);
		padding-left: 1.5rem;
	}

	.fratoz-journey__route {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(180deg, currentColor 0 10px, transparent 10px 18px);
		transform-origin: center top;
	}

	.fratoz-journey.is-ready .fratoz-journey__route { transform: scaleY(0); }
	.fratoz-journey.is-ready.is-in .fratoz-journey__route { transform: scaleY(1); }

	.fratoz-journey__dot,
	.fratoz-journey__pixel { display: none; }

	.fratoz-journey.is-story-hands .fratoz-journey__steps {
		padding-left: 0;
	}

	.fratoz-journey.is-story-hands .fratoz-journey__step {
		min-height: 520px;
	}

	.fratoz-journey.is-story-hands .fratoz-journey__step + .fratoz-journey__step {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	}

	/* On phones each step plays as it scrolls past, so shorten the stagger. */
	.fratoz-journey__step:nth-child(2) { --d: 0.6s; }
	.fratoz-journey__step:nth-child(3) { --d: 0.9s; }
}

@media (prefers-reduced-motion: reduce) {
	.fratoz-journey *,
	.fratoz-journey *::before {
		animation: none !important;
		transition: none !important;
	}
}