/* Simple CSS-based starfield background - COMMENTED OUT FOR LATER USE */
/*
.starfield{background:radial-gradient(1200px 600px at 50% -200px, rgba(0,80,160,.35), transparent 60%), #030616}
.starfield::before, .starfield::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #ffffffaa, transparent 60%),
    radial-gradient(1px 1px at 30% 80%, #a0cfffaa, transparent 60%),
    radial-gradient(1px 1px at 70% 30%, #ffffffcc, transparent 60%),
    radial-gradient(2px 2px at 90% 60%, #a0cfff88, transparent 60%),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent 60%);
  animation: twinkle 6s linear infinite;
}
.starfield::after{animation-duration:9s; opacity:.8}
@keyframes twinkle{0%{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}100%{opacity:.6;transform:translateY(0)}}
*/

/* Background columns using actual HTML elements */
.starfield{
  background-color: #000000;
  position: relative;
  perspective: 1000px;
}

/* Default zoom level */
body {
  zoom: 0.5;
  overflow: hidden;
  /* Alternative method using transform (better browser support) */
  /* transform: scale(1.2);
  transform-origin: 0 0; */
}

/* Base column styles */
.bg-column {
  position: fixed;
  top: 0;
  width: 200px;
  height: 100%;
  background: url('../assets/img/bg_stars.gif') repeat;
  background-size: 200px auto;
  animation: scrollDown 30s ease-in-out infinite, hueRotate 25s ease-in-out infinite; 
  z-index: -1;
  transform-style: preserve-3d;
}

/* Left columns - progressive tilt effect */
.bg-column-left {
  left: calc(50% - 200px);
  transform: translateX(-50%) translateZ(0px) rotateY(20deg);
  transform-origin: right;
  z-index: -5;
}

.bg-column-left-2 {
  left: calc(50% - 400px + 12px);
  transform: translateX(-50%) translateY(0px) translateZ(68.4px) rotateY(35deg);
  transform-origin: right;
  z-index: -4;
}

.bg-column-left-3 {
  left: calc(50% - 600px + 12px);
  transform: translateX(-50%) translateY(35px) translateZ(114.7px) rotateY(45deg);
  transform-origin: right;
  z-index: -3;
}

.bg-column-left-4 {
  left: calc(50% - 800px);
  transform: translateX(-50%) translateY(100px) translateZ(141.4px) rotateY(55deg);
  transform-origin: right;
  z-index: -2;
}

.bg-column-left-5 {
  left: calc(50% - 1000px);
  transform: translateX(-50%) translateY(150px) translateZ(163.8px) rotateY(65deg);
  transform-origin: right;
  z-index: -1;
}

.bg-column-left-6 {
  left: calc(50% - 1200px);
  transform: translateX(-50%) translateY(200px) translateZ(181.7px) rotateY(75deg);
  transform-origin: right;
  z-index: 0;
}

.bg-column-left-7 {
  left: calc(50% - 1400px);
  transform: translateX(-50%) translateY(250px) translateZ(193.2px) rotateY(85deg);
  transform-origin: right;
  z-index: 1;
}

.bg-column-left-8 {
  left: calc(50% - 1600px);
  transform: translateX(-50%) translateY(300px) translateZ(198.0px) rotateY(89deg);
  transform-origin: right;
  z-index: 2;
}

/* Center column */
.bg-column-center {
  left: 50%;
  transform: translateX(-50%);
}

/* Right columns - progressive tilt effect */
.bg-column-right {
  left: calc(50% + 200px);
  transform: translateX(-50%) translateZ(0px) rotateY(-20deg);
  transform-origin: left;
  z-index: -5;
}

.bg-column-right-2 {
  left: calc(50% + 400px - 12px);
  transform: translateX(-50%) translateY(0px) translateZ(68.4px) rotateY(-35deg);
  transform-origin: left;
  z-index: -4;
}

.bg-column-right-3 {
  left: calc(50% + 600px - 12px);
  transform: translateX(-50%) translateY(35px) translateZ(114.7px) rotateY(-45deg);
  transform-origin: left;
  z-index: -3;
}

.bg-column-right-4 {
  left: calc(50% + 800px);
  transform: translateX(-50%) translateY(100px) translateZ(141.4px) rotateY(-55deg);
  transform-origin: left;
  z-index: -2;
}

.bg-column-right-5 {
  left: calc(50% + 1000px);
  transform: translateX(-50%) translateY(150px) translateZ(163.8px) rotateY(-65deg);
  transform-origin: left;
  z-index: -1;
}

