/* Page overlays + enter animations */
.page-overlay-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* GIF / image overlays — screen blend so they show on dark pages */
.cyberpunk-overlay,
.flashing-crosses-overlay,
.flying-stars-overlay,
.glitch-overlay,
.rain-overlay,
.retro-overlay,
.shooting-star-overlay {
  mix-blend-mode: screen;
  background-color: transparent;
}

.cyberpunk-overlay {
  opacity: 0.55;
  background-image: var(--overlay-cyberpunk, url(../overlays/cyberpunk.gif));
}
.flashing-crosses-overlay {
  opacity: 0.65;
  background-image: var(--overlay-flashing-crosses, url(../overlays/flashing-crosses.gif));
  background-size: contain;
  background-repeat: repeat;
  mix-blend-mode: normal;
}
.flying-stars-overlay {
  opacity: 0.55;
  background-image: var(--overlay-flying-stars, url(../overlays/flying-stars.gif));
}
.glitch-overlay {
  opacity: 0.4;
  background-image: var(--overlay-glitch, url(../overlays/glitch.gif));
}
.rain-overlay {
  opacity: 0.55;
  background-image: var(--overlay-rain, url(../overlays/rain.gif));
}
.retro-overlay {
  opacity: 0.4;
  background-image: var(--overlay-retro, url(../overlays/retro.gif));
}
.shooting-star-overlay {
  opacity: 0.45;
  background-image: var(--overlay-shooting-star, url(../overlays/shooting-star.gif));
}

/* Old TV — CRT scanlines + static noise */
.old-tv-overlay {
  opacity: 1;
  background-image: none !important;
  mix-blend-mode: normal;
  overflow: hidden;
}
.old-tv-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--overlay-old-tv, url(../overlays/dots.png));
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.28;
  animation: old-tv-static 0.35s steps(2) infinite;
}
.old-tv-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 2px,
    rgba(0, 0, 0, 0.28) 2px,
    rgba(0, 0, 0, 0.28) 4px
  );
  opacity: 0.75;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45);
}
@keyframes old-tv-static {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(2%, 2%); }
  to { transform: translate(-1%, 0); }
}

.night-time-overlay {
  opacity: 1;
  background-color: rgba(5, 8, 20, 0.55);
  background-image: none;
  mix-blend-mode: normal;
}

