/* ============================================================
   WHEN NOT TEACHING SECTION — when-not-teaching.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500;1,600&family=DM+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

#when-not-teaching {
	position: relative;
	min-height: clamp(680px, 78vw, 920px);
	padding: clamp(120px, 14vw, 156px) 28px;
	background:
		radial-gradient(
			circle at 50% 82%,
			rgba(255, 255, 255, 0.2),
			transparent 26%
		),
		linear-gradient(180deg, rgba(2, 18, 8, 0.26) 0%, rgba(3, 14, 8, 0.42) 100%),
		url("../assets/img/whenNotTeaching.jpeg") center/cover no-repeat;
	color: #f9f6f0;
	overflow: hidden;
	isolation: isolate;
}

#when-not-teaching::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 20% 30%,
			rgba(255, 120, 48, 0.2),
			transparent 24%
		),
		radial-gradient(
			circle at 82% 72%,
			rgba(255, 226, 209, 0.18),
			transparent 18%
		),
		linear-gradient(180deg, rgba(4, 19, 9, 0.18) 0%, rgba(4, 14, 8, 0.12) 100%);
	pointer-events: none;
	z-index: -1;
}

#when-not-teaching::after {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: clamp(34px, 4.8vw, 54px);
	background: #ebe9e4;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 68%,
		95% 73%,
		90% 64%,
		84% 74%,
		78% 63%,
		72% 75%,
		66% 64%,
		60% 73%,
		54% 65%,
		48% 75%,
		42% 63%,
		36% 74%,
		30% 64%,
		24% 73%,
		18% 63%,
		12% 74%,
		7% 66%,
		3% 72%,
		0 67%
	);
	box-shadow: none;
	pointer-events: none;
	z-index: 1;
}

.when-not-teaching__bottom-wave {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: clamp(34px, 4.8vw, 54px);
	background: #ebe9e4;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 68%,
		95% 73%,
		90% 64%,
		84% 74%,
		78% 63%,
		72% 75%,
		66% 64%,
		60% 73%,
		54% 65%,
		48% 75%,
		42% 63%,
		36% 74%,
		30% 64%,
		24% 73%,
		18% 63%,
		12% 74%,
		7% 66%,
		3% 72%,
		0 67%
	);
	transform: scaleY(-1);
	transform-origin: center;
	pointer-events: none;
	z-index: 1;
}

.when-not-teaching__container {
	position: relative;
	width: min(100%, 1280px);
	min-height: clamp(440px, 55vw, 640px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	text-align: center;
}

.when-not-teaching__content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding-top: clamp(30px, 5vw, 60px);
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.when-not-teaching__title {
	font-family: "DM Sans", sans-serif;
	font-size: clamp(42px, 4.7vw, 62px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.04em;
	color: #fff7ef;
	margin: 0 0 30px;
}

.when-not-teaching__title span {
	position: relative;
	display: inline-block;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.08em;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
	padding: 0 0.3em;
	margin-left: 0.08em;
	color: #fff7ef;
	transform: translateY(0.02em);
}

.when-not-teaching__title span::after {
	content: "";
	position: absolute;
	left: -0.22em;
	top: 50%;
	width: calc(100% + 0.44em);
	height: 1.5em;
	border: 1.5px solid rgba(255, 250, 241, 0.85);
	border-radius: 999px;
	transform: translateY(-46%) rotate(-9deg);
	pointer-events: none;
}

.when-not-teaching__copy {
	max-width: 720px;
	margin: 0 auto;
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(15px, 1.35vw, 19px);
	line-height: 1.72;
	letter-spacing: -0.01em;
	color: rgba(255, 245, 235, 0.96);
	text-wrap: balance;
}

.when-not-teaching__float {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
	z-index: 3;
	transition: transform 220ms ease;
	-webkit-tap-highlight-color: transparent;
}

.when-not-teaching__float:hover,
.when-not-teaching__float:focus-visible {
	transform: translateY(-4px) scale(1.03);
	outline: none;
}

.when-not-teaching__tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 18px);
	transform: translate(-50%, 12px) scale(0.97);
	padding: 18px 24px;
	border-radius: 14px;
	background: #f6ede2;
	box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.5);
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(12px, 1vw, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: #ff6a00;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.when-not-teaching__tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(100% - 1px);
	width: 16px;
	height: 10px;
	background: #f6ede2;
	transform: translateX(-50%);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.when-not-teaching__float:hover .when-not-teaching__tooltip,
.when-not-teaching__float:focus-visible .when-not-teaching__tooltip {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

.when-not-teaching__float--gym {
	left: 12%;
	top: 4%;
}

.when-not-teaching__dumbbell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(110px, 12vw, 172px);
	height: clamp(54px, 5.8vw, 88px);
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.26));
	transform: rotate(18deg) skewX(-6deg);
}

.when-not-teaching__dumbbell::before,
.when-not-teaching__dumbbell::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle at 32% 30%,
		#8ec1ff 0%,
		#77aaf3 38%,
		#4770d6 100%
	);
	box-shadow:
		0 0 0 8px rgba(117, 172, 248, 0.96) inset,
		0 4px 10px rgba(0, 0, 0, 0.18);
	transform: translateY(-50%);
}

.when-not-teaching__dumbbell::before {
	left: 0;
	box-shadow:
		12px 0 0 -2px rgba(117, 172, 248, 0.92),
		0 0 0 8px rgba(117, 172, 248, 0.96) inset,
		0 4px 10px rgba(0, 0, 0, 0.18);
}

.when-not-teaching__dumbbell::after {
	right: 0;
	box-shadow:
		-12px 0 0 -2px rgba(117, 172, 248, 0.92),
		0 0 0 8px rgba(117, 172, 248, 0.96) inset,
		0 4px 10px rgba(0, 0, 0, 0.18);
}

.when-not-teaching__dumbbell-bar {
	width: 58%;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f7fbff 0%, #ccd7e8 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.when-not-teaching__float--gaming {
	right: 7%;
	top: 9%;
	text-align: left;
}

.when-not-teaching__lol-logo {
	font-family: "DM Sans", sans-serif;
	font-size: clamp(26px, 3.6vw, 56px);
	font-weight: 700;
	line-height: 0.88;
	letter-spacing: -0.04em;
	color: transparent;
	background: linear-gradient(180deg, #f9df96 0%, #c28d31 52%, #8d6324 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
	text-transform: uppercase;
}

.when-not-teaching__lol-logo span {
	font-size: 0.45em;
	letter-spacing: -0.01em;
	margin: 0 0.12em;
	vertical-align: 0.18em;
}

.when-not-teaching__float--pasta {
	left: 18%;
	bottom: 10%;
}

.when-not-teaching__farfalle {
	position: relative;
	display: block;
	width: clamp(68px, 7vw, 108px);
	height: clamp(48px, 4.8vw, 76px);
	filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2));
	transform: rotate(14deg);
}

.when-not-teaching__farfalle::before,
.when-not-teaching__farfalle::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(180deg, #fbe8c8 0%, #f0c996 100%);
	border-radius: 44% 56% 45% 55%;
	clip-path: polygon(0 50%, 100% 0, 86% 50%, 100% 100%);
	box-shadow: 0 0 0 1px rgba(170, 98, 42, 0.16) inset;
}

.when-not-teaching__farfalle::before {
	left: 0;
	transform: scaleX(-1);
}

.when-not-teaching__farfalle::after {
	right: 0;
}

.when-not-teaching__farfalle {
	background:
		radial-gradient(
			circle at 50% 26%,
			rgba(161, 108, 54, 0.18) 0 2px,
			transparent 3px
		),
		radial-gradient(
			circle at 50% 50%,
			rgba(161, 108, 54, 0.18) 0 2px,
			transparent 3px
		),
		radial-gradient(
			circle at 50% 74%,
			rgba(161, 108, 54, 0.18) 0 2px,
			transparent 3px
		),
		linear-gradient(180deg, #f7d9b3 0%, #efc692 100%);
	clip-path: polygon(
		42% 0,
		58% 0,
		62% 28%,
		62% 72%,
		58% 100%,
		42% 100%,
		38% 72%,
		38% 28%
	);
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(170, 98, 42, 0.18) inset;
}

.when-not-teaching__float--type {
	right: 18%;
	bottom: 7%;
	font-size: clamp(70px, 7vw, 116px);
	line-height: 1;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.26));
}

.when-not-teaching__float--type .when-not-teaching__tooltip {
	bottom: calc(100% + 12px);
	min-width: clamp(220px, 20vw, 292px);
	padding: 20px 22px;
	font-size: clamp(12px, 0.95vw, 16px);
	text-align: center;
}

.when-not-teaching__hand {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0.9em;
	text-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
	transform: rotate(-2deg) scale(0.92);
}

/* Chess button styling */
.when-not-teaching__float--chess {
	left: 12%;
	top: 4%;
	font-size: clamp(60px, 6.5vw, 104px);
	line-height: 1;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.26));
}

