/* ==================================================================
   FAYAWO — motion layer

   One orchestrated moment: the hero receipt prints line by line and the
   customs stamp presses in at the end. Everything after that is a single
   quiet reveal, used uniformly, so the page has one memorable beat rather
   than twenty competing ones.

   Every rule here is disabled wholesale under prefers-reduced-motion at
   the bottom of the file.
   ================================================================== */

/* ---------- scroll progress ---------- */
.fy-progressbar {
	position: fixed; top: 0; left: 0; height: 3px; width: 100%;
	background: var(--fy-blue); transform: scaleX(0); transform-origin: 0 50%;
	z-index: 200; will-change: transform;
}

/* ---------- header condense ---------- */
.fy-header {
	transition: box-shadow .25s ease, background .25s ease;
}
.fy-header.is-stuck {
	box-shadow: 0 1px 0 var(--fy-line), 0 10px 30px rgba(8,19,46,.07);
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(12px);
}
.fy-header .fy-brand img { transition: height .25s ease; height: 34px; width: auto; }
.fy-header.is-stuck .fy-brand img { height: 28px; }

/* ---------- the universal reveal ----------
   16px rise, 520ms, one shot. Same everywhere, so it reads as the page
   breathing rather than as a collection of effects. */
/* Gated on .fy-js — see fayawo_js_detect() in functions.php. Without
   working JavaScript none of these hidden states are ever applied, so the
   page renders in full rather than blank. */
.fy-js [data-fy-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .52s cubic-bezier(.22,.68,.32,1),
		transform .52s cubic-bezier(.22,.68,.32,1);
	transition-delay: var(--fy-delay, 0ms);
}
.fy-js [data-fy-reveal].is-in { opacity: 1; transform: none; }

/* ---------- hero load sequence ---------- */
/* Scoped to the copy column only — otherwise this also lands on the
   receipt's own children and fights the printing sequence. */
.fy-hero__copy > * {
	animation: fy-rise .68s cubic-bezier(.22,.68,.32,1) both;
}
.fy-hero .fy-eyebrow  { animation-delay: .05s; }
.fy-hero h1           { animation-delay: .13s; }
.fy-hero .fy-lede     { animation-delay: .23s; }
.fy-hero .fy-btn-row  { animation-delay: .32s; }

@keyframes fy-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

/* The receipt slides up as a unit, then prints its own contents. */
.fy-receipt { animation: fy-receipt-in .8s cubic-bezier(.18,.78,.28,1) .28s both; }