.theme-color-overlay {
  opacity: 0.28;
  background-color: var(--theme-color, var(--a, #fff));
  background-image: none;
  mix-blend-mode: soft-light;
}

.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: none !important;
  overflow: hidden;
  mix-blend-mode: soft-light;
}
.noise-overlay::after {
  position: absolute;
  display: block;
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  content: "";
  background: transparent url("../overlays/dots.png") repeat;
  background-size: 128px 128px;
  animation: noise 0.45s steps(3) infinite;
  opacity: 0.55;
}
@keyframes noise {
  0% { transform: translate3d(0, 9rem, 0); }
  10% { transform: translate3d(-1rem, -4rem, 0); }
  20% { transform: translate3d(-8rem, 2rem, 0); }
  30% { transform: translate3d(9rem, -9rem, 0); }
  40% { transform: translate3d(-2rem, 7rem, 0); }
  50% { transform: translate3d(-9rem, -4rem, 0); }
  60% { transform: translate3d(2rem, 6rem, 0); }
  70% { transform: translate3d(7rem, -8rem, 0); }
  80% { transform: translate3d(-9rem, 1rem, 0); }
  90% { transform: translate3d(6rem, -5rem, 0); }
  to { transform: translate3d(-7rem, 0, 0); }
}

.page-enter-animation {
  animation-name: var(--page-enter-animation);
  animation-duration: var(--page-enter-animation-speed);
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes Bounce {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  20% { transform: translateY(-25px); animation-timing-function: ease-in; }
  40% { transform: translateY(15px); animation-timing-function: ease-out; }
  60% { transform: translateY(-10px); animation-timing-function: ease-in; }
  80% { transform: translateY(5px); animation-timing-function: ease-out; }
  to { transform: translateY(0); }
}
@keyframes Wobble {
  0% { transform: none; }
  15% { transform: translateX(-8px) rotate(-3deg); animation-timing-function: ease-in-out; }
  30% { transform: translateX(6px) rotate(2deg); animation-timing-function: ease-in-out; }
  45% { transform: translateX(-4px) rotate(-1.5deg); animation-timing-function: ease-in-out; }
  60% { transform: translateX(2px) rotate(1deg); animation-timing-function: ease-in-out; }
  75% { transform: translateX(-1px) rotate(-.5deg); animation-timing-function: ease-in-out; }
  to { transform: none; }
}
@keyframes Spin {
  0% { transform: rotate(0deg); }
  to { transform: rotate(1turn); }
}
.slide-up { animation: SimpleSlideUp .35s ease; }
@keyframes SimpleSlideUp {
  0% { transform: translateY(75px); }
  to { transform: translateY(0); }
}
@keyframes SlideUp {
  0% { transform: translateY(75px) scale(1.05); }
  60% { transform: translateY(-5px) scale(.95); }
  to { transform: translateY(0) scale(1); }
}
@keyframes SlideDown {
  0% { transform: translateY(-75px) scale(1.05); }
  60% { transform: translateY(5px) scale(.95); }
  to { transform: translateY(0) scale(1); }
}
@keyframes SlideLeft {
  0% { transform: translateX(75px) scale(1.05); }
  60% { transform: translateX(-5px) scale(.95); }
  to { transform: translateX(0) scale(1); }
}
@keyframes SlideRight {
  0% { transform: translateX(-75px) scale(1.05); }
  60% { transform: translateX(5px) scale(.95); }
  to { transform: translateX(0) scale(1); }
}
@keyframes SlideBottomRightToTopLeft {
  0% { transform: translate(75px, 75px) scale(1.05); }
  60% { transform: translate(-5px, -5px) scale(.95); }
  to { transform: translate(0) scale(1); }
}
@keyframes SlideBottomLeftToTopRight {
  0% { transform: translate(-75px, 75px) scale(1.05); }
  60% { transform: translate(5px, -5px) scale(.95); }
  to { transform: translate(0) scale(1); }
}
@keyframes SlideTopLeftToBottomRight {
  0% { transform: translate(-75px, -75px) scale(1.05); }
  60% { transform: translate(5px, 5px) scale(.95); }
  to { transform: translate(0) scale(1); }
}
@keyframes SlideTopRightToBottomLeft {
  0% { transform: translate(75px, -75px) scale(1.05); }
  60% { transform: translate(-5px, 5px) scale(.95); }
  to { transform: translate(0) scale(1); }
}
@keyframes ZoomIn {
  0% { transform: scale(1.5); }
  60% { transform: scale(.95); }
  to { transform: scale(1); }
}
@keyframes ZoomOut {
  0% { transform: scale(.5); }
  60% { transform: scale(1.05); }
  to { transform: scale(1); }
}

@keyframes snowflakes-fall {
  0% { transform: translateY(0); }
  to { transform: translateY(110vh); }
}
@keyframes snowflakes-shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(80px); }
  to { transform: translateX(0); }
}
.snowflakes {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow: hidden;
}
.snowflake {
  pointer-events: none;
  position: fixed;
  z-index: 25;
  user-select: none;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #fff;
  text-shadow: 0 0 10px #fff;
  top: -5%;
  animation-name: snowflakes-shake;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.snowflake .snowflake-inner {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: snowflakes-fall;
  animation-timing-function: linear;
}
.snowflake:nth-of-type(1) { left: 10%; animation-delay: 1s; }
.snowflake:nth-of-type(1) .snowflake-inner { animation-delay: 1s; }
.snowflake:nth-of-type(2) { left: 20%; animation-delay: .5s; }
.snowflake:nth-of-type(2) .snowflake-inner { animation-delay: 6s; }
.snowflake:nth-of-type(3) { left: 30%; animation-delay: 2s; }
.snowflake:nth-of-type(3) .snowflake-inner { animation-delay: 4s; }
.snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s; }
.snowflake:nth-of-type(4) .snowflake-inner { animation-delay: 5s; }
.snowflake:nth-of-type(5) { left: 50%; animation-delay: 3s; }
.snowflake:nth-of-type(5) .snowflake-inner { animation-delay: 7s; }
.snowflake:nth-of-type(6) { left: 60%; animation-delay: 2s; }
.snowflake:nth-of-type(6) .snowflake-inner { animation-delay: 8s; }
.snowflake:nth-of-type(7) { left: 70%; animation-delay: 1s; }
.snowflake:nth-of-type(7) .snowflake-inner { animation-delay: 9s; }
.snowflake:nth-of-type(8) { left: 80%; animation-delay: 0s; }
.snowflake:nth-of-type(8) .snowflake-inner { animation-delay: 3s; }
.snowflake:nth-of-type(9) { left: 90%; animation-delay: 1.5s; }
.snowflake:nth-of-type(9) .snowflake-inner { animation-delay: 2s; }
.snowflake:nth-of-type(10) { left: 25%; animation-delay: 2.5s; }
.snowflake:nth-of-type(10) .snowflake-inner { animation-delay: 4.5s; }
.snowflake:nth-of-type(11) { left: 65%; animation-delay: 3.5s; }
.snowflake:nth-of-type(11) .snowflake-inner { animation-delay: 1.5s; }
.snowflake:nth-of-type(12) { left: 45%; animation-delay: .8s; }
.snowflake:nth-of-type(12) .snowflake-inner { animation-delay: 5.5s; }