/*
Theme Name: Ponder
Description: Tema do site Ponder.
Version: 0.1.0
Author: Claudio Sanches
Author URI: https://claudiosanches.com
Requires at least: 7.1
Requires PHP: 8.2
Text Domain: ponder
*/

/*
 * Background: bubbles around the content, each lit along two opposite arcs and turning
 * slowly around the center of the screen. The smallest has the radius --inner and each
 * next one is --gap wider.
 */
.ponder-rings {
	--inner: 320px;
	--gap: 75px;
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.ponder-rings span {
	--size: calc((var(--inner) + var(--i) * var(--gap)) * 2);
	--w: 4px;
	--lit: rgb(255 255 255 / var(--glow));
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--size);
	height: var(--size);
	translate: -50% -50%;
	rotate: var(--from);
	scale: 1.01 0.99;
	animation: ponder-turn var(--turn) linear infinite;
}

/*
 * The rim: the crescent between a circle and a slightly narrower oval, so each lit arc
 * is widest in the middle and tapers to nothing, as in the design.
 */
.ponder-rings span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: conic-gradient(from calc(90deg - var(--arc)), transparent, var(--lit) var(--arc), transparent calc(var(--arc) * 2) 180deg, var(--lit) calc(180deg + var(--arc)), transparent calc(180deg + var(--arc) * 2));
	-webkit-mask:
		radial-gradient(closest-side, #000 calc(100% - 1px), transparent) center / 100% 100% no-repeat,
		radial-gradient(ellipse closest-side, #000 calc(100% - 2px), transparent) center / calc(100% - var(--w) * 2) 100% no-repeat;
	-webkit-mask-composite: source-out;
	mask:
		radial-gradient(closest-side, #000 calc(100% - 1px), transparent) center / 100% 100% no-repeat,
		radial-gradient(ellipse closest-side, #000 calc(100% - 2px), transparent) center / calc(100% - var(--w) * 2) 100% no-repeat;
	mask-composite: subtract;
}

.ponder-rings span:nth-child(1) { --i: 0; --from: 280deg; --arc: 55deg; --glow: 0.034; --turn: 90s; animation-direction: reverse; scale: 0.99 1.01; }
.ponder-rings span:nth-child(2) { --i: 1; --from: 200deg; --arc: 70deg; --glow: 0.03; --turn: 105s; --w: 5px; }
.ponder-rings span:nth-child(3) { --i: 3.1; --from: 60deg; --arc: 50deg; --glow: 0.026; --turn: 120s; animation-direction: reverse; scale: 0.99 1.01; }

@keyframes ponder-turn {

	from {
		rotate: var(--from);
	}

	to {
		rotate: calc(var(--from) + 360deg);
	}
}

@media (max-width: 700px) {

	.ponder-rings {
		--inner: 165px;
		--gap: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ponder-rings span {
		animation: none;
	}
}

/* Home and 404 pages: the logo on top and the message in the middle, as the flow lays them out. */
.ponder-soon {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 64px clamp(20px, 5.5vw, 70px);
	box-sizing: border-box;
}

.ponder-soon__logo {
	display: flex;
	align-items: center;
	align-self: start;
	min-height: 28px;
	margin: 0;
}

.ponder-soon__logo img {
	display: block;
	width: clamp(140px, 14vw, 176px);
	height: auto;
}

.ponder-soon__title {
	margin: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--fade) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(1.5rem, 3.4vw, 2.125rem);
	line-height: 1.45;
	text-align: center;
}

/* 404 page: the same screen with a line of text and a way back. */
.ponder-soon__body {
	text-align: center;
}

.ponder-soon__text {
	margin: 24px 0 0;
	color: var(--wp--preset--color--contrast);
}

.ponder-soon__link {
	margin: 16px 0 0;
}

.ponder-soon__link a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	text-underline-offset: 4px;
}

.ponder-soon__link a:hover,
.ponder-soon__link a:focus-visible {
	text-decoration: underline 1px;
}

@media (max-width: 700px) {

	.ponder-soon {
		padding-top: 28px;
		padding-bottom: 36px;
	}

	.ponder-soon__logo {
		min-height: 0;
	}
}