/**
 * GSAP Text Effects Pro — Cycling Text frontend styles.
 *
 * Single-layer model: each segment is a plain inline span. It flows
 * naturally next to other segments and surrounding text — no absolute
 * positioning, no sizer element. The cycling transition animates the
 * span in place.
 */

.gtep-cycling-text {
	margin: 0;
}

/*
 * Segments are plain inline spans — they sit side by side on the same
 * line, exactly like static styled text. inline-block so transforms
 * (the slide transition's yPercent) apply cleanly without affecting
 * line-height of neighbours.
 */
.gtep-cycling-text__segment {
	display: inline-block;
	will-change: opacity, transform, filter;
}

/* Alignment helpers. */
.gtep-cycling-text.has-text-align-left   { text-align: left; }
.gtep-cycling-text.has-text-align-center { text-align: center; }
.gtep-cycling-text.has-text-align-right  { text-align: right; }

/*
 * Reduced motion: JS already skips animation and does instant swaps.
 * Nothing extra needed here, but keep the segment fully visible as a
 * guard against a half-faded state.
 */
@media ( prefers-reduced-motion: reduce ) {
	.gtep-cycling-text__segment {
		opacity: 1 !important;
		filter: none !important;
	}
}

/* ============================================================
 * Flipboard Text — split-flap (Solari board) effect.
 *
 * Each character is a "tile" made of two halves split across a
 * horizontal seam. Two hinged "leaves" animate the flip in 3D.
 *
 * Tile theming comes from CSS custom properties set by the JS:
 *   --gtep-tile-bg, --gtep-tile-fg, --gtep-tile-seam,
 *   --gtep-tile-radius, --gtep-tile-gap
 * ============================================================ */

.gtep-flipboard-text {
	margin: 0;
}

.gtep-flipboard-text__segment {
	display: inline-block;
}

/* The row holds the per-character tiles side by side. */
.gtep-flip-row {
	display: inline-flex;
	gap: var( --gtep-tile-gap, 3px );
	/* perspective gives the leaf rotation real 3D depth */
	perspective: 400px;
	vertical-align: top;
}

/*
 * One character tile. Its height is driven by line-height / font-size of
 * the heading. width: 1ch keeps it proportional to the glyph.
 * position: relative so the leaves can absolutely stack.
 */
