/* pasudar.app · one screen: the brand animation full-bleed, then the motto. Tokens from 04-color/pasudar-tokens.css */
@font-face {
	font-family: 'Exo 2';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/exo2-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/montserrat.woff2') format('woff2');
}

:root {
	--grafito: #111923;
	--naranja: #F45A36;
	--marfil: #F3F0E8;
	--text-muted: #BCBCB9;
	--font-display: 'Exo 2', 'Arial Narrow', Arial, sans-serif;
	--font-text: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	--gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
	--motto-size: clamp(2rem, min(6.4svh, 8.6vw), 4.5rem);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--reveal-duration: 760ms;
	/* Fallback for a script that never ran: the still and the message appear on their own */
	--fallback-delay: 6s;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--grafito);
	color: var(--marfil);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font: 400 1rem/1.5 var(--font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--naranja);
	color: var(--grafito);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Stage: the media fills it; the text sits in the corners the lockup leaves free */
.stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'status'
		'.'
		'message';
	min-height: 100vh;
	min-height: 100dvh;
	padding:
		calc(var(--gutter) + env(safe-area-inset-top))
		calc(var(--gutter) + env(safe-area-inset-right))
		calc(var(--gutter) + env(safe-area-inset-bottom))
		calc(var(--gutter) + env(safe-area-inset-left));
}

.stage-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.stage-video,
.stage-still img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stage-still {
	visibility: hidden;
}

.stage[data-media='still'] .stage-still {
	visibility: visible;
}

.stage[data-media='still'] .stage-video {
	visibility: hidden;
}

/* Status */
.status {
	grid-area: status;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	min-height: 2.75rem;
	margin: 0;
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.status-drop {
	width: 0.8em;
	height: auto;
	fill: var(--naranja);
	transform: translateY(-0.08em);
}

/* Message */
.message {
	grid-area: message;
	align-self: end;
	display: grid;
	gap: 1rem;
}

.motto {
	margin: 0;
	font: italic 900 var(--motto-size)/0.94 var(--font-display);
	letter-spacing: -0.01em;
}

.motto-line {
	display: block;
}

.motto-dot {
	color: var(--naranja);
}

.lede {
	max-width: 34ch;
	margin: 0;
	color: var(--text-muted);
	font-size: clamp(0.9375rem, 0.86rem + 0.25vw, 1.0625rem);
	line-height: 1.55;
	text-wrap: pretty;
}

/* Landscape screens: the motto holds the left corner and the sentence answers from the right */
@media (orientation: landscape) and (min-width: 40rem) {
	.message {
		grid-template-columns: max-content minmax(0, 24rem);
		justify-content: space-between;
		align-items: end;
		column-gap: 3rem;
	}

	.lede {
		padding-bottom: 0.35em;
	}
}

/* Short landscape screens (phones on their side): the lockup takes most of the height */
@media (orientation: landscape) and (max-height: 30rem) {
	:root {
		--motto-size: clamp(1.5rem, 7svh, 2.25rem);
	}

	.lede {
		font-size: 0.875rem;
	}
}

/* Reveal: hidden while the animation plays, then a slanted wipe along the italic, the brand's cut */
.reveal {
	visibility: hidden;
	opacity: 0;
}

.stage[data-state='settled'] .reveal {
	visibility: visible;
	opacity: 1;
}

.stage[data-state='settled'] .motto-line {
	animation: slant-in var(--reveal-duration) var(--ease-out) both;
}

.stage[data-state='settled'] .motto-line + .motto-line {
	animation-delay: 110ms;
}

.stage[data-state='settled'] .lede {
	animation: focus-in var(--reveal-duration) var(--ease-out) 240ms both;
}

.stage[data-state='settled'] .status {
	animation: fade-in 600ms ease-out 420ms both;
}

@keyframes slant-in {
	from {
		clip-path: polygon(-0.5em -0.25em, -0.5em -0.25em, -0.8em calc(100% + 0.25em), -0.8em calc(100% + 0.25em));
		transform: translateX(-0.14em);
	}

	to {
		clip-path: polygon(-0.5em -0.25em, calc(100% + 0.8em) -0.25em, calc(100% + 0.5em) calc(100% + 0.25em), -0.8em calc(100% + 0.25em));
		transform: none;
	}
}

@keyframes focus-in {
	from {
		opacity: 0;
		filter: blur(6px);
	}

	to {
		opacity: 1;
		filter: none;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fallback-show {
	to {
		visibility: visible;
		opacity: 1;
	}
}

.stage:not([data-state]) .reveal,
.stage:not([data-state]) .stage-still {
	animation: fallback-show 0s var(--fallback-delay) forwards;
}

@media (prefers-reduced-motion: reduce) {
	.stage[data-state='settled'] .reveal,
	.stage[data-state='settled'] .motto-line {
		animation: none;
	}
}