/* Landing page: one 580px column that fits a single screen.
   Sizes use --fit: 1 unit is 1px on a screen at least 480px wide and 830px tall, and it shrinks on
   anything smaller. It stops at 0.6, so the text stays readable and a very small screen just scrolls. */

:root {
	--screen: 100vh;
}

@supports (height: 100svh) {
	:root {
		--screen: 100svh;
	}
}

* {
	box-sizing: border-box;
	letter-spacing: -0.5px;
}

html,
body,
h1,
h2,
p {
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
	color: #000;
	font-family: 'Noto Sans KR', sans-serif;
	-webkit-text-size-adjust: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	vertical-align: top;
}

.page {
	--fit: clamp(0.6px, min(calc(var(--screen) / 830), calc(100vw / 480)), 1px);
	display: flex;
	flex-direction: column;
	min-height: var(--screen);
	background: url('../images/sky.jpg') center / cover no-repeat;
}

/* On a screen taller than the content, the spare room goes evenly above and below it. */
.page-inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
}

/* Logo: any image fits this slot without stretching. */
.logo {
	padding-top: calc(20 * var(--fit));
	font-size: 16px;
	transform: translateY(calc(-14 * var(--fit)));
	font-weight: 400;
	text-align: center;
}

.logo img {
	width: calc(236 * var(--fit));
	height: calc(72 * var(--fit));
	object-fit: contain;
}

/* Banner */
.banner {
	position: relative;
	margin-top: calc(12 * var(--fit));
	overflow: hidden;
	border-radius: 20px;
	container-type: inline-size;
	touch-action: pan-y;
}

.banner-track {
	display: flex;
	transition: transform 0.3s ease;
}

/* Slide contents scale with the banner's width or the screen's height, whichever is tighter.
   The max() sizes below stop the text getting too small to read on phones. */
.banner-slide {
	--unit: min(calc(100cqw / 580), var(--fit));
	position: relative;
	flex: 0 0 100%;
	height: min(calc(230 * var(--fit)), 51.7cqw);
	color: #fff;
}

.banner-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: calc(3 * var(--unit));
	background: rgba(14, 92, 170, 0.62);
	text-align: center;
}

.banner-eyebrow {
	font-family: 'Noto Serif KR', serif;
	font-size: max(16px, calc(18 * var(--unit)));
	line-height: max(21px, calc(24 * var(--unit)));
	letter-spacing: 0;
}

.banner-title {
	margin-top: calc(16 * var(--unit));
	font-size: max(20px, calc(22 * var(--unit)));
	font-weight: 300;
	line-height: max(26px, calc(28 * var(--unit)));
	letter-spacing: -0.02em;
}

.banner-title b {
	font-weight: 700;
	letter-spacing: inherit;
}

.banner-button {
	width: max(160px, calc(180 * var(--unit)));
	height: max(40px, calc(41 * var(--unit)));
	margin-top: calc(17 * var(--unit));
	border-radius: max(20px, calc(21 * var(--unit)));
	background: #0a1a33;
	color: #fff;
	font-size: max(15px, calc(16 * var(--unit)));
	font-weight: 400;
	line-height: max(40px, calc(41 * var(--unit)));
}

.banner-control {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 25px;
	padding: 0 0 0 15px;
	border: 0;
	border-radius: 25px;
	background: #333;
	color: #fff;
	font-family: inherit;
	cursor: pointer;
}

.banner-control[hidden] {
	display: none;
}

.banner-control svg {
	position: absolute;
	top: 7.5px;
	left: 10px;
	width: 10px;
	height: 10px;
	fill: currentColor;
}

.banner-count {
	font-size: 12px;
	line-height: 1;
}

.icon-play,
.is-paused .icon-pause {
	display: none;
}

.is-paused .icon-play {
	display: block;
}

/* Round shortcuts */
.shortcuts {
	display: flex;
	justify-content: space-between;
	margin-top: calc(24 * var(--fit));
}

