/* =========================================================================
   Antonis Tsoulos — Under Construction
   Layout values follow the supplied spec at the large (desktop) size and
   scale down fluidly with clamp(). Photos cross-fade in the background with
   a gentle Ken Burns drift; each photo's caption cross-fades in sync.
   ========================================================================= */

/* ----- Design tokens -------------------------------------------------------
   Each token caps at the exact spec value on large screens and eases down on
   smaller viewports. The middle (vw) term controls how fast it scales. */
:root {
	--ink: #ffffff;
	--bg: #15140f;

	--margin-x:        clamp(20px, 4vw, 30px);   /* side margins — spec 30 */
	--logo-top:        clamp(48px, 9vw, 120px);  /* gap above logo — spec 120 */
	--logo-w:          clamp(168px, 23vw, 294px);/* logo width — native 294 */

	--title-size:      clamp(34px, 7.2vw, 60px); /* UNDER/CONSTRUCTION — spec 60 */
	--gap-title-email: clamp(34px, 7vw, 80px);   /* gap title→email — spec 80 */

	--small-size:      clamp(14px, 1.8vw, 17px); /* email + caption — spec 17 */
	--small-lh:        1.18;                      /* 20/17 ≈ 1.176 */

	--bottom-gap:      clamp(38px, 6.5vw, 70px); /* gap below text — spec 70 */
	--stack-gap:       28px;                       /* headline→caption when stacked */

	--fade:            1.6s;                       /* cross-fade duration */
	--kenburns:        7s;                         /* slow zoom duration */
	--zoom:            1.06;                        /* Ken Burns scale target */
}

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

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

/* ----- Background slideshow ------------------------------------------------- */
.slideshow,
.scrim {
	position: fixed;        /* always fills the viewport, behind the content grid */
	inset: 0;
	z-index: 0;
}

.slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.001);
	transition: opacity var(--fade) ease-in-out,
				transform var(--kenburns) ease-out;
	will-change: opacity, transform;
}

.slide.is-active {
	opacity: 1;
	transform: scale(var(--zoom));   /* gentle, slow zoom while visible */
}

/* ----- Legibility scrims ---------------------------------------------------- */
.scrim {
	pointer-events: none;
	z-index: 1;            /* above the photos, below the text */
}

.scrim--top {
	bottom: auto;
	height: 46vh;
	background: linear-gradient(to bottom,
				rgba(0, 0, 0, 0.64) 0%,
				rgba(0, 0, 0, 0.34) 32%,
				rgba(0, 0, 0, 0) 100%);
}

.scrim--bottom {
	top: auto;
	height: 62vh;
	background: linear-gradient(to top,
				rgba(0, 0, 0, 0.74) 0%,
				rgba(0, 0, 0, 0.40) 34%,
				rgba(0, 0, 0, 0) 100%);
}

/* ----- Content grid --------------------------------------------------------
   Row 1: logo · Row 2: flexible spacer · Row 3: headline (left) + caption (right).
   Padding supplies the spec offsets (top/side/bottom). */
.page {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"logo     logo"
		"free     free"
		"headline caption";
	padding: var(--logo-top) var(--margin-x) var(--bottom-gap);
}

/* ----- Logo ----------------------------------------------------------------- */
.logo {
	grid-area: logo;
	align-self: start;
	justify-self: start;
	position: relative;
	z-index: 2;            /* text/logo layer sits above photos + scrims */
}

.logo__img {
	width: var(--logo-w);
	height: auto;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

/* ----- Headline + email (bottom-left) -------------------------------------- */
.headline {
	grid-area: headline;
	align-self: end;
	position: relative;
	z-index: 2;
}

.headline__title {
	margin: 0;
	font-size: var(--title-size);
	line-height: 1;            /* spec: 60 / 60 → 1.0 */
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.headline__email {
	display: inline-block;
	margin-top: var(--gap-title-email);
	color: var(--ink);
	font-size: var(--small-size);
	line-height: var(--small-lh);
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.headline__email:hover,
.headline__email:focus-visible { text-decoration: underline; }

/* ----- Captions (bottom-right, synced with slides) ------------------------- */
.captions {
	grid-area: caption;
	align-self: end;
	justify-self: end;
	position: relative;   /* captions stack here, anchored to the bottom-right */
	z-index: 2;
}

.caption {
	position: absolute;
	right: 0;
	bottom: 0;            /* bottom-anchored: extra lines grow upward */
	margin: 0;
	white-space: nowrap;
	text-align: right;
	font-size: var(--small-size);
	line-height: var(--small-lh);
	color: var(--ink);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity var(--fade) ease-in-out;
}

.caption.is-active { opacity: 1; }

/* ----- Phones: stack caption below the headline ----------------------------
   The side-by-side spec layout keeps the caption on the email's baseline,
   clear of the larger "CONSTRUCTION" line above it. On phones there isn't room
   for both at the bottom, so the caption drops to its own row at the very
   bottom (still right-aligned and bottom-anchored). */
@media (max-width: 639px) {
	.page {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto auto;
		grid-template-areas:
			"logo"
			"free"
			"headline"
			"caption";
	}

	.headline { margin-bottom: var(--stack-gap); }

	/* Stretch the caption box to the full column so the timestamp lays out on
	   one line at the bottom-right (the absolute caption has no width of its
	   own, which would otherwise force it to wrap very narrow). */
	.captions { justify-self: stretch; }
	.caption  { white-space: normal; }   /* wrap only if a caption is truly long; last line stays anchored */
}

/* ----- Reduced motion: keep a soft cross-fade, drop the zoom & drift -------- */
@media (prefers-reduced-motion: reduce) {
	.slide {
		transition: opacity var(--fade) ease-in-out;
		transform: none !important;
	}
	.slide.is-active { transform: none !important; }
}