/* Telescope Finder — illustration styles. Scoped to .tf-art, .tf-stars, [data-tf-scope]. */

.tf-art { display: block; overflow: visible; }
.tf-art text { font-family: var(--tf-font-body, inherit); }

/* ------------------------------------------------------------ lessons */

/* aperture-ladder */
.tf-band-group { transition: opacity 400ms var(--tf-ease); }
.tf-band-group rect, .tf-band-group ellipse {
	transition: filter 400ms var(--tf-ease), stroke 400ms var(--tf-ease);
}
.tf-band-group.is-on rect, .tf-band-group.is-on ellipse {
	stroke: var(--tf-gold);
	filter: drop-shadow(0 0 5px var(--tf-gold));
}

/* size-person */
.tf-pair { opacity: .55; transition: opacity 400ms var(--tf-ease); }
.tf-pair.is-on { opacity: 1; filter: drop-shadow(0 0 6px var(--tf-gold)); }

/* targets-split */
.tf-half { transition: opacity 400ms var(--tf-ease); }
.tf-half.is-on { filter: drop-shadow(0 0 6px var(--tf-gold)); }
.tf-half.is-dim { opacity: .3; }

/* bortle-sky */
.tf-sky-glow, .tf-sky-milkyway, .tf-sky-buildings { transition: opacity 500ms var(--tf-ease); }
.tf-sky-stars-mid, .tf-sky-stars-bright { transition: opacity 500ms var(--tf-ease); }
.tf-sky-stars-faint { opacity: .5; }
.tf-sky-stars-mid { opacity: 0; }
.tf-sky-stars-bright { opacity: 0; }
.tf-sky-milkyway { opacity: 0; }
[data-sky="city"] .tf-sky-glow { opacity: 1; }
[data-sky="city"] .tf-sky-stars-mid { opacity: .15; }
[data-sky="city"] .tf-sky-stars-bright { opacity: .5; }
[data-sky="suburbs"] .tf-sky-glow, [data-sky="mix"] .tf-sky-glow { opacity: .65; }
[data-sky="suburbs"] .tf-sky-stars-mid, [data-sky="mix"] .tf-sky-stars-mid { opacity: .7; }
[data-sky="suburbs"] .tf-sky-stars-bright, [data-sky="mix"] .tf-sky-stars-bright { opacity: 1; }
[data-sky="suburbs"] .tf-sky-milkyway, [data-sky="mix"] .tf-sky-milkyway { opacity: .3; }
[data-sky="rural"] .tf-sky-glow { opacity: .25; }
[data-sky="rural"] .tf-sky-stars-mid { opacity: 1; }
[data-sky="rural"] .tf-sky-stars-bright { opacity: 1; }
[data-sky="rural"] .tf-sky-milkyway { opacity: 1; }

/* size-lineup */
.tf-w { transition: opacity 400ms var(--tf-ease); }
.tf-w.is-on { filter: drop-shadow(0 0 6px var(--tf-gold)); }
.tf-w.is-on rect, .tf-w.is-on ellipse { stroke: var(--tf-gold); }

/* finding-strip */
.tf-panel { transition: opacity 400ms var(--tf-ease); }
.tf-panel.is-on rect:first-child { stroke: var(--tf-gold); filter: drop-shadow(0 0 6px var(--tf-gold)); }

/* photo-split */
.tf-p { transition: opacity 400ms var(--tf-ease); }
.tf-p.is-on { filter: drop-shadow(0 0 6px var(--tf-gold)); }
.tf-p.is-dim { opacity: .3; }

/* effort-tools */
.tf-scene { transition: opacity 400ms var(--tf-ease); }
.tf-scene.is-on rect:first-child { stroke: var(--tf-gold); }
.tf-scene.is-on { filter: drop-shadow(0 0 6px var(--tf-gold)); }

/* light-path */
.tf-row { opacity: .55; transition: opacity 400ms var(--tf-ease); }
.tf-row.is-on { opacity: 1; }
.tf-ray { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--tf-ease); }
.tf-row:not(.is-on) .tf-ray { stroke-dashoffset: 60; }
.tf-row.is-on .tf-ray { animation: tf-ray-flow 1.6s linear infinite; }
@keyframes tf-ray-flow { to { stroke-dashoffset: -22; } }
.tf-ray-dot { opacity: 0; }
.tf-row.is-on .tf-ray-dot { opacity: 1; }
@supports (offset-path: path("M0 0")) {
	.tf-ray-dot--refractor { offset-path: path("M 40 55 L 420 55 L 462 40"); offset-rotate: 0deg; }
	.tf-ray-dot--reflector { offset-path: path("M 40 58 L 378 58 L 340 30 L 462 30"); offset-rotate: 0deg; }
	.tf-ray-dot--catadioptric { offset-path: path("M 40 58 L 378 58 L 340 34 L 378 20 L 460 20"); offset-rotate: 0deg; }
	.tf-row.is-on .tf-ray-dot { animation: tf-ray-travel 2.2s linear infinite; }
	@keyframes tf-ray-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
}

/* ------------------------------------------------------------- scope */

[data-tf-scope] { overflow: visible; }
[data-tube="small"] { --tf-sc-y: .7; }
[data-tube="medium"] { --tf-sc-y: 1; }
[data-tube="large"] { --tf-sc-y: 1.35; }
[data-tube="huge"] { --tf-sc-y: 1.7; }
[data-length="short"] { --tf-sc-x: 1; }
[data-length="long"] { --tf-sc-x: 1.35; }

