/*
 * ---------------------------------------------------------------------------
 * Theme additions — loaded AFTER assets/css/design.css
 * ---------------------------------------------------------------------------
 * This is the documented escape hatch from style.css: genuinely new rules that
 * do not exist in the signed-off stylesheet live here, so design.css stays a
 * byte-for-byte export and remains re-exportable.
 *
 * Currently contains one component: the hero build animation.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
 * Hero build animation
 *
 * A single inline SVG driven entirely by CSS keyframes. No animation library,
 * no video, no runtime JSON. Everything animates on `opacity` and `transform`
 * only, so it stays on the compositor and never triggers layout.
 *
 * One shared 13s timeline. Each phase owns a slice of it:
 *
 *   0  –  8%   frame draws in            (0.00 – 1.04s)
 *   8  – 20%   wireframe skeleton        (1.04 – 2.60s)
 *  20  – 36%   screen 1  login           (2.60 – 4.68s)
 *  36  – 52%   screen 2  dashboard       (4.68 – 6.76s)
 *  52  – 68%   screen 3  e-commerce      (6.76 – 8.84s)
 *  68  – 84%   screen 4  booking         (8.84 – 10.92s)
 *  84  –100%   "Your App is Ready"       (10.92 – 13.0s)
 *
 * Colours come from the design tokens in design.css (--primary, --border,
 * --card, --muted-foreground), so the animation re-themes automatically if the
 * palette is ever revised.
 * ======================================================================== */

.jma-anim {
	--jma-dur: 13s;
	--jma-ease: cubic-bezier(0.22, 1, 0.36, 1);

	width: 100%;
	max-width: 640px;
	height: auto;
	display: block;
	overflow: visible;

	/*
	 * The scene is decorative. Without this, dragging across the hero selects
	 * the SVG <text> nodes and paints them with the browser's selection
	 * highlight, which reads as a rendering fault.
	 */
	-webkit-user-select: none;
	user-select: none;
}

/* Every animated part shares the same duration and loop so the phases stay in
   lockstep. Individual keyframe blocks below carve out their own window. */
.jma-anim [class*='jma-a-'] {
	animation-duration: var(--jma-dur);
	animation-iteration-count: infinite;
	animation-timing-function: var(--jma-ease);
	animation-fill-mode: both;
}

/* --------------------------------------------------------------- Chrome --- */

/*
 * fill-box keeps these two independent of where the wrapper transforms place
 * them — the origin is each element's own centre, not a fixed viewBox point.
 */
