/* Tarot AI — shared night sky (v0.9.6)
   The star field, the ripples and the orbit rings used to live only inside
   the home page's immersive scene. Every other page was flat black, which
   made the site feel like two products. This paints the same three layers
   behind the whole site: fixed, behind the content, silent.

   Rules of engagement:
     · fixed + z-index 0, content sits at z-index 1 (see #page below)
     · the theme's opaque page backgrounds are made transparent so the sky
       actually shows through; header and footer keep a blurred tint so text
       stays readable while scrolling over it
     · every animation is slow and low-contrast, and stops entirely for
       prefers-reduced-motion */

.tk-skybg {
	--bgA: #0a1226;
	--bgB: #04070f;
	--bgDeep: #01030a;
	--violet: 155 124 246;
	--cyan: 125 211 252;

	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	contain: layout paint;
	background:
		radial-gradient(120% 80% at 50% 4%, transparent 34%, rgba(4, 7, 15, .5) 78%, rgba(4, 7, 15, .92) 100%),
		radial-gradient(130% 92% at 50% -8%, #0d1830 0%, var(--bgB) 44%, var(--bgDeep) 100%);
}

/* The content column has to be above the sky, and transparent enough for it
   to be visible. Astra paints #page / .site-content opaque by default. */
body.tk-has-sky #page { position: relative; z-index: 1; }

body.tk-has-sky #page,
body.tk-has-sky .site-content,
body.tk-has-sky .ast-container,
body.tk-has-sky .entry-content,
body.tk-has-sky .entry-header,
body.tk-has-sky .ast-footer-overlay {
	background-color: transparent !important;
}

body.tk-has-sky .site-header,
body.tk-has-sky .main-header-bar,
body.tk-has-sky .ast-primary-header-bar,
body.tk-has-sky .ast-inner-header-wrap {
	background-color: rgba(7, 13, 26, .55) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-color: rgba(255, 255, 255, .1) !important;
}

body.tk-has-sky .site-footer,
body.tk-has-sky .ast-small-footer-wrap {
	background-color: rgba(7, 13, 26, .72) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-color: rgba(255, 255, 255, .1) !important;
}

/* ------------------------------------------------------------- nebula */

.tk-skybg__neb {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(ellipse 46% 32% at 20% 22%, rgb(var(--violet) / .17), transparent 70%),
		radial-gradient(ellipse 38% 26% at 82% 16%, rgb(var(--cyan) / .09), transparent 72%),
		radial-gradient(ellipse 58% 36% at 50% 84%, rgb(var(--violet) / .09), transparent 76%),
		radial-gradient(ellipse 30% 22% at 92% 68%, rgb(var(--cyan) / .06), transparent 70%);
	filter: blur(30px);
	animation: tk-sky-drift 74s ease-in-out infinite;
}

@keyframes tk-sky-drift {
	0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1.04); }
	33%      { transform: translate3d(4%, 2%, 0) scale(1.13); }
	66%      { transform: translate3d(-1%, 4%, 0) scale(1.07); }
}

/* -------------------------------------------------------------- stars */

/* Three densities of dots, drifting at different speeds so it never looks
   like a single moving texture. */
.tk-skybg__stars {
	position: absolute;
	inset: -20%;
	opacity: .55;
	background-image:
		radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, .85), transparent 100%),
		radial-gradient(1.2px 1.2px at 34% 62%, rgba(223, 241, 246, .7), transparent 100%),
		radial-gradient(1.6px 1.6px at 68% 26%, rgba(255, 255, 255, .6), transparent 100%),
		radial-gradient(1.1px 1.1px at 82% 74%, rgba(223, 241, 246, .65), transparent 100%),
		radial-gradient(1.3px 1.3px at 52% 44%, rgb(var(--cyan) / .55), transparent 100%),
		radial-gradient(1px 1px at 8% 84%, rgba(255, 255, 255, .5), transparent 100%),
		radial-gradient(1px 1px at 92% 42%, rgba(255, 255, 255, .45), transparent 100%),
		radial-gradient(1.2px 1.2px at 24% 92%, rgb(var(--violet) / .5), transparent 100%);
	background-size: 100% 100%;
	animation: tk-sky-twinkle 19s ease-in-out infinite;
}

