/* ==========================================================================
   GrowthStudioz, "How we do it" campfire

   A fire, and beside it one step at a time. The band is held while the reader
   scrolls; at each step the log jumps, flips and lands in the flames, and the
   fire grows (Adarsh, 1st October 2026, Performance Marketing).

   Off the Figma inspector:
     desktop  band #F1F1F1, edge to edge; 38 above the heading, 67 under the
              fire
              heading: the section title, 64px in a 70px line, #0E0E0E
              line: DM Sans 400, 16px in a 21px line, black; 16 under the
              heading
              cue: a #DDDDDD pill, 129 x 28, padding 6 / 16; "SCROLL" DM Sans
              700, 12px, 56% tracking; 16 under the line
              fire: 301.73 x 240.86, 106 under the cue (91 in the frame;
              his call, for room); 192.27 to the step
              step: 300.95 wide; log 136 wide; name 38.46px in a 50px line,
              the number 400 and the word 500; text 20px in a 26px line
     phone    no band and no line or cue; heading 32px, 0 tracking, on the
              left; fire 143.73 x 114.74, 74.63 under the heading, 26 to the
              step; step 187.78 x 154.31, its log, name and text 14.23 apart;
              log 85 x 59; name 24px in a 31px line; text 16px in a 21px line

   TWO STATES. As shipped, with no script or under reduced motion, the band is
   the fire and all the steps listed in order. The script adds `is-live`, and
   only then are the steps laid over one another and driven by the scroll.

   All the motion is CSS, driven by two numbers the script writes on the
   section: --gs-fire-p, 0 to 1 through the whole held sequence, and
   --gs-fire-k, 0 to 1, how much of the fuel is on the fire. Each step works
   out its own share of the sequence from --gs-fire-p and its place in the
   list (--i).
   ========================================================================== */

.gs-fire {
	/* Screens of scroll the band is held for, per step. Read by the script. */
	--gs-fire-hold: 0.55;
	/* How much larger the fire is once every log is on it: the whole artwork
	   when it is one picture, GIF or video, and the flame alone when the
	   drawing could be taken apart (see inc/fire.php). */
	--gs-fire-max: 1.3;
	--gs-fire-flame-max: 1.6;
	/* How high the log jumps above the straight line to the fire. 110 clears
	   the cue above the fire by about 28px at the top of the jump; 140
	   brushed it. */
	--gs-fire-jump: 6.875rem;                      /* 110px */

	/* Full bleed, the same three-part fix the creatives band uses: negative
	   margin to cancel main's gutter, and the max-width cap lifted. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	/* 108.5 under the band above, which brings 40 of it; the sitewide 80 to
	   the band below, which brings the other 40. */
	margin-block: 4.28125rem var(--gs-section-pad);
	/* 38 above the heading; 61 under the step's text, which ends 6 below the
	   fire, so the band closes 67 under the fire as the frame has it. */
	padding: 2.375rem var(--gs-gutter-now) 3.8125rem;
	background: #F1F1F1;
}

/* --- heading, line, cue --------------------------------------------------- */

.gs-fire__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;                                     /* 16px */
	text-align: center;
}

.gs-fire__title {
	margin: 0;
	color: #0E0E0E;
	line-height: 1.09375;                          /* 70 over 64 */
}

.gs-fire__sub {
	margin: 0;
	max-width: none;
	color: #000;
	font-size: 1rem;                               /* 16px */
	line-height: 1.3125;                           /* 21 over 16 */
}

/* The cue only makes sense while scrolling drives the band. */
.gs-fire__chip {
	display: none;
	align-items: center;
	gap: 0.3125rem;                                /* 5px */
	margin: 0;
	max-width: none;
	padding: 0.375rem 1rem;                        /* 6 / 16 */
	border-radius: 6.0625rem;                      /* 97px */
	background: #DDDDDD;
	color: #000;
	font-size: 0.75rem;                            /* 12px */
	font-weight: var(--gs-weight-bold);
	line-height: 1.3333;                           /* 16 over 12 */
	letter-spacing: 0.56em;
	text-transform: uppercase;
}

