/* Website themes (App\Support\SiteThemes): the message bar, and each effect. The colors come from the theme
   itself (an inline :root block in layouts/app.blade.php). Effects never take clicks, and stop moving for
   visitors who ask for less motion, and stay off the game on pages that show it. */

/* ── Message bar ── */
.season-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 8px 16px;
	/* starts in the header's own color, so header and bar read as one piece */
	background:
		radial-gradient(ellipse 60% 140% at 50% 100%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, var(--surface-2) 100%);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line-strong);
	color: var(--text) !important;
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	text-decoration: none !important;
	position: relative;
	z-index: 2;
}

/* No line between the header and the bar while they sit together (the line comes back once the header
   sticks on scroll) */
.site-theme:has(.season-bar) .site-header:not(.is-scrolled) {
	border-bottom-color: transparent;
}

/* ...and the header's backdrop covers that 1px too, so no forest peeks through it */
.site-theme:has(.season-bar) .site-header::before {
	bottom: -1px;
}

.season-bar__more {
	color: var(--gold);
	white-space: nowrap;
}

.season-bar:hover .season-bar__more {
	text-decoration: underline;
}

/* The accent drives the borders too */
.site-theme {
	--line: color-mix(in srgb, var(--gold) 22%, transparent);
	--line-strong: color-mix(in srgb, var(--gold) 45%, transparent);
}

.site-theme .site-header::before {
	background: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* ── Falling things: snow, leaves, bats ── */
.season-fx {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 400;
}

.season-fx span {
	position: absolute;
	top: -40px;
	left: calc(var(--x) * 1%);
	animation: season-fall var(--d) linear var(--delay) infinite;
	transform: scale(var(--s));
	line-height: 1;
}

.season-fx--snow span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	opacity: .85;
	box-shadow: 0 0 6px rgba(255, 255, 255, .6);
}

.season-fx--leaves span {
	font-size: 22px;
	animation-name: season-leaf;
	animation-duration: calc(var(--d) * 1.6);
	opacity: .9;
}

.season-fx--bats span {
	font-size: 28px;
	top: calc(var(--x) * 0.5% + 10%);
	left: -60px;
	animation-name: season-bat;
	animation-duration: calc(var(--d) * 2.2);
	animation-timing-function: ease-in-out;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

@keyframes season-fall {
	from { transform: translate3d(0, 0, 0) scale(var(--s)); }
	to { transform: translate3d(-40px, 110vh, 0) scale(var(--s)); }
}

@keyframes season-leaf {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--s)); }
	25% { transform: translate3d(40px, 28vh, 0) rotate(90deg) scale(var(--s)); }
	50% { transform: translate3d(-30px, 55vh, 0) rotate(180deg) scale(var(--s)); }
	75% { transform: translate3d(30px, 82vh, 0) rotate(270deg) scale(var(--s)); }
	100% { transform: translate3d(-20px, 110vh, 0) rotate(360deg) scale(var(--s)); }
}

/* A bat crosses the screen now and then: most of each loop it waits off the left edge */
@keyframes season-bat {
	0%, 70% { transform: translate3d(0, 0, 0) scale(var(--s)); }
	78% { transform: translate3d(30vw, -6vh, 0) scale(var(--s)); }
	86% { transform: translate3d(60vw, 4vh, 0) scale(var(--s)); }
	100% { transform: translate3d(calc(100vw + 120px), -8vh, 0) scale(var(--s)); }
}

/* The game stays clear: on a page with the game (Play, a shared zoo, class play, Room Recess) the page body
   sits above the falling things and cobwebs, so they only pass by in the margins and never cover the game. */
.site-theme #wrapper:has(iframe.resp-iframe) {
	z-index: 401;
}

/* ── Christmas lights along the bottom of the header ── */
/* The lights and the message bar sit in one block right under the header: the lights hang over the top of
   the bar, so the bar starts where the header ends with no strip of page between them. */
.season-top {
	position: relative;
	z-index: 2;
}

.season-lights {
	position: absolute;
	top: -7px;
	left: 0;
	right: 0;
	z-index: 3;
	height: 14px;
	display: flex;
	justify-content: space-between;
	padding: 0 8px;
	overflow: hidden;
	pointer-events: none;
	background: linear-gradient(transparent 6px, rgba(0, 0, 0, .55) 6px, rgba(0, 0, 0, .55) 7px, transparent 7px);
}

/* With lights the bar leaves them room along its top */
.season-lights + .season-bar {
	padding-top: 13px;
}

