/* ===== Переключатель темы «день / ночь» =====
   Размер меняется одной переменной --tt-h (высота). По умолчанию 38px, ширина всегда 88/38 от высоты.
   Пример: .bar .tt { --tt-h: 34px; }
   Все части сцены лежат отдельными слоями, анимируются только opacity и transform,
   поэтому браузер ничего не перерисовывает и анимация идёт без рывков. */
.tt {
  --tt-h: 38px;
  --u: calc(var(--tt-h) / 38);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .6s;
  position: relative; flex: none;
  width: calc(88 * var(--u)); height: var(--tt-h); padding: 0;
  border: 0; border-radius: var(--tt-h);
  overflow: hidden; isolation: isolate;
  background-color: #A6D9FB;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t) ease;
}
/* дневное небо отдельным слоем, ночью гаснет, чтобы по краю не просвечивала светлая каёмка */
.tt::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(#7CC8F8, #CDEBFF);
  transition: opacity var(--t) ease;
}
[data-theme="dark"] .tt { background-color: #182250; }
[data-theme="dark"] .tt::before { opacity: 0; }
.tt:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tt svg { display: block; width: 100%; height: 100%; }

.tt__l, .tt__tw, .tt__birds, .tt__knob, .tt__sun, .tt__moon { position: absolute; will-change: opacity, transform; }
.tt__l { inset: 0; }

/* ночное небо со звёздами */
.tt__night { background: linear-gradient(#0B1433, #26315C); opacity: 0; transition: opacity var(--t) ease; }
.tt__tw { fill: #FFF6D8; opacity: 0; transform: scale(.3); transition: opacity .4s ease, transform .4s ease; }
.tt__tw.w1 { left: calc(11 * var(--u));   top: calc(9.4 * var(--u));  width: calc(6 * var(--u));   height: calc(6 * var(--u)); }
.tt__tw.w2 { left: calc(31 * var(--u));   top: calc(5.6 * var(--u));  width: calc(4 * var(--u));   height: calc(4 * var(--u)); }
.tt__tw.w3 { left: calc(23 * var(--u));   top: calc(16 * var(--u));   width: calc(2 * var(--u));   height: calc(2 * var(--u)); }
.tt__tw.w4 { left: calc(7.2 * var(--u));  top: calc(19.2 * var(--u)); width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
.tt__tw.w5 { left: calc(41.1 * var(--u)); top: calc(12.1 * var(--u)); width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); }
.tt__tw.w6 { left: calc(36.3 * var(--u)); top: calc(20.3 * var(--u)); width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); }
.tt__tw.w7 { left: calc(19.3 * var(--u)); top: calc(4.3 * var(--u));  width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); }
.tt__tw.w8 { left: calc(28.4 * var(--u)); top: calc(11.4 * var(--u)); width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); }

/* облака и птицы */
.tt__clouds { fill: #fff; transition: opacity .4s ease, transform var(--t) var(--ease); }
.tt__birds { inset: 0; transition: opacity .35s ease, transform var(--t) var(--ease); }
.tt__bird { position: absolute; stroke: #2B3A4A; stroke-width: 1.1; stroke-linecap: round; fill: none; will-change: transform; }
.tt__bird svg { overflow: visible; }
.tt__bird.b1 { left: calc(38.6 * var(--u)); top: calc(14 * var(--u)); width: calc(9 * var(--u)); height: calc(3.6 * var(--u)); animation: tt-bob 3s ease-in-out infinite; }
.tt__bird.b2 { left: calc(44.4 * var(--u)); top: calc(9 * var(--u));  width: calc(7 * var(--u)); height: calc(2.8 * var(--u)); animation: tt-bob 3.6s ease-in-out infinite -1.4s; }
.tt__wing { position: absolute; top: 0; width: 50%; height: 100%; will-change: transform; animation: 1.8s ease-in-out infinite; }
.tt__wing.l { left: 0; transform-origin: 100% 75%; animation-name: tt-wingL; }
.tt__wing.r { left: 50%; transform-origin: 0 75%; animation-name: tt-wingR; }
.tt__bird.b2 .tt__wing { animation-duration: 2.1s; animation-delay: -.7s; }
/* ровные непрерывные взмахи */
@keyframes tt-wingL { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-24deg); } }
@keyframes tt-wingR { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(24deg); } }
/* лёгкое покачивание в полёте */
@keyframes tt-bob { 50% { transform: translateY(calc(-.8 * var(--u))); } }

/* трава */
.tt__hills--night { opacity: 0; transition: opacity var(--t) ease; }

