/* Futuristic background shape animations */

.page-bg-shapes,
.section-shapes {
  pointer-events: none;
}

.page-bg-shapes {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.section-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  z-index: 0;
}

.shape img {
  max-width: none;
  width: auto;
  height: auto;
  opacity: 0.3;
  filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.3));
}

/* Position helpers */
.l-10 { left: 10%; }
.l-20 { left: 20%; }
.l-50 { left: 50%; }
.l-70 { left: 70%; }
.l-80 { left: 80%; }
.r-10 { right: 10%; }
.r-20 { right: 20%; }
.t-10 { top: 10%; }
.t-20 { top: 20%; }
.t-50 { top: 50%; }
.t-60 { top: 60%; }
.t-80 { top: 80%; }
.t-100 { top: 100%; }
.b-10 { bottom: 10%; }
.b-20 { bottom: 20%; }

.zm-1 { z-index: -1; }

@keyframes shapeAnimationOne {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.3; }
  25%  { transform: translate(30px, 100px) rotate(90deg) scale(1.1); opacity: 0.5; }
  50%  { transform: translate(100px, 100px) rotate(180deg) scale(1); opacity: 0.3; }
  75%  { transform: translate(100px, 30px) rotate(270deg) scale(0.9); opacity: 0.4; }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.3; }
}

@keyframes shapeAnimationTwo {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.25; }
  25%  { transform: translate(-100px, 30px) rotate(270deg) scale(1.05); opacity: 0.4; }
  50%  { transform: translate(-100px, -100px) rotate(180deg) scale(1); opacity: 0.3; }
  75%  { transform: translate(-30px, -100px) rotate(90deg) scale(0.95); opacity: 0.35; }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.25; }
}

@keyframes shapeAnimationThree {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.35; }
  25%  { transform: translate(40px, 120px) rotate(90deg) scale(1.08); opacity: 0.45; }
  50%  { transform: translate(120px, 120px) rotate(180deg) scale(1); opacity: 0.3; }
  75%  { transform: translate(120px, 40px) rotate(270deg) scale(0.92); opacity: 0.4; }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.35; }
}

@keyframes down-up {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50%      { transform: translate(0, 25px); opacity: 0.5; }
}

@keyframes rotated {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(175deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes float-glow {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.3)); }
  50% { transform: translateY(-20px) scale(1.05); filter: drop-shadow(0 0 40px rgba(6, 182, 212, 0.5)); }
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.1); }
  50% { border-color: rgba(6, 182, 212, 0.6); box-shadow: 0 0 40px rgba(6, 182, 212, 0.3); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.shapeAnimationOne {
  animation: shapeAnimationOne 25s infinite ease-in-out;
}

.shapeAnimationTwo {
  animation: shapeAnimationTwo 30s infinite ease-in-out;
}

.shapeAnimationThree {
  animation: shapeAnimationThree 28s infinite ease-in-out;
}

.shape-down-up {
  animation: down-up 6s infinite ease-in-out;
}

.shape-rotated {
  animation: rotated 30s infinite ease-in-out;
}

.shape-float-glow {
  animation: float-glow 8s infinite ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .shapeAnimationOne,
  .shapeAnimationTwo,
  .shapeAnimationThree,
  .shape-down-up,
  .shape-rotated,
  .shape-float-glow {
    animation: none;
  }
}