.shortcut {
	color: #131313;
	font-size: max(14px, calc(19 * var(--fit)));
	line-height: 1.4;
	text-align: center;
}

.shortcut-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(84 * var(--fit));
	height: calc(84 * var(--fit));
	margin: 0 auto calc(8 * var(--fit));
	border-radius: 50%;
	background: #fff;
	color: #666;
	font-size: calc(48 * var(--fit));
	font-weight: 200;
}

/* Link boxes: two by two */
.menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(12 * var(--fit));
	margin-top: calc(24 * var(--fit));
}

.menu-item {
	display: flex;
	align-items: center;
	height: calc(84 * var(--fit));
	padding: 0 calc(12 * var(--fit));
	border-radius: calc(20 * var(--fit));
	background: #2469a8;
	color: #fff;
}

.menu-item--dark {
	background: #123d63;
}

.menu-item--light {
	background: #fff;
}

.menu-item--youtube {
	--ring-from: #ff9a9a;
	--ring-to: #e5202b;
}

.menu-item--blog {
	--ring-from: #8fb4d6;
	--ring-to: #2469a8;
}

.menu-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(48 * var(--fit));
	height: calc(48 * var(--fit));
	border: 1px solid #fff;
	border-radius: 50%;
	font-size: calc(32 * var(--fit));
	font-weight: 300;
}

.menu-icon--youtube {
	border-color: #ff8381;
}

.menu-icon--youtube img {
	width: 60%;
	height: 60%;
}

.menu-icon--blog {
	border-color: #8fb4d6;
	color: #2469a8;
}

.menu-text {
	margin-left: calc(10 * var(--fit));
	font-size: max(13px, calc(19 * var(--fit)));
	font-weight: 300;
	line-height: 1.3;
}

.menu-text b {
	display: block;
	font-weight: 400;
}

.menu-item--light .menu-text {
	color: #424242;
}

/* Footer */
.site-footer {
	margin-top: calc(20 * var(--fit));
	padding: calc(14 * var(--fit)) 10px;
	background: #4f5d69;
}

.site-footer-inner {
	max-width: 580px;
	margin: 0 auto;
	color: #c8ced3;
	font-size: max(11px, calc(14 * var(--fit)));
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
}

/* Moving background, landing page only. Two cloud layers drift opposite ways so the clouds seem to
   change shape, and each moves exactly one repeat of the picture so the loop never shows.
   --tile is the width of that repeat: sky-loop.jpg is three times as wide as it is tall. */
.page--scene {
	--tile: calc(var(--screen) * 3);
	position: relative;
	overflow: hidden;
}

.page--scene .page-inner {
	position: relative;
	z-index: 1;
}

/* Out of the page's flow in the top corner, so the one-screen layout doesn't change. */
.landing-login {
	position: absolute;
	top: calc(14 * var(--fit));
	right: calc(16 * var(--fit));
	z-index: 2;
	padding: calc(5 * var(--fit)) calc(16 * var(--fit));
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	color: #123d63;
	font-size: max(13px, calc(15 * var(--fit)));
	font-weight: 700;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	.landing-login:hover {
		background: #fff;
	}
}

/* A soft cloud of white behind the logo, so its small lines stay readable on the blue. */
.page--scene .logo {
	position: relative;
}

.page--scene .logo::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(360 * var(--fit));
	height: calc(150 * var(--fit));
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 62%, rgba(255, 255, 255, 0));
	transform: translate(-50%, -46%);
}

.page--scene .logo a {
	position: relative;
}

.sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sky-layer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(100% + var(--tile));
	background: url('../images/sky-loop.jpg?v=4') 0 0 / var(--tile) 100% repeat-x;
	animation: sky-drift 170s linear infinite;
	will-change: transform;
}

.sky-layer--far {
	--tile: calc(var(--screen) * 3.9);
	background-position: 0 100%;
	background-size: var(--tile) 130%;
	opacity: 0.5;
	animation-duration: 280s;
	animation-direction: reverse;
}