.gs-fire.is-live .gs-fire__chip {
	display: inline-flex;
}

/* Tracking is added after the last letter too. Taken back, so the pill is
   the frame's 129 wide and the word sits level with the arrow. */
.gs-fire__chip-text {
	margin-inline-end: -0.56em;
}

/* The arrow bobs, pointing the way (Adarsh). Transform only. */
.gs-fire__chip-icon {
	flex: none;
	animation: gs-fire-bob 1.1s ease-in-out infinite alternate;
}

.gs-fire.is-away .gs-fire__chip-icon {
	animation-play-state: paused;
}

@keyframes gs-fire-bob {
	from { transform: translateY(-2px); }
	to   { transform: translateY(2.5px); }
}

/* --- fire and steps ------------------------------------------------------- */

.gs-fire__stage {
	/* The log's flight is measured from this box. */
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/* 192.27 at the design's 1440, closing up on a narrower screen. */
	gap: clamp(1.5rem, 13.35vw, 12.016875rem);
	/* 106, not the frame's 91 (Adarsh, 1st October 2026): the flame grows
	   upward and the log jumps over it, and both want the room. */
	margin-block-start: 6.625rem;                  /* 106px */
}

.gs-fire__camp {
	flex: 0 1 18.858125rem;                        /* 301.73px */
	aspect-ratio: 301.73 / 240.86;
	min-width: 0;
}

.gs-fire__art {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	/* A GIF or video of flames arrives on a white ground more often than a
	   clear one; multiplied, white takes the band's own colour. A drawing on
	   a clear ground is unchanged. */
	mix-blend-mode: multiply;
	/* The fire grows from its base. --gs-fire-k is how much of the fuel is
	   on, 0 to 1, written by the script. */
	transform-origin: 50% 100%;
	scale: calc(1 + (var(--gs-fire-max) - 1) * var(--gs-fire-k, 0));
}

/* --- the drawing in two layers --------------------------------------------
   The logs stay still. The flame sits over them in its own box, placed and
   sized inline from where it is in the drawing, and does three things, each
   on its own box so the transforms do not overwrite one another:

     .gs-fire__flame        grows as the logs land, from the flame's base
     .gs-fire__flame-sway   leans a little one way and the other
     .gs-fire__flame-art    flickers: squashes, stretches and shears

   The sway and the flicker run on loops of different lengths (2.9s and 1.7s),
   so the two only fall into step every 49 seconds and the flame never
   visibly repeats. Both move transform and opacity only, which the browser
   animates without re-drawing the flame or its glow. */

.gs-fire__camp--split {
	position: relative;
}

.gs-fire__logs {
	display: block;
	width: 100%;
	height: 100%;
}

.gs-fire__flame,
.gs-fire__flame-sway,
.gs-fire__flame-art {
	/* The flame's base: the middle across, and --gs-fire-oy down its box. */
	transform-origin: 50% var(--gs-fire-oy, 84%);
}

.gs-fire__flame {
	position: absolute;
	scale: calc(1 + (var(--gs-fire-flame-max) - 1) * var(--gs-fire-k, 0));
}

.gs-fire__flame-sway {
	width: 100%;
	height: 100%;
	animation: gs-fire-sway 2.9s ease-in-out infinite alternate;
}

.gs-fire__flame-art {
	display: block;
	width: 100%;
	height: 100%;
	/* The glow reaches the edge of this box by design; nothing may trim it. */
	overflow: visible;
	animation: gs-fire-flicker 1.7s ease-in-out infinite;
}

/* A flame drawn frame by frame flickers by itself; the squash and stretch
   on top would shake it (Adarsh, 7th October 2026). It still sways and grows. */
.gs-fire__flame-art--frames {
	animation: none;
}

/* Off screen there is nothing to see, so nothing runs (the script adds
   is-away). With no script the flame simply keeps moving. */
