/* PornEpisode — the tokens, the wordmark, the pink glass button and the
   liquid glass. The two faces are the site's own files, not Google's. */

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/pornepisode/fonts/instrument-sans-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/pornepisode/fonts/space-grotesk-700-latin.woff2') format('woff2');
}

:root {
	--st-bg: #000000;
	--st-surface: #151517;
	--st-surface-2: #1e1e21;
	--st-line: #26262a;
	--st-text: #f5f5f7;
	--st-muted: #a1a1a6;
	--st-faint: #86868b;
	--pink: #ee5b6f;
	--pink-hi: #ff7a8c;
	--pink-lo: #d9435a;
	--font: 'Instrument Sans', system-ui, sans-serif;
	--display: 'Space Grotesk', var(--font);
	--ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
	--spring: cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	background: var(--st-bg);
	color: var(--st-text);
	color-scheme: dark;
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
/* The page's black is on html alone: a body background would paint over the
   ambient layers, which sit at z-index -1. */
body {
	background: transparent;
	min-height: 100dvh;
	overflow-x: hidden;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}
img,
video {
	display: block;
}
video::-webkit-media-controls-enclosure {
	display: none !important;
}

/* ── wordmark ───────────────────────────────────────────────────────── */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
}
.logo svg {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	filter: drop-shadow(0 4px 12px rgba(238, 91, 111, 0.45));
}
.logo b {
	color: var(--pink);
}

/* ── liquid glass ───────────────────────────────────────────────────── */
/* Frosted body, a lit top edge, a fainter lit bottom edge, and a rim that is
   brighter where the light comes from. On Chromium the backdrop is also bent
   through #lg (an SVG displacement map), which is what makes it read as liquid
   rather than frosted; elsewhere it stays frosted. The pointer adds a moving
   specular spot (--mx/--my, set by pp.js). */
.glass {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(
			140px circle at var(--mx, 30%) var(--my, -20%),
			rgba(255, 255, 255, 0.16),
			transparent 70%
		),
		linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08),
		inset 0 0 18px rgba(255, 255, 255, 0.05),
		0 10px 30px rgba(0, 0, 0, 0.35);
}
html.lg .glass {
	backdrop-filter: url(#lg) blur(10px) saturate(190%) brightness(1.06);
}
.glass::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	background: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.08) 35%,
		rgba(255, 255, 255, 0.04) 65%,
		rgba(255, 255, 255, 0.28) 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.glass.dark {
	background:
		radial-gradient(
			140px circle at var(--mx, 30%) var(--my, -20%),
			rgba(255, 255, 255, 0.12),
			transparent 70%
		),
		linear-gradient(180deg, rgba(20, 20, 24, 0.55) 0%, rgba(10, 10, 12, 0.7) 100%);
}

/* ── buttons ────────────────────────────────────────────────────────── */
/* The promo page's pink glass button, sized for a page instead of a stage. */
.cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 3.1rem;
	padding: 0 1.6rem;
	border-radius: 999px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.38) 0%,
			rgba(255, 255, 255, 0.1) 46%,
			rgba(255, 255, 255, 0) 54%
		),
		linear-gradient(135deg, var(--pink-hi) 0%, var(--pink) 45%, var(--pink-lo) 100%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -3px 8px rgba(120, 10, 40, 0.3),
		0 10px 28px rgba(238, 91, 111, 0.35);
	transition:
		transform 0.15s ease,
		filter 0.15s ease,
		box-shadow 0.2s ease;
}
.cta:hover {
	filter: brightness(1.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -3px 8px rgba(120, 10, 40, 0.3),
		0 14px 36px rgba(238, 91, 111, 0.5);
}
.cta:active,
.gbtn:active {
	transform: scale(0.96);
}
.cta svg,
.gbtn svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
}
.gbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 3.1rem;
	padding: 0 1.4rem;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform 0.15s ease;
}
.premium {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 2.5rem;
	padding: 0 1.1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
}
.premium em {
	font-style: normal;
	background: linear-gradient(90deg, var(--pink-hi), #ffb36b);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: 1.65rem;
	padding: 0 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}
.chip svg {
	width: 0.85rem;
	height: 0.85rem;
}
.hot {
	color: #ffd2a8;
}

.foot {
	padding: 2.5rem 1.25rem 3rem;
	text-align: center;
	color: var(--st-faint);
	font-size: 0.75rem;
	line-height: 1.6;
}
.foot nav {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 0.6rem;
	color: var(--st-muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}