.school-intro {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
	margin-left: calc(-50vw + 50% + 20px);
	margin-right: calc(-50vw + 50% + 20px);
	width: calc(100vw - 40px);
	padding-bottom: var(--spacing-sm);
	background:
		radial-gradient(ellipse 120% 35% at 50% 92%, oklch(28% 0.03 90deg), transparent),
		radial-gradient(ellipse 55% 28% at 20% 88%, oklch(25% 0.04 80deg), transparent),
		radial-gradient(ellipse 45% 22% at 78% 94%, oklch(23% 0.03 110deg), transparent),
		radial-gradient(ellipse 35% 18% at 50% 82%, oklch(30% 0.02 70deg), transparent),
		radial-gradient(ellipse 30% 15% at 10% 96%, oklch(21% 0.03 100deg), transparent),
		radial-gradient(ellipse 40% 20% at 65% 86%, oklch(26% 0.04 95deg), transparent),
		radial-gradient(ellipse 25% 12% at 88% 90%, oklch(24% 0.02 120deg), transparent),
		radial-gradient(ellipse 30% 30% at 50% 5%, oklch(48% 0.1 134.36deg), transparent),
		radial-gradient(ellipse 25% 25% at 40% 10%, oklch(45% 0.09 170deg), transparent),
		radial-gradient(ellipse 20% 20% at 60% 8%, oklch(50% 0.08 209.06deg), transparent),
		radial-gradient(ellipse 50% 45% at 8% 15%, oklch(38% 0.1 134.36deg), transparent),
		radial-gradient(ellipse 40% 50% at 88% 10%, oklch(42% 0.08 209.06deg), transparent),
		radial-gradient(ellipse 35% 40% at 50% 35%, oklch(40% 0.1 209.06deg), transparent),
		radial-gradient(ellipse 30% 35% at 92% 40%, oklch(34% 0.09 134.36deg), transparent),
		radial-gradient(ellipse 40% 30% at 18% 50%, oklch(30% 0.06 250deg), transparent),
		radial-gradient(ellipse 30% 25% at 68% 15%, oklch(44% 0.08 134.36deg), transparent),
		radial-gradient(ellipse 25% 30% at 35% 25%, oklch(36% 0.08 170deg), transparent),
		radial-gradient(ellipse 35% 25% at 78% 35%, oklch(36% 0.11 134.36deg), transparent),
		radial-gradient(ellipse 25% 20% at 75% 55%, oklch(30% 0.07 240deg), transparent),
		radial-gradient(ellipse 35% 30% at 55% 65%, oklch(28% 0.06 209.06deg), transparent),
		linear-gradient(160deg, oklch(22% 0.06 150deg), oklch(16% 0.05 220deg));
}

.school-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.35;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("/assets/icons/grain-noise.svg");
	background-size: 180px 180px;
}

.school-intro__hero {
	padding: 80px 50px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.school-intro__body {
	position: relative;
	z-index: 4;
}

.school-intro__prose {
	font-size: var(--size-2xl);
	line-height: var(--leading-loose);
	color: var(--color-gray-600);
}

.school-intro__title {
	position: relative;
	z-index: 4;
	color: var(--color-white);
	font-size: 3.5rem;
	font-weight: 800;
	text-align: center;
	letter-spacing: 0;
	line-height: var(--leading-none);
	margin: 0;
	text-transform: uppercase;
}

.school-intro__title-sub {
	display: block;
	font-size: clamp(0.85rem, 2.5vw, 1.6rem);
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-top: var(--spacing-xs);
}

.school-intro__canvas {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
}

.school-intro__scene {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	overflow: hidden;
}

.school-intro__mist {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.4;
}

.school-intro__mist--1 {
	width: 500px;
	height: 200px;
	left: -100px;
	bottom: 10%;
	background: radial-gradient(ellipse at center, oklch(35% 0.04 250deg / 50%), transparent 70%);
	filter: blur(50px);
	animation: mist-1 14s ease-in-out infinite alternate;
}

.school-intro__mist--2 {
	width: 400px;
	height: 250px;
	right: -80px;
	top: 15%;
	background: radial-gradient(ellipse at center, oklch(30% 0.05 270deg / 40%), transparent 70%);
	filter: blur(60px);
	animation: mist-2 18s ease-in-out infinite alternate;
}

.school-intro__mist--3 {
	width: 600px;
	height: 150px;
	left: 20%;
	bottom: 0;
	background: radial-gradient(ellipse at center, oklch(28% 0.04 240deg / 60%), transparent 65%);
	filter: blur(45px);
	animation: mist-3 11s ease-in-out infinite alternate;
}

.school-intro__mist--4 {
	width: 350px;
	height: 180px;
	left: 60%;
	bottom: 25%;
	background: radial-gradient(ellipse at center, oklch(32% 0.03 220deg / 35%), transparent 70%);
	filter: blur(55px);
	animation: mist-4 16s ease-in-out infinite alternate;
}

.school-intro__mist--5 {
	width: 450px;
	height: 130px;
	left: -50px;
	top: 30%;
	background: radial-gradient(ellipse at center, oklch(25% 0.05 260deg / 30%), transparent 70%);
	filter: blur(65px);
	animation: mist-5 20s ease-in-out infinite alternate;
}

@keyframes mist-1 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.3;
	}

	100% {
		transform: translate(80px, -20px) scale(1.3);
		opacity: 0.5;
	}
}

