/* Animated section backgrounds: grid, aurora glows, grain, topographic lines, diagonal stripes, spotlight */
@keyframes grid-pan{to{background-position:64px 64px,64px 64px}}
@keyframes aurora-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(12%,-8%) scale(1.15)}66%{transform:translate(-8%,6%) scale(.92)}}
@keyframes aurora-b{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-14%,10%) scale(.9)}}
@keyframes stripes-move{to{background-position:56px 0}}
@keyframes dots-drift{to{background-position:24px 24px}}
@keyframes topo-drift{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-3%,2%,0) scale(1.12)}}
@keyframes scanline{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}

.bg-layer{position:absolute;inset:0;pointer-events:none}

/* moving line grid, faded at the edges */
.bg-grid{background-image:linear-gradient(to right,rgba(163,230,53,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(163,230,53,.07) 1px,transparent 1px);background-size:64px 64px;animation:grid-pan 6s linear infinite;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%)}
.bg-grid-dark{background-image:linear-gradient(to right,rgba(2,44,34,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(2,44,34,.06) 1px,transparent 1px);background-size:64px 64px;animation:grid-pan 8s linear infinite;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 100%)}

/* drifting glow blobs */
.aurora{position:absolute;border-radius:9999px;filter:blur(90px);opacity:.55;will-change:transform}
.aurora-lime{background:radial-gradient(circle,rgba(163,230,53,.55),transparent 65%);animation:aurora-a 18s ease-in-out infinite}
.aurora-emerald{background:radial-gradient(circle,rgba(6,95,70,.9),transparent 65%);animation:aurora-b 22s ease-in-out infinite}
.aurora-mint{background:radial-gradient(circle,rgba(167,243,208,.35),transparent 65%);animation:aurora-a 26s ease-in-out infinite reverse}

/* film grain */
.bg-grain{opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* topographic contour lines (light sections) */
.bg-topo{inset:-10%;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%23022c22' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-50 120 C80 60 180 180 300 120 S520 40 650 110'/%3E%3Cpath d='M-50 170 C90 110 190 230 310 170 S520 90 650 160'/%3E%3Cpath d='M-50 220 C100 160 200 280 320 220 S530 140 650 210'/%3E%3Cpath d='M-50 330 C60 290 170 400 290 340 S500 260 650 330'/%3E%3Cpath d='M-50 380 C70 340 180 450 300 390 S510 310 650 380'/%3E%3Cpath d='M-50 430 C80 390 190 500 310 440 S520 360 650 430'/%3E%3Cpath d='M-50 480 C90 440 200 550 320 490 S530 410 650 480'/%3E%3Ccircle cx='430' cy='260' r='40'/%3E%3Ccircle cx='430' cy='260' r='70'/%3E%3Ccircle cx='430' cy='260' r='100'/%3E%3C/svg%3E");background-size:600px 600px;animation:topo-drift 30s ease-in-out infinite}

/* diagonal pinstripes (components section) */
.bg-stripes{opacity:.6;background-image:repeating-linear-gradient(135deg,rgba(2,44,34,.035) 0 2px,transparent 2px 28px);animation:stripes-move 5s linear infinite}

/* dotted field (icons section) */
.bg-dots{background-image:radial-gradient(rgba(2,44,34,.14) 1px,transparent 1.2px);background-size:24px 24px;animation:dots-drift 4s linear infinite;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}

/* single horizontal light pass */
.bg-scan::before{content:"";position:absolute;left:0;right:0;height:30%;background:linear-gradient(to bottom,transparent,rgba(163,230,53,.05),transparent);animation:scanline 9s linear infinite}

/* mouse spotlight, position fed by js/interactions.js through --mx/--my */
.spotlight{background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%),rgba(163,230,53,.14),transparent 45%);transition:background .2s}

/* giant outlined type used as texture */
.text-outline{color:transparent;-webkit-text-stroke:1px rgba(250,250,249,.12)}
.text-outline-dark{color:transparent;-webkit-text-stroke:1px rgba(2,44,34,.08)}

/* transparency checkerboard for opacity swatches */
.bg-checker{background-color:#fff;background-image:linear-gradient(45deg,#e7e5e4 25%,transparent 25%),linear-gradient(-45deg,#e7e5e4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7e5e4 75%),linear-gradient(-45deg,transparent 75%,#e7e5e4 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}

/* marquee track */
.marquee{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee-slow{animation-duration:60s}
.marquee-reverse{animation-direction:reverse}
.marquee-hover:hover .marquee{animation-play-state:paused}