.gs-fire.is-away .gs-fire__flame-sway,
.gs-fire.is-away .gs-fire__flame-art {
	animation-play-state: paused;
}

@keyframes gs-fire-sway {
	from { transform: rotate(-2.5deg); }
	to   { transform: rotate(3deg); }
}

/* Uneven on purpose, in both the values and where the stops fall: a flame
   that pulses evenly reads as a blinking light. */
@keyframes gs-fire-flicker {
	0%   { transform: scale(1, 1) skewX(0deg);          opacity: 1; }
	11%  { transform: scale(0.96, 1.07) skewX(-2.5deg); opacity: 0.95; }
	24%  { transform: scale(1.04, 0.95) skewX(1.5deg);  opacity: 1; }
	39%  { transform: scale(0.97, 1.1) skewX(3deg);     opacity: 0.92; }
	52%  { transform: scale(1.03, 0.98) skewX(-1deg);   opacity: 1; }
	66%  { transform: scale(0.95, 1.06) skewX(-3deg);   opacity: 0.94; }
	81%  { transform: scale(1.02, 1.01) skewX(1deg);    opacity: 1; }
	100% { transform: scale(1, 1) skewX(0deg);          opacity: 1; }
}

.gs-fire__steps {
	flex: 0 1 18.809375rem;                        /* 300.95px */
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
	margin: 0;
	/* The frame sets the step 10 below the top of the fire. */
	margin-block-start: 0.625rem;
	padding: 0;
	list-style: none;
}

.gs-fire__step {
	max-width: none;
}

/* The log's place. The log inside is what moves. */
.gs-fire__log {
	display: block;
	width: 8.5125rem;                              /* 136.2px */
	aspect-ratio: 85 / 59;
	margin-block-end: 1.375rem;                    /* 22px */
}

/* Listed, a log over every step is clutter; the first one stands for all. */
.gs-fire:not(.is-live) .gs-fire__step:not(:first-child) .gs-fire__log {
	display: none;
}

.gs-fire__log-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.gs-fire__name {
	display: flex;
	gap: 0.45em;
	margin: 0 0 1.1875rem;                         /* 19px */
	max-width: none;
	color: #000;
	font-size: 2.40375rem;                         /* 38.46px */
	font-weight: var(--gs-weight-medium);
	line-height: 1.3;                              /* 50 over 38.46 */
	letter-spacing: 0;
}

.gs-fire__num {
	font-weight: var(--gs-weight-regular);
}

.gs-fire__text {
	margin: 0;
	max-width: none;
	color: #000;
	font-size: 1.25rem;                            /* 20px */
	line-height: 1.3;                              /* 26 over 20 */
}

/* --- live: one step at a time, driven by the scroll ------------------------ */

/* All the steps in one cell, so the column is as tall as the tallest and
   nothing moves when one gives way to the next. */
.gs-fire.is-live .gs-fire__steps {
	display: grid;
	gap: 0;
}

.gs-fire.is-live .gs-fire__step {
	grid-area: 1 / 1;

	/* This step's own share of the sequence, 0 to 1. */
	--t: clamp(0, calc(var(--gs-fire-p, 0) * var(--gs-fire-n) - var(--i)), 1);
	/* It arrives over the first 15% of its share and leaves over the last
	   12%. Between the two it is simply there to be read. */
	--in: clamp(0, calc(var(--t) / 0.15), 1);
	--out: clamp(0, calc((1 - var(--t)) / 0.12), 1);

	opacity: calc(var(--in) * var(--out));
	translate: 0 calc((1 - var(--in)) * 0.75rem);
	pointer-events: none;
}

/* The first step is there from the start, and the last one stays. */
.gs-fire.is-live .gs-fire__step:first-child {
	--in: 1;
}

.gs-fire.is-live .gs-fire__step:last-child {
	--out: 1;
}

