@font-face {
  font-family: "Phosphor-Light";
  src:
    url("/font/phosphor/Phosphor-Light.woff2") format("woff2"),
    url("/font/phosphor/Phosphor-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-light {
  font-family: "Phosphor-Light" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-light.ph-keyboard:before { content: "\e2d8"; }
.ph-light.ph-timer:before { content: "\e492"; }
.ph-light.ph-hash:before { content: "\e2a2"; }
.ph-light.ph-gear:before { content: "\e270"; }
.ph-light.ph-caret-down:before { content: "\e136"; }
.ph-light.ph-caret-left:before { content: "\e138"; }
.ph-light.ph-caret-right:before { content: "\e13a"; }
.ph-light.ph-caret-up:before { content: "\e13c"; }
.ph-light.ph-moon:before { content: "\e330"; }
.ph-light.ph-sun:before { content: "\e472"; }
.ph-light.ph-share-network:before { content: "\e408"; }
.ph-light.ph-minus:before { content: "\e32a"; }
.ph-light.ph-plus:before { content: "\e3d4"; }
.ph-light.ph-arrows-out:before { content: "\e0a2"; }
.ph-light.ph-arrows-in:before { content: "\e09a"; }
.ph-light.ph-x:before { content: "\e4f6"; }
.ph-light.ph-x { font-size: 24px; }

#icon-night-mode {
  display: inline-block;
  transform-origin: 50% 50%;
}

@keyframes night-mode-moon-sway {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-22deg); }
  35% { transform: rotate(18deg); }
  55% { transform: rotate(-12deg); }
  75% { transform: rotate(8deg); }
}

@keyframes night-mode-sun-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}

#icon-night-mode.night-mode-animate-moon {
  animation: night-mode-moon-sway 0.65s ease-in-out;
}

#icon-night-mode.night-mode-animate-sun {
  animation: night-mode-sun-spin 1s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #icon-night-mode.night-mode-animate-moon,
  #icon-night-mode.night-mode-animate-sun {
    animation: none;
  }
}

/* Плавный переход цветов при смене темы (класс ставится на время переключения) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}