.site-identity {
  view-transition-class: site-identity;
}

.site-current-hits {
  view-transition-class: site-current-hits;
}

.site-lifetime-hits {
  view-transition-class: site-lifetime-hits;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 280ms cubic-bezier(0.4, 0, 1, 1) both vt-root-out;
  }

  ::view-transition-new(root) {
    animation: 420ms cubic-bezier(0.22, 1, 0.36, 1) both vt-root-in;
  }

  ::view-transition-group(*) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-group(root) {
    z-index: 0;
  }

  ::view-transition-group(*.site-identity) {
    z-index: 1;
  }

  ::view-transition-old(*.site-identity),
  ::view-transition-new(*.site-identity) {
    height: 100%;
    overflow: clip;
    object-fit: none;
    object-position: left top;
  }

  ::view-transition-group(*.site-current-hits) {
    z-index: 1;
  }

  ::view-transition-old(*.site-current-hits),
  ::view-transition-new(*.site-current-hits) {
    height: 100%;
    overflow: clip;
    object-fit: none;
    object-position: left top;
  }

  ::view-transition-group(*.site-lifetime-hits) {
    z-index: 1;
  }

  ::view-transition-old(*.site-lifetime-hits),
  ::view-transition-new(*.site-lifetime-hits) {
    height: 100%;
    overflow: clip;
    object-fit: none;
    object-position: left top;
  }

  ::view-transition-group(app-nav) {
    z-index: 2;
  }
}

@keyframes vt-root-out {
  to { opacity: 0; }
}

@keyframes vt-root-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

#site_search_results .site-identity {
  view-transition-name: none !important;
}

#site_search_results .site-current-hits {
  view-transition-name: none !important;
}

#site_search_results .site-lifetime-hits {
  view-transition-name: none !important;
}

html {
  color-scheme: light dark;
}

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* CRT mode */
html[data-crt] {
  --crt-ink: 0 0 0;
  --crt-scanline: 0.22;
  --crt-vignette: 0.55;
  --crt-grille: 0.05;
  --crt-beam: rgb(255 255 255 / 0.035);
  --crt-bloom: 0 0 0.35em currentColor;
  --crt-invert: 0;
}

html.light[data-crt="color"] {
  --crt-scanline: 0.07;
  --crt-vignette: 0.22;
  --crt-grille: 0.03;
  --crt-beam: rgb(0 0 0 / 0.025);
  --crt-bloom: 0 0 transparent;
}

@media (prefers-color-scheme: light) {
  html:not(.dark)[data-crt="color"] {
    --crt-scanline: 0.07;
    --crt-vignette: 0.22;
    --crt-grille: 0.03;
    --crt-beam: rgb(0 0 0 / 0.025);
    --crt-bloom: 0 0 transparent;
  }
}

html[data-crt]::before,
html[data-crt]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

html[data-crt]::before {
  background:
    radial-gradient(ellipse 120% 110% at center, transparent 55%, rgb(var(--crt-ink) / var(--crt-vignette))),
    repeating-linear-gradient(to bottom, rgb(var(--crt-ink) / var(--crt-scanline)) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to right, rgb(255 0 60 / var(--crt-grille)) 0 1px, rgb(0 255 120 / var(--crt-grille)) 1px 2px, rgb(0 120 255 / var(--crt-grille)) 2px 3px);
  border-radius: 1.25rem;
  box-shadow:
    0 0 0 2rem rgb(var(--crt-ink) / var(--crt-vignette)),
    inset 0 0 4rem rgb(var(--crt-ink) / var(--crt-vignette));
  animation: crt-flicker 5s steps(1) infinite;
}

html[data-crt]::after {
  bottom: auto;
  height: 25vh;
  background: linear-gradient(to bottom, transparent, var(--crt-beam) 70%, transparent);
  animation: crt-roll 9s linear infinite;
}

html[data-crt] body {
  text-shadow:
    0.5px 0 rgb(255 0 80 / 0.3),
    -0.5px 0 rgb(0 200 255 / 0.3),
    var(--crt-bloom);
}

html[data-crt="green"] {
  filter: invert(var(--crt-invert)) grayscale(1) sepia(1) hue-rotate(75deg) saturate(3) brightness(1.1);
}

html[data-crt="amber"] {
  filter: invert(var(--crt-invert)) grayscale(1) sepia(1) hue-rotate(-12deg) saturate(3.5) brightness(1.05);
}

html.light[data-crt="green"],
html.light[data-crt="amber"] {
  --crt-ink: 255 255 255;
  --crt-beam: rgb(0 0 0 / 0.035);
  --crt-invert: 1;
}

@media (prefers-color-scheme: light) {
  html:not(.dark)[data-crt="green"],
  html:not(.dark)[data-crt="amber"] {
    --crt-ink: 255 255 255;
    --crt-beam: rgb(0 0 0 / 0.035);
    --crt-invert: 1;
  }
}

html.crt-powering {
  background: #000;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 0.9; }
  42% { opacity: 1; }
  73% { opacity: 0.94; }
  74% { opacity: 1; }
  88% { opacity: 0.92; }
  89% { opacity: 1; }
}

@keyframes crt-roll {
  from { transform: translateY(-25vh); }
  to { transform: translateY(100vh); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-crt]::before {
    animation: none;
  }

  html[data-crt]::after {
    display: none;
  }
}