/**
 * Reflow Circle Showcase CSS v1.0.7
 * - Badge 04 repositioned to bottom-center (was hidden behind overlapping circles)
 * - Circle size increased: 310px → 340px
 * - Stage expanded to fit larger circles
 * - Mobile: One-by-one vertical stacked layout
 * - Interactive Spring Zoom-In Text Animation
 */

:root {
	--rcs-stage-width: 1160px;
	--rcs-stage-height: 1000px;
	--rcs-circle-size: 380px;
	--rcs-orbit-x: 320px;
	--rcs-orbit-y: 260px;
	--rcs-hover-scale: 1.25;
	--rcs-transition-time: 0.4s;
	--rcs-hover-bg: #C9F31D;
	--rcs-hover-text: #1C1D20;
}

.reflow-circle-stage {
	position: relative;
	width: var(--rcs-stage-width, 1160px);
	height: var(--rcs-stage-height, 1000px);
	max-width: 100%;
	display: block;
	margin: 0 auto;
	overflow: visible;
	touch-action: pan-y;
	box-sizing: border-box;
}

/* Individual Circle */
.reflow-circle-item {
	position: absolute;
	width: var(--rcs-circle-size, 310px);
	height: var(--rcs-circle-size, 310px);
	border-radius: 50%;
	background-color: #202226;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	/* Horizontal & Vertical Positioning */
	left: calc(50% + (var(--rcs-orbit-x, var(--rcs-orbit-radius, 265px)) * var(--cos, 0)));
	top: calc(50% + (var(--rcs-orbit-y, var(--rcs-orbit-radius, 215px)) * var(--sin, -1)));
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center center;

	z-index: calc(10 + var(--i, 0));
	transition: 
		transform var(--rcs-transition-time, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
		background-color var(--rcs-transition-time, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
		border-color var(--rcs-transition-time, 0.4s) ease,
		box-shadow var(--rcs-transition-time, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
		z-index 0s;
	will-change: transform, box-shadow;
	overflow: visible; /* Prevents badge clipping */
}

/* When any circle is hovered, all other circles shrink by 20% (scale 0.80) with smooth animation (NO color change) */
.reflow-circle-stage:hover .reflow-circle-item:not(:hover),
.reflow-circle-stage.has-active .reflow-circle-item:not(.is-active) {
	transform: translate(-50%, -50%) scale(0.80);
}

/* Hover & Active Zoom State: Circle Scale & Glow */
.reflow-circle-item:hover,
.reflow-circle-item.is-active {
	transform: translate(-50%, -50%) scale(var(--rcs-hover-scale, 1.30)) !important;
	background-color: var(--rcs-hover-bg, #C9F31D);
	border-color: var(--rcs-hover-border, #C9F31D);
	box-shadow: 0 32px 75px rgba(0, 0, 0, 0.85), 0 0 40px rgba(201, 243, 29, 0.38);
	z-index: 100 !important;
}

/* -------------------------------------------------------------
 * BADGES (Number Positions Exactly Matching User Reference Image)
 * ------------------------------------------------------------- */
.rcs-badge {
	position: absolute;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #2c2e35;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	z-index: 50;
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transition: 
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.28s ease,
		visibility 0.28s ease;
}

/* Item 01 ("Növeld..."): Top Perimeter (12 o'clock) */
.reflow-circle-item[data-index="0"] .rcs-badge {
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Item 02 ("Viszlát stressz..."): Top-Right Outer Edge */
.reflow-circle-item[data-index="1"] .rcs-badge {
	top: 14%;
	left: 86%;
	transform: translate(-50%, -50%);
}

/* Item 03 ("Fapados..."): Far Right Outer Edge */
.reflow-circle-item[data-index="2"] .rcs-badge {
	top: 36%;
	left: 98%;
	transform: translate(-50%, -50%);
	z-index: 60;
}

/* Item 04 ("Az idő..."): Top Perimeter (12 o'clock position of circle 04) */
.reflow-circle-item[data-index="3"] .rcs-badge {
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 60;
}

/* Item 05 ("Last man..."): Upper-Left Outer Edge */
.reflow-circle-item[data-index="4"] .rcs-badge {
	top: 22%;
	left: 8%;
	transform: translate(-50%, -50%);
}

/* Item 06 ("Dua Lipa..."): Top-Left Outer Edge */
.reflow-circle-item[data-index="5"] .rcs-badge {
	top: 14%;
	left: 14%;
	transform: translate(-50%, -50%);
}

/* On Hover / Active: Badge shrinks away smoothly */
.reflow-circle-item:hover .rcs-badge,
.reflow-circle-item.is-active .rcs-badge {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%) scale(0.3);
	pointer-events: none;
}

/* Inner Text Container */
.rcs-content-inner {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
	border-radius: 50%;
	padding: 20px;
	box-sizing: border-box;
}

/* -------------------------------------------------------------
 * INTERACTIVE TEXT ZOOM-IN & ZERO-CLIPPING REVEAL
 * ------------------------------------------------------------- */

/* Header / Title */
.rcs-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center center;
	width: 82%;
	max-width: 320px;
	margin: 0;
	padding: 0;
	color: #e6e7eb;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	opacity: 1;
	filter: blur(0px);
	word-break: break-word;
	z-index: 2;
	transition: 
		transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		filter 0.3s ease;
}

.reflow-circle-item:hover .rcs-title,
.reflow-circle-item.is-active .rcs-title {
	transform: translate(-50%, -50%) scale(0.55);
	opacity: 0;
	filter: blur(6px);
	pointer-events: none;
}

/* Description (Formatted with wide safety clearance so it NEVER cuts off) */
.rcs-description {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.35);
	transform-origin: center center;
	width: 76%;
	max-width: 320px;
	margin: 0 auto;
	padding: 0 12px;
	color: var(--rcs-hover-text, #1C1D20);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
	text-align: center;
	opacity: 0;
	filter: blur(8px);
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
	hyphens: auto;
	word-break: normal;
	overflow-wrap: break-word;
	transition: 
		transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1),
		opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		filter 0.35s ease;
}

.reflow-circle-item:hover .rcs-description,
.reflow-circle-item.is-active .rcs-description {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	filter: blur(0px);
	pointer-events: auto;
}

/* -------------------------------------------------------------
 * RESPONSIVENESS
 * ------------------------------------------------------------- */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
	.reflow-circle-stage {
		--rcs-stage-width: 900px;
		--rcs-stage-height: 800px;
		--rcs-circle-size: 320px;
		--rcs-orbit-x: 270px;
		--rcs-orbit-y: 220px;
	}

	.rcs-title {
		font-size: 18px;
		line-height: 1.3;
	}

	.rcs-description {
		font-size: 11.5px;
		line-height: 1.4;
		max-width: 220px;
	}

	.rcs-badge {
		width: 34px;
		height: 34px;
		font-size: 12px;
	}
}

/* -------------------------------------------------------------
 * MOBILE (max-width: 767px) - ONE BY ONE VERTICAL STACK
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
	.reflow-circle-stage:hover .reflow-circle-item:not(:hover),
	.reflow-circle-stage.has-active .reflow-circle-item:not(.is-active) {
		transform: scale(0.92) !important;
	}

	.reflow-circle-stage {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 32px !important;
		margin: 0 auto !important;
		padding: 40px 15px;
	}

	.reflow-circle-item {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: var(--rcs-circle-size, min(330px, 90vw));
		height: var(--rcs-circle-size, min(330px, 90vw));
		max-width: 90vw;
		max-height: 90vw;
		border-radius: 50% !important;
		margin: 0 auto !important;
		padding: 24px !important;
		box-sizing: border-box !important;
	}

	.reflow-circle-item:hover,
	.reflow-circle-item.is-active {
		transform: scale(1.06) !important;
		background-color: var(--rcs-hover-bg, #C9F31D) !important;
		border-color: var(--rcs-hover-border, #C9F31D) !important;
		box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(201, 243, 29, 0.3) !important;
	}

	/* On Mobile: Center badge at top */
	.reflow-circle-item .rcs-badge {
		top: 0% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.reflow-circle-item:hover .rcs-badge,
	.reflow-circle-item.is-active .rcs-badge {
		transform: translate(-50%, -50%) scale(0.3) !important;
	}

	.rcs-title {
		font-size: 17px;
		line-height: 1.35;
		width: 86%;
	}

	.rcs-description {
		font-size: 11px;
		line-height: 1.4;
		width: 78%;
		max-width: 210px;
	}
}

/* Small Mobile (max-width: 380px) */
@media (max-width: 380px) {
	.reflow-circle-item {
		width: var(--rcs-circle-size, 260px);
		height: var(--rcs-circle-size, 260px);
	}

	.rcs-title {
		font-size: 15px;
	}

	.rcs-description {
		font-size: 10px;
		line-height: 1.35;
		max-width: 190px;
	}
}