/* Rede de Flu: a dark room lit by its fireplace. The fire's colours are registered properties, so
   they fade from orange to the Floo's green instead of jumping. What each state of the fireplace
   page shows is at the end (the states are listed in floo.js). */

@property --flame-core {
	syntax: '<color>';
	inherits: true;
	initial-value: #fff3c4;
}
@property --flame-mid {
	syntax: '<color>';
	inherits: true;
	initial-value: #ffa63a;
}
@property --flame-edge {
	syntax: '<color>';
	inherits: true;
	initial-value: #d9481a;
}
@property --glow {
	syntax: '<color>';
	inherits: true;
	initial-value: rgb(255 128 40 / 0.22);
}

:root {
	color-scheme: dark;
	--room: #130c08;
	--ink: #efe4cc;
	--ink-soft: #b9a98b;
	/* 4.8:1 even where the fire's glow is brightest (WCAG AA). */
	--ink-faint: #ab9c82;
	--gold: #d6b06a;
	--gold-deep: #8f6f36;
	--line: rgb(239 228 204 / 0.18);
	--field: rgb(0 0 0 / 0.35);
	--danger: #f2a58e;
	--powder: #5ee891;
	--serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}

/* The Floo's fire. */
body:is([data-state='waiting'], [data-state='connecting'], [data-state='connected'], [data-state='lost']) {
	--flame-core: #effff3;
	--flame-mid: #4fec86;
	--flame-edge: #0b8c43;
	--glow: rgb(60 225 125 / 0.2);
}

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

[hidden] {
	display: none !important;
}

html {
	background: var(--room);
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: radial-gradient(ellipse 75% 55% at 50% 38%, var(--glow), transparent 70%) no-repeat, var(--room);
	color: var(--ink);
	font: 17px/1.5 var(--serif);
	-webkit-font-smoothing: antialiased;
	transition:
		--flame-core 1.6s ease,
		--flame-mid 1.6s ease,
		--flame-edge 1.6s ease,
		--glow 1.6s ease;
}

a {
	color: var(--gold);
}

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ---------- the pages ---------- */

.bar {
	max-width: 760px;
	margin: 0 auto;
	padding: 14px 16px 0;
}

.brand {
	color: var(--gold);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
}

.room,
.home {
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 16px 48px;
	text-align: center;
	/* The mantel and the floor reach past the stones; on a phone, not past the screen. */
	overflow-x: clip;
}

.eyebrow {
	margin: 14px 0 0;
	color: var(--ink-faint);
	font-style: italic;
}

.address {
	margin: 0 0 18px;
	font-size: clamp(26px, 6vw, 38px);
	font-weight: normal;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

/* Short enough that the buttons below it fit on a laptop's screen. */
.room .fireplace {
	max-width: min(620px, max(280px, (100dvh - 330px) * 1.45));
}

.home .fireplace {
	max-width: 320px;
	margin-top: 36px;
}

.home h1 {
	margin: 28px 0 6px;
	font-size: clamp(38px, 9vw, 56px);
	font-weight: normal;
	line-height: 1.1;
}

.lede {
	max-width: 30em;
	margin: 0 auto 28px;
	color: var(--ink-soft);
}

.go {
	max-width: 26em;
	margin: 0 auto;
	text-align: left;
}

.go label,
.share label {
	display: block;
	margin-bottom: 8px;
	color: var(--ink-soft);
	font-size: 15px;
}

.go-row,
.share-row {
	display: flex;
	gap: 8px;
}

input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--field);
	color: var(--ink);
	font: inherit;
}

input::placeholder {
	color: var(--ink-faint);
}

input[aria-invalid='true'] {
	border-color: var(--danger);
}

.problem {
	margin: 8px 0 0;
	color: var(--danger);
	font-size: 15px;
}

.new {
	margin: 26px 0 0;
}

.new span {
	color: var(--ink-faint);
	font-size: 14px;
}

