/* Moon Toggle by Jhey, MIT. See THIRD_PARTY_NOTICES.md. */
/* Адаптация для кнопки .theme-toggle из index.html. Слои задают приоритет эффектов, @scope ограничивает селекторы. */
@layer demo, glows, transitions, trail;
@scope (.theme-toggle) {
@layer trail {
  /* Glow trail is 7 80, 96 array and offset */
  :scope {
    --offset: calc(var(--step) * 0.5);
  }
  .trail {
    stroke-dasharray: 10 80;
    stroke-dashoffset: 10;
    opacity: 0;
    transition-property: stroke-dashoffset, opacity;
    transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5);
    transition-delay: var(--offset), calc(var(--offset) + (var(--step) * 2.5));
    transition-timing-function: var(--ease),
      linear(
        0 0%,
        0.0039 6.25%,
        0.0156 12.5%,
        0.0352 18.75%,
        0.0625 25%,
        0.0977 31.25%,
        0.1407 37.5%,
        0.1914 43.74%,
        0.2499 49.99%,
        0.3164 56.25%,
        0.3906 62.5%,
        0.5625 75%,
        0.7656 87.5%,
        1 100%
      );
  }
  :scope[aria-pressed='true'] .trail {
    transition: stroke-dashoffset 0s;
    opacity: 1;
    stroke-dashoffset: -70;
  }
  .glow {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1.25s;
    transition-delay: var(--offset);
    transition-timing-function: linear(
      0 0%,
      0.0039 6.25%,
      0.0156 12.5%,
      0.0352 18.75%,
      0.0625 25%,
      0.0977 31.25%,
      0.1407 37.5%,
      0.1914 43.74%,
      0.2499 49.99%,
      0.3164 56.25%,
      0.3906 62.5%,
      0.5625 75%,
      0.7656 87.5%,
      1 100%
    );
  }
  :scope[aria-pressed='true'] .glow {
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--step);
    transition-delay: 0s;
    transition-timing-function: var(--ease);
  }
}

