/* TedHook teaser. One photo, one headline, one action. */

@font-face {
	font-family: "Mulish";
	src: url("assets/Mulish-Variable.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

:root {
	/* a warm near-black; the photo's pure black is lifted to it with mix-blend-mode: lighten, so no edge shows */
	--page: #080706;
	--text: #F2EDE7;
	--text-2: #A39A92;
	--accent: #F7913D;
	--accent-hover: #FFA35A;
	--accent-on: #1A120B;
	--hover: rgba(255, 255, 255, 0.07);
	--ok: #5BD68F;
	--out: cubic-bezier(0.16, 1, 0.3, 1);
	--font: "Mulish", "Segoe UI", system-ui, sans-serif;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: var(--page);
	color: var(--text);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(247, 145, 61, 0.35); color: #fff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.offscreen { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* clipboard fallback field */

/* ------------------------------------------------------------------ top */
.top { position: relative; z-index: 2; padding: 28px clamp(24px, 6vw, 96px); }
.wordmark { font-size: clamp(17px, 0.6vw + 10px, 21px); font-weight: 800; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ hero: text left, Ted lying bottom-right */
/* overflow clip: Ted overhangs the bottom/right edges on purpose; without the clip that overhang made the page scroll */
.hero { position: relative; flex: 1; display: flex; align-items: center; padding: 0 clamp(24px, 6vw, 96px) 12svh; overflow: hidden; overflow: clip; }
.copy { position: relative; z-index: 2; max-width: clamp(30rem, 30vw, 38rem); }

h1 {
	margin: 0;
	font-size: clamp(2.6rem, 4.2vw + 1rem, 5.6rem);
	line-height: 1.02;
	font-weight: 850;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.lead {
	margin: 20px 0 0;
	max-width: 30ch;
	font-size: clamp(1rem, 0.5vw + 0.75rem, 1.3rem);
	line-height: 1.6;
	font-weight: 600;
	letter-spacing: 0.002em;
	color: var(--text-2);
	text-wrap: pretty;
}
.release { margin: 14px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.release[hidden] { display: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 32px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: clamp(50px, 1.6vw + 30px, 62px);
	padding: 0 clamp(22px, 1vw + 10px, 28px) 0 clamp(18px, 0.8vw + 8px, 24px);
	border-radius: 12px;
	background: var(--accent);
	color: var(--accent-on);
	font-size: clamp(15.5px, 0.35vw + 11px, 18px);
	font-weight: 800;
	transition: background-color 150ms ease, transform 160ms var(--out);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.96); }
.ico { flex: none; fill: currentColor; }

/* quiet copy-the-invite control: icon cross-fades copy -> check */
.invite {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	margin-left: -4px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-2);
	font: 700 clamp(14px, 0.3vw + 10px, 16.5px) var(--font);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--out);
}
.invite:hover { background: var(--hover); color: var(--text); }
.invite:active { transform: scale(0.96); }
.swap { position: relative; width: 16px; height: 16px; flex: none; }
.ico-line { position: absolute; inset: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1), filter 200ms cubic-bezier(0.2, 0, 0, 1); }
.i-check { opacity: 0; transform: scale(0.25); filter: blur(4px); }
.invite.is-copied { color: var(--ok); }
.invite.is-copied .i-copy { opacity: 0; transform: scale(0.25); filter: blur(4px); }
.invite.is-copied .i-check { opacity: 1; transform: none; filter: none; }

.btn:focus-visible, .invite:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Ted: the photo's black melts into the page; he bleeds off the bottom-right corner, facing the text */
/* the blend sits on .ted (not the img): .ted's z-index makes it a stacking context, so a blend on the img would only see
   .ted's empty backdrop and keep the photo's black box */
/* width cap: the photo's left 16 % is empty black, so Ted's ear sits at left + 0.16w with left = 107vw - w. Keeping it
   right of the text column (6vw padding + the .copy width + a 3rem gap) gives
   w <= (101vw - copy - 3rem) / 0.84 */
.ted { position: absolute; z-index: 1; right: -7vw; bottom: -4svh; width: min(78vw, 140svh, calc((101vw - clamp(30rem, 30vw, 38rem) - 3rem) / 0.84)); pointer-events: none; mix-blend-mode: lighten; }
.ted img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* ------------------------------------------------------------------ the one authored moment: Ted settles in, text follows */
@media (prefers-reduced-motion: no-preference) {
	.ted img { animation: settle 800ms var(--out) both; }
	.copy > * { animation: appear 500ms var(--out) both; }
	.copy > :nth-child(2) { animation-delay: 80ms; }
	.copy > :nth-child(3), .copy > :nth-child(4) { animation-delay: 160ms; }
}
@keyframes settle { from { opacity: 0.6; transform: scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ portrait phones / tablets: text on top, Ted lying along the bottom
   Ted gets only the height left under the text (flex: 1) and is fitted into it, anchored to the bottom, so the page is
   exactly one screen tall. Landscape phones keep the side-by-side layout above (a 390 px tall screen can't stack). */
@media (max-width: 860px) and (orientation: portrait) {
	.top { padding: 22px 22px 0; }
	.hero { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 7svh 22px 0; }
	.copy { max-width: 34rem; flex: none; }
	.ted { position: relative; right: auto; bottom: auto; flex: 1 1 auto; min-height: 26svh; width: auto; margin-top: 20px; }
	/* 140vw wide box centred on the screen; object-fit keeps the photo's shape and sits it on the bottom edge */
	.ted img { position: absolute; left: calc(50% - 70vw); bottom: 0; width: 140vw; height: 100%; object-fit: contain; object-position: 50% 100%; }
}
@media (max-width: 400px) {
	.btn { width: 100%; justify-content: center; }
	.invite { margin-left: 0; }
}