@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap');

@font-face {
	font-family: 'Safira March';
	src: url('./fonts/SafiraMarch-ExtraLight.otf') format('opentype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

:root {
	--flashlight-size: 230px;
	--mouse-x: -1000px;
	--mouse-y: -1000px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	font-family: 'Inter', sans-serif;
	background: #000;
	cursor: none;
}

/* MAIN PAGE */

.page {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: #000;
}

/* COMING SOON */

.coming-soon {
	position: relative;
	z-index: 1;

	color: #fff;
	text-align: center;

	font-size: clamp(24px, 5vw, 72px);
	font-weight: 300;
	letter-spacing: 0.25em;

	user-select: none;
	pointer-events: none;
}

/* WHITE REVEAL LAYER */

.reveal-layer {
	position: absolute;
	inset: 0;
	z-index: 2;

	display: flex;
	justify-content: center;
	align-items: center;

	background: #fff;
	pointer-events: none;

	/* Circular flashlight mask */
	-webkit-mask-image: radial-gradient(
		circle var(--flashlight-size) at var(--mouse-x) var(--mouse-y),
		black 0%,
		black 30%,
		transparent 100%
	);

	mask-image: radial-gradient(
		circle var(--flashlight-size) at var(--mouse-x) var(--mouse-y),
		black 0%,
		black 30%,
		transparent 100%
	);

	will-change: mask-image;
}

/* HIDDEN BRAND NAME */

.brand-name {
	color: #000;
	text-align: center;

	font-family: 'Safira March', serif;
	font-size: 10em;
	font-weight: 200;
	font-synthesis: none;

	letter-spacing: 0;
	line-height: 1.2;

	-webkit-font-smoothing: antialiased;

	user-select: none;
	white-space: nowrap;
}

/* MOBILE */

@media (max-width: 768px) {
	:root {
		--flashlight-size: 150px;
	}

	.coming-soon {
		font-size: 26px;
		letter-spacing: 0.15em;
	}

	.brand-name {
		font-size: 12vw;
	}
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
	.reveal-layer {
		transition: none;
	}
}