/* кружок: солнце / луна */
.tt__knob {
  top: calc(4 * var(--u)); left: calc(4 * var(--u)); z-index: 4;
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  transition: transform var(--t) var(--ease);
}
.tt__sun, .tt__moon { inset: 0; border-radius: 50%; transition: opacity var(--t) ease; }
.tt__sun {
  background: radial-gradient(circle at 35% 32%, #FFF3B0 0%, #FFD448 45%, #FFAE1F 100%);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255, 222, 110, .35), 0 0 calc(8 * var(--u)) var(--u) rgba(255, 196, 50, .5), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(150, 90, 0, .3);
}
.tt__moon {
  opacity: 0;
  background: radial-gradient(circle at 35% 32%, #FAFBFF 0%, #DCE1EC 55%, #B9C1D2 100%);
  box-shadow: 0 0 calc(10 * var(--u)) var(--u) rgba(200, 215, 255, .3), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .35);
}
.tt__moon i { position: absolute; border-radius: 50%; background: #AEB7CA; box-shadow: inset var(--u) var(--u) var(--u) rgba(0, 0, 0, .12); }
.tt__moon i:nth-child(1) { width: calc(8 * var(--u));   height: calc(8 * var(--u));   left: calc(7 * var(--u));  top: calc(8 * var(--u)); }
.tt__moon i:nth-child(2) { width: calc(5 * var(--u));   height: calc(5 * var(--u));   left: calc(17 * var(--u)); top: calc(17 * var(--u)); }
.tt__moon i:nth-child(3) { width: calc(3.5 * var(--u)); height: calc(3.5 * var(--u)); left: calc(18 * var(--u)); top: calc(7 * var(--u)); }

/* ночь */
[data-theme="dark"] .tt__knob { transform: translateX(calc(50 * var(--u))) rotate(360deg); }
[data-theme="dark"] .tt__sun { opacity: 0; }
[data-theme="dark"] .tt__moon { opacity: 1; }
[data-theme="dark"] .tt__night { opacity: 1; }
[data-theme="dark"] .tt__hills--night { opacity: 1; }
[data-theme="dark"] .tt__clouds { opacity: 0; transform: translateX(calc(18 * var(--u))); }
[data-theme="dark"] .tt__birds { opacity: 0; transform: translate(calc(14 * var(--u)), calc(-10 * var(--u))); }
[data-theme="dark"] .tt__bird, [data-theme="dark"] .tt__wing { animation-play-state: paused; }
[data-theme="dark"] .tt__tw { opacity: 1; transform: none; }
[data-theme="dark"] .tt__tw.w1 { transition-delay: .30s; }
[data-theme="dark"] .tt__tw.w2 { transition-delay: .38s; }
[data-theme="dark"] .tt__tw.w3 { transition-delay: .44s; }
[data-theme="dark"] .tt__tw.w4 { transition-delay: .50s; }
[data-theme="dark"] .tt__tw.w5 { transition-delay: .34s; }
[data-theme="dark"] .tt__tw.w6 { transition-delay: .54s; }
[data-theme="dark"] .tt__tw.w7 { transition-delay: .40s; }
[data-theme="dark"] .tt__tw.w8 { transition-delay: .47s; }
/* все звёзды мерцают, каждая в своём ритме, но не гаснут полностью */
.tt__tw svg { will-change: opacity, transform; overflow: visible; animation: tt-twinkle ease-in-out infinite paused; }
[data-theme="dark"] .tt__tw svg { animation-play-state: running; }
.tt__tw.w1 svg { animation-duration: 2.4s; animation-delay: -.3s; }
.tt__tw.w2 svg { animation-duration: 1.9s; animation-delay: -1.2s; }
.tt__tw.w3 svg { animation-duration: 2.7s; animation-delay: -.8s; }
.tt__tw.w4 svg { animation-duration: 1.6s; animation-delay: -.5s; }
.tt__tw.w5 svg { animation-duration: 2.2s; animation-delay: -1.6s; }
.tt__tw.w6 svg { animation-duration: 3s;   animation-delay: -2.1s; }
.tt__tw.w7 svg { animation-duration: 1.8s; animation-delay: -1s; }
.tt__tw.w8 svg { animation-duration: 2.5s; animation-delay: -.2s; }
@keyframes tt-twinkle { 50% { opacity: .35; transform: scale(.65); } }

/* без анимаций при первой загрузке страницы */
.tt-no-anim, .tt-no-anim * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .tt { --t: .01s; }
  .tt__bird, .tt__wing, .tt__tw svg { animation: none !important; }
}


/* на время смены темы выключаем CSS-переходы страницы (кроме ползунка), чтобы перекраска шла одним кадром */
.tt-switching *:not(.tt):not(.tt *), .tt-switching *:not(.tt):not(.tt *)::before, .tt-switching *:not(.tt):not(.tt *)::after { transition: none !important; }