.jma-a-frame {
	animation-name: jma-frame-in;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes jma-frame-in {
	0% { opacity: 0; transform: scale(0.94) translateY(14px); }
	9%, 96% { opacity: 1; transform: none; }
	100% { opacity: 1; transform: none; }
}

/* Lime bloom behind the phone — breathes once per phase change. */
.jma-a-bloom {
	animation-name: jma-bloom;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes jma-bloom {
	0% { opacity: 0; transform: scale(0.7); }
	10% { opacity: 0.55; transform: scale(1); }
	36%, 52%, 68% { opacity: 0.4; transform: scale(0.97); }
	44%, 60%, 76% { opacity: 0.55; transform: scale(1.02); }
	86% { opacity: 0.9; transform: scale(1.12); }
	100% { opacity: 0.5; transform: scale(1); }
}

/* Build-progress bar across the top of the phone: 0 -> 100% over the timeline. */
.jma-a-progress {
	animation-name: jma-progress;
	transform-box: fill-box;
	transform-origin: left center;
}

@keyframes jma-progress {
	0% { transform: scaleX(0); }
	8% { transform: scaleX(0.08); }
	20% { transform: scaleX(0.2); }
	36% { transform: scaleX(0.36); }
	52% { transform: scaleX(0.52); }
	68% { transform: scaleX(0.68); }
	84%, 100% { transform: scaleX(1); }
}

/* Satellite cards either side — add width and depth to the composition. */
.jma-a-sat-l { animation-name: jma-sat-l; }
.jma-a-sat-r { animation-name: jma-sat-r; }

@keyframes jma-sat-l {
	0%, 10% { opacity: 0; transform: translate(18px, 10px); }
	20%, 92% { opacity: 1; transform: none; }
	100% { opacity: 0.9; transform: translateY(-3px); }
}

@keyframes jma-sat-r {
	0%, 14% { opacity: 0; transform: translate(-18px, 12px); }
	24%, 92% { opacity: 1; transform: none; }
	100% { opacity: 0.9; transform: translateY(3px); }
}

/* --------------------------------------------------------------- Screens --- */

/* Shared: slide in from the right, hold, slide out to the left. */
.jma-a-s1 { animation-name: jma-s1; }
.jma-a-s2 { animation-name: jma-s2; }
.jma-a-s3 { animation-name: jma-s3; }
.jma-a-s4 { animation-name: jma-s4; }
.jma-a-s5 { animation-name: jma-s5; }
.jma-a-s6 { animation-name: jma-s6; }

@keyframes jma-s1 {
	0%, 7% { opacity: 0; transform: translateX(10px); }
	10%, 17% { opacity: 1; transform: none; }
	20%, 100% { opacity: 0; transform: translateX(-10px); }
}

@keyframes jma-s2 {
	0%, 19% { opacity: 0; transform: translateX(14px); }
	23%, 33% { opacity: 1; transform: none; }
	36%, 100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes jma-s3 {
	0%, 35% { opacity: 0; transform: translateX(14px); }
	39%, 49% { opacity: 1; transform: none; }
	52%, 100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes jma-s4 {
	0%, 51% { opacity: 0; transform: translateX(14px); }
	55%, 65% { opacity: 1; transform: none; }
	68%, 100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes jma-s5 {
	0%, 67% { opacity: 0; transform: translateX(14px); }
	71%, 81% { opacity: 1; transform: none; }
	84%, 100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes jma-s6 {
	0%, 83% { opacity: 0; transform: scale(0.96); }
	88%, 97% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: scale(1.02); }
}

/* Bottom tab bar: present from the dashboard through booking. */
.jma-a-tabs { animation-name: jma-tabs; }

@keyframes jma-tabs {
	0%, 35% { opacity: 0; }
	39%, 81% { opacity: 1; }
	84%, 100% { opacity: 0; }
}

/* ------------------------------------------------- Skeleton build-in ------- */

/* Wireframe blocks drop in one after another — the "assembly" beat. */
.jma-a-blk { animation-name: jma-blk; transform-box: fill-box; transform-origin: center; }
.jma-a-blk--1 { animation-delay: calc(var(--jma-dur) * 0.005); }
.jma-a-blk--2 { animation-delay: calc(var(--jma-dur) * 0.02); }
.jma-a-blk--3 { animation-delay: calc(var(--jma-dur) * 0.035); }
.jma-a-blk--4 { animation-delay: calc(var(--jma-dur) * 0.05); }

@keyframes jma-blk {
	0%, 8% { opacity: 0; transform: translateY(10px) scaleY(0.85); }
	12%, 17% { opacity: 1; transform: none; }
	20%, 100% { opacity: 0; transform: none; }
}

/* --------------------------------------------------- Micro-interactions --- */

/*
 * Cursor dot: travels to each tap target, dips on contact, moves on.
 *
 * Coordinates are in the outer viewBox space (560 x 620), matching the tap
 * targets in the SVG:
 *   login "Sign in"      280, 308
 *   dashboard list row   280, 332
 *   product card         232, 182
 *   calendar date        284, 206
 *   "Confirm booking"    280, 374
 */
.jma-a-cursor { animation-name: jma-cursor; }

@keyframes jma-cursor {
	0%, 22% { opacity: 0; transform: translate(300px, 380px); }
	25% { opacity: 1; transform: translate(292px, 330px); }
	29% { opacity: 1; transform: translate(280px, 308px); }
	30.5%, 32% { opacity: 1; transform: translate(280px, 305px); }
	34% { opacity: 1; transform: translate(280px, 308px); }
	40% { opacity: 1; transform: translate(300px, 250px); }
	45% { opacity: 1; transform: translate(280px, 332px); }
	46.5%, 47.5% { opacity: 1; transform: translate(280px, 329px); }
	56% { opacity: 1; transform: translate(232px, 182px); }
	60%, 62% { opacity: 1; transform: translate(232px, 179px); }
	70% { opacity: 1; transform: translate(284px, 206px); }
	75%, 77% { opacity: 1; transform: translate(284px, 203px); }
	80% { opacity: 1; transform: translate(280px, 374px); }
	81.5%, 82.5% { opacity: 1; transform: translate(280px, 371px); }
	84% { opacity: 0; transform: translate(280px, 382px); }
	100% { opacity: 0; transform: translate(300px, 380px); }
}

/* Ripple ring, fired at each of the five taps. */
.jma-a-ripple { animation-name: jma-ripple; transform-box: fill-box; transform-origin: center; }

@keyframes jma-ripple {
	0%, 30% { opacity: 0; transform: scale(0.3); }
	31% { opacity: 0.7; transform: scale(0.45); }
	34% { opacity: 0; transform: scale(1.6); }
	45.5% { opacity: 0; transform: scale(0.3); }
	46.5% { opacity: 0.7; transform: scale(0.45); }
	49% { opacity: 0; transform: scale(1.6); }
	60% { opacity: 0; transform: scale(0.3); }
	61% { opacity: 0.7; transform: scale(0.45); }
	64% { opacity: 0; transform: scale(1.6); }
	75% { opacity: 0; transform: scale(0.3); }
	76% { opacity: 0.7; transform: scale(0.45); }
	79% { opacity: 0; transform: scale(1.6); }
	80.5% { opacity: 0; transform: scale(0.3); }
	81.5% { opacity: 0.7; transform: scale(0.45); }
	84% { opacity: 0; transform: scale(1.6); }
	100% { opacity: 0; transform: scale(0.3); }
}

/*
 * Primary button press. The class sits on both the login button and the
 * booking Confirm button; each is only on screen during its own phase, so the
 * other press is never seen.
 */
.jma-a-press { animation-name: jma-press; transform-box: fill-box; transform-origin: center; }

@keyframes jma-press {
	0%, 30% { transform: none; }
	31% { transform: scale(0.96); }
	34%, 80.5% { transform: none; }
	81.5% { transform: scale(0.96); }
	84%, 100% { transform: none; }
}

/* Dashboard chart bars grow from the baseline. */
.jma-a-bar { animation-name: jma-bar; transform-box: fill-box; transform-origin: center bottom; }
.jma-a-bar--1 { animation-delay: calc(var(--jma-dur) * 0.005); }
.jma-a-bar--2 { animation-delay: calc(var(--jma-dur) * 0.015); }
.jma-a-bar--3 { animation-delay: calc(var(--jma-dur) * 0.025); }
.jma-a-bar--4 { animation-delay: calc(var(--jma-dur) * 0.035); }
.jma-a-bar--5 { animation-delay: calc(var(--jma-dur) * 0.045); }

@keyframes jma-bar {
	0%, 37% { transform: scaleY(0); }
	44%, 50% { transform: scaleY(1); }
	52%, 100% { transform: scaleY(1); }
}

/* Sparkline draws itself. */
.jma-a-spark {
	animation-name: jma-spark;
	stroke-dasharray: 190;
}

@keyframes jma-spark {
	0%, 38% { stroke-dashoffset: 190; }
	48%, 100% { stroke-dashoffset: 0; }
}

/* Product card lifts on "hover". */
.jma-a-lift { animation-name: jma-lift; }

@keyframes jma-lift {
	0%, 56% { transform: none; }
	60%, 65% { transform: translateY(-5px); }
	68%, 100% { transform: none; }
}

/* Basket badge pops when the item is added. */
.jma-a-badge { animation-name: jma-badge; transform-box: fill-box; transform-origin: center; }

@keyframes jma-badge {
	0%, 60% { opacity: 0; transform: scale(0.2); }
	63% { opacity: 1; transform: scale(1.25); }
	66%, 67% { opacity: 1; transform: scale(1); }
	68%, 100% { opacity: 0; transform: scale(1); }
}

/* Calendar date selects. */
.jma-a-date { animation-name: jma-date; transform-box: fill-box; transform-origin: center; }

@keyframes jma-date {
	0%, 75% { opacity: 0; transform: scale(0.5); }
	77%, 81% { opacity: 1; transform: scale(1); }
	84%, 100% { opacity: 0; transform: scale(1); }
}

/* Final tick draws, then the wordmark settles under it. */
.jma-a-tick {
	animation-name: jma-tick;
	stroke-dasharray: 48;
}

@keyframes jma-tick {
	0%, 86% { stroke-dashoffset: 48; }
	91%, 100% { stroke-dashoffset: 0; }
}

.jma-a-ready-text { animation-name: jma-ready-text; }

@keyframes jma-ready-text {
	0%, 88% { opacity: 0; transform: translateY(8px); }
	93%, 97% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: none; }
}

/* Step caption under the phone. */
.jma-a-step { animation-name: jma-step; }
.jma-a-step--1 { }
.jma-a-step--2 { }
.jma-a-step--3 { }
.jma-a-step--4 { }
.jma-a-step--5 { }

@keyframes jma-step {
	0%, 100% { opacity: 0; }
}

.jma-a-cap1 { animation-name: jma-cap1; }
.jma-a-cap2 { animation-name: jma-cap2; }
.jma-a-cap3 { animation-name: jma-cap3; }
.jma-a-cap4 { animation-name: jma-cap4; }
.jma-a-cap5 { animation-name: jma-cap5; }

@keyframes jma-cap1 { 0%, 8% { opacity: 0; } 11%, 17% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes jma-cap2 { 0%, 20% { opacity: 0; } 23%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes jma-cap3 { 0%, 36% { opacity: 0; } 39%, 49% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes jma-cap4 { 0%, 52% { opacity: 0; } 55%, 65% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes jma-cap5 { 0%, 68% { opacity: 0; } 71%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------ Controls --- */

/*
 * Paused by JS when the hero scrolls out of view or the tab is hidden, so the
 * animation costs nothing while it is not being looked at.
 */
.jma-anim.is-paused [class*='jma-a-'] {
	animation-play-state: paused;
}

/*
 * Reduced motion: hold the finished "Your App is Ready" frame. The visitor
 * still gets the message, with no movement at all.
 *
 * design.css ships no reduced-motion handling, so this is scoped strictly to
 * this component and touches nothing in the signed-off stylesheet.
 */
@media (prefers-reduced-motion: reduce) {
	/*
	 * `animate-float` comes from design.css, which ships no reduced-motion
	 * guard of its own, so the gentle bob is stopped here too — otherwise the
	 * scene would still drift for a visitor who asked for stillness.
	 */
	.jma-anim,
	.jma-anim [class*='jma-a-'] {
		animation: none !important;
	}

	.jma-anim .jma-a-s1,
	.jma-anim .jma-a-s2,
	.jma-anim .jma-a-s3,
	.jma-anim .jma-a-s4,
	.jma-anim .jma-a-s5,
	.jma-anim .jma-a-cursor,
	.jma-anim .jma-a-ripple,
	.jma-anim .jma-a-badge,
	.jma-anim .jma-a-date,
	.jma-anim [class*='jma-a-cap'] {
		opacity: 0;
	}

	.jma-anim .jma-a-s6,
	.jma-anim .jma-a-ready-text,
	.jma-anim .jma-a-sat-l,
	.jma-anim .jma-a-sat-r {
		opacity: 1;
	}

	.jma-anim .jma-a-tick {
		stroke-dashoffset: 0;
	}

	.jma-anim .jma-a-progress {
		transform: scaleX(1);
	}

	.jma-anim .jma-a-cap5 {
		opacity: 1;
	}
}