.when-not-teaching__chess-piece {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	text-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transform: rotate(-8deg);
}

/* Badminton button styling */
.when-not-teaching__float--badminton {
	right: 7%;
	top: 9%;
	font-size: clamp(60px, 6.5vw, 104px);
	line-height: 1;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.26));
}

.when-not-teaching__badminton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	text-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transform: rotate(12deg);
}

/* Music button styling */
.when-not-teaching__float--music {
	left: 18%;
	bottom: 10%;
	font-size: clamp(60px, 6.5vw, 104px);
	line-height: 1;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.26));
}

.when-not-teaching__music {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	text-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transform: rotate(8deg);
}

@media (max-width: 980px) {
	#when-not-teaching {
		padding: 112px 24px 104px;
	}

	#when-not-teaching::after {
		height: 34px;
	}

	.when-not-teaching__bottom-wave {
		height: 34px;
	}

	.when-not-teaching__container {
		min-height: 620px;
	}

	.when-not-teaching__float--gym {
		left: 7%;
		top: 4%;
	}

	.when-not-teaching__float--gaming {
		right: 4%;
		top: 10%;
	}

	.when-not-teaching__float--pasta {
		left: 10%;
		bottom: 13%;
	}

	.when-not-teaching__float--chess {
		left: 7%;
		top: 4%;
	}

	.when-not-teaching__float--badminton {
		right: 4%;
		top: 10%;
	}

	.when-not-teaching__float--music {
		left: 10%;
		bottom: 13%;
	}

	.when-not-teaching__float--type {
		right: 10%;
		bottom: 11%;
	}

	.when-not-teaching__copy {
		max-width: 640px;
	}
}