@keyframes fy-receipt-in {
	from { opacity: 0; transform: translateY(30px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.fy-receipt__lines li,
.fy-receipt__total { animation: fy-print .46s cubic-bezier(.2,.7,.3,1) both; }
.fy-receipt__lines li:nth-child(1) { animation-delay: .62s; }
.fy-receipt__lines li:nth-child(2) { animation-delay: .70s; }
.fy-receipt__lines li:nth-child(3) { animation-delay: .78s; }
.fy-receipt__lines li:nth-child(4) { animation-delay: .86s; }
.fy-receipt__lines li:nth-child(5) { animation-delay: .94s; }
.fy-receipt__lines li:nth-child(6) { animation-delay: 1.02s; }
.fy-receipt__total { animation-delay: 1.14s; }

@keyframes fy-print {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* The punchline: the stamp presses down, like a customs stamp landing.
   Slight overshoot and a hint of rotation so it reads as physical. */
.fy-stamp { animation: fy-press .42s cubic-bezier(.3,1.5,.5,1) 1.34s both; }

@keyframes fy-press {
	from { opacity: 0; transform: scale(1.5) rotate(-7deg); }
	60%  { opacity: 1; }
	to   { opacity: 1; transform: none; }
}

/* ---------- counting figures ----------
   Used on real, verified numbers only. Ties back to the receipt: this is a
   business about figures resolving into something you can rely on. */
.fy-count { font-variant-numeric: tabular-nums; }

/* ---------- makes marquee ----------
   The old site had a slogan marquee. The device is in their vocabulary, so
   it stays — but carrying something true (the makes actually sourced)
   rather than three slogans. */
.fy-marquee {
	overflow: hidden; padding: 26px 0;
	background: var(--fy-white); border-block: 1px solid var(--fy-line);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.fy-marquee__track { display: flex; width: max-content; animation: fy-scroll 42s linear infinite; }
.fy-marquee:hover .fy-marquee__track { animation-play-state: paused; }
.fy-marquee__group { display: flex; gap: 56px; padding-right: 56px; align-items: center; }
.fy-marquee span {
	font-family: var(--fy-display); font-weight: 700; font-size: 1.28rem;
	letter-spacing: -0.02em; color: var(--fy-muted); white-space: nowrap;
	transition: color .2s ease;
}
.fy-marquee span:hover { color: var(--fy-blue); }

@keyframes fy-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- stats band ---------- */
.fy-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.fy-stat__value {
	display: block; font-family: var(--fy-mono); font-weight: 500;
	font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1;
	color: var(--fy-blue); font-variant-numeric: tabular-nums;
}
.fy-section--ink .fy-stat__value { color: #6E9BEF; }
.fy-stat__label {
	display: block; margin-top: 10px; font-size: .88rem; color: var(--fy-muted);
	max-width: 22ch;
}
.fy-section--ink .fy-stat__label { color: rgba(255,255,255,.62); }

/* ---------- process: sticky index ---------- */
.fy-process { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
.fy-process__aside { position: sticky; top: 130px; }
.fy-process__index { list-style: none; margin: 26px 0 0; padding: 0; }
.fy-process__index li {
	display: flex; gap: 12px; align-items: center;
	padding: 9px 0; font-size: .92rem; color: var(--fy-muted);
	transition: color .28s ease;
}
.fy-process__index li::before {
	content: ""; width: 20px; height: 2px; background: var(--fy-line);
	transition: width .32s cubic-bezier(.22,.68,.32,1), background .28s ease;
	flex-shrink: 0;
}
.fy-process__index li.is-active { color: var(--fy-ink); font-weight: 600; }
.fy-process__index li.is-active::before { width: 40px; background: var(--fy-blue); }

.fy-steps li { transition: opacity .35s ease; }
.fy-steps li.is-dim { opacity: .6; }
.fy-steps .fy-n { transition: color .3s ease; }

/* ---------- timeline draw ---------- */
.fy-tl { position: relative; }
.fy-tl::after {
	content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%;
	background: #6E9BEF; transform-origin: 50% 0;
	transition: transform 1.1s cubic-bezier(.3,.7,.3,1);
}
.fy-js .fy-tl::after { transform: scaleY(0); }
.fy-tl.is-in::after { transform: scaleY(1); }
.fy-js .fy-tl li { opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease; }
.fy-tl.is-in li { opacity: 1; transform: none; }
.fy-tl.is-in li:nth-child(1) { transition-delay: .12s; }
.fy-tl.is-in li:nth-child(2) { transition-delay: .24s; }
.fy-tl.is-in li:nth-child(3) { transition-delay: .36s; }
.fy-tl.is-in li:nth-child(4) { transition-delay: .48s; }
.fy-tl.is-in li:nth-child(5) { transition-delay: .60s; }
.fy-tl.is-in li:nth-child(6) { transition-delay: .72s; }
.fy-tl.is-in li:nth-child(7) { transition-delay: .84s; }
.fy-tl li.is-now::before { animation: fy-pulse 2.4s ease-in-out 1.4s infinite; }

@keyframes fy-pulse {
	0%, 100% { box-shadow: 0 0 0 5px rgba(110,155,239,.28); }
	50%      { box-shadow: 0 0 0 11px rgba(110,155,239,.06); }
}

/* ---------- image reveal ----------
   A wipe rather than a fade: the image arrives the way a photo comes off a
   press, which suits a page built around a printed document. */
.fy-img { transition: clip-path .82s cubic-bezier(.24,.72,.28,1); }
.fy-js .fy-img { clip-path: inset(0 0 100% 0); }
.fy-js .fy-img.is-in { clip-path: inset(0 0 0 0); }
.fy-img__real { transition: transform 1.1s cubic-bezier(.24,.72,.28,1); }
.fy-js .fy-img__real { transform: scale(1.06); }
.fy-js .fy-img.is-in .fy-img__real { transform: none; }

/* Empty slots breathe faintly, so they read as awaiting content rather
   than as a rendering fault. */
.fy-img__slot { animation: fy-await 3.4s ease-in-out infinite; }

@keyframes fy-await {
	0%, 100% { border-color: rgba(11,79,200,.22); }
	50%      { border-color: rgba(11,79,200,.42); }
}

/* ---------- buttons ---------- */
.fy-btn { position: relative; overflow: hidden; }
.fy-btn__arrow {
	display: inline-block; transition: transform .26s cubic-bezier(.22,.68,.32,1);
}
.fy-btn:hover .fy-btn__arrow { transform: translateX(4px); }

.fy-btn--ghost { position: relative; z-index: 0; }
.fy-btn--ghost::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--fy-blue); transform: scaleX(0); transform-origin: 0 50%;
	transition: transform .3s cubic-bezier(.22,.68,.32,1);
}
.fy-btn--ghost:hover::before { transform: scaleX(1); }

/* ---------- cards ---------- */
.fy-card-plain {
	transition: transform .3s cubic-bezier(.22,.68,.32,1), border-color .3s ease, box-shadow .3s ease;
}
.fy-card-plain:hover {
	transform: translateY(-4px); border-color: var(--fy-blue);
	box-shadow: 0 18px 40px rgba(8,19,46,.07);
}

.fy-show { transition: transform .3s cubic-bezier(.22,.68,.32,1), border-color .3s ease, box-shadow .3s ease; }
.fy-show:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(8,19,46,.1); }
.fy-show .fy-img__real { transition: transform .7s cubic-bezier(.24,.72,.28,1); }
.fy-show:hover .fy-img__real { transform: scale(1.05); }

.fy-stat-link { transition: border-color .25s ease, transform .25s ease; }

/* ---------- faq ---------- */
.fy-faq details > p {
	display: grid; grid-template-rows: 0fr; overflow: hidden;
	transition: grid-template-rows .34s cubic-bezier(.22,.68,.32,1), padding .34s ease;
	padding-bottom: 0;
}
.fy-faq details[open] > p { grid-template-rows: 1fr; padding-bottom: 21px; }
.fy-faq details > p > span { min-height: 0; }
.fy-faq summary::after { transition: transform .3s cubic-bezier(.22,.68,.32,1); }
.fy-faq details[open] summary::after { transform: rotate(180deg); }
.fy-faq summary { transition: color .2s ease; }
.fy-faq summary:hover { color: var(--fy-blue); }

/* ---------- chips ---------- */
.fy-chip { transition: transform .24s cubic-bezier(.22,.68,.32,1), background .24s ease; }
.fy-chip:hover { transform: translateY(-2px); background: var(--fy-blue); color: #fff; }

/* ---------- hero ambient ----------
   The wheel from the wordmark, drifting almost imperceptibly. One ambient
   element, not a particle field. */
.fy-hero::after { animation: fy-drift 26s ease-in-out infinite alternate; }

@keyframes fy-drift {
	from { transform: translate(0, 0) rotate(0deg); }
	to   { transform: translate(-26px, 22px) rotate(14deg); }
}

@media (max-width: 1000px) {
	.fy-process { grid-template-columns: 1fr; gap: 34px; }
	.fy-process__aside { position: static; }
	.fy-process__index { display: none; }
	.fy-stats { grid-template-columns: 1fr 1fr; gap: 26px; }
	.fy-steps li.is-dim { opacity: 1; }
}
@media (max-width: 560px) {
	.fy-stats { grid-template-columns: 1fr; }
}

/* ==================================================================
   Reduced motion. Everything above is switched off — the page still
   works, it just arrives instead of animating.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	[data-fy-reveal] { opacity: 1 !important; transform: none !important; }
	.fy-img { clip-path: none !important; }
	.fy-img__real { transform: none !important; }
	.fy-tl li { opacity: 1 !important; transform: none !important; }
	.fy-tl::after { transform: scaleY(1) !important; }
	.fy-marquee__track { animation: none !important; }
	.fy-progressbar { display: none; }
}