/* ─── Fonts ──────────────────────────────────────────────────── */
@font-face {
	font-family: 'Outfit';
	src: url('/assets/fonts/outfit-latin-300-normal.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('/assets/fonts/outfit-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('/assets/fonts/outfit-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('/assets/fonts/outfit-latin-800-normal.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ─── YUI Reset ─────────────────────────────────────────────── */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}legend{color:#000}

/* ─── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
strong { font-weight: 700; }
em { font-style: italic; }

:root {
	--font: 'Outfit', system-ui, sans-serif;

	/* Summer palette */
	--summer-bg: #fff7ed;
	--summer-accent: #f97316;
	--summer-accent-light: #fed7aa;
	--summer-text: #7c2d12;
	--summer-blade: #fdba74;
	--summer-blade-shadow: #ea580c;
	--summer-hub: #f97316;

	/* Winter palette */
	--winter-bg: #eff6ff;
	--winter-accent: #3b82f6;
	--winter-accent-light: #bfdbfe;
	--winter-text: #1e3a8a;
	--winter-blade: #93c5fd;
	--winter-blade-shadow: #2563eb;
	--winter-hub: #3b82f6;

	/* Page */
	--page-bg: #f8fafc;
	--page-gradient: linear-gradient(160deg, #fff7ed 0%, #f8fafc 40%, #eff6ff 100%);
	--text: #1e293b;
	--radius: 1.5rem;
	--fan-size: clamp(140px, 22vw, 220px);
}

body {
	font-family: var(--font);
	background: var(--page-gradient);
	color: var(--text);
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ─── Page layout ───────────────────────────────────────────── */
.page {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vh, 2rem) clamp(1rem, 4vw, 2rem);
	gap: clamp(1rem, 3vh, 1.75rem);
	min-height: 100dvh;
}

/* ─── Header ────────────────────────────────────────────────── */
.hero-header {
	text-align: center;
}

.headline {
	font-size: clamp(1.4rem, 4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--text);
	margin-bottom: clamp(0.5rem, 2vh, 1rem);
}

/* ─── Fans wrapper ──────────────────────────────────────────── */
.fans-wrapper {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	width: 100%;
	max-width: 780px;
}

/* ─── Fan card ──────────────────────────────────────────────── */
.fan-card {
	flex: 1;
	border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}

.fan-card--summer {
	background: var(--summer-bg);
	border: 2px solid var(--summer-accent-light);
}

.fan-card--winter {
	background: var(--winter-bg);
	border: 2px solid var(--winter-accent-light);
}

/* Active season highlight */
body[data-season="summer"] .fan-card--summer {
	border-color: var(--summer-accent);
	box-shadow: 0 0 0 3px var(--summer-accent-light), 0 8px 32px -4px rgba(249,115,22,0.18);
	transform: translateY(-4px);
}

body[data-season="winter"] .fan-card--winter {
	border-color: var(--winter-accent);
	box-shadow: 0 0 0 3px var(--winter-accent-light), 0 8px 32px -4px rgba(59,130,246,0.18);
	transform: translateY(-4px);
}

/* "Now" badge on active card */
body[data-season="summer"] .fan-card--summer::before,
body[data-season="winter"] .fan-card--winter::before {
	content: 'Now';
	position: absolute;
	top: -0.65rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.15rem 0.65rem;
	border-radius: 99px;
	background: var(--summer-accent);
	color: #fff;
}

body[data-season="winter"] .fan-card--winter::before {
	background: var(--winter-accent);
}

/* ─── Season label ──────────────────────────────────────────── */
.season-label {
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fan-card--summer .season-label { color: var(--summer-text); }
.fan-card--winter .season-label { color: var(--winter-text); }

/* ─── Fan scene ─────────────────────────────────────────────── */
.fan-scene {
	position: relative;
	width: var(--fan-size);
	height: var(--fan-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ─── CSS Fan ───────────────────────────────────────────────── */
.fan {
	position: relative;
	width: var(--fan-size);
	height: var(--fan-size);
	animation: spin-ccw 2.8s linear infinite;
}

.fan--cw {
	animation: spin-cw 2.8s linear infinite;
}

@keyframes spin-ccw {
	from { transform: rotate(0deg); }
	to	 { transform: rotate(-360deg); }
}

@keyframes spin-cw {
	from { transform: rotate(0deg); }
	to	 { transform: rotate(360deg); }
}

/* Hub */
.fan-hub {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 14%;
	height: 14%;
	border-radius: 50%;
	z-index: 2;
}

.fan-card--summer .fan-hub {
	background: radial-gradient(circle at 35% 35%, #fb923c, var(--summer-hub));
	box-shadow: 0 2px 8px rgba(234,88,12,0.4);
}

.fan-card--winter .fan-hub {
	background: radial-gradient(circle at 35% 35%, #60a5fa, var(--winter-hub));
	box-shadow: 0 2px 8px rgba(37,99,235,0.4);
}

/* Blades */
.fan-blade {
	position: absolute;
	top: 50%; left: 50%;
	width: 44%;
	height: 16%;
	border-radius: 50% 50% 50% 4px / 50% 50% 50% 4px;
	transform-origin: 4% 50%;
	margin-top: -8%;
}

.fan-blade--1 { transform: rotate(0deg)		translateX(4%); }
.fan-blade--2 { transform: rotate(90deg)	translateX(4%); }
.fan-blade--3 { transform: rotate(180deg) translateX(4%); }
.fan-blade--4 { transform: rotate(270deg) translateX(4%); }

.fan-card--summer .fan-blade {
	background: linear-gradient(135deg, var(--summer-blade) 60%, var(--summer-blade-shadow));
	box-shadow: inset 0 -3px 6px rgba(234,88,12,0.25);
}

.fan-card--winter .fan-blade {
	background: linear-gradient(135deg, var(--winter-blade) 60%, var(--winter-blade-shadow));
	box-shadow: inset 0 -3px 6px rgba(37,99,235,0.22);
}

/* ─── Direction arrow ───────────────────────────────────────── */
.fan-direction-arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.fan-direction-arrow svg {
	width: 100%;
	height: 100%;
	opacity: 0.18;
}

.fan-card--summer .fan-direction-arrow { color: var(--summer-accent); }
.fan-card--winter .fan-direction-arrow { color: var(--winter-accent); }

/* ─── Fan info ──────────────────────────────────────────────── */
.fan-info {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.direction-tag {
	display: inline-block;
	font-size: clamp(0.85rem, 1.8vw, 1rem);
	font-weight: 700;
	padding: 0.25rem 0.85rem;
	border-radius: 99px;
}

.fan-card--summer .direction-tag {
	background: var(--summer-accent);
	color: #fff;
}

.fan-card--winter .direction-tag {
	background: var(--winter-accent);
	color: #fff;
}

.fan-explainer {
	font-size: clamp(0.75rem, 1.6vw, 0.875rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--text);
	opacity: 0.8;
}

.fan-card--summer .fan-explainer { color: var(--summer-text); opacity: 0.9; }
.fan-card--winter .fan-explainer { color: var(--winter-text); opacity: 0.9; }

/* ─── Airflow indicator ─────────────────────────────────────── */
.airflow {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
}

.airflow-arrow {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.fan-card--summer .airflow-arrow {
	border-top: 8px solid var(--summer-accent);
}

.fan-card--winter .airflow-arrow {
	border-bottom: 8px solid var(--winter-accent);
}

/* ─── Divider ───────────────────────────────────────────────── */
.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.divider span {
	font-size: 0.85rem;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ─── Footer ────────────────────────────────────────────────── */
.page-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	text-align: center;
}

.footer-tip {
	font-size: clamp(0.75rem, 1.6vw, 0.875rem);
	color: #64748b;
}

.share-btn {
	font-family: var(--font);
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	background: var(--text);
	border: none;
	border-radius: 99px;
	padding: 0.6rem 1.75rem;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	letter-spacing: 0.01em;
}

.share-btn:hover {
	background: #334155;
	transform: translateY(-1px);
}

.footer-credit {
	font-size: 0.8rem;
	color: #94a3b8;
}

.footer-credit a {
	color: #64748b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-credit a:hover {
	color: #1e293b;
}

.footer-copy {
	font-size: 0.75rem;
	color: #cbd5e1;
}

.footer-copy a {
	color: #94a3b8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-copy a:hover {
	color: #1e293b;
}

/* Hide share button if no JS (it won't work) */
.no-js .share-btn { display: none; }

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 540px) {
	.fans-wrapper {
		flex-direction: column;
		max-width: 340px;
		gap: 1.5rem;
	}

	.divider {
		flex-direction: row;
	}

	.divider::before,
	.divider::after {
		content: '';
		flex: 1;
		height: 1px;
		background: #e2e8f0;
		margin: 0 0.5rem;
	}

	:root {
		--fan-size: clamp(120px, 45vw, 160px);
	}

	body[data-season="summer"] .fan-card--summer,
	body[data-season="winter"] .fan-card--winter {
		transform: none;
	}
}