/* ODA 110 hero: subtle living background, no layout or gameplay changes. */
.site-top .pixel-landscape {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
  background-color: #091e34;
}

.site-top .pixel-landscape::before {
  content: "";
  position: absolute;
  inset: -5% -4%;
  z-index: 0;
  pointer-events: none;
  background: url("./assets/bogazici-approved-hero.svg") center / cover no-repeat;
  transform: translate3d(-1%, 0, 0) scale(1.035);
  transform-origin: center;
  animation: oda-hero-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

.site-top .pixel-landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 11% 36%, rgba(255, 228, 146, .9) 0 1.2px, transparent 3px),
    radial-gradient(circle at 21% 61%, rgba(190, 226, 255, .75) 0 1.2px, transparent 3px),
    radial-gradient(circle at 81% 32%, rgba(255, 232, 171, .84) 0 1.3px, transparent 3px),
    radial-gradient(circle at 91% 69%, rgba(175, 221, 255, .7) 0 1.2px, transparent 3px),
    linear-gradient(105deg, transparent 32%, rgba(255, 236, 181, 0) 40%, rgba(255, 235, 171, .17) 49%, rgba(255, 238, 196, .05) 55%, transparent 64%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 240% 100%;
  background-repeat: no-repeat;
  background-position: center, center, center, center, -160% 0;
  mix-blend-mode: screen;
  opacity: .58;
  animation: oda-hero-twinkle 4.8s ease-in-out infinite alternate, oda-hero-light-sweep 14s ease-in-out infinite;
}

.site-top > .top-inner { z-index: 2; }

@keyframes oda-hero-drift {
  0%   { transform: translate3d(-1.6%, .3%, 0) scale(1.035); }
  50%  { transform: translate3d(.2%, -.7%, 0) scale(1.055); }
  100% { transform: translate3d(1.6%, .3%, 0) scale(1.035); }
}

@keyframes oda-hero-twinkle {
  0%   { opacity: .3; }
  45%  { opacity: .66; }
  100% { opacity: .48; }
}

@keyframes oda-hero-light-sweep {
  0%, 13%  { background-position: center, center, center, center, -160% 0; }
  76%, 100% { background-position: center, center, center, center, 160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-top .pixel-landscape::before,
  .site-top .pixel-landscape::after {
    animation: none !important;
    will-change: auto;
  }
  .site-top .pixel-landscape::before { transform: none; }
  .site-top .pixel-landscape::after { opacity: .3; }
}