/**
 * Freshwave 2026 – Slot Machine Number Animation Styles
 *
 * DOM built by slotmachine.js for a number like "500,000":
 *
 *   <span class="slotmachine__number" aria-label="500,000">
 *     <span aria-hidden="true">
 *       <span class="slotmachine__digit-wrap">   ← "5"
 *         <span class="slotmachine__digit-tape">
 *           <span class="slotmachine__digit-item">0</span>
 *           <span class="slotmachine__digit-item">1</span>
 *           …
 *           <span class="slotmachine__digit-item">5</span>
 *         </span>
 *       </span>
 *       <span class="slotmachine__digit-wrap">   ← "0"  (tape: 7,8,9,0)
 *         …
 *       </span>
 *       <span class="slotmachine__sep">,</span>  ← static
 *       …
 *     </span>
 *   </span>
 *
 * .is-spinning is added to each tape individually (with a JS stagger)
 * when the number enters the viewport.
 */

/* --------------------------------------------------------------------------
   Number wrapper — sits inline in the surrounding text
   -------------------------------------------------------------------------- */
.slotmachine__number {
	display: inline;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Digit wrap — the visible "window" for one digit column
   -------------------------------------------------------------------------- */
.slotmachine__digit-wrap {
	display: inline-block;
	overflow: hidden;
	/* Estimate until JS sets the exact px height at animation time.
	   1lh = one line-height (Chrome 109+, FF 120+, Safari 17.2+). */
	height: 1.5em;
	height: 1lh;
	vertical-align: bottom;
}

/* --------------------------------------------------------------------------
   Digit tape — vertical stack of digit values that scrolls upward
   -------------------------------------------------------------------------- */
.slotmachine__digit-tape {
	display: flex;
	flex-direction: column;
	will-change: transform;
}

/* Transition added by JS at trigger time — fast start, strong ease-out */
.slotmachine__digit-tape.is-spinning {
	transition: transform 0.8s cubic-bezier( 0.08, 0.82, 0.17, 1.0 );
}

/* --------------------------------------------------------------------------
   Individual digit item
   -------------------------------------------------------------------------- */
.slotmachine__digit-item {
	display: block;
	line-height: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Separator — comma, dot, apostrophe etc. — always static
   -------------------------------------------------------------------------- */
.slotmachine__sep {
	display: inline-block;
	vertical-align: bottom;
	line-height: inherit;
}

/* --------------------------------------------------------------------------
   Reduced-motion safety net (JS skips animation entirely, but just in case)
   -------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.slotmachine__digit-tape.is-spinning {
		transition: none;
	}
}