@keyframes mist-2 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.25;
	}

	100% {
		transform: translate(-60px, 30px) scale(1.2);
		opacity: 0.45;
	}
}

@keyframes mist-3 {
	0% {
		transform: translate(0, 0) scaleX(1);
		opacity: 0.35;
	}

	100% {
		transform: translate(-40px, -10px) scaleX(1.4);
		opacity: 0.55;
	}
}

@keyframes mist-4 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.2;
	}

	100% {
		transform: translate(50px, 15px) scale(1.25);
		opacity: 0.4;
	}
}

@keyframes mist-5 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.2;
	}

	100% {
		transform: translate(70px, -25px) scale(1.15);
		opacity: 0.35;
	}
}

.school-intro__mascots {
	position: relative;
	z-index: 2;
	height: 625px;
	width: auto;
	margin-top: 30px;
	filter: drop-shadow(0 0 30px oklch(60% 0.08 87deg / 15%)) drop-shadow(0 8px 24px rgb(0 0 0 / 25%));
}

.school-intro__tree {
	position: absolute;
	bottom: 60px;
	z-index: 1;
	color: oklch(10% 0.05 134.36deg);
	pointer-events: none;
	transform-origin: bottom center;
	mask-image: linear-gradient(to top, transparent 3%, black 25%);
}

.school-intro__tree--1 {
	left: 5%;
	bottom: 110px;
	height: 800px;
	opacity: 0.12;
	animation: tree-sway-1 14s ease-in-out infinite alternate;
}

.school-intro__tree--2 {
	left: 20%;
	bottom: 190px;
	height: 480px;
	opacity: 0.06;
	animation: tree-sway-2 18s ease-in-out infinite alternate;
}

.school-intro__tree--3 {
	right: 5%;
	bottom: 120px;
	height: 700px;
	opacity: 0.1;
	animation: tree-sway-3 16s ease-in-out infinite alternate;
}

.school-intro__tree--4 {
	right: 22%;
	bottom: 210px;
	height: 420px;
	opacity: 0.05;
	animation: tree-sway-1 20s ease-in-out infinite alternate-reverse;
}

.school-intro__tree--5 {
	left: 38%;
	bottom: 170px;
	height: 520px;
	opacity: 0.04;
	animation: tree-sway-2 22s ease-in-out infinite alternate;
}

.school-intro__tree--6 {
	left: -27%;
	bottom: 0;
	height: 950px;
	opacity: 0.16;
	animation: tree-sway-3 18s ease-in-out infinite alternate;
}

.school-intro__tree--7 {
	right: -25%;
	bottom: 10px;
	height: 880px;
	opacity: 0.14;
	animation: tree-sway-1 20s ease-in-out infinite alternate-reverse;
}

@keyframes tree-sway-1 {
	0% {
		transform: rotate(-0.8deg);
	}

	100% {
		transform: rotate(1deg);
	}
}

@keyframes tree-sway-2 {
	0% {
		transform: rotate(1.2deg);
	}

	100% {
		transform: rotate(-0.6deg);
	}
}

@keyframes tree-sway-3 {
	0% {
		transform: rotate(0.5deg);
	}

	100% {
		transform: rotate(-1.2deg);
	}
}

.tutor-intro-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxl);
	margin-top: var(--spacing-xl);
}

.tutor-intro {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--spacing-lg);
}

.tutor-intro--reversed {
	flex-direction: row-reverse;
}

.tutor-intro__figure {
	flex-shrink: 0;
}

.tutor-intro__figure img {
	height: 380px;
	width: auto;
	animation: tutor-float 3s ease-in-out infinite;
}

.tutor-intro:nth-child(2) .tutor-intro__figure img {
	animation-delay: -1s;
}

