/* ============================================================
   HOMEPAGE HERO ANIMATION (v5: one workspace, teammates at work)
   Replaces the four-screenshot mashup under the hero headline.

   Load AFTER index.css and colors.css:

	 <link href="/css/index.css" rel="stylesheet">
	 <link href="/css/colors.css" rel="stylesheet">
	 <link href="/css/hero-animation.css" rel="stylesheet">

   How the loop works
   - Eight capability cards sit evenly around the Flurrio mark,
	 all on one soft rounded surface. Clockwise from top left:
	 Documents, To-do lists, Project tracking, CRM, Databases, File
	 transfers, Share links, Review & approval.
   - Each card gets one slow "turn" of --fh-step: it lifts, plays
	 its little scene, and settles.
   - Four teammate cursors do the work. Each one handles two
	 neighbouring cards: they glide in, click or drag the thing that
	 changes, move on to the next card, then drift back. Ben also
	 joins Ana on the document so two people type at once.
   - Every animated piece runs on the same --fh-loop, offset by its
	 card's turn (--d), so nothing drifts out of sync.
   - Keyframe percentages are fractions of the loop. They were
	 written against a 32s loop, so 1s = 3.125%. To slow everything
	 down, change --fh-loop and --fh-step together and keep
	 loop = 8 x step (e.g. 36s / 4.5s).
   - Scenes reset at the halfway point, while the opposite side is
	 playing, so nobody sees the rewind.

   Reduced motion: every animation is removed and the base styles
   below show each scene in its finished state.
   ============================================================ */


/* ============================================================
   TOKENS
   Brand values come from colors.css (with fallbacks so the art
   still renders if this file loads on its own).
   ============================================================ */
.fh-art {
	--fh-loop: 32s;						/* full cycle, must equal 8 x --fh-step */
	--fh-step: 4s;						/* one card's turn */
	--fh-start: 1.5s;					/* first turn starts after the entrance */

	--fh-ink: var(--text-secondary, #4B5563);
	--fh-paper: #FFFFFF;
	--fh-edge: #ECE7F2;

	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	container-type: inline-size;		/* labels resize with the art, not the viewport */
}


/* ============================================================
   LAYOUT
   ============================================================ */

/* soft colour pools behind the surface */
.fh-art::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(28% 30% at 30% 34%, rgba(205, 59, 227, 0.08), transparent),
		radial-gradient(28% 30% at 70% 38%, rgba(52, 120, 198, 0.08), transparent),
		radial-gradient(30% 26% at 50% 70%, rgba(217, 130, 43, 0.06), transparent);
}

.fh-art svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;					/* lifted cards can rise past the top edge */
}