.season-lights span {
	width: 8px;
	height: 12px;
	border-radius: 50% 50% 45% 45%;
	background: #ff4040;
	box-shadow: 0 0 8px currentColor;
	color: #ff4040;
	animation: season-twinkle 1.6s ease-in-out infinite;
}

.season-lights span:nth-child(4n+2) { background: #40d060; color: #40d060; animation-delay: -.4s; }
.season-lights span:nth-child(4n+3) { background: #ffd040; color: #ffd040; animation-delay: -.8s; }
.season-lights span:nth-child(4n) { background: #40a0ff; color: #40a0ff; animation-delay: -1.2s; }
.season-lights span:nth-child(n+25) { display: none; }

@media (min-width: 900px) {
	.season-lights span:nth-child(n+25) { display: block; }
}

@keyframes season-twinkle {
	50% { opacity: .35; }
}

/* ── Cobwebs in the top corners ── */
.season-web {
	position: fixed;
	top: var(--header-h);
	width: 110px;
	height: 110px;
	pointer-events: none;
	z-index: 400;
	opacity: .5;
	background:
		repeating-radial-gradient(circle at 0 0, transparent 0 14px, rgba(255, 255, 255, .55) 14px 15px),
		repeating-conic-gradient(from 0deg at 0 0, transparent 0 11deg, rgba(255, 255, 255, .55) 11deg 12deg);
	-webkit-mask: radial-gradient(circle at 0 0, #000 0 60%, transparent 72%);
	mask: radial-gradient(circle at 0 0, #000 0 60%, transparent 72%);
}

.season-web--left { left: 0; }
.season-web--right { right: 0; transform: scaleX(-1); }

@media (max-width: 700px) {
	.season-web { width: 70px; height: 70px; }
	.season-fx--snow span:nth-child(n+18),
	.season-fx--leaves span:nth-child(n+8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.season-fx, .season-web { display: none; }
	.season-lights span { animation: none; }
}

/* ── From the forest to the theme's colors ── */
/* The usual forest picture takes the theme's color (its light and shade over the page color) and melts into
   the page color further down, instead of a green forest behind purple or orange pages. A theme with its own
   background picture keeps that picture as it is. */
.site-theme:not(.site-theme--own-bg) {
	background-image:
		linear-gradient(180deg,
			color-mix(in srgb, var(--bg) 25%, transparent) 0,
			color-mix(in srgb, var(--bg) 45%, transparent) 600px,
			var(--bg) 1300px),
		url(../images/body-bg.jpg);
	background-size: 1920px 1400px, 1920px auto;
	background-repeat: no-repeat;
	background-position: top center;
	background-blend-mode: normal, luminosity;
}

/* Cards and panels use the theme's card colors instead of the usual brown */
.site-theme #content {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--surface) 97%, transparent) 0%,
		color-mix(in srgb, var(--bg) 97%, transparent) 100%);
}

.site-theme #form,
.site-theme #wedonate-container,
.site-theme .stat-card,
.site-theme .shop-card,
.site-theme .game-card,
.site-theme .reg-card,
.site-theme .about-section,
.site-theme .account-hero,
.site-theme .account-action-card,
.site-theme .explore-search-card,
.site-theme .explore-section-title,
.site-theme .explore-viewer-bar,
.site-theme .store-hero,
.site-theme .store-purchase-card,
.site-theme .store-payment-wrap,
.site-theme .store-item-card,
.site-theme .store-offer:not(.store-offer--starter),
.site-theme .profile-hero,
.site-theme .profile-section-title,
.site-theme .edu-dash-card,
.site-theme #sidebar,
.site-theme .home-news-item,
.site-theme .news-index-header,
.site-theme .news-card,
.site-theme .news-article,
.site-theme .media-section {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--surface-2) 95%, transparent) 0%,
		color-mix(in srgb, var(--surface) 95%, transparent) 100%);
}

.site-theme .account-action-card:not(.account-action-card--danger):hover {
	background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
}

.site-theme .store-checkout-divider span,
.site-theme .zoo-card,
.site-theme .dash-jump {
	background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.site-theme .hero__content {
	background: linear-gradient(0deg,
		color-mix(in srgb, var(--bg) 90%, transparent) 0%,
		color-mix(in srgb, var(--bg) 72%, transparent) 55%,
		transparent 100%);
}

.site-theme.nav-open .site-header::before {
	background: color-mix(in srgb, var(--bg) 97%, transparent);
}

.site-theme .site-footer {
	background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}