.tf-sc-assembly {
	transform-box: fill-box; transform-origin: 100% 50%;
	transform: scaleX(var(--tf-sc-x, 1));
	transition: transform 600ms var(--tf-ease) 0ms;
}
.tf-sc-tube, .tf-sc-front {
	transform-box: fill-box; transform-origin: 50% 50%;
	transform: scaleY(var(--tf-sc-y, 1));
	transition: transform 600ms var(--tf-ease) 40ms, opacity 600ms var(--tf-ease) 40ms;
}
.tf-sc-eyepiece { transition: opacity 600ms var(--tf-ease) 80ms; }
.tf-sc-base-tripod, .tf-sc-base-rocker, .tf-sc-base-fork, .tf-sc-base-smart {
	opacity: 0; transition: opacity 600ms var(--tf-ease) 120ms;
}
.tf-sc-acc-phone, .tf-sc-acc-handset, .tf-sc-acc-camera {
	opacity: 0; transition: opacity 600ms var(--tf-ease) 160ms;
}
.tf-sc-person { opacity: 0; transition: opacity 600ms var(--tf-ease) 200ms, transform 600ms var(--tf-ease) 200ms; transform-box: fill-box; transform-origin: 50% 100%; }
.tf-sc-sky { transition: opacity 600ms var(--tf-ease) 240ms; }

.tf-sc-front { opacity: 0; }
[data-front="lens"] .tf-sc-front-lens { opacity: 1; }
[data-front="open"] .tf-sc-front-open { opacity: 1; }
[data-front="corrector"] .tf-sc-front-corrector { opacity: 1; }
[data-front="smart"] .tf-sc-front-smart { opacity: 1; }
[data-front="smart"] .tf-sc-eyepiece { opacity: 0; }

[data-base="tripod"] .tf-sc-base-tripod { opacity: 1; }
[data-base="rocker"] .tf-sc-base-rocker { opacity: 1; }
[data-base="fork"] .tf-sc-base-fork { opacity: 1; }
[data-base="smart"] .tf-sc-base-smart { opacity: 1; }

[data-accessory="phone"] .tf-sc-acc-phone { opacity: 1; }
[data-accessory="handset"] .tf-sc-acc-handset { opacity: 1; }
[data-accessory="camera"] .tf-sc-acc-camera { opacity: 1; }

[data-person="kid"] .tf-sc-person { opacity: 1; transform: scaleY(.62); }
[data-person="adult"] .tf-sc-person { opacity: 1; transform: scaleY(1); }

.tf-sc-sky { opacity: 0; }
[data-sky="city"] .tf-sc-sky, [data-sky="suburbs"] .tf-sc-sky, [data-sky="rural"] .tf-sc-sky { opacity: 1; }
[data-sky="city"] .tf-sc-sky rect { fill: var(--tf-warn); opacity: .18; }
[data-sky="suburbs"] .tf-sc-sky rect { fill: var(--tf-bg-2); opacity: .8; }
[data-sky="rural"] .tf-sc-sky rect { fill: var(--tf-bg-2); opacity: 1; }

[data-tf-scope].is-outline .tf-sc-shape {
	fill: none !important;
	stroke: var(--tf-faint) !important;
	stroke-dasharray: 4 3;
	stroke-width: 1.2 !important;
}
[data-tf-scope]:not(.is-outline) .tf-sc-shape {
	transition: fill 600ms var(--tf-ease), stroke 600ms var(--tf-ease);
}

/* --------------------------------------------------------- constellation */

.tf-cstar { fill: var(--tf-faint); transform-box: fill-box; transform-origin: 50% 50%; transition: fill 260ms var(--tf-ease), opacity 260ms var(--tf-ease); }
.tf-cline { stroke: var(--tf-faint); stroke-width: 1.5; opacity: .5; transition: stroke 260ms var(--tf-ease); }
.tf-cstar.is-lit {
	fill: var(--tf-gold);
	animation: tf-star-pop 260ms var(--tf-ease);
}
.tf-cstar.is-current {
	fill: var(--tf-blue);
	animation: tf-star-pulse 2.4s ease-in-out infinite;
}
.tf-cline.is-drawn {
	stroke: var(--tf-gold);
	opacity: 1;
	animation: tf-line-draw 400ms var(--tf-ease) forwards;
}
@keyframes tf-star-pop { from { transform: scale(.6); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes tf-star-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes tf-line-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------- starfield */

.tf-stars {
	position: absolute; inset: 0; pointer-events: none; will-change: transform; overflow: hidden;
}
.tf-stars svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tf-stars--far {
	transform: translate3d(calc(var(--tf-px, 0) * 4px), calc(var(--tf-py, 0) * 4px), 0);
	transition: transform 200ms linear;
}
.tf-stars--near {
	transform: translate3d(calc(var(--tf-px, 0) * 9px), calc(var(--tf-py, 0) * 9px), 0);
	transition: transform 200ms linear;
}
.tf-star--twinkle { animation: tf-twinkle 4.5s ease-in-out infinite; }
.tf-app.is-hidden .tf-star--twinkle { animation-play-state: paused; }
@keyframes tf-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.tf-app *, .tf-app *::before, .tf-app *::after,
	.tf-art *, .tf-art *::before, .tf-art *::after {
		animation: none !important;
		transition: none !important;
	}
}