/**
 * HyperKit Project Folder.
 *
 * The folder is three stacked layers inside one positioned box:
 *
 *   .hk-fld__back    the back panel and its tab
 *   .hk-fld__cards   the project cards, in the pocket
 *   .hk-fld__front   the front panel, over the bottom of the cards
 *
 * The fan is arithmetic. PHP gives each card a CENTRED index in --hk-fld-i
 * (-1, 0, 1 for three; -1.5 … 1.5 for four) and everything below multiplies
 * that one number by the spread, the tilt and the stagger — so adding a card
 * re-centres the arrangement with nothing to re-tune.
 */

.hk-fld {
	--hk-fld-w: 470px;
	--hk-fld-ratio: 0.74;
	--hk-fld-h: calc(var(--hk-fld-w) * var(--hk-fld-ratio));
	--hk-fld-radius: 18px;
	--hk-fld-front-ratio: 0.76;
	--hk-fld-front-h: calc(var(--hk-fld-h) * var(--hk-fld-front-ratio));
	--hk-fld-tab-h: calc(var(--hk-fld-h) * 0.14);

	--hk-fld-front-1: #fdfdfd;
	--hk-fld-front-2: #e6e6e6;
	--hk-fld-back-1: #dedede;
	--hk-fld-back-2: #c9c9c9;
	--hk-fld-front-icon: rgba(17, 17, 17, 0.28);
	--hk-fld-front-icon-size: 34px;

	--hk-fld-card-w: calc(var(--hk-fld-w) * 0.46);
	--hk-fld-card-h: calc(var(--hk-fld-card-w) * 1.08);
	--hk-fld-card-radius: 12px;
	--hk-fld-card-pad: 6px;
	--hk-fld-card-frame: #ffffff;

	--hk-fld-lift: 150px;
	--hk-fld-spread: 128px;
	--hk-fld-tilt: 6deg;
	--hk-fld-peek: 0px;
	--hk-fld-speed: 520ms;
	--hk-fld-stagger: 45ms;

	--hk-fld-side-color: #111111;
	--hk-fld-side-gap: 26px;
	--hk-fld-side-shift: 14px;

	--hk-fld-glass-tint: rgba(173, 216, 255, 0.55);
	--hk-fld-glass-back: #5aa8f8;
	--hk-fld-glass-blur: 14px;
	--hk-fld-glass-edge: rgba(255, 255, 255, 0.55);
	--hk-fld-flap-h: calc(var(--hk-fld-h) * 0.12);
	--hk-fld-flap-w: 72%;
	--hk-fld-arc: 16px;

	--hk-fld-cta-bg: #ffd400;
	--hk-fld-cta-color: #111111;
}

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

.hk-fld__row {
	display: flex;
	gap: var(--hk-fld-side-gap);
	align-items: center;
	justify-content: center;
	/* Headroom for the fan. The cards climb out of the folder's own box, so
	 * without this they would land on whatever sits above the widget. */
	padding-top: calc(var(--hk-fld-lift) * 0.72);
}