/* the shared surface everything sits on */
.fh-surface { fill: url(#fh-surface-grad); stroke: var(--fh-edge); stroke-width: 1.5; }

/* card labels */
.fh-label {
	font-family: var(--font, 'Noto Sans', system-ui, sans-serif);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	fill: var(--fh-ink);
	text-anchor: middle;
}
.fh-label-on { fill: var(--c); opacity: 0; }

/* teammate cursors */
.fh-cur-name {
	font-family: var(--font, 'Noto Sans', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	fill: #FFFFFF;
	text-anchor: middle;
}
.fh-cur-size {
	transform-box: fill-box;
	transform-origin: 0 0;
}

/* the art scales down with the column, so labels and cursors grow
   in SVG units to stay readable on phones */
@container (max-width: 760px) {
	.fh-label { font-size: 22px; }
	.fh-cur-size { transform: scale(1.25); }
}
@container (max-width: 520px) {
	.fh-label { font-size: 28px; transform: translateY(-4px); }
	.fh-cur-size { transform: scale(1.6); }
}


/* ============================================================
   STATIC STYLES
   These are also the finished state shown with reduced motion.
   ============================================================ */
/* per-tile hues: --c strong, --c-bg tile fill, --c-line tile edge, --c-soft UI fills */
.fh-docs   { --c: #A93CC8; --c-bg: #F7EDFB; --c-line: #ECD9F4; --c-soft: #E6D4EE; }
.fh-todo   { --c: #12976A; --c-bg: #E9F6F0; --c-line: #D3ECDF; --c-soft: #C9E4D7; }
.fh-pt     { --c: #3478C6; --c-bg: #EBF3FC; --c-line: #D6E5F6; --c-soft: #CFE0F2; }
.fh-crm    { --c: #CF4A86; --c-bg: #FCEEF4; --c-line: #F5D9E6; --c-soft: #F1CCDD; }
.fh-db     { --c: #5A5FD0; --c-bg: #EEEFFC; --c-line: #DCDEF7; --c-soft: #D2D4F3; }
.fh-files  { --c: #D9822B; --c-bg: #FDF3E6; --c-line: #F6E3CA; --c-soft: #F3DAB9; }
.fh-share  { --c: #16909C; --c-bg: #E7F5F6; --c-line: #D0EAEC; --c-soft: #C5E3E6; }
.fh-review { --c: #DD5E48; --c-bg: #FDEFEB; --c-line: #F7DCD5; --c-soft: #F4CCC2; }

/* ---------- card and scene pieces ---------- */
.fh-tile-bg { fill: var(--c-bg); stroke: var(--c-line); stroke-width: 1.5; }
.fh-ring { fill: none; stroke: var(--c); stroke-width: 2; opacity: 0; }
.fh-paper { fill: var(--fh-paper); }
.fh-soft { fill: var(--c-soft); }
.fh-c { fill: var(--c); }
.fh-c-stroke { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }
.fh-white-stroke { fill: none; stroke: #FFFFFF; stroke-linecap: round; stroke-linejoin: round; }
.fh-paper-shadow { fill: var(--c-line); }
.fh-box { fill: var(--fh-paper); stroke: var(--c-soft); stroke-width: 2; }
.fh-col { fill: rgba(255, 255, 255, 0.72); }
.fh-card { fill: var(--fh-paper); stroke: var(--c-line); stroke-width: 1; }
.fh-bar { fill: var(--fh-paper); stroke: var(--c-line); stroke-width: 1.5; }
.fh-track { fill: none; stroke: var(--c-soft); stroke-width: 8; }
.fh-grid { fill: none; stroke: var(--c-line); stroke-width: 1; }
.fh-head { fill: var(--c-bg); }
.fh-pill-text {
	font-family: var(--font, 'Noto Sans', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	fill: #FFFFFF;
}
.fh-av-ring { fill: none; stroke: #FFFFFF; stroke-width: 3; }

/* checks draw with pathLength="10"; an offset of 10.5 parks the
   whole dash before the start so no round-cap dot shows */
.fh-check { stroke-dasharray: 10 11; stroke-dashoffset: 0; }

/* documents: own caret hidden at rest, collaborator parked at line end */
.fh-caret-own { opacity: 0; }
.fh-caret-peer { transform: translateX(40px); }

/* project tracking: the moving card's green label waits */
.fh-pt-done { opacity: 0; }

/* databases: cell focus only shows while a row is being filled in */
.fh-cell { fill: none; stroke: var(--c); stroke-width: 2; opacity: 0; }

/* file transfers: finished upload */
.fh-file-progress {
	fill: none;
	stroke: var(--c);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 100;				/* pathLength="100" on the element */
	stroke-dashoffset: 0;
}
.fh-file-arrow { opacity: 0; }

/* share links: pointer only appears while it clicks */
.fh-pointer { opacity: 0; transform-origin: 0 0; }

/* scale-from-left pieces */
.fh-from-left { transform-origin: 0 50%; }


/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

	/* every looping piece shares one clock: --d is the start of its
	   card's turn, --o nudges an element inside that turn */
	.fh-tile,
	.fh-who {
		--d: calc(var(--fh-start) + var(--i) * var(--fh-step));
	}
	.fh-a {
		animation-duration: var(--fh-loop);
		animation-delay: calc(var(--d) + var(--o, 0s));
		animation-iteration-count: infinite;
		animation-fill-mode: both;
		animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
		transform-box: fill-box;
	}
	.fh-a:not(.fh-from-left):not(.fh-pointer):not(.fh-who-move) { transform-origin: 50% 50%; }

	/* ---------- each card's turn ---------- */
	.fh-lift { animation-name: fh-lift; }
	.fh-ring { animation-name: fh-on; }
	.fh-on { animation-name: fh-on; }
	.fh-shadow { animation-name: fh-shadow; }

	/* ---------- scenes ---------- */
	.fh-write { animation-name: fh-write; }
	.fh-pop { animation-name: fh-pop; }
	.fh-rise { animation-name: fh-rise; }
	.fh-check { animation-name: fh-draw; }
	.fh-dim { animation-name: fh-dim; }

	.fh-caret-own { animation-name: fh-caret-own; }
	.fh-caret-peer { animation-name: fh-caret-peer; }

	.fh-pt-move { animation-name: fh-pt-move; }
	.fh-pt-shift { animation-name: fh-pt-shift; }
	.fh-pt-done { animation-name: fh-pt-done; }

	.fh-crm-progress { animation-name: fh-crm-progress; }

	.fh-cell { animation-name: fh-cell; }

	.fh-file-progress { animation-name: fh-file-progress; }
	.fh-file-arrow { animation-name: fh-file-arrow; }
	.fh-file-disk { animation-name: fh-file-disk; }

	.fh-pointer { animation-name: fh-pointer; }
	.fh-press { animation-name: fh-press; }

	.fh-scrub { animation-name: fh-scrub; }
	.fh-scrub-fill { animation-name: fh-scrub-fill; }
	.fh-drop { animation-name: fh-drop; }

	/* paused while the hero is off screen (hero-animation.js) */
	.fh-art.is-paused * {
		animation-play-state: paused !important;
	}

	/* ---------- entrance (once) ---------- */
	.fh-surface-in {
		animation: fh-surface-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
		transform-box: fill-box;
		transform-origin: 50% 50%;
	}
	.fh-enter {
		animation: fh-enter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(0.25s + var(--i, 0) * 0.07s);
		transform-box: fill-box;
		transform-origin: 50% 50%;
	}
	.fh-center .fh-enter { animation-delay: 0.15s; }
	.fh-cur-in {
		animation: fh-fade 0.6s ease-out calc(1s + var(--k) * 0.12s) both;
	}

	/* ---------- ambient ---------- */
	.fh-float {
		animation: fh-float-soft calc(6s + var(--i) * 0.6s) ease-in-out calc(var(--i) * -1.1s) infinite;
	}
	.fh-glow {
		animation: fh-breathe 8s ease-in-out infinite alternate;
		transform-box: fill-box;
		transform-origin: 50% 50%;
	}
	.fh-cur-wander {
		animation: fh-wander calc(7s + var(--k) * 1.3s) ease-in-out calc(var(--k) * -2s) infinite alternate;
	}

	/* ---------- teammates at work ---------- */
	.fh-who-move { transform-origin: 0 0; }	/* cursors press around their tip */
	.fh-cur-0 { animation-name: fh-cur-0; }
	.fh-cur-1 { animation-name: fh-cur-1; }
	.fh-cur-1-doc { animation-name: fh-cur-1-doc; }
	.fh-cur-2 { animation-name: fh-cur-2; }
	.fh-cur-3 { animation-name: fh-cur-3; }
}

/* manual still state (used by the preview toggle) */
.fh-art.fh-static * { animation: none !important; }


/* ============================================================
   KEYFRAMES
   Comments give the moment in the card's turn.
   ============================================================ */
@keyframes fh-surface-in {
	from { opacity: 0; transform: scale(0.98); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes fh-float-soft {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
@keyframes fh-breathe {
	from { transform: scale(1); opacity: 0.8; }
	to   { transform: scale(1.07); opacity: 1; }
}
@keyframes fh-wander {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(6px, -5px); }
	100% { transform: translate(-5px, 4px); }
}

@keyframes fh-enter {
	from { opacity: 0; transform: translateY(18px) scale(0.94); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fh-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes fh-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* card lifts at 0.7s to 1.3s, settles at 3.1s to 3.7s */
@keyframes fh-lift {
	0%, 2.188%    { transform: translateY(0) scale(1); }
	4.062%, 9.688% { transform: translateY(-8px) scale(1.035); }
	11.562%, 100%  { transform: translateY(0) scale(1); }
}
@keyframes fh-shadow {
	0%, 2.188%    { transform: scale(1); opacity: 1; }
	4.062%, 9.688% { transform: scale(0.84); opacity: 0.55; }
	11.562%, 100%  { transform: scale(1); opacity: 1; }
}
@keyframes fh-on {
	0%, 2.188%    { opacity: 0; }
	4.062%, 9.688% { opacity: 1; }
	11.562%, 100%  { opacity: 0; }
}

/* shared scene beats: appear around 2.0s, reset at 16s */
@keyframes fh-write {					/* writes 1.0s to 2.0s */
	0%, 3.125%     { transform: scaleX(0); opacity: 1; }
	6.25%, 50% { transform: scaleX(1); opacity: 1; }
	51.562%        { transform: scaleX(1); opacity: 0; }
	51.719%       { transform: scaleX(0); opacity: 0; }
	52.188%, 100%  { transform: scaleX(0); opacity: 1; }
}
@keyframes fh-pop {						/* pops 2.0s to 2.5s */
	0%, 6.25%     { transform: scale(0); opacity: 0; }
	7.187%         { transform: scale(1.12); opacity: 1; }
	7.812%, 50% { transform: scale(1); opacity: 1; }
	51.562%, 100%  { transform: scale(0.6); opacity: 0; }
}
@keyframes fh-rise {					/* rises 2.0s to 2.5s */
	0%, 6.25%     { transform: translateY(7px) scale(0.94); opacity: 0; }
	7.187%         { transform: translateY(0) scale(1.02); opacity: 1; }
	7.812%, 50% { transform: translateY(0) scale(1); opacity: 1; }
	51.562%, 100%  { transform: translateY(6px) scale(0.96); opacity: 0; }
}
@keyframes fh-draw {					/* draws 2.0s to 2.4s */
	0%, 6.25%     { stroke-dashoffset: 10.5; opacity: 1; }
	7.5%, 50% { stroke-dashoffset: 0; opacity: 1; }
	51.562%        { stroke-dashoffset: 0; opacity: 0; }
	51.719%, 100% { stroke-dashoffset: 10.5; opacity: 0; }
}
@keyframes fh-dim {						/* finished items fade back */
	0%, 6.719%    { opacity: 1; }
	7.812%, 50% { opacity: 0.45; }
	51.562%, 100%  { opacity: 1; }
}

/* documents: two carets type at once */
@keyframes fh-caret-own {
	0%, 2.812%     { transform: translateX(0); opacity: 0; }
	3.125%         { transform: translateX(0); opacity: 1; }
	6.25%, 9.688%  { transform: translateX(60px); opacity: 1; }
	10.938%, 100%   { transform: translateX(60px); opacity: 0; }
}
@keyframes fh-caret-peer {
	0%, 2.812%     { transform: translateX(0); opacity: 0; }
	3.125%         { transform: translateX(0); opacity: 1; }
	6.25%, 9.688%  { transform: translateX(40px); opacity: 1; }
	10.938%, 100%   { transform: translateX(40px); opacity: 0; }
}

/* project tracking: a card moves to the done column */
@keyframes fh-pt-move {
	0%, 3.125%       { transform: translate(0, 0) scale(1); opacity: 1; }
	4.062%           { transform: translate(0, -5px) scale(1.08); opacity: 1; }
	6.875%           { transform: translate(84px, 21px) scale(1.08); opacity: 1; }
	7.812%, 50%   { transform: translate(84px, 26px) scale(1); opacity: 1; }
	50.938%          { transform: translate(84px, 26px) scale(1); opacity: 0; }
	51%, 52.5% { transform: translate(0, 0) scale(1); opacity: 0; }
	53.75%, 100%    { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes fh-pt-shift {
	0%, 6.875%     { transform: translateY(0); }
	8.75%, 50.938% { transform: translateY(-26px); }
	52.5%, 100%  { transform: translateY(0); }
}
@keyframes fh-pt-done {
	0%, 7.812%     { opacity: 0; }
	8.75%, 50% { opacity: 1; }
	50.938%, 100%  { opacity: 0; }
}

/* crm: the deal moves through its stages */
@keyframes fh-crm-progress {
	0%, 3.125%     { transform: scaleX(0.3333); }
	4.375%, 5%  { transform: scaleX(0.6667); }
	6.25%, 50% { transform: scaleX(1); }
	51.875%, 100%  { transform: scaleX(0.3333); }
}

/* databases: focus walks across a new row as it's filled in */
@keyframes fh-cell {
	0%, 2.5%     { transform: translateX(0); opacity: 0; }
	3.125%, 6.25%  { transform: translateX(0); opacity: 1; }
	7.031%, 7.812% { transform: translateX(43px); opacity: 1; }
	8.594%, 10.625% { transform: translateX(86px); opacity: 1; }
	11.562%, 100%   { transform: translateX(86px); opacity: 0; }
}

/* file transfers: ring fills 0.9s to 2.4s, then a check */
@keyframes fh-file-progress {
	0%, 2.812%     { stroke-dashoffset: 68; opacity: 1; }
	7.5%, 50% { stroke-dashoffset: 0; opacity: 1; }
	51.25%        { stroke-dashoffset: 0; opacity: 0; }
	51.313%       { stroke-dashoffset: 68; opacity: 0; }
	53.125%, 100%  { stroke-dashoffset: 68; opacity: 1; }
}
@keyframes fh-file-arrow {
	0%, 3.125%     { transform: translateY(0) scale(1); opacity: 1; }
	4.688%         { transform: translateY(-4px) scale(1); opacity: 1; }
	6.25%         { transform: translateY(0) scale(1); opacity: 1; }
	7.187%         { transform: translateY(-3px) scale(1); opacity: 1; }
	7.812%, 51.562% { transform: translateY(-6px) scale(0.6); opacity: 0; }
	53.125%, 100%  { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes fh-file-disk {
	0%, 7.5%     { transform: scale(0.5); opacity: 0; }
	8.438%         { transform: scale(1.06); opacity: 1; }
	9.062%, 50% { transform: scale(1); opacity: 1; }
	51.25%, 100%  { transform: scale(0.8); opacity: 0; }
}

/* share links: pointer clicks copy at 1.6s */
@keyframes fh-pointer {
	0%, 2.812%     { transform: translate(28px, 30px) scale(1); opacity: 0; }
	3.438%         { transform: translate(22px, 24px) scale(1); opacity: 1; }
	4.688%         { transform: translate(0, 0) scale(1); opacity: 1; }
	5%         { transform: translate(0, 0) scale(0.86); opacity: 1; }
	5.469%, 8.438% { transform: translate(0, 0) scale(1); opacity: 1; }
	9.688%, 100%   { transform: translate(14px, 18px) scale(1); opacity: 0; }
}
@keyframes fh-press {
	0%, 4.688%     { transform: scale(1); }
	5%         { transform: scale(0.86); }
	5.625%, 100%   { transform: scale(1); }
}

/* review: scrub to a moment, drop a comment pin */
@keyframes fh-scrub {
	0%, 2.812%     { transform: translateX(0); }
	4.375%, 50% { transform: translateX(36px); }
	51.875%, 100%  { transform: translateX(0); }
}
@keyframes fh-scrub-fill {
	0%, 2.812%     { transform: scaleX(1); }
	4.375%, 50% { transform: scaleX(1.6); }
	51.875%, 100%  { transform: scaleX(1); }
}
@keyframes fh-drop {					/* drops 1.3s to 1.85s */
	0%, 4.062%      { transform: translateY(-14px); opacity: 0; }
	5.156%         { transform: translateY(1.5px); opacity: 1; }
	5.781%, 50% { transform: translateY(0); opacity: 1; }
	51.562%, 100%   { transform: translateY(-8px); opacity: 0; }
}

/* teammates: each cursor glides to a card just before it lifts,
   clicks or drags what changes, moves to the neighbouring card,
   then drifts back. Times are from 1s before their first card. */
@keyframes fh-cur-0 {	/* Ana: Documents then To-do lists */
	0%       { transform: translate(0px, 0px) scale(1); }
	0.938%    { transform: translate(0px, 0px) scale(1); }
	5.469%   { transform: translate(-131px, -69px) scale(1); }
	6.094%   { transform: translate(-131px, -69px) scale(1); }
	6.25%      { transform: translate(-131px, -69px) scale(0.85); }
	6.625%   { transform: translate(-131px, -69px) scale(1); }
	13.75%    { transform: translate(-131px, -69px) scale(1); }
	17.969%   { transform: translate(139px, -82px) scale(1); }
	19.531%   { transform: translate(139px, -82px) scale(1); }
	19.688%    { transform: translate(139px, -82px) scale(0.85); }
	20.062%   { transform: translate(139px, -82px) scale(1); }
	21.25%    { transform: translate(139px, -82px) scale(1); }
	21.875%      { transform: translate(139px, -53px) scale(1); }
	22.031%   { transform: translate(139px, -53px) scale(1); }
	22.188%    { transform: translate(139px, -53px) scale(0.85); }
	22.562%   { transform: translate(139px, -53px) scale(1); }
	26.25%    { transform: translate(139px, -53px) scale(1); }
	30.625%    { transform: translate(0px, 0px) scale(1); }
	100%     { transform: translate(0px, 0px) scale(1); }
}

@keyframes fh-cur-1 {	/* Ben: Project tracking then CRM */
	0%       { transform: translate(0px, 0px) scale(1); }
	0.938%    { transform: translate(0px, 0px) scale(1); }
	5.469%   { transform: translate(138px, -162px) scale(1); }
	6.094%   { transform: translate(138px, -162px) scale(1); }
	6.25%      { transform: translate(138px, -162px) scale(0.88); }
	7.187%    { transform: translate(138px, -168px) scale(0.88); }
	10%    { transform: translate(225px, -141px) scale(0.88); }
	10.938%    { transform: translate(225px, -135px) scale(0.88); }
	11.25%    { transform: translate(225px, -135px) scale(1); }
	13.75%    { transform: translate(225px, -135px) scale(1); }
	17.969%   { transform: translate(227px, 100px) scale(1); }
	21.562%    { transform: translate(227px, 100px) scale(1); }
	21.719%   { transform: translate(227px, 100px) scale(0.85); }
	22.094%   { transform: translate(227px, 100px) scale(1); }
	26.25%    { transform: translate(227px, 100px) scale(1); }
	30.625%    { transform: translate(0px, 0px) scale(1); }
	100%     { transform: translate(0px, 0px) scale(1); }
}

@keyframes fh-cur-1-doc {	/* Ben: helps Ana on Documents */
	0%       { transform: translate(0px, 0px) scale(1); }
	0.625%    { transform: translate(0px, 0px) scale(1); }
	5.938%    { transform: translate(-358px, -230px) scale(1); }
	6.25%      { transform: translate(-358px, -230px) scale(0.85); }
	6.625%   { transform: translate(-358px, -230px) scale(1); }
	13.75%    { transform: translate(-358px, -230px) scale(1); }
	18.438%    { transform: translate(0px, 0px) scale(1); }
	100%     { transform: translate(0px, 0px) scale(1); }
}

@keyframes fh-cur-2 {	/* Kevin: Databases then File transfers */
	0%       { transform: translate(0px, 0px) scale(1); }
	0.938%    { transform: translate(0px, 0px) scale(1); }
	5.469%   { transform: translate(133px, 140px) scale(1); }
	6.094%   { transform: translate(133px, 140px) scale(1); }
	6.25%      { transform: translate(133px, 140px) scale(0.85); }
	6.625%   { transform: translate(133px, 140px) scale(1); }
	9.375%      { transform: translate(133px, 140px) scale(1); }
	10.156%   { transform: translate(177px, 140px) scale(1); }
	10.312%    { transform: translate(177px, 140px) scale(0.85); }
	10.688%   { transform: translate(177px, 140px) scale(1); }
	10.938%    { transform: translate(177px, 140px) scale(1); }
	11.719%   { transform: translate(222px, 140px) scale(1); }
	11.875%    { transform: translate(222px, 140px) scale(0.85); }
	12.25%   { transform: translate(222px, 140px) scale(1); }
	13.75%    { transform: translate(222px, 140px) scale(1); }
	17.969%   { transform: translate(-147px, 104px) scale(1); }
	18.438%    { transform: translate(-147px, 104px) scale(1); }
	18.594%   { transform: translate(-147px, 104px) scale(0.85); }
	18.969%   { transform: translate(-147px, 104px) scale(1); }
	26.25%    { transform: translate(-147px, 104px) scale(1); }
	30.625%    { transform: translate(0px, 0px) scale(1); }
	100%     { transform: translate(0px, 0px) scale(1); }
}

@keyframes fh-cur-3 {	/* Jen: Share links then Review & approval */
	0%       { transform: translate(0px, 0px) scale(1); }
	0.938%    { transform: translate(0px, 0px) scale(1); }
	5.469%   { transform: translate(-77px, 119px) scale(1); }
	7.656%   { transform: translate(-87px, 96px) scale(1); }
	8.125%    { transform: translate(-87px, 96px) scale(0.85); }
	8.5%   { transform: translate(-87px, 96px) scale(1); }
	13.75%    { transform: translate(-87px, 96px) scale(1); }
	17.969%   { transform: translate(-99px, -191px) scale(1); }
	19.688%    { transform: translate(-99px, -191px) scale(1); }
	20.781%   { transform: translate(-99px, -175px) scale(1); }
	20.938%    { transform: translate(-99px, -175px) scale(0.85); }
	21.312%   { transform: translate(-99px, -175px) scale(1); }
	26.25%    { transform: translate(-99px, -175px) scale(1); }
	30.625%    { transform: translate(0px, 0px) scale(1); }
	100%     { transform: translate(0px, 0px) scale(1); }
}