.note-text {
	max-width: 32em;
	margin: 40px auto 0;
	color: var(--ink-faint);
	font-size: 14px;
}

.foot {
	padding: 0 16px 28px;
	text-align: center;
	font-size: 14px;
}

.foot a {
	color: var(--ink-faint);
}

/* The privacy page. */
.prose {
	max-width: 36em;
	margin: 0 auto;
	padding: 8px 16px 40px;
}

.prose h1 {
	margin: 18px 0 8px;
	font-size: clamp(30px, 7vw, 42px);
	font-weight: normal;
}

.prose h2 {
	margin: 28px 0 6px;
	color: var(--gold);
	font-size: 19px;
	font-weight: normal;
}

.prose p {
	margin: 0 0 12px;
	color: var(--ink-soft);
}

/* ---------- buttons ---------- */

button {
	padding: 9px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.04);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	transition:
		border-color 0.2s,
		background-color 0.2s;
}

button:hover {
	border-color: var(--gold);
}

.go button,
.enter {
	border-color: #a6ffc6;
	background: linear-gradient(#93f6b4, #3ccb72);
	color: #0b2414;
	box-shadow:
		0 0 0 4px rgb(80 230 130 / 0.12),
		0 0 32px rgb(80 230 130 / 0.32);
}

.go button:hover,
.enter:hover {
	border-color: #e6fff0;
	background: linear-gradient(#a8fbc4, #4bd981);
}

.enter {
	padding: 13px 30px;
	font-size: 19px;
}

.leave {
	border-color: color-mix(in srgb, var(--danger) 45%, transparent);
	color: var(--danger);
}

body[data-mic='off'] [data-toggle='mic'],
body[data-camera='off'] [data-toggle='camera'] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--room);
}

/* ---------- the fireplace ---------- */