.gtep-flip-tile {
	position: relative;
	display: inline-block;
	width: 1ch;
	/* a touch of horizontal breathing room inside the tile */
	padding: 0.08em 0.12em;
	box-sizing: content-box;
	background: var( --gtep-tile-bg, #1a1a1a );
	color: var( --gtep-tile-fg, #f5f5f5 );
	border-radius: var( --gtep-tile-radius, 4px );
	overflow: hidden;
	line-height: 1;
}

/* Bare mode — no card chrome, just the flipping glyphs. */
.gtep-flip-tile--bare {
	background: transparent;
	color: inherit;
	border-radius: 0;
	padding: 0 0.02em;
}

/*
 * The two static halves. Each clips the glyph to its half via overflow.
 * The glyph inside is full height; the half is 50% height and the inner
 * glyph is shifted so the correct portion shows.
 */
.gtep-flip-tile__half {
	position: relative;
	display: block;
	height: 0.5em;
	overflow: hidden;
}
.gtep-flip-tile__half--top {
	border-radius: var( --gtep-tile-radius, 4px ) var( --gtep-tile-radius, 4px ) 0 0;
}
.gtep-flip-tile__half--bottom {
	border-radius: 0 0 var( --gtep-tile-radius, 4px ) var( --gtep-tile-radius, 4px );
}
/* The seam line between the two halves. */
.gtep-flip-tile__half--top::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var( --gtep-tile-seam, #000 );
	opacity: 0.6;
}

/*
 * The two animating leaves. Absolutely positioned over the static halves.
 * Each is a half-height panel, hinged along the seam.
 */
.gtep-flip-tile__leaf {
	position: absolute;
	left: 0; right: 0;
	height: 0.5em;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.gtep-flip-tile__leaf--top {
	top: 0.08em; /* matches tile padding-top */
	transform-origin: center bottom;
	border-radius: var( --gtep-tile-radius, 4px ) var( --gtep-tile-radius, 4px ) 0 0;
	background: var( --gtep-tile-bg, #1a1a1a );
}
.gtep-flip-tile--bare .gtep-flip-tile__leaf--top {
	background: transparent;
}
.gtep-flip-tile__leaf--bottom {
	bottom: 0.08em; /* matches tile padding-bottom */
	transform-origin: center top;
	border-radius: 0 0 var( --gtep-tile-radius, 4px ) var( --gtep-tile-radius, 4px );
	background: var( --gtep-tile-bg, #1a1a1a );
}
.gtep-flip-tile--bare .gtep-flip-tile__leaf--bottom {
	background: transparent;
}

/*
 * The glyph inside each half/leaf. It's full tile height; each container
 * (a 0.5em half) clips it. The --top variant aligns the glyph's top to the
 * container; the --bottom variant pulls it up so the lower portion shows.
 */
.gtep-flip-tile__glyph {
	display: block;
	height: 1em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.gtep-flip-tile__glyph--top {
	/* glyph sits so its UPPER half is visible in this 0.5em window */
}
.gtep-flip-tile__glyph--bottom {
	/* pull the glyph up by half its height so the LOWER half shows */
	margin-top: -0.5em;
}

.gtep-flipboard-text.has-text-align-left   { text-align: left; }
.gtep-flipboard-text.has-text-align-center { text-align: center; }
.gtep-flipboard-text.has-text-align-right  { text-align: right; }

/* Reduced motion: the JS hard-sets glyphs; leaves stay neutral. */
@media ( prefers-reduced-motion: reduce ) {
	.gtep-flip-tile__leaf { display: none; }
}

/* ------------------------------------------------------------
 * Flipboard — fixed tile sizing.
 * When the JS adds .gtep-flipboard-text--fixed-tiles (auto-size
 * OFF), tiles use the explicit --gtep-tile-w / -h / -pad custom
 * properties instead of content-derived sizing. Every tile is
 * then identical regardless of the glyph inside it.
 * ------------------------------------------------------------ */
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile {
	width: var( --gtep-tile-w, 0.9em );
	height: var( --gtep-tile-h, 1.3em );
	padding: var( --gtep-tile-pad, 0.1em );
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: column;
}

/*
 * With a fixed tile height, the two halves split it evenly and the
 * glyph is sized to the tile rather than the font's line-box.
 */
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile__half,
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile__leaf {
	height: calc( ( var( --gtep-tile-h, 1.3em ) - 2 * var( --gtep-tile-pad, 0.1em ) ) / 2 );
}
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile__leaf--top {
	top: var( --gtep-tile-pad, 0.1em );
}
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile__leaf--bottom {
	bottom: var( --gtep-tile-pad, 0.1em );
}
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile__glyph {
	height: calc( var( --gtep-tile-h, 1.3em ) - 2 * var( --gtep-tile-pad, 0.1em ) );
}
.gtep-flipboard-text--fixed-tiles .gtep-flip-tile__glyph--bottom {
	margin-top: calc( ( var( --gtep-tile-h, 1.3em ) - 2 * var( --gtep-tile-pad, 0.1em ) ) / -2 );
}

/* The glyph can be scaled down by JS (scale-to-fit); keep it
   centred and let the transform apply cleanly. */
.gtep-flip-tile__glyph {
	transform-origin: center center;
}

/* ------------------------------------------------------------
 * Flipboard Reveal — reuses the .gtep-flip-tile / .gtep-flip-row
 * mechanics from Flipboard Text. Only the wrapper differs.
 * ------------------------------------------------------------ */
.gtep-flipboard-reveal {
	margin: 0;
}
.gtep-flipboard-reveal.has-text-align-left   { text-align: left; }
.gtep-flipboard-reveal.has-text-align-center { text-align: center; }
.gtep-flipboard-reveal.has-text-align-right  { text-align: right; }

/* Before JS builds the tiles, the plain end-text span shows (no-JS / SEO). */
.gtep-flipboard-reveal__text {
	display: inline-block;
}