/* Flowing dark gradient background */
.fixed-bg-flowing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  opacity: 50%;
  background: linear-gradient(-60deg,
      var(--ZFrame-primary-hex),
      #ffffff,
      var(--ZFrame-primary-hex));
  background-size: 150% 150%;
  animation: gradientFlow 25s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.corner-shape {
  position: fixed;
  width: 400px;
  height: 400px;
  z-index: -2;
  fill: #ffffff;
}

.has-background-see-through {
  background-color: #ffffff73;
}

@media (prefers-color-scheme: dark) {
  .fixed-bg-flowing {
    background: linear-gradient(-60deg,
        var(--ZFrame-primary-hex),
        #000000,
        var(--ZFrame-primary-hex));
  }

  .corner-shape {
    fill: #000000;
  }

  .has-background-see-through {
    background-color: #00000073;
  }
}

[data-theme=dark] .fixed-bg-flowing,
.theme-dark .fixed-bg-flowing {
  background: linear-gradient(-60deg,
      var(--ZFrame-primary-hex),
      #000000,
      var(--ZFrame-primary-hex));
}

[data-theme=dark] .corner-shape,
.theme-dark .corner-shape {
  fill: #000000;
}

[data-theme=dark] .has-background-see-through,
.theme-dark .has-background-see-through {
  background-color: #00000073;
}

[data-theme=light] .fixed-bg-flowing,
.theme-light .fixed-bg-flowing {
  background: linear-gradient(-60deg,
      var(--ZFrame-primary-hex),
      #ffffff,
      var(--ZFrame-primary-hex));
}

[data-theme=light] .corner-shape,
.theme-light .corner-shape {
  fill: #ffffff;
}

[data-theme=light] .has-background-see-through,
.theme-light .has-background-see-through {
  background-color: #ffffff73;
}

@keyframes gradientFlow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

/* Corner tech polygons */
.upper-left {
  top: 0;
  left: 0;
}

.lower-right {
  bottom: 0;
  right: 0;
}

/* Subtle pulsing for polygons */
.corner-shape polygon {
  animation: polygonPulse 12s ease-in-out infinite alternate;
}

@keyframes polygonPulse {
  from {
    transform: scale(1);
    fill-opacity: 0.4;
  }

  to {
    transform: scale(1.15);
    fill-opacity: 0.7;
  }
}

/* ========================= Mascot spotlight and section styles ========================= */
.mascot {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: 150px;
  z-index: 10;
}

.mascot-svg {
  width: 100%;
  height: 100%;
}

/* Tail wag */
.tail {
  transform-origin: 150px 150px;
  animation: tailWag 2s ease-in-out infinite;
}

@keyframes tailWag {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Ear twitch */
.ear {
  transform-origin: center bottom;
  animation: earTwitch 6s ease-in-out infinite;
}

@keyframes earTwitch {
  0%, 90% {
    transform: rotate(0deg);
  }

  95% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Eye blink */
.eye {
  animation: blink 5s infinite;
}

@keyframes blink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0.1);
  }
}