.fireplace {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

.mantel {
	position: relative;
	z-index: 2;
	height: clamp(14px, 3.4vw, 22px);
	margin: 0 -3%;
	border-radius: 3px;
	background: linear-gradient(#7c4b2d, #4a2a17 60%, #2c180c);
	box-shadow:
		0 10px 18px -6px rgb(0 0 0 / 0.75),
		inset 0 1px 0 rgb(255 220 180 / 0.2);
}

.surround {
	padding: 5.5% 8% 0;
	background: url(/bricks.svg) 0 0 / 76px 38px, #4c423b;
	box-shadow: inset 0 0 60px rgb(0 0 0 / 0.55);
}

.hearth {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 50% 50% 0 0 / 30% 30% 0 0;
	background: radial-gradient(ellipse 80% 60% at 50% 100%, #2b150a, #0a0504 70%);
	isolation: isolate;
}

/* The soot around the opening and the fire's light on everything inside, the face included. */
.hearth::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient(ellipse 70% 50% at 50% 100%, color-mix(in srgb, var(--flame-mid) 22%, transparent), transparent 70%);
	box-shadow:
		inset 0 0 0 4px #241c18,
		inset 0 18px 50px rgb(0 0 0 / 0.85),
		inset 0 0 70px rgb(0 0 0 / 0.6);
}

.floor {
	height: clamp(12px, 3vw, 18px);
	margin: 0 -5%;
	border-radius: 2px;
	background: linear-gradient(#6d625a, #3a322d);
	box-shadow: 0 14px 30px rgb(0 0 0 / 0.6);
}

/* The other person, coming out of the flames. */
.remote {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(14px) brightness(0.7);
	transform: scale(1.06);
	transition:
		opacity 1.8s ease,
		filter 1.8s ease,
		transform 1.8s ease;
	-webkit-mask-image: radial-gradient(ellipse 48% 54% at 50% 44%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 48% 54% at 50% 44%, #000 58%, transparent 100%);
}

/* What is said about the other side, at the top of the opening. */
.notes {
	position: absolute;
	z-index: 5;
	top: 9%;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

.note {
	padding: 3px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgb(10 6 4 / 0.82);
	color: var(--ink);
	font-size: 14px;
}

/* You, in an oval frame on the stones. */
.local {
	display: none;
	position: absolute;
	z-index: 4;
	top: calc(clamp(14px, 3.4vw, 22px) + 3%);
	right: 1.5%;
	width: max(19%, 72px);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 3px solid var(--gold-deep);
	border-radius: 50% / 42%;
	background: #0b0705;
	box-shadow:
		0 8px 22px rgb(0 0 0 / 0.65),
		inset 0 0 0 1px var(--gold);
	transform: scaleX(-1);
	transition: opacity 0.3s;
}

body[data-camera='off'] .local,
body[data-camera='none'] .local {
	opacity: 0.3;
}

/* The back camera shows the world as it is, not as a mirror. */
body[data-facing='back'] .local {
	transform: none;
}

/* ---------- the fire ---------- */

.fire {
	position: absolute;
	z-index: 1;
	left: 14%;
	right: 14%;
	bottom: 7%;
	height: 62%;
	transform-origin: 50% 100%;
	transition: transform 1.4s ease;
}

/* Its light on the back of the fireplace. */
.fire::before {
	content: '';
	position: absolute;
	left: -30%;
	right: -30%;
	bottom: -10%;
	height: 150%;
	background: radial-gradient(ellipse 50% 45% at 50% 100%, color-mix(in srgb, var(--flame-mid) 45%, transparent), transparent 70%);
	filter: blur(10px);
}

.fire i {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: var(--w);
	height: var(--h);
	margin-left: calc(var(--w) / -2 + var(--x));
	border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
	background: radial-gradient(
		ellipse 50% 58% at 50% 78%,
		var(--flame-core) 0 14%,
		var(--flame-mid) 38%,
		var(--flame-edge) 64%,
		transparent 74%
	);
	filter: blur(2.5px);
	mix-blend-mode: screen;
	opacity: 0.92;
	transform-origin: 50% 100%;
	animation: lick var(--t) ease-in-out var(--d) infinite alternate;
}

.fire i:nth-child(1) { --x: -34%; --w: 22%; --h: 46%; --t: 1.15s; --d: -0.3s; }
.fire i:nth-child(2) { --x: -22%; --w: 28%; --h: 66%; --t: 1.4s; --d: -0.9s; }
.fire i:nth-child(3) { --x: -9%; --w: 30%; --h: 84%; --t: 1.25s; --d: -0.5s; }
.fire i:nth-child(4) { --x: 2%; --w: 34%; --h: 100%; --t: 1.55s; --d: -1.1s; }
.fire i:nth-child(5) { --x: 13%; --w: 30%; --h: 80%; --t: 1.3s; --d: -0.2s; }
.fire i:nth-child(6) { --x: 25%; --w: 26%; --h: 60%; --t: 1.2s; --d: -0.7s; }
.fire i:nth-child(7) { --x: 35%; --w: 20%; --h: 42%; --t: 1.05s; --d: -0.4s; }
.fire i:nth-child(8) { --x: -4%; --w: 46%; --h: 40%; --t: 1.7s; --d: -1.3s; }
.fire i:nth-child(9) { --x: 6%; --w: 18%; --h: 92%; --t: 0.95s; --d: -0.6s; }

/* Sparks. */
.fire b {
	position: absolute;
	bottom: 34%;
	left: var(--x);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--flame-core);
	box-shadow: 0 0 6px 2px var(--flame-mid);
	opacity: 0;
	animation: rise var(--t) ease-out var(--d) infinite;
}

.fire b:nth-of-type(1) { --x: 30%; --drift: -14px; --t: 2.6s; --d: -0.4s; }
.fire b:nth-of-type(2) { --x: 46%; --drift: 10px; --t: 3.1s; --d: -1.7s; }
.fire b:nth-of-type(3) { --x: 58%; --drift: 18px; --t: 2.3s; --d: -1.1s; }
.fire b:nth-of-type(4) { --x: 40%; --drift: -6px; --t: 2.9s; --d: -2.4s; }
.fire b:nth-of-type(5) { --x: 66%; --drift: -12px; --t: 3.4s; --d: -0.9s; }
.fire b:nth-of-type(6) { --x: 52%; --drift: 4px; --t: 2.5s; --d: -2s; }
.fire b:nth-of-type(7) { --x: 36%; --drift: 16px; --t: 3.2s; --d: -2.8s; }

@keyframes lick {
	0% { transform: translateX(0) scale(1, 0.86) skewX(-3deg); }
	35% { transform: translateX(-2%) scale(0.94, 1.06) skewX(4deg); }
	70% { transform: translateX(2%) scale(1.04, 0.94) skewX(-5deg); }
	100% { transform: translateX(0) scale(0.9, 1.12) skewX(2deg); }
}

@keyframes rise {
	0% { opacity: 0; transform: translate(0, 0); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--drift), -140px); }
}

/* The powder hits the fire. */
@keyframes flare {
	0% { transform: scale(1, 1); }
	22% { transform: scale(1.3, 1.75); }
	100% { transform: scale(1, 1); }
}

.flare .fire {
	animation: flare 1.4s ease-out;
}

.logs {
	position: absolute;
	z-index: 2;
	left: 20%;
	right: 20%;
	bottom: 4%;
	height: 10%;
}

.logs span {
	position: absolute;
	left: -4%;
	right: 14%;
	bottom: 0;
	height: 55%;
	border-radius: 40px;
	background: linear-gradient(#5a3520, #24130a);
	box-shadow:
		inset 0 2px 0 rgb(255 180 120 / 0.14),
		0 0 12px color-mix(in srgb, var(--flame-edge) 55%, transparent);
	transform: rotate(-7deg);
}

.logs span + span {
	left: 16%;
	right: -4%;
	bottom: 30%;
	transform: rotate(6deg);
}

/* ---------- the fireplace page's states ---------- */

.status {
	min-height: 3em;
	max-width: 34em;
	margin: 18px auto 10px;
	color: var(--ink-soft);
	font-style: italic;
}

.enter,
.share,
.controls {
	display: none;
}

.share {
	max-width: 30em;
	margin: 0 auto 22px;
	text-align: left;
}

.controls {
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

body:is([data-state='idle'], [data-state='full'], [data-state='busy'], [data-state='error']) .enter {
	display: inline-block;
}

body[data-state='waiting'] .share {
	display: block;
}

body:is([data-state='waiting'], [data-state='connecting'], [data-state='connected'], [data-state='lost']) .controls {
	display: flex;
}

body:is([data-state='waiting'], [data-state='connecting'], [data-state='connected'], [data-state='lost']) .local {
	display: block;
}

body[data-camera='none'] [data-toggle='camera'] {
	display: none;
}

/* A calm fire before the powder; a low one while the other person is in it. */
body:is([data-state='idle'], [data-state='lighting'], [data-state='full'], [data-state='busy'], [data-state='error']) .fire {
	transform: scale(0.92, 0.7);
}

body[data-state='connected'] .fire {
	transform: scale(1.05, 0.42);
}

body[data-state='connected'] .remote {
	opacity: 1;
	filter: none;
	transform: none;
}

/* The other side turned the camera off: the head leaves the fire, and the fire comes back up. */
body[data-state='connected'][data-remote-camera='off'] .remote {
	opacity: 0;
}

body[data-state='connected'][data-remote-camera='off'] .fire {
	transform: none;
}

/* On a phone the opening is square: the other person's camera is upright. */
@media (max-width: 520px) {
	.room .hearth {
		aspect-ratio: 1 / 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fire i,
	.flare .fire {
		animation: none;
	}
	.fire b {
		display: none;
	}
}