/* Warm sunlight that slowly brightens and fades */
.sky::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 65% 60% at 74% 4%, rgba(255, 246, 214, 0.95), rgba(255, 240, 200, 0.35) 42%, transparent 72%);
	animation: sky-glow 9s ease-in-out infinite alternate;
}

@keyframes sky-drift {
	to {
		transform: translate3d(calc(-1 * var(--tile)), 0, 0);
	}
}

@keyframes sky-glow {
	from {
		opacity: 0.35;
	}

	to {
		opacity: 1;
	}
}

/* See-through sky blue, so the clouds keep drifting behind the footer. */
.page--scene .site-footer {
	position: relative;
	background: rgba(56, 146, 226, 0.5);
}

.page--scene .site-footer-inner {
	color: #123d63;
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	.sky-layer,
	.sky::after {
		animation: none;
	}
}

/* The pieces rise and fade in, like the home page but quicker, because this page is only a doorway.
   index.html's head decides when. Everything can be tapped while it plays, because only the look changes. */
@keyframes landing-rise {
	from {
		opacity: 0;
		translate: 0 20px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.is-arriving .logo,
	.is-arriving .banner,
	.is-arriving .shortcut,
	.is-arriving .menu-item {
		animation: landing-rise 0.5s ease backwards;
	}

	.is-arriving .banner {
		animation-delay: 0.06s;
	}

	.is-arriving .shortcut:nth-child(1) {
		animation-delay: 0.12s;
	}

	.is-arriving .shortcut:nth-child(2) {
		animation-delay: 0.18s;
	}

	.is-arriving .shortcut:nth-child(3) {
		animation-delay: 0.24s;
	}

	.is-arriving .shortcut:nth-child(4) {
		animation-delay: 0.3s;
	}

	.is-arriving .menu-item:nth-child(1) {
		animation-delay: 0.36s;
	}

	.is-arriving .menu-item:nth-child(2) {
		animation-delay: 0.42s;
	}

	.is-arriving .menu-item:nth-child(3) {
		animation-delay: 0.48s;
	}

	.is-arriving .menu-item:nth-child(4) {
		animation-delay: 0.54s;
	}
}

/* Button hover effects: every button lifts, and a thick outline sweeps in from the top left corner.
   The outline is pale on the blue buttons. The YouTube and blog boxes set their own colours above. */
.shortcut-icon {
	transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.banner-button,
.menu-item {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner-button {
	--ring-width: 3px;
}

.banner-button::before,
.menu-item::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: var(--ring-width, 5px);
	border-radius: inherit;
	background: linear-gradient(135deg, var(--ring-from, #cfe6fa), var(--ring-to, #fff));
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	pointer-events: none;
	transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Touch screens skip these, because a hover effect would stick after a tap. */
@media (hover: hover) {
	.shortcut:hover .shortcut-icon {
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
		transform: scale(1.1);
	}

	.banner-slide:hover .banner-button,
	.menu-item:hover {
		box-shadow: 0 6px 15px rgba(18, 61, 99, 0.35);
		transform: translateY(-5px);
	}

	.banner-slide:hover .banner-button::before,
	.menu-item:hover::before {
		clip-path: polygon(-50% -50%, 200% -50%, 200% 200%, -50% 200%);
	}
}

@media (max-width: 600px) {
	.page-inner {
		padding: 0 10px;
	}
}

/* Placeholder pages (blog.html and coming-soon.html): delete this block once they are built. */
.stub {
	margin: 40px 0;
	padding: 40px 30px;
	border-radius: 20px;
	background: #fff;
	color: #424242;
	text-align: center;
}

.stub h1 {
	color: #123d63;
	font-size: 28px;
	font-weight: 400;
}

.stub p {
	margin-top: 10px;
	font-weight: 300;
}

.stub-back {
	display: inline-block;
	margin-top: 30px;
	padding: 10px 28px;
	border-radius: 25px;
	background: #2469a8;
	color: #fff;
}