/**
 * HyperKit Falling Pills.
 *
 * The pills are ordinary inline-flex elements — real text, real icons — that
 * the solver measures and then drives with a transform. Nothing here animates:
 * every frame is written by JS, so there must be no transition on `transform`
 * or the simulation would be fighting the browser for the same property.
 */

.hk-fp {
	--hk-fp-stage-h: 360px;
	--hk-fp-pad-x: 22px;
	--hk-fp-pad-y: 15px;
	--hk-fp-icon: 16px;
	--hk-fp-icon-gap: 9px;
	--hk-fp-color-all: #111111;
	--hk-fp-pattern-color: rgba(17, 17, 17, 0.14);
	--hk-fp-pattern-size: 40px;
	--hk-fp-reset-bg: #111111;
	--hk-fp-reset-color: #ffffff;

	position: relative;
}

.hk-fp--empty {
	padding: 24px;
	border: 1px dashed rgba(17, 17, 17, 0.3);
	border-radius: 10px;
	font-style: italic;
	text-align: center;
}

.hk-fp__stage {
	position: relative;
	height: var(--hk-fp-stage-h);
	/* Visible by default: a pill thrown upward should leave the stage and come
	 * back, which is exactly what the reference does. */
	overflow: visible;
	touch-action: pan-y;
}

.hk-fp--clip .hk-fp__stage {
	overflow: hidden;
}

