/* Haygoodies Themes: Kawaii Snow, the kawaii sky in winter (day & night), fixed behind the whole site.
   Day: sun with a face, clouds, birds. Night: moon, twinkling and shooting stars. Both: falling snow,
   and a snowy bank along the top of the footer with bunnies hopping across. */
html { --ks-sky1: #9ccdf2; --ks-sky2: #d6ebfb; --ks-sky3: #fde3ef; --ks-snow1: #ffffff; --ks-snow2: #e4ecf8; --ks-snow3: #c9d6ea; }
html.hgt-night { --ks-sky1: #0f0c2e; --ks-sky2: #27195a; --ks-sky3: #573a82; --ks-snow1: #eee9ff; --ks-snow2: #d3caf2; --ks-snow3: #ae9fdc; }
html.hgt-night .hgt-skin { --hgt-glass: rgba(250, 244, 255, .86); --hgt-glass2: rgba(252, 248, 255, .94); --hgt-foot: rgba(250, 244, 255, .9); }
html.hgt-scene-on { background: var(--ks-sky1) !important; }
html.hgt-scene-on body { background: transparent !important; }

.hgt-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ks-grad { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ks-sky1) 0%, var(--ks-sky2) 55%, var(--ks-sky3) 100%); transition: background .8s; }
.ks-day-only, .ks-night-only { transition: opacity .9s ease; }
html.hgt-night .ks-day-only { opacity: 0; }
html:not(.hgt-night) .ks-night-only { opacity: 0; }