.bg-column-right-6 {
  left: calc(50% + 1200px);
  transform: translateX(-50%) translateY(200px) translateZ(181.7px) rotateY(-75deg);
  transform-origin: left;
  z-index: 0;
}

.bg-column-right-7 {
  left: calc(50% + 1400px);
  transform: translateX(-50%) translateY(250px) translateZ(193.2px) rotateY(-85deg);
  transform-origin: left;
  z-index: 1;
}

.bg-column-right-8 {
  left: calc(50% + 1600px);
  transform: translateX(-50%) translateY(300px) translateZ(198.0px) rotateY(-89deg);
  transform-origin: left;
  z-index: 2;
}

/* Overlay layer with opacity effects */
.bg-column-overlay {
  opacity: 0.6;
  animation: scrollDown 20s ease-in-out infinite;
  z-index: 10;
}

/* Left overlay columns */
.bg-column-left-overlay {
  left: calc(50% - 200px);
  transform: translateX(-50%) translateY(-20px) translateZ(10px) rotateY(20deg);
  transform-origin: right;
}

.bg-column-left-2-overlay {
  left: calc(50% - 400px + 12px);
  transform: translateX(-50%) translateY(-20px) translateZ(78.4px) rotateY(35deg);
  transform-origin: right;
}

.bg-column-left-3-overlay {
  left: calc(50% - 600px + 12px);
  transform: translateX(-50%) translateY(15px) translateZ(124.7px) rotateY(45deg);
  transform-origin: right;
}

.bg-column-left-4-overlay {
  left: calc(50% - 800px);
  transform: translateX(-50%) translateY(80px) translateZ(151.4px) rotateY(55deg);
  transform-origin: right;
}

.bg-column-left-5-overlay {
  left: calc(50% - 1000px);
  transform: translateX(-50%) translateY(130px) translateZ(173.8px) rotateY(65deg);
  transform-origin: right;
}

.bg-column-left-6-overlay {
  left: calc(50% - 1200px);
  transform: translateX(-50%) translateY(180px) translateZ(191.7px) rotateY(75deg);
  transform-origin: right;
}

.bg-column-left-7-overlay {
  left: calc(50% - 1400px);
  transform: translateX(-50%) translateY(230px) translateZ(203.2px) rotateY(85deg);
  transform-origin: right;
}

.bg-column-left-8-overlay {
  left: calc(50% - 1600px);
  transform: translateX(-50%) translateY(280px) translateZ(208.0px) rotateY(89deg);
  transform-origin: right;
}

/* Center overlay column */
.bg-column-center-overlay {
  left: 50%;
  transform: translateX(-50%) translateY(-10px) translateZ(5px);
}

/* Right overlay columns */
.bg-column-right-overlay {
  left: calc(50% + 200px);
  transform: translateX(-50%) translateY(-20px) translateZ(10px) rotateY(-20deg);
  transform-origin: left;
}

.bg-column-right-2-overlay {
  left: calc(50% + 400px - 12px);
  transform: translateX(-50%) translateY(-20px) translateZ(78.4px) rotateY(-35deg);
  transform-origin: left;
}

.bg-column-right-3-overlay {
  left: calc(50% + 600px - 12px);
  transform: translateX(-50%) translateY(15px) translateZ(124.7px) rotateY(-45deg);
  transform-origin: left;
}

.bg-column-right-4-overlay {
  left: calc(50% + 800px);
  transform: translateX(-50%) translateY(80px) translateZ(151.4px) rotateY(-55deg);
  transform-origin: left;
}

.bg-column-right-5-overlay {
  left: calc(50% + 1000px);
  transform: translateX(-50%) translateY(130px) translateZ(173.8px) rotateY(-65deg);
  transform-origin: left;
}

.bg-column-right-6-overlay {
  left: calc(50% + 1200px);
  transform: translateX(-50%) translateY(180px) translateZ(191.7px) rotateY(-75deg);
  transform-origin: left;
}

.bg-column-right-7-overlay {
  left: calc(50% + 1400px);
  transform: translateX(-50%) translateY(230px) translateZ(203.2px) rotateY(-85deg);
  transform-origin: left;
}

.bg-column-right-8-overlay {
  left: calc(50% + 1600px);
  transform: translateX(-50%) translateY(280px) translateZ(208.0px) rotateY(-89deg);
  transform-origin: left;
}


@keyframes scrollDown {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 200px;
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes blurEffect {
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    filter: blur(0px);
  }
}

/* .frontColumns{
  mix-blend-mode: difference;
} */