/* second,sparser sheet — different grid, different speed */
.tk-skybg__stars2 {
	position: absolute;
	inset: -20%;
	opacity: .38;
	background-image:
		radial-gradient(1.1px 1.1px at 18% 34%, rgba(255, 255, 255, .55), transparent 100%),
		radial-gradient(1px 1px at 44% 12%, rgb(var(--violet) / .6), transparent 100%),
		radial-gradient(1.3px 1.3px at 74% 58%, rgba(255, 255, 255, .5), transparent 100%),
		radial-gradient(1px 1px at 62% 88%, rgba(223, 241, 246, .5), transparent 100%),
		radial-gradient(1.1px 1.1px at 96% 22%, rgb(var(--cyan) / .45), transparent 100%);
	animation: tk-sky-twinkle 27s ease-in-out infinite reverse;
}

@keyframes tk-sky-twinkle {
	0%, 100% { opacity: .28; transform: translate3d(0, 0, 0) scale(1); }
	50%      { opacity: .6;  transform: translate3d(-1.5%, 1%, 0) scale(1.04); }
}

/* -------------------------------------------------------- orbit rings */

.tk-skybg__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(128vh, 150vw);
	height: min(128vh, 150vw);
	margin: calc(min(128vh, 150vw) / -2) 0 0 calc(min(128vh, 150vw) / -2);
	border: 1px solid rgb(var(--violet) / .09);
	border-radius: 50%;
	animation: tk-sky-spin 210s linear infinite;
}

.tk-skybg__ring::before,
.tk-skybg__ring::after {
	content: "";
	position: absolute;
	border: 1px solid rgb(var(--violet) / .08);
	border-radius: 50%;
}

.tk-skybg__ring::before { inset: 13%; }
.tk-skybg__ring::after { inset: 27%; border-style: dashed; opacity: .6; }

.tk-skybg__ring--2 {
	width: min(78vh, 96vw);
	height: min(78vh, 96vw);
	margin: calc(min(78vh, 96vw) / -2) 0 0 calc(min(78vh, 96vw) / -2);
	border-color: rgb(var(--cyan) / .06);
	animation-duration: 150s;
	animation-direction: reverse;
}

/* one small node riding the ring — the "planet" that makes it read as an
   orbit rather than a decorative circle */
.tk-skybg__orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(78vh, 96vw);
	height: min(78vh, 96vw);
	margin: calc(min(78vh, 96vw) / -2) 0 0 calc(min(78vh, 96vw) / -2);
	animation: tk-sky-spin 96s linear infinite;
}

.tk-skybg__orbit::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: rgb(var(--cyan) / .55);
	box-shadow: 0 0 14px rgb(var(--cyan) / .45);
}

@keyframes tk-sky-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ ripples */

.tk-skybg__ripples {
	position: absolute;
	inset: 0;
}

.tk-skybg__ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	height: 220px;
	margin: -110px 0 0 -110px;
	border-radius: 50%;
	mix-blend-mode: screen;
	background: radial-gradient(closest-side circle,
		rgba(0, 0, 0, 0) 46%,
		rgb(var(--violet) / .06) 55%,
		rgb(var(--violet) / .22) 66%,
		rgb(var(--violet) / .08) 77%,
		rgba(0, 0, 0, 0) 90%);
	animation: tk-sky-ripple 13s cubic-bezier(.12, .5, .2, 1) infinite;
}

.tk-skybg__ripple:nth-child(2) { animation-delay: 4.4s; }
.tk-skybg__ripple:nth-child(3) { animation-delay: 8.8s; }

@keyframes tk-sky-ripple {
	0%   { transform: scale(.1);  opacity: 0; }
	14%  { opacity: .7; }
	55%  { opacity: .22; }
	100% { transform: scale(5.4); opacity: 0; }
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 720px) {
	.tk-skybg__stars { opacity: .4; }
	.tk-skybg__stars2 { display: none; }
	.tk-skybg__ripple:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tk-skybg__neb,
	.tk-skybg__stars,
	.tk-skybg__stars2,
	.tk-skybg__ring,
	.tk-skybg__ring--2,
	.tk-skybg__orbit,
	.tk-skybg__ripple {
		animation: none !important;
	}
	.tk-skybg__ripple { opacity: .25; transform: scale(2.4); }
}