/*
 * Thirteen-scene home hero. The still illustrations form a short, readable story
 * without the weight, tracking or autoplay constraints of embedded video.
 */
.hero-cinema {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #e7f2f5;
	isolation: isolate;
}

.hero-cinema::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 4;
	width: min(60%, 850px);
	background: rgba(232, 243, 246, .18);
	pointer-events: none;
}

.hero-cinema-scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	opacity: 0;
	clip-path: inset(0 0 0 100%);
	transition: opacity .78s ease, clip-path 1.02s cubic-bezier(.62, 0, .2, 1);
	will-change: opacity, clip-path;
}

.hero-cinema-scene.is-current {
	z-index: 3;
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

.hero-cinema-scene.is-leaving {
	z-index: 2;
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

.hero-cinema-scene img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	max-height: none;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	mix-blend-mode: normal;
	transform: scale(1.018) translate3d(0, 0, 0);
	will-change: transform;
}

.hero-cinema-scene.is-current img {
	animation: skcHeroDrift 4.9s cubic-bezier(.2, .65, .25, 1) both;
}

.hero-cinema-scene.is-leaving img {
	transform: scale(1.055) translate3d(-.55%, -.25%, 0);
}

@keyframes skcHeroDrift {
	from { transform: scale(1.018) translate3d(0, 0, 0); }
	to { transform: scale(1.055) translate3d(-.55%, -.25%, 0); }
}

.hero-story-voice {
	display: flex;
	align-items: center;
	width: min(100%, 445px);
	height: 88px;
	min-height: 88px;
	box-sizing: border-box;
	margin: 19px 0 0;
	padding: 10px 16px;
	background: rgba(255, 255, 255, .7);
	border-left: 4px solid #b6644d;
	border-radius: 0 12px 12px 0;
	box-shadow: 0 8px 28px rgba(37, 71, 78, .06);
	backdrop-filter: blur(8px);
	transition: opacity .2s ease, transform .2s ease;
}

.hero-story-voice.is-changing {
	opacity: .1;
	transform: translateY(4px);
}

.hero-story-voice p {
	margin: 0;
	color: #284f56;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(18px, 1.45vw, 23px);
	font-weight: 600;
	letter-spacing: .035em;
	line-height: 1.45;
	text-wrap: balance;
}

.hero-cinema-progress {
	position: absolute;
	right: 86px;
	bottom: 28px;
	z-index: 6;
	display: flex;
	gap: 2px;
}

.hero-cinema-progress button {
	position: relative;
	display: block;
	width: 30px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.hero-cinema-progress button::before {
	content: "";
	position: absolute;
	inset: 11px 3px auto;
	height: 2px;
	background: rgba(36, 68, 75, .27);
	border-radius: 999px;
	transition: height .2s ease, background .2s ease, transform .2s ease;
}

.hero-cinema-progress button.is-active::before {
	height: 3px;
	background: #315f65;
	transform: translateY(-.5px);
}

.hero-cinema-progress button:focus-visible {
	outline: 2px solid rgba(49, 95, 101, .52);
	outline-offset: 1px;
}

.hero-motion-toggle {
	position: absolute;
	right: 31px;
	bottom: 20px;
	z-index: 6;
	display: grid;
	width: 42px;
	height: 42px;
	padding: 0;
	place-items: center;
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(36, 68, 75, .17);
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(32, 60, 69, .09);
	color: #315f65;
	cursor: pointer;
	font: inherit;
	transition: background .2s ease, transform .2s ease;
}

.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible {
	background: #fff;
	transform: translateY(-2px);
}

.hero-motion-toggle:focus-visible {
	outline: 3px solid rgba(49, 95, 101, .34);
	outline-offset: 3px;
}

.hero-motion-toggle span {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.16em;
	line-height: 1;
}

.hero-cinema.is-paused .hero-cinema-scene.is-current img,
.hero-cinema.is-document-hidden .hero-cinema-scene.is-current img {
	animation-play-state: paused;
}

@media (min-width: 861px) {
	.hero-cinema {
		right: auto;
		bottom: auto;
		width: 100%;
	}

	.hero-copy,
	.hero-station,
	.hero-scroll {
		isolation: isolate;
	}
}

@media (max-width: 860px) {
	.hero-cinema {
		position: relative;
		inset: auto;
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		height: auto;
		min-height: 230px;
		margin: 0;
		aspect-ratio: 16 / 10;
	}

	.hero-cinema::after { display: none; }

	.hero-cinema-scene {
		clip-path: none;
		transition: opacity .72s ease;
	}

	.hero-cinema-scene img { object-position: center; }

	.hero-story-voice {
		position: relative;
		z-index: 5;
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		justify-self: start;
		width: min(calc(100% - 125px), 290px);
		height: 70px;
		min-height: 70px;
		margin: 0 0 52px 14px;
		padding: 7px 12px;
		background: rgba(255, 255, 255, .88);
		box-shadow: 0 8px 24px rgba(37, 71, 78, .1);
	}

	.hero-buttons-unified { margin-top: -23px; }

	.hero-cinema-progress {
		right: 68px;
		bottom: 14px;
	}

	.hero-cinema-progress button { width: 18px; }

	.hero-motion-toggle {
		right: 16px;
		bottom: 5px;
	}
}

@media (max-width: 520px) {
	.hero-cinema {
		min-height: 220px;
		aspect-ratio: 16 / 10.5;
	}

	.hero-cinema-scene img { object-position: 58% center; }

	.hero-story-voice {
		width: min(calc(100% - 112px), 270px);
		height: 60px;
		min-height: 60px;
		margin: 0 0 49px 11px;
	}

	.hero-story-voice p {
		font-size: 14px;
		letter-spacing: .015em;
		line-height: 1.35;
		white-space: pre-line;
	}
	.hero-buttons-unified { margin-top: -20px; }
	.hero-cinema-progress { right: 61px; bottom: 12px; }
	.hero-cinema-progress button { width: 14px; }
	.hero-motion-toggle { right: 11px; bottom: 4px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-cinema-scene,
	.hero-cinema-scene img,
	.hero-story-voice {
		animation: none !important;
		transition: none !important;
	}

	.hero-cinema-scene { display: none; }
	.hero-cinema-scene-ai { display: block; opacity: 1; clip-path: none; }
	.hero-motion-toggle,
	.hero-cinema-progress { display: none; }
}

/* AI-assisted layered opening scene: every layer moves independently so the
 * scene feels cinematic without loading an autoplay video. */
.hero-cinema-scene-ai {
	--hero-space-x: 0px;
	--hero-space-y: 0px;
	--hero-halo-x: 0px;
	--hero-halo-y: 0px;
	--hero-character-x: 0px;
	--hero-character-y: 0px;
	--hero-trace-x: 0px;
	--hero-trace-y: 0px;
	background: #e5f0f2;
}

.hero-cinema-scene-ai::before,
.hero-cinema-scene-ai::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hero-cinema-scene-ai::before {
	top: 7%;
	right: 4%;
	width: min(46vw, 690px);
	aspect-ratio: 1;
	background: rgba(249, 239, 216, .78);
}

.hero-cinema-scene-ai::after {
	right: 31%;
	bottom: 8%;
	width: min(12vw, 170px);
	aspect-ratio: 1;
	background: rgba(255, 255, 255, .48);
}

.hero-ai-space {
	position: absolute;
	inset: 0;
	transform: translate3d(var(--hero-space-x), var(--hero-space-y), 0);
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}

.hero-ai-halo {
	position: absolute;
	right: 7.5%;
	bottom: 5%;
	width: min(30vw, 440px);
	aspect-ratio: 1;
	border: 1px solid rgba(70, 113, 113, .22);
	border-radius: 50%;
	box-shadow: 0 0 0 26px rgba(255, 255, 255, .16), 0 0 0 58px rgba(255, 255, 255, .09);
	transform: translate3d(var(--hero-halo-x), var(--hero-halo-y), 0) scale(.92);
	opacity: .68;
}

.hero-cinema-scene-ai.is-current .hero-ai-halo {
	animation: skcHeroAiHalo 4.4s ease-in-out infinite;
}

.hero-ai-shadow {
	position: absolute;
	right: 8%;
	bottom: 2%;
	width: min(24vw, 350px);
	height: 5.5%;
	background: rgba(42, 75, 76, .13);
	border-radius: 50%;
	filter: blur(8px);
}

.hero-cinema-scene-ai .hero-ai-character {
	position: absolute;
	inset: auto 7% -3% auto;
	width: min(25.5vw, 380px);
	height: auto !important;
	max-height: 94%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 18px 20px rgba(42, 75, 76, .13));
	transform: translate3d(var(--hero-character-x), var(--hero-character-y), 0);
	transform-origin: 50% 88%;
	will-change: transform;
}

.hero-cinema-scene-ai.is-current .hero-ai-character {
	animation: skcHeroAiBreathe 4.4s ease-in-out infinite;
}

.hero-ai-trace {
	position: absolute;
	top: 20%;
	right: 18%;
	width: min(30vw, 450px);
	height: 46%;
	overflow: visible;
	transform: translate3d(var(--hero-trace-x), var(--hero-trace-y), 0);
}

.hero-ai-thought {
	fill: none;
	stroke: rgba(96, 115, 109, .48);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
}

.hero-ai-thought-thread { stroke-width: 2.4; }
.hero-ai-thought-mist-a { stroke-width: 3.1; }
.hero-ai-thought-mist-b {
	stroke-width: 2.6;
	stroke: rgba(96, 115, 109, .36);
}
.hero-ai-thought-mist-c {
	stroke-width: 2.2;
	stroke: rgba(96, 115, 109, .3);
}

.hero-ai-thought-haze {
	fill: rgba(96, 115, 109, .065);
	stroke: rgba(96, 115, 109, .11);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	filter: blur(1.5px);
	opacity: 0;
}

.hero-ai-thought-dot {
	fill: rgba(96, 115, 109, .4);
	opacity: 0;
}

.hero-cinema-scene-ai.is-current .hero-ai-thought-thread { animation: skcHeroAiThought 5.45s .05s cubic-bezier(.3, .7, .2, 1) both; }
.hero-cinema-scene-ai.is-current .hero-ai-thought-mist-a { animation: skcHeroAiThought 5.3s .16s cubic-bezier(.3, .7, .2, 1) both; }
.hero-cinema-scene-ai.is-current .hero-ai-thought-mist-b { animation: skcHeroAiThought 5.15s .3s cubic-bezier(.3, .7, .2, 1) both; }
.hero-cinema-scene-ai.is-current .hero-ai-thought-mist-c { animation: skcHeroAiThought 5s .4s cubic-bezier(.3, .7, .2, 1) both; }
.hero-cinema-scene-ai.is-current .hero-ai-thought-haze-a { animation: skcHeroAiHaze 5.4s .08s ease both; }
.hero-cinema-scene-ai.is-current .hero-ai-thought-haze-b { animation: skcHeroAiHaze 5.15s .22s ease both; }

.hero-ai-chip,
.hero-ai-relief {
	position: absolute;
	z-index: 2;
	display: grid;
	gap: 1px;
	min-width: 92px;
	padding: 9px 13px;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(53, 95, 98, .13);
	border-radius: 13px;
	box-shadow: 0 9px 26px rgba(46, 79, 81, .08);
	color: #315f65;
	font-family: var(--font-sans, sans-serif);
	line-height: 1.25;
	opacity: 0;
	transform: translate3d(0, 12px, 0);
}

.hero-ai-chip small {
	font-size: 10px;
	letter-spacing: .08em;
}

.hero-ai-chip strong {
	font-size: 14px;
	font-weight: 650;
}

.hero-ai-chip-mail { top: 37%; right: 3.5%; }
.hero-ai-chip-task { right: 29%; bottom: 18%; }

.hero-cinema-scene-ai.is-current .hero-ai-chip-mail { animation: skcHeroAiPressure 5.35s .28s ease both; }
.hero-cinema-scene-ai.is-current .hero-ai-chip-task { animation: skcHeroAiPressure 5.05s .55s ease both; }

.hero-ai-relief {
	z-index: 6;
	top: 13%;
	right: 29%;
	min-width: 0;
	padding: 10px 15px;
	border-color: rgba(53, 111, 115, .24);
	background: rgba(255, 255, 255, .9);
	font-size: 14px;
	font-weight: 650;
	letter-spacing: .03em;
}

.hero-cinema-scene-ai.is-current .hero-ai-relief {
	animation: skcHeroAiRelief 8.8s ease both;
}

.hero-cinema.is-paused .hero-ai-halo,
.hero-cinema.is-paused .hero-ai-character,
.hero-cinema.is-paused .hero-ai-thought,
.hero-cinema.is-paused .hero-ai-thought-haze,
.hero-cinema.is-paused .hero-ai-chip,
.hero-cinema.is-paused .hero-ai-relief,
.hero-cinema.is-document-hidden .hero-ai-halo,
.hero-cinema.is-document-hidden .hero-ai-character,
.hero-cinema.is-document-hidden .hero-ai-thought,
.hero-cinema.is-document-hidden .hero-ai-thought-haze,
.hero-cinema.is-document-hidden .hero-ai-chip,
.hero-cinema.is-document-hidden .hero-ai-relief {
	animation-play-state: paused !important;
}

@keyframes skcHeroAiBreathe {
	0%, 100% { transform: translate3d(var(--hero-character-x), var(--hero-character-y), 0) scale(1); }
	50% { transform: translate3d(var(--hero-character-x), calc(var(--hero-character-y) - 5px), 0) scale(1.008, 1.015); }
}

@keyframes skcHeroAiHalo {
	0%, 100% { opacity: .48; transform: translate3d(var(--hero-halo-x), var(--hero-halo-y), 0) scale(.92); }
	50% { opacity: .76; transform: translate3d(var(--hero-halo-x), var(--hero-halo-y), 0) scale(1.02); }
}

@keyframes skcHeroAiThought {
	0% { stroke-dashoffset: 1; opacity: 0; }
	12% { opacity: .22; }
	42% { stroke-dashoffset: 0; opacity: .48; }
	68% { stroke-dashoffset: 0; opacity: .34; }
	84% { stroke-dashoffset: 0; opacity: .46; }
	100% { stroke-dashoffset: 0; opacity: .36; }
}

@keyframes skcHeroAiHaze {
	0%, 8% { opacity: 0; }
	34% { opacity: .64; }
	68% { opacity: .42; }
	100% { opacity: .54; }
}

@keyframes skcHeroAiPressure {
	0% { opacity: 0; transform: translate3d(0, 13px, 0); }
	14%, 45% { opacity: 1; transform: translate3d(0, 0, 0); }
	61%, 100% { opacity: 0; transform: translate3d(7px, -8px, 0); }
}

@keyframes skcHeroAiRelief {
	0%, 58% { opacity: 0; transform: translate3d(0, 12px, 0); }
	72%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
	.hero-cinema-scene-ai::before {
		top: 5%;
		right: -8%;
		width: 68vw;
	}

	.hero-cinema-scene-ai::after { display: none; }

	.hero-ai-halo {
		right: 2%;
		bottom: -1%;
		width: 48vw;
	}

	.hero-ai-shadow {
		right: 3%;
		bottom: 1%;
		width: 38vw;
	}

	.hero-cinema-scene-ai .hero-ai-character {
		inset: auto 2% -6% auto;
		width: min(42vw, 206px);
		max-height: 106%;
	}

	.hero-story-voice {
		width: min(calc(100% - 112px), 270px);
	}

	.hero-ai-trace {
		top: 8%;
		right: 24%;
		width: 52vw;
		height: 50%;
	}

	.hero-ai-chip-mail,
	.hero-ai-chip-task { display: none; }

	.hero-ai-chip strong { font-size: 12px; }

	.hero-ai-relief {
		top: 10%;
		right: auto;
		bottom: auto;
		left: 4%;
		padding: 8px 11px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-ai-space,
	.hero-ai-halo,
	.hero-cinema-scene-ai .hero-ai-character,
	.hero-ai-trace,
	.hero-ai-thought,
	.hero-ai-thought-haze,
	.hero-ai-chip,
	.hero-ai-relief {
		animation: none !important;
		transition: none !important;
	}

	.hero-ai-chip { display: none; }
	.hero-ai-thought { stroke-dashoffset: 0; opacity: .38; }
	.hero-ai-thought-haze { opacity: .48; }
	.hero-ai-relief { opacity: 1; transform: none; }
}