/**
 * Who Is Here — the lamps in the meadow, and the stars over it.
 *
 * A lamp is a warm window at the far end of a field. A star is somebody
 * walking through the blooms while it is dark where you are.
 *
 * Nothing here is a badge, a count on a card, or a number in a corner. It is
 * weather in her own world, and it is only ever there because somebody real
 * is actually there.
 */

.alive {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.alive .sky,
.alive .field,
.alive .lamps {
	position: absolute;
	inset: 0;
}

/* A lamp: warm, low in the field, and breathing rather than blinking. */
.alive .lamp {
	position: absolute;
	width: calc( 7px * var( --size, 1 ) );
	height: calc( 7px * var( --size, 1 ) );
	border-radius: 50%;
	background: #FFC97A;
	box-shadow:
		0 0 calc( 9px * var( --size, 1 ) ) calc( 3px * var( --size, 1 ) ) rgba( 255, 186, 92, .55 ),
		0 0 calc( 26px * var( --size, 1 ) ) calc( 10px * var( --size, 1 ) ) rgba( 255, 168, 70, .22 );
	opacity: 0;
	animation: sb-lamp-on 1.6s ease-out var( --wait, 0s ) forwards,
	           sb-breathe 6.5s ease-in-out calc( var( --wait, 0s ) + 1.6s ) infinite;
}

/* A star: cool, high, and only ever on a night sky. */
.alive .star {
	position: absolute;
	width: calc( 3px * var( --size, 1 ) );
	height: calc( 3px * var( --size, 1 ) );
	border-radius: 50%;
	background: #FFFDF6;
	box-shadow: 0 0 calc( 7px * var( --size, 1 ) ) calc( 2px * var( --size, 1 ) ) rgba( 255, 253, 240, .6 );
	opacity: 0;
	animation: sb-star-on 2.2s ease-out var( --wait, 0s ) forwards,
	           sb-twinkle 7s ease-in-out calc( var( --wait, 0s ) + 2.2s ) infinite;
}

/*
 * A bloom: the same person as a star, standing in daylight instead. Hers is
 * a hot palette and never a soft one — this is petal, not a grey dot.
 */
.alive .bloom {
	position: absolute;
	width: calc( 6px * var( --size, 1 ) );
	height: calc( 6px * var( --size, 1 ) );
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: var( --bloom, #D8467A );
	box-shadow: 0 0 calc( 8px * var( --size, 1 ) ) rgba( 216, 70, 122, .32 );
	opacity: 0;
	transform-origin: 50% 100%;
	animation: sb-bloom-up 1.9s cubic-bezier( .2, .8, .25, 1 ) var( --wait, 0s ) forwards,
	           sb-sway 9s ease-in-out calc( var( --wait, 0s ) + 1.9s ) infinite;
}

@keyframes sb-bloom-up {
	from { opacity: 0; transform: translateY( 10px ) scale( .3 ); }
	to   { opacity: .8; transform: translateY( 0 ) scale( 1 ); }
}

@keyframes sb-sway {
	0%, 100% { transform: rotate( -4deg ); }
	50%      { transform: rotate( 4deg ); }
}

/* Her own night, over her own meadow. */
.alive.is-night::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 21, 30, 46, .58 ) 0%, rgba( 26, 34, 44, .26 ) 46%, rgba( 32, 38, 40, 0 ) 78% );
}

@keyframes sb-lamp-on {
	from { opacity: 0; transform: scale( .4 ); }
	to   { opacity: .92; transform: scale( 1 ); }
}

@keyframes sb-star-on {
	from { opacity: 0; }
	to   { opacity: .85; }
}

@keyframes sb-breathe {
	0%, 100% { opacity: .92; }
	50%      { opacity: .66; }
}

@keyframes sb-twinkle {
	0%, 100% { opacity: .85; }
	43%      { opacity: .38; }
}

/*
 * Movement hurting somebody is a different thing entirely from a page being
 * quiet, so the lights still arrive — they simply stop moving.
 */
@media ( prefers-reduced-motion: reduce ) {
	.alive .lamp,
	.alive .star,
	.alive .bloom {
		animation: none;
		opacity: .9;
		transform: none;
	}
}

/* What is true, said plainly, under the meadow. */
.alive-said {
	position: relative;
	z-index: 3;
	margin-top: 1.5rem;
	font-size: .82rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var( --quiet );
	max-width: 46ch;
}

.alive-said.is-night {
	color: #C8B48A;
}

/*
 * On the meadow it stands just above her own name, in the open part of the
 * field — clear of her opening words at the top, clear of the wordmark, and
 * well clear of the Again button sitting at the foot of the screen.
 */
.stage .alive-said {
	position: absolute;
	left: clamp( 1.5rem, 6vw, 4rem );
	bottom: calc( clamp( 4.6rem, 8vh, 6rem ) + 2.9rem );
	margin-top: 0;
	max-width: 34ch;
	font-size: .68rem;
	letter-spacing: .17em;
	line-height: 1.75;
}

/* Standing in her own studio it is a line of its own, never an overlay. */
.alive-studio {
	position: relative;
	inset: auto;
	height: 7.5rem;
	margin-top: 2rem;
	border-radius: 3px;
	background: linear-gradient( to bottom, #1B2432 0%, #2A3126 100% );
}