.tutor-intro:nth-child(3) .tutor-intro__figure img {
	animation-delay: -2s;
}

@keyframes tutor-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.tutor-intro__prose {
	flex: 1;
	min-width: 0;
}

.tutor-intro__prose h3 {
	font-size: var(--size-4xl);
	font-weight: 700;
	color: var(--color-seiji-700);
	margin: 0 0 var(--spacing-xs);
	letter-spacing: var(--letter-spacing-sm);
}

.tutor-intro__prose > p {
	font-size: var(--size-lg);
	line-height: var(--leading-loose);
	color: var(--color-gray-600);
}

.tutor-intro__details {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--spacing-xs) var(--spacing-sm);
	margin-top: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	background: radial-gradient(ellipse 90% 120% at 50% 40%, rgb(60 175 192 / 6%), transparent 60%);
	font-size: var(--size-lg);
	line-height: var(--leading-relaxed);
}

.tutor-intro__details::before,
.tutor-intro__details::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-seiji-200) 15%,
		var(--color-seiji-300) 40%,
		var(--color-seiji-400) 50%,
		var(--color-seiji-300) 60%,
		var(--color-seiji-200) 85%,
		transparent
	);
}

.tutor-intro__details::before {
	top: 0;
	width: 80%;
}

.tutor-intro__details::after {
	bottom: 0;
	width: 60%;
	opacity: 0.6;
}

.tutor-intro__details dt {
	font-weight: 600;
	color: var(--color-gray-700);
	white-space: nowrap;
}

.tutor-intro__details dd {
	margin: 0;
	color: var(--color-gray-600);
}

.tutor-intro__quote-translation {
	display: block;
	color: var(--color-gray-400);
	font-style: italic;
	font-size: inherit;
	margin-top: 2px;
}

@media (width <= 1024px) {
	.school-intro__hero {
		padding: 80px 40px 15px;
	}

	.school-intro__mascots {
		height: 480px;
	}

	.school-intro__tree--1 {
		height: 520px;
	}

	.school-intro__tree--2 {
		height: 280px;
	}

	.school-intro__tree--3 {
		height: 380px;
	}

	.school-intro__tree--4 {
		height: 200px;
	}

	.school-intro__tree--5 {
		height: 320px;
	}

	.school-intro__tree--6 {
		height: 650px;
	}

	.school-intro__tree--7 {
		height: 600px;
	}
}

@media (width <= 768px) {
	.school-intro {
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		width: 100vw;
	}

	.school-intro__hero {
		padding: 60px 30px 15px;
	}

	.school-intro__title {
		font-size: 2.4rem;
	}

	.school-intro__mascots {
		height: 380px;
	}

	.school-intro__tree {
		bottom: 40px;
	}

	.school-intro__tree--1 {
		height: 380px;
		left: 0;
	}

	.school-intro__tree--2 {
		height: 200px;
		left: 15%;
	}

	.school-intro__tree--3 {
		height: 280px;
		right: 0;
	}

	.school-intro__tree--4 {
		height: 150px;
		right: 18%;
	}

	.school-intro__tree--5 {
		height: 240px;
	}

	.school-intro__tree--6 {
		height: 450px;
		left: -30%;
	}

	.school-intro__tree--7 {
		height: 420px;
		right: -28%;
	}
}

@media (width <= 640px) {
	.school-intro__hero {
		padding: 50px 20px 15px;
	}

	.school-intro__title {
		font-size: 1.8rem;
	}

	.school-intro__scene {
		min-height: 320px;
	}

	.school-intro__mascots {
		height: 280px;
	}

	.school-intro__tree {
		bottom: 30px;
	}

	.school-intro__tree--1 {
		height: 260px;
		left: -5%;
	}

	.school-intro__tree--2 {
		height: 140px;
		left: 10%;
	}

	.school-intro__tree--3 {
		height: 200px;
		right: -5%;
	}

	.school-intro__tree--4 {
		height: 110px;
		right: 12%;
	}

	.school-intro__tree--5 {
		height: 170px;
	}

	.school-intro__tree--6 {
		height: 320px;
		left: -35%;
	}

	.school-intro__tree--7 {
		height: 300px;
		right: -32%;
	}

	.tutor-intro,
	.tutor-intro--reversed {
		flex-direction: column;
		align-items: center;
	}

	.tutor-intro__figure img {
		height: 220px;
	}

	.tutor-intro__prose {
		text-align: center;
	}

	.tutor-intro__prose h3 {
		font-size: var(--size-3xl);
	}

	.tutor-intro__details {
		grid-template-columns: 1fr;
		text-align: left;
	}
}