.hk-fld__side {
	flex: none;
	color: var(--hk-fld-side-color);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 58px;
	line-height: 1;
	transition: transform var(--hk-fld-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hk-fld__folder:hover ~ .hk-fld__side--right,
.hk-fld.is-open .hk-fld__side--right {
	transform: translateX(var(--hk-fld-side-shift));
}

.hk-fld__side--left {
	order: -1;
}

.hk-fld.is-open .hk-fld__side--left,
.hk-fld__row:hover .hk-fld__side--left {
	transform: translateX(calc(var(--hk-fld-side-shift) * -1));
}

/* --- the folder --------------------------------------------------------- */
.hk-fld__folder {
	position: relative;
	flex: none;
	display: block;
	width: var(--hk-fld-w);
	height: var(--hk-fld-h);
	text-decoration: none;
	transform: perspective(900px) rotateX(var(--hk-fld-rx, 0deg)) rotateY(var(--hk-fld-ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.4s ease;
}

.hk-fld__back {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--hk-fld-tab-h);
	z-index: 1;
	border-radius: var(--hk-fld-radius);
	background: linear-gradient(180deg, var(--hk-fld-back-1), var(--hk-fld-back-2));
}

.hk-fld__tab {
	position: absolute;
	left: 0;
	top: calc(var(--hk-fld-tab-h) * -1);
	width: 38%;
	height: calc(var(--hk-fld-tab-h) + var(--hk-fld-radius));
	border-radius: var(--hk-fld-radius) var(--hk-fld-radius) 0 0;
	background: linear-gradient(180deg, var(--hk-fld-back-1), var(--hk-fld-back-2));
}

.hk-fld__cards {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hk-fld__card {
	position: absolute;
	left: 50%;
	/* Measured from the front panel's top edge, so "peek" means exactly what
	 * it says: how much of the card shows above the pocket. */
	top: calc(var(--hk-fld-h) - var(--hk-fld-front-h) - var(--hk-fld-peek));
	z-index: var(--hk-fld-z, 1);
	display: block;
	width: var(--hk-fld-card-w);
	height: var(--hk-fld-card-h);
	padding: var(--hk-fld-card-pad);
	border-radius: var(--hk-fld-card-radius);
	background: var(--hk-fld-card-frame);
	transform:
		translateX(-50%)
		translateX(calc(var(--hk-fld-i, 0) * 7px))
		rotate(calc(var(--hk-fld-i, 0) * 1.5deg));
	transform-origin: 50% 100%;
	transition: transform var(--hk-fld-speed) cubic-bezier(0.22, 1, 0.32, 1);
	transition-delay: calc(var(--hk-fld-n, 0) * var(--hk-fld-stagger));
}

/* 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-fld .hk-fld__card-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--hk-fld-card-radius) - var(--hk-fld-card-pad));
	background: var(--hk-fld-card-bg, rgba(0, 0, 0, 0.04));
	object-fit: cover;
}

.hk-fld__card-link {
	display: block;
	width: 100%;
	height: 100%;
}

.hk-fld__front {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--hk-fld-front-h);
	border-radius: var(--hk-fld-radius);
	background: linear-gradient(180deg, var(--hk-fld-front-1), var(--hk-fld-front-2));
	transition: transform var(--hk-fld-speed) cubic-bezier(0.22, 1, 0.32, 1);
}

.hk-fld__front-icon {
	display: inline-flex;
	width: var(--hk-fld-front-icon-size);
	height: var(--hk-fld-front-icon-size);
	align-items: center;
	justify-content: center;
	color: var(--hk-fld-front-icon);
	transition: opacity var(--hk-fld-speed) ease;
}

.hk-fld__front-icon svg,
.hk-fld__cta-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-fld__front-icon svg:not([fill]),
.hk-fld__cta-icon svg:not([fill]) {
	fill: currentColor;
}

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

.hk-fld__front-icon i {
	font-size: var(--hk-fld-front-icon-size);
}

/* --- open --------------------------------------------------------------- */
.hk-fld--hover .hk-fld__folder:hover .hk-fld__card,
.hk-fld--hover .hk-fld__folder:focus-visible .hk-fld__card,
.hk-fld--always .hk-fld__card,
.hk-fld.is-open .hk-fld__card {
	transform:
		translateX(-50%)
		translateX(calc(var(--hk-fld-i, 0) * var(--hk-fld-spread)))
		/* The arc uses i², so it is symmetrical without needing an absolute
		 * value: the middle card rides highest and the outer ones drop away
		 * from it, which is what stops the fan looking like a fence. */
		translateY(calc(var(--hk-fld-lift) * -1 + var(--hk-fld-i, 0) * var(--hk-fld-i, 0) * var(--hk-fld-arc)))
		rotate(calc(var(--hk-fld-i, 0) * var(--hk-fld-tilt)));
}

/* The front panel settles a touch as the cards leave, which is what sells the
 * cards being lifted OUT of it rather than sliding over it. */
.hk-fld--hover .hk-fld__folder:hover .hk-fld__front,
.hk-fld--always .hk-fld__front,
.hk-fld.is-open .hk-fld__front {
	transform: translateY(6px) scaleY(0.985);
}

.hk-fld--hover .hk-fld__folder:hover .hk-fld__front-icon,
.hk-fld--always .hk-fld__front-icon,
.hk-fld.is-open .hk-fld__front-icon {
	opacity: 0;
}

/* --- button ------------------------------------------------------------- */
.hk-fld__cta {
	position: absolute;
	bottom: -14px;
	z-index: 4;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 16px 30px;
	border-radius: 999px;
	background: var(--hk-fld-cta-bg);
	color: var(--hk-fld-cta-color);
	font-size: 17px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
	opacity: 0;
	transform: translateY(12px) scale(0.96);
	transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.22, 1, 0.32, 1);
	pointer-events: none;
}

.hk-fld--cta-br .hk-fld__cta { right: 6%; }
.hk-fld--cta-bl .hk-fld__cta { left: 6%; }

.hk-fld--cta-centre .hk-fld__cta {
	left: 50%;
	transform: translateX(-50%) translateY(12px) scale(0.96);
}

.hk-fld--hover .hk-fld__folder:hover .hk-fld__cta,
.hk-fld--always .hk-fld__cta,
.hk-fld.is-open .hk-fld__cta {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.hk-fld--cta-centre.hk-fld--always .hk-fld__cta,
.hk-fld--cta-centre.hk-fld.is-open .hk-fld__cta,
.hk-fld--cta-centre.hk-fld--hover .hk-fld__folder:hover .hk-fld__cta {
	transform: translateX(-50%) translateY(0) scale(1);
}

.hk-fld__cta-icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	align-items: center;
	justify-content: center;
}

.hk-fld__caption {
	margin: 22px 0 0;
	text-align: center;
}

/* --- small screens ------------------------------------------------------ */
@media (max-width: 767px) {
	.hk-fld__row {
		gap: calc(var(--hk-fld-side-gap) * 0.5);
	}

	.hk-fld__side {
		font-size: 34px;
	}

	.hk-fld__cta {
		padding: 12px 20px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hk-fld__card,
	.hk-fld__front,
	.hk-fld__cta,
	.hk-fld__side,
	.hk-fld__folder {
		transition-duration: 0.001ms;
	}
}


/* =====================================================================
 * Frosted glass
 * ==================================================================
 *
 * The whole point of this style is that the front is TRANSLUCENT and the
 * cards sitting in the pocket read through it as soft colour. That works
 * because the layer order already puts the cards (z-index 2) behind the
 * front (z-index 3): a backdrop-filter blurs whatever is behind its own box,
 * so the cards are blurred by the front without a single extra element.
 *
 * The stepped silhouette — the left side of the front standing higher than
 * the right — is a pseudo-element sitting FLUSH above the panel rather than
 * overlapping it. Overlap would double the alpha and print a visible darker
 * band across the glass, which is why the panel's top-left corner is square:
 * the flap supplies that corner instead.
 */
.hk-fld--glass .hk-fld__back {
	top: 0;
	background: var(--hk-fld-glass-back);
}

.hk-fld--glass .hk-fld__tab {
	display: none;
}

.hk-fld--glass .hk-fld__front {
	background: var(--hk-fld-glass-tint);
	/* A touch of light down the top of the pane. Flat colour over a blur
	 * reads as a coloured rectangle; this reads as glass. */
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%);
	border-radius: 0 var(--hk-fld-radius) var(--hk-fld-radius) var(--hk-fld-radius);
	-webkit-backdrop-filter: blur(var(--hk-fld-glass-blur)) saturate(1.4);
	backdrop-filter: blur(var(--hk-fld-glass-blur)) saturate(1.4);
	box-shadow: inset 0 1px 0 var(--hk-fld-glass-edge);
}

.hk-fld--glass .hk-fld__front::before {
	content: "";
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 90%);
	position: absolute;
	left: 0;
	top: calc(var(--hk-fld-flap-h) * -1);
	width: var(--hk-fld-flap-w);
	height: var(--hk-fld-flap-h);
	border-radius: var(--hk-fld-radius) var(--hk-fld-radius) 0 0;
	background: inherit;
	-webkit-backdrop-filter: inherit;
	backdrop-filter: inherit;
	box-shadow: inset 0 1px 0 var(--hk-fld-glass-edge);
}

/* Glass wants its own shadow, under the whole folder rather than around the
 * panel, so the Style tab's box-shadow is left to the paper version. */
.hk-fld--glass .hk-fld__folder::after {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -6px;
	height: 24px;
	z-index: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.18);
	filter: blur(12px);
	pointer-events: none;
}

/* A glass folder has no business casting the paper folder's hard shadow. The
 * extra class beats the Style tab's own box-shadow output. */
.hk-fld.hk-fld--glass .hk-fld__front {
	box-shadow: inset 0 1px 0 var(--hk-fld-glass-edge);
}

/* The reference has nothing printed on the pane, and an icon floating over
 * blurred artwork looks like a mistake rather than a label. The control stays
 * for the paper style, which is where it belongs. */
.hk-fld--glass .hk-fld__front-icon {
	display: none;
}