@layer glows {
  .face-plate {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .face-glowdrop {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .face-glowdrop::after,
  .face-glowdrop::before {
    content: '';
    height: 50%;
    aspect-ratio: 1;
    background: #fff;
    filter: blur(6px);
    position: absolute;
    z-index: -1;
    border-radius: 50%;
  }

  .face-glowdrop::before {
    left: 4%;
    width: 56%;
    translate: 0 -25%;
  }

  .face-glowdrop::after {
    bottom: 0;
    right: 12%;
    width: 34%;
    translate: 0 20%;
  }

  .face-glows {
    position: absolute;
    inset: -0.075em;
    opacity: 0;
    border-radius: inherit;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    z-index: 20;
    mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
      conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
  }

  .face-glows div {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    filter: blur(4px);
    border: 0.1em solid white;
  }
}

@layer transitions {
  :scope {
    --step: 0.5s;
    --ease: linear(
      0 0%,
      0.2342 12.49%,
      0.4374 24.99%,
      0.6093 37.49%,
      0.6835 43.74%,
      0.7499 49.99%,
      0.8086 56.25%,
      0.8593 62.5%,
      0.9023 68.75%,
      0.9375 75%,
      0.9648 81.25%,
      0.9844 87.5%,
      0.9961 93.75%,
      1 100%
    );
  }

  .socket {
    transition-property: background-color, box-shadow;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .face {
    transition-property: scale;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .outline {
    transition-property: stroke;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .inner-bg {
    fill: black;
    transition-property: fill;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }

  :scope::before {
    transition-property: scale, opacity;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }

  .face-shadow::after,
  .face-shadow::before {
    transition-property: opacity, translate, filter, scale;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .face-shadow::after {
    scale: 0.5;
  }
  .face-plate {
    transition-property: background-color;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .face-glowdrop {
    scale: 0;
    transition-property: scale;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .socket-shadow,
  .face-glows,
  .face-shine {
    transition-property: opacity;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  :scope:active {
    .socket {
      box-shadow: -0.045em 0.1em 0.2em -0.15em white;
    }
    .face {
      scale: 0.99;
    }
  }
  .glow {
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  :scope[aria-pressed='true'] {
    .face {
      scale: 1.12;
    }
    .outline {
      stroke: hsl(0 0% 30%);
    }
    .inner-bg {
      fill: hsl(0 0% 20%);
    }
    .socket {
      box-shadow: -0.025em 0.08em 0.2em -0.1em white;
    }
    .glow {
      opacity: 0;
    }
    .face-glowdrop {
      scale: 1;
    }
    &::before {
      scale: 2;
      opacity: 0;
    }
    .face-shadow::before {
      translate: -15% 55%;
      filter: blur(1em);
      opacity: 0.35;
    }
    .face-shadow::after {
      filter: blur(0.5em);
      scale: 1;
    }
    .socket-shadow,
    .face-glows,
    .face-shine {
      opacity: 1;
    }
  }
  .face {
    scale: 1;
  }
}

@layer demo {

  :scope {
    --font-size: 64px;
    --bg-light: hsl(235 5% 85%);
    --bg-dark: hsl(220 27% 6%);
    --button-light: hsl(223 4% 73%);
    --button-dark: hsl(220 27% 6%);
  }

  :scope {
    background: #0000;
    font-size: var(--font-size);
    height: 3em;
    padding: 0;
    border-radius: 3em;
    border: 0;
    aspect-ratio: 1.8 / 1;
    position: relative;
    cursor: pointer;
  }
  :scope::after {
    content: '';
  }
  :scope :is(.socket, .face) {
    position: absolute;
    border-radius: 3em;
  }
  :scope::before {
    pointer-events: none;
  }
  /* light mode */
  .socket {
    /* box-shadow: 0 0 0.25rem 0 hsl(0 0% 100% / 0.25); */
    box-shadow: -0.05em 0.1em 0.2em -0.2em white;
    background: light-dark(hsl(0 0% 90%), hsl(0 0% 0%));
    position: relative;
    inset: 0;
  }
  .socket-shadow {
    position: absolute;
    inset: 0 0em;
    opacity: 0;
    border-radius: inherit;
    box-shadow: 0em 0.075em 0.1em 0em white;
  }
  .face {
    inset: 0.15em;
  }



  .face-shadow,
  .face-shadow::after,
  .face-shadow::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .face-shadow::after,
  .face-shadow::before {
    content: '';
  }
  .face-shadow::before {
    background: black;
  }
  .face-shadow::after {
    background: white;
  }

  .face-plate {
    box-shadow: -0.05em 0.1em 0.2em -0.2em white inset;
    background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.05)),
      light-dark(var(--button-light), var(--button-dark));
  }
  .face-shine {
    position: absolute;
    inset: 0;
    opacity: 0;
    border-radius: 3em;
  }
  .face-shine-shadow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    mask: conic-gradient(
      from 0deg,
      #fff 90deg,
      #0000 110deg 200deg,
      #fff 215deg 280deg,
      #0000 315deg
    );
    box-shadow: 0.075em 0 0.025em -0.025em hsl(0 0% 0% / 0.5) inset,
      -0.075em -0.05em 0.025em -0.025em hsl(0 0% 0% / 0.5) inset;
  }

  .face-shine::before {
    content: '';
    position: absolute;
    inset: 0.05em;
    border-radius: 3em;
    box-shadow: 0 -0.05em 0.025em -0.025em hsl(0 0% 50% / 0.5) inset,
      -0.025em 0.05em 0.025em -0.025em hsl(0 0% 100% / 0.5) inset;
  }
  .face-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.25));
    border-radius: 3em;
  }

  .face svg {
    --glow: hsl(182 90% 92%);
    width: 25%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -52% -48%;
    overflow: visible !important;
    /* filter: drop-shadow(0 0 0.15em color-mix(in hsl, var(--glow), #0000)); */
  }

  .face svg path {
    transform-box: fill-box;
    transform-origin: center center;
  }

  .glow {
    z-index: 3;
    filter: drop-shadow(0 0 0.2em var(--glow));
    will-change: opacity;
  }

  .trail-holder {
    z-index: 2;
    filter: blur(10px);
    .trail {
      stroke-width: 4;
    }
  }
  .trail {
    stroke-dashoffset: 0;
  }
  .inner-face {
    fill: hsl(230 5% 80%);
  }
  .glow-path {
    fill: var(--glow);
    stroke: var(--glow);
    opacity: 1;
    stroke-width: 0px;
  }
}


}

.theme-toggle { --font-size: 15px; --button-light: #d6d8dc; --button-dark: #10151e; flex: 0 0 78px; width: 78px; height: 44px; isolation: isolate; }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.theme-toggle:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle *, .theme-toggle *::before, .theme-toggle *::after { transition: none !important; animation: none !important; } }

/* Compact header adaptation: keep shadows inside the socket, not below the header. */
.theme-toggle .face-shadow::before {
  translate: 0 0;
  filter: none;
  opacity: 0;
}
.theme-toggle .trail-holder { filter: blur(1.5px); }
.theme-toggle .main .trail { stroke-width: 1.5; }
/* The blue trace draws on entry to night mode before the moon lights up. */
.theme-toggle[aria-pressed="false"] .trail {
  transition: none;
  animation: moon-trace 1.6s ease-out both;
}
.theme-toggle[aria-pressed="false"] .glow {
  transition: none;
  animation: moon-light 1.9s ease-out both;
}
@keyframes moon-trace {
  0% { stroke-dashoffset: -70; opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: 10; opacity: 0; }
}
@keyframes moon-light {
  0%, 65% { opacity: 0; }
  100% { opacity: 1; }
}