/* Header logo orbit intro (task 2026-10-29-site-logo-orbit-build).
   Plays once per browser session. The inline <head> snippet adds
   html.logo-orbit before first paint only when the session flag is unset and
   prefers-reduced-motion is off. Otherwise none of this applies and the PNG
   shows as before. 1500 ms total; the PNG (stacked above) fades in over the
   SVG at 1250-1500, then the SVG is hidden.
   Layer geometry: ideas/site/logo-orbit.md trace table (512 space). */

/* Off unless the head snippet chose to animate. */
.logo-orbit-svg { display: none; }
html.logo-orbit .site-wordmark { position: relative; }

html.logo-orbit .logo-orbit-svg
{
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	pointer-events: none;
	animation: lo-hide 0s linear 1500ms forwards;
}

/* backwards only: after 1500 ms the PNG renders exactly as without the intro. */
html.logo-orbit .site-wordmark .site-mark { position: relative; z-index: 1; animation: lo-in 250ms ease-in-out 1250ms backwards; }

.logo-orbit-svg .lo-star,
.logo-orbit-svg .lo-ring { transform-origin: 256px 256px; }

html.logo-orbit .lo-star { animation: lo-star 330ms ease-out both; }
html.logo-orbit .lo-ring { animation: lo-ring 883ms cubic-bezier(0.22, 1, 0.36, 1) both; }
html.logo-orbit .lo-ring-blue { animation-delay: 167ms; }
html.logo-orbit .lo-ring-copper { animation-delay: 267ms; }
html.logo-orbit .lo-ring-olive { animation-delay: 367ms; }

/* Glints slide 40deg along their ring (param angle --t) into their rest spot.
   .lo-ga turns along the ring; .lo-gb turns back so the glint stays upright. */
.logo-orbit-svg .lo-ga, .logo-orbit-svg .lo-gb { transform-origin: 0 0; transform-box: view-box; }
html.logo-orbit .lo-glint { animation: lo-fade 110ms ease-out 1125ms both; }
html.logo-orbit .lo-ga { animation: lo-ga 375ms cubic-bezier(0.22, 1, 0.36, 1) 1125ms both; }
html.logo-orbit .lo-gb { animation: lo-gb 375ms cubic-bezier(0.22, 1, 0.36, 1) 1125ms both; }

@keyframes lo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lo-hide { to { visibility: hidden; } }
@keyframes lo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lo-star { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes lo-ring { from { opacity: 0; transform: rotate(-40deg); } to { opacity: 1; transform: rotate(0deg); } }
@keyframes lo-ga { from { transform: rotate(calc(var(--t) - 40deg)); } to { transform: rotate(var(--t)); } }
@keyframes lo-gb { from { transform: rotate(calc(40deg - var(--t))); } to { transform: rotate(calc(0deg - var(--t))); } }

@media screen and (max-width: 799px)
{
	html.logo-orbit .logo-orbit-svg { width: 32px; height: 32px; margin-top: -16px; }
}

@media (prefers-reduced-motion: reduce)
{
	html.logo-orbit .logo-orbit-svg { display: none; }
	html.logo-orbit .site-wordmark .site-mark { animation: none; }
}