/*
 * The log: from 45% to 85% of its step's share it jumps to the fire.
 *
 * --dx and --dy are the straight line from the log's place to the flames; the
 * script measures them, because they depend on the layout. On top of that
 * line it rises and falls by --gs-fire-jump (4f(1-f) is 0 at both ends and 1
 * in the middle), turns once right over, shrinks to the size of the logs in
 * the fire, and is gone as it lands.
 */
.gs-fire.is-live .gs-fire__log-img {
	--f: clamp(0, calc((var(--t) - 0.45) / 0.4), 1);

	translate:
		calc(var(--dx, 0px) * var(--f))
		calc(var(--dy, 0px) * var(--f) - var(--gs-fire-jump) * 4 * var(--f) * (1 - var(--f)));
	rotate: calc(var(--f) * -360deg);
	scale: calc(1 - 0.45 * var(--f));
	opacity: clamp(0, calc((1 - var(--f)) / 0.1), 1);
	will-change: transform, opacity;
}

/* --- empty (editors only) ------------------------------------------------- */

.gs-fire--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-fire--empty p {
	margin: 0;
	max-width: none;
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.gs-fire {
		--gs-fire-hold: 0.5;
		--gs-fire-jump: 4.375rem;                  /* 70px */
		/* A whole picture has 16 of gutter on one side and 26 to the step on
		   the other. At 1.3 it ran off the screen and into the text; 1.18
		   grows 13 each way and stays clear of both. A flame on its own
		   grows upward from the middle and needs no such limit. */
		--gs-fire-max: 1.18;

		/* No band on the phone: white, like its neighbours. 32 under the
		   band above, which brings 22.5 of it. */
		margin-block: 0;
		/* 98 from the step's text to the heading below, which brings 22.5. */
		padding-block: calc(2rem - var(--gs-section-pad)) calc(var(--gs-section-pad) + 3.3125rem);
		background: none;
	}

	.gs-fire__head {
		align-items: flex-start;
		text-align: start;
	}

	.gs-fire__title {
		line-height: 1.3125;                       /* 42 over 32 */
		letter-spacing: 0;
	}

	.gs-fire__sub,
	.gs-fire.is-live .gs-fire__chip {
		display: none;
	}

	.gs-fire__stage {
		justify-content: flex-start;
		gap: 1.625rem;                             /* 26px */
		margin-block-start: 2.875rem;              /* 46px */
	}

	.gs-fire__camp {
		flex: 0 0 8.983125rem;                     /* 143.73px */
		aspect-ratio: 143.73 / 114.74;
		margin-block-start: 1.7875rem;             /* 28.6px */
	}

	.gs-fire__steps {
		flex: 1;
		gap: 1.5rem;
		margin-block-start: 0;
	}

	/* The frame's step is 154.31 tall with 14.23 between its pieces, and
	   gives the log a 52.85 box that the drawing overhangs by about 3 each
	   way. The log here is its full 59, so 10 under it puts the name where
	   the frame has it. */
	.gs-fire__log {
		width: 5.3125rem;                          /* 85px */
		margin-block-end: 0.63rem;                 /* 10.08px */
	}

	.gs-fire__name {
		/* On the narrowest phones (320) the column is 118px and "03 Optimise"
		   is 144: the number drops onto its own line instead of the name
		   running off the screen. From about 345px up it stays on one line. */
		flex-wrap: wrap;
		row-gap: 0;
		margin-block-end: 0.889375rem;             /* 14.23px */
		font-size: 1.5rem;                         /* 24px */
		line-height: 1.2917;                       /* 31 over 24 */
	}

	.gs-fire__text {
		font-size: 1rem;                           /* 16px */
		line-height: 1.3125;                       /* 21 over 16 */
	}
}

/* ==========================================================================
   Reduced motion

   The script does not hold the band in this mode, and base.css already cuts
   every animation short. Stated here as well so the flame is plainly still,
   at its drawn size, whatever else changes.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-fire__flame-sway,
	.gs-fire__flame-art,
	.gs-fire__chip-icon {
		animation: none;
	}
}