@media (max-width: 720px) {
	#when-not-teaching {
		min-height: auto;
		padding: 94px 18px 78px;
		background-position: 56% center;
	}

	.when-not-teaching__container {
		min-height: 780px;
		padding: 0;
	}

	.when-not-teaching__content {
		padding-top: 0;
		max-width: 92%;
	}

	.when-not-teaching__title {
		margin-bottom: 22px;
	}

	.when-not-teaching__copy {
		font-size: 14px;
		line-height: 1.68;
	}

	.when-not-teaching__tooltip {
		padding: 14px 18px;
		font-size: 12px;
	}

	.when-not-teaching__float--gym {
		left: 7%;
		top: 4%;
	}

	.when-not-teaching__float--gaming {
		right: 4%;
		top: 11%;
	}

	.when-not-teaching__float--pasta {
		left: 8%;
		bottom: 14%;
	}

	.when-not-teaching__float--chess {
		left: 7%;
		top: 4%;
	}

	.when-not-teaching__float--badminton {
		right: 4%;
		top: 11%;
	}

	.when-not-teaching__float--music {
		left: 8%;
		bottom: 14%;
	}

	.when-not-teaching__float--type {
		right: 8%;
		bottom: 16%;
	}

	.when-not-teaching__float--type .when-not-teaching__tooltip {
		min-width: 208px;
	}
}

@media (max-width: 520px) {
	.when-not-teaching__container {
		min-height: 720px;
	}

	.when-not-teaching__title {
		font-size: clamp(34px, 11vw, 44px);
		line-height: 1.1;
	}

	.when-not-teaching__title span::after {
		height: 1.38em;
	}

	.when-not-teaching__float--gaming {
		top: 9%;
	}

	.when-not-teaching__lol-logo {
		font-size: clamp(24px, 8vw, 34px);
	}

	.when-not-teaching__float--type {
		bottom: 12%;
		font-size: 78px;
	}

	.when-not-teaching__float--type .when-not-teaching__tooltip {
		left: 58%;
		white-space: normal;
		width: min(76vw, 252px);
	}

	.when-not-teaching__tooltip {
		white-space: normal;
		width: max-content;
		max-width: 56vw;
	}
}

@media (max-width: 520px) and (hover: none) {
	.when-not-teaching__float--type .when-not-teaching__tooltip {
		opacity: 0;
		transform: translate(-50%, 12px) scale(0.97);
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.when-not-teaching__float,
	.when-not-teaching__tooltip {
		transition: none;
	}

	.when-not-teaching__float:hover,
	.when-not-teaching__float:focus-visible,
	.when-not-teaching__float--gym:hover,
	.when-not-teaching__float--gym:focus-visible,
	.when-not-teaching__float--pasta:hover,
	.when-not-teaching__float--pasta:focus-visible,
	.when-not-teaching__float--type:hover,
	.when-not-teaching__float--type:focus-visible {
		transform: none;
	}
}