.ks-sun { position: absolute; top: clamp(150px, 20vh, 230px); right: 8vw; width: min(20vw, 150px); aspect-ratio: 1; }
.ks-sun-core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff6b8, #ffd34d 60%, #ffb92e); box-shadow: 0 0 40px 12px rgba(255, 214, 77, .55); }
.ks-sun-face { position: absolute; inset: 22%; }
.ks-sun-face i { position: absolute; top: 44%; width: 9%; height: 11%; background: #6b3b1f; border-radius: 50%; }
.ks-sun-face i:nth-child(1) { left: 30%; } .ks-sun-face i:nth-child(2) { right: 30%; }
.ks-sun-face b { position: absolute; left: 39%; top: 58%; width: 22%; height: 11%; border: 3px solid #6b3b1f; border-top: 0; border-radius: 0 0 40px 40px; }
.ks-sun-face s { position: absolute; top: 56%; width: 14%; height: 8%; background: #ff9db9; border-radius: 50%; opacity: .8; }
.ks-sun-face s:nth-of-type(1) { left: 14%; } .ks-sun-face s:nth-of-type(2) { right: 14%; }
.ks-rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 90, .55) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%, #000 62%, transparent 64%); mask: radial-gradient(circle, transparent 34%, #000 35%, #000 62%, transparent 64%); animation: ks-spin 40s linear infinite; }

.ks-rainbow { position: absolute; left: -12vw; bottom: 8vh; width: 70vw; max-width: 900px; aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .5;
	background: radial-gradient(circle at 50% 100%, transparent 54%, #c9a7ff 54%, #c9a7ff 58%, #8fc8ff 58%, #8fc8ff 62%, #8fe3cf 62%, #8fe3cf 66%, #ffe58a 66%, #ffe58a 70%, #ffc28a 70%, #ffc28a 74%, #ff9fbe 74%, #ff9fbe 78%, transparent 78%);
	-webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }

.ks-cloud { position: absolute; width: 180px; height: 60px; background: #fff; border-radius: 60px; opacity: .92; filter: drop-shadow(0 6px 0 rgba(160, 190, 230, .35)); animation: ks-drift linear infinite; }
.ks-cloud::before, .ks-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.ks-cloud::before { width: 80px; height: 80px; left: 28px; top: -40px; }
.ks-cloud::after { width: 64px; height: 64px; left: 88px; top: -28px; }
html.hgt-night .ks-cloud { background: #4b3b86; opacity: .55; filter: none; }
html.hgt-night .ks-cloud::before, html.hgt-night .ks-cloud::after { background: #4b3b86; }

.ks-moon { position: absolute; top: clamp(150px, 20vh, 230px); right: 10vw; width: min(14vw, 110px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe7a3 70%); box-shadow: 0 0 50px 14px rgba(255, 236, 170, .35); }
.ks-moon::before { content: ""; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: rgba(230, 200, 120, .45); top: 52%; left: 24%; box-shadow: 30px -24px 0 -2px rgba(230, 200, 120, .35), 18px 14px 0 -5px rgba(230, 200, 120, .4); }
.ks-moon-face { position: absolute; left: 36%; top: 40%; width: 34%; height: 18%; }
.ks-moon-face::before, .ks-moon-face::after { content: ""; position: absolute; top: 0; width: 26%; height: 70%; border: 3px solid #8a6a3a; border-top: 0; border-radius: 0 0 20px 20px; }
.ks-moon-face::before { left: 0; } .ks-moon-face::after { right: 0; }
.ks-stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.ks-flyer { position: absolute; left: 0; top: 0; will-change: transform; }
.ks-bird { width: 58px; height: 43px; animation: ks-fly linear forwards; }
.ks-face { display: block; width: 100%; height: 100%; }
.ks-rtl .ks-face { transform: scaleX(-1); }
.ks-bird .ks-face > * { display: block; width: 100%; height: 100%; animation: ks-bob .6s ease-in-out infinite alternate; }
.ks-bird .ks-wing { transform-origin: 20px 16px; animation: ks-flap .22s ease-in-out infinite alternate; }
.ks-butterfly { width: 40px; height: 35px; animation: ks-flutterpath ease-in-out forwards; }
.ks-butterfly .ks-bw { transform-origin: 15px 13px; animation: ks-bflap .18s ease-in-out infinite alternate; }

/* falling snow over the sky */
.kw-snow { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the snowy bank along the top of the footer, with bunnies hopping across */
.ks-meadow { position: relative; height: 150px; margin-top: 40px; overflow: hidden; pointer-events: none; }
.ks-meadow svg.kw-bank { position: absolute; left: 0; bottom: 0; width: 100%; height: 110px; }
.kw-pine { position: absolute; bottom: 30px; width: 46px; transform-origin: 50% 100%; }
.kw-pine svg { display: block; width: 100%; height: auto; }
html.hgt-night .kw-pine { filter: brightness(.75) saturate(.8); }
.kw-glint { position: absolute; width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: kw-glint 4s ease-in-out infinite; filter: drop-shadow(0 0 3px #bfe3ff); }
.kw-bunny { position: absolute; bottom: 26px; left: 0; width: 58px; animation: kw-trip 40s linear infinite; }
.kw-bunny.b2 { width: 46px; bottom: 20px; animation-delay: -1.3s; }
.kw-bunny.kw-rtl { animation-name: kw-trip-back; }
.kw-bunny .kw-hop { display: block; animation: kw-hop .62s ease-in-out infinite; transform-origin: 50% 100%; }
.kw-bunny.kw-rtl .kw-hop svg { transform: scaleX(-1); }
.kw-bunny svg { display: block; width: 100%; height: auto; overflow: visible; }
.kw-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: kw-ear 5s ease-in-out infinite; }
.kw-ear.e2 { animation-delay: -2.4s; }
.kw-blink { transform-box: fill-box; transform-origin: center; animation: kw-blink 6s infinite; }
html.hgt-night .kw-bunny svg { filter: drop-shadow(0 0 6px rgba(255, 245, 210, .45)); }

/* the sun / moon switch */
.hgt-switch { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9990; display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255, 255, 255, .92); border: 3px solid #3b2740; border-radius: 999px; padding: 5px 12px 5px 6px; box-shadow: 4px 4px 0 #c9b6ff;
	font: 600 14px/1 "Fredoka", "Nunito", system-ui, sans-serif; color: #3b2740; }
html.hgt-night .hgt-switch { background: rgba(37, 25, 70, .92); border-color: #f6d6ff; box-shadow: 4px 4px 0 #7b5cd6; color: #fdf0ff; }
.ks-toggle { position: relative; width: 74px; height: 38px; border-radius: 999px; border: 3px solid currentColor; cursor: pointer; padding: 0; flex: none;
	background: linear-gradient(90deg, #8fd3ff, #ffe1f0); transition: background .5s; }
html.hgt-night .ks-toggle { background: linear-gradient(90deg, #2a1f5c, #5b3a7e); }
.ks-toggle .ks-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff6b8, #ffcf3f); box-shadow: 0 0 10px rgba(255, 210, 70, .8); transition: transform .45s cubic-bezier(.5, 1.6, .5, 1), background .45s; }
html.hgt-night .ks-toggle .ks-knob { transform: translateX(36px); background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe7a3); box-shadow: inset -6px -2px 0 #e9cf86, 0 0 10px rgba(255, 236, 170, .6); }
.ks-toggle .ks-tstar { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .4s; }
html.hgt-night .ks-toggle .ks-tstar { opacity: 1; }
.ks-toggle .ks-tstar:nth-child(2) { left: 12px; top: 8px; } .ks-toggle .ks-tstar:nth-child(3) { left: 22px; top: 20px; } .ks-toggle .ks-tstar:nth-child(4) { left: 9px; top: 22px; width: 3px; height: 3px; }
.ks-toggle .ks-tcloud { position: absolute; right: 8px; top: 13px; width: 22px; height: 9px; border-radius: 9px; background: #fff; transition: opacity .4s; }
html.hgt-night .ks-toggle .ks-tcloud { opacity: 0; }
.ks-toggle:focus-visible { outline: 3px solid #ff6fae; outline-offset: 3px; }

@keyframes ks-spin { to { transform: rotate(360deg); } }
@keyframes ks-drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 260px)); } }
@keyframes ks-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes ks-flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
@keyframes ks-bflap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes ks-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes kw-trip { 0% { left: -80px; } 45% { left: calc(100% + 80px); } 100% { left: calc(100% + 80px); } }
@keyframes kw-trip-back { 0% { left: calc(100% + 80px); } 45% { left: -80px; } 100% { left: -80px; } }
@keyframes kw-hop { 0%, 100% { transform: translateY(0) scale(1.06, .92); } 15% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(.97, 1.04); } 85% { transform: translateY(0) scale(1); } }
@keyframes kw-ear { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-14deg); } 92% { transform: rotate(6deg); } }
@keyframes kw-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes kw-glint { 0%, 100% { opacity: 0; transform: scale(.4); } 45%, 55% { opacity: 1; transform: scale(1.1); } }
@keyframes ks-hover { from { transform: translateY(-9px) rotate(-4deg); } to { transform: translateY(9px) rotate(4deg); } }
@keyframes ks-firefly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(30px, -40px); opacity: 1; } }
@keyframes ks-fly { from { transform: translate(var(--x0), var(--y0)); } to { transform: translate(var(--x1), var(--y1)); } }
@keyframes ks-flutterpath { 0% { transform: translate(var(--x0), var(--y0)) rotate(-8deg); } 25% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .25), calc(var(--y0) - 60px)) rotate(8deg); } 50% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .5), calc(var(--y0) + 30px)) rotate(-8deg); } 75% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .75), calc(var(--y0) - 40px)) rotate(8deg); } 100% { transform: translate(var(--x1), var(--y0)); } }
@media (prefers-reduced-motion: reduce) {
	.hgt-backdrop *, .ks-meadow *, .ks-toggle * { animation: none !important; transition: none !important; }
	.kw-bunny { left: 30%; } .kw-bunny.b2 { left: calc(30% + 70px); }
	.ks-flyer { display: none; }
}
@media (max-width: 700px) {
	.ks-cloud { transform: scale(.7); }
	.ks-sun { top: 16vh; right: 4vw; width: 96px; }
	.ks-moon { top: 16vh; right: 6vw; width: 72px; }
	.ks-meadow { height: 120px; }
}
@media print { .hgt-backdrop, .hgt-switch, .ks-meadow { display: none; } }