.hk-fp__pill {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	gap: var(--hk-fp-icon-gap);
	align-items: center;
	padding: calc(var(--hk-fp-pad-y) * var(--hk-fp-scale, 1)) calc(var(--hk-fp-pad-x) * var(--hk-fp-scale, 1));
	border: 1px solid var(--hk-fp-border, transparent);
	border-radius: 999px;
	background: var(--hk-fp-bg, #ffd400);
	color: var(--hk-fp-color, var(--hk-fp-color-all));
	font-size: calc(1em * var(--hk-fp-scale, 1));
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	/* Placed off-screen until the solver has measured it and given it a real
	 * position — otherwise every pill flashes stacked at the top-left corner. */
	visibility: hidden;
	transform: translate3d(-9999px, -9999px, 0);
	transform-origin: 50% 50%;
	will-change: transform;
	-webkit-user-select: none;
	user-select: none;
}

.hk-fp__pill.is-live {
	visibility: visible;
}

.hk-fp--draggable .hk-fp__pill {
	cursor: -webkit-grab;
	cursor: grab;
	touch-action: none;
}

.hk-fp--draggable .hk-fp__pill.is-held {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.hk-fp__pill--round {
	padding: calc(var(--hk-fp-pad-y) * var(--hk-fp-scale, 1));
	aspect-ratio: 1;
	justify-content: center;
}

.hk-fp__text {
	font-family: "Courier New", ui-monospace, monospace;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.hk-fp__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(var(--hk-fp-icon) * var(--hk-fp-scale, 1));
	height: calc(var(--hk-fp-icon) * var(--hk-fp-scale, 1));
}

.hk-fp__icon svg {
	width: 100%;
	height: 100%;
}

/* Only colour in icons that have not declared a fill of their own. Font
 * Awesome's inline SVGs carry no fill and expect currentColor; a hand-drawn
 * line icon carries fill="none" and expects to be left alone. A blanket
 * `fill: currentColor` overrides that attribute — CSS beats a presentation
 * attribute — and turns every outline icon into a solid black blob. */
/* Icon paint, in three cases, so the colour control actually works whatever
 * the icon set does:
 *
 *   1. No fill attribute at all — Font Awesome's inline SVGs. Paint the fill.
 *   2. fill="none" — an outline icon. Painting its FILL would turn it into a
 *      solid blob, so paint the stroke instead.
 *   3. Children of an outline icon that hardcode a stroke of their own, which
 *      is the case a rule on the <svg> alone silently loses. */
.hk-fp__icon svg:not([fill]) {
	fill: currentColor;
}

.hk-fp__icon svg[fill="none"],
.hk-fp__icon svg[fill="none"] [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.hk-fp__icon i {
	font-size: calc(var(--hk-fp-icon) * var(--hk-fp-scale, 1));
	line-height: 1;
}

.hk-fp__reset {
	position: absolute;
	right: 12px;
	bottom: -18px;
	z-index: 5;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--hk-fp-reset-bg);
	color: var(--hk-fp-reset-color);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* Reduced motion: the drop is the whole point of the module, so it still
 * happens — but the pills are placed where they would have landed instead of
 * being thrown, which JS handles by settling the sim before the first paint. */

/* =====================================================================
 * Full screen + the headline in the middle
 * ================================================================== */

/* Measured width, not 100vw: 100vw includes the scrollbar and would hand the
 * page a horizontal one. JS writes --hk-fp-vwpx from the document's client
 * width; the vw value is only the fallback before JS runs. */
.hk-fp--fill {
	width: var(--hk-fp-vwpx, 100vw);
	max-width: var(--hk-fp-vwpx, 100vw);
	margin-left: calc(50% - var(--hk-fp-vwpx, 100vw) / 2);
	margin-right: calc(50% - var(--hk-fp-vwpx, 100vw) / 2);
}

.hk-fp--fill .hk-fp__stage {
	height: 100vh;
}

@supports (height: 100svh) {
	.hk-fp--fill .hk-fp__stage {
		height: 100svh;
	}
}

.hk-fp__centre {
	position: absolute;
	left: 50%;
	top: var(--hk-fp-centre-y, 46%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	width: var(--hk-fp-centre-w, 780px);
	max-width: 92%;
	text-align: center;
	/* The pills fall past this and must stay draggable through it. */
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/* The stage's layers, in order: pattern 0, pills-below 1, centre 2,
 * pills-above 3. Which layer the pills land on is a setting, not markup order:
 * in front reads like they are piling up over the page, behind reads like they
 * are stacking up underneath the words. */
.hk-fp--pills-above .hk-fp__pill { z-index: 3; }
.hk-fp--pills-below .hk-fp__pill { z-index: 1; }

.hk-fp__eyebrow {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: rgba(17, 17, 17, 0.55);
	font-size: 16px;
	line-height: 1;
}

/* Scoped with the root class on purpose. Elementor's frontend stylesheet
 * carries `.elementor img { height: auto; border-radius: 0; }` at specificity
 * (0,1,1), which beats a bare `.hk-xx__img` (0,1,0) — so the image ignores its
 * height and its radius, sizes to its own aspect ratio, and leaves the card's
 * background showing as a polaroid border nobody asked for. Two classes wins. */
.hk-fp .hk-fp__avatar {
	width: var(--hk-fp-avatar, 34px);
	height: var(--hk-fp-avatar, 34px);
	border-radius: 50%;
	object-fit: cover;
}

.hk-fp__title {
	margin: 0;
	color: #111111;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(34px, 5.4vw, 66px);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.015em;
}

.hk-fp__title em {
	font-style: italic;
}

.hk-fp__centre-text {
	max-width: 44ch;
	color: rgba(17, 17, 17, 0.6);
	font-size: 16px;
	line-height: 1.5;
}


/* =====================================================================
 * Background pattern — the same graph paper the Playground module uses
 * ================================================================== */

/* Dots and grid are plain background layers on the stage, so they sit behind
 * everything without needing a stacking context of their own. */
.hk-fp--pattern-dots .hk-fp__stage {
	background-image: radial-gradient(var(--hk-fp-pattern-color) 1.5px, transparent 1.6px);
	background-size: var(--hk-fp-pattern-size) var(--hk-fp-pattern-size);
}

.hk-fp--pattern-grid .hk-fp__stage {
	background-image:
		linear-gradient(to right, var(--hk-fp-pattern-color) 1px, transparent 1px),
		linear-gradient(to bottom, var(--hk-fp-pattern-color) 1px, transparent 1px);
	background-size: var(--hk-fp-pattern-size) var(--hk-fp-pattern-size);
}

/* Crosses cannot be stacked gradients — layers union, they do not intersect —
 * so the mark is a mask and the colour is a plain background. z-index 0 keeps
 * it under every pill, including the ones set to sit behind the text. */
.hk-fp--pattern-cross .hk-fp__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--hk-fp-pattern-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 6v8M6 10h8' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 6v8M6 10h8' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-size: var(--hk-fp-pattern-size) var(--hk-fp-pattern-size);
	mask-size: var(--hk-fp-pattern-size) var(--hk-fp-pattern-size);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}