/* Shared ambient background: edge glow, star particles, floating icons */
html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 52% 115% at -8% 42%, rgba(56, 202, 221, 0.24) 0%, transparent 55%),
    radial-gradient(ellipse 50% 110% at 108% 58%, rgba(100, 175, 255, 0.2) 0%, transparent 54%),
    radial-gradient(ellipse 38% 75% at 0% 78%, rgba(40, 110, 220, 0.12) 0%, transparent 48%),
    radial-gradient(ellipse 38% 75% at 100% 22%, rgba(80, 160, 255, 0.14) 0%, transparent 48%);
}

.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.bg-particles .particle {
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 50%);
  width: var(--size, 2px);
  height: var(--size, 2px);
  margin-left: calc(var(--size, 2px) * -0.5);
  margin-top: calc(var(--size, 2px) * -0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(120, 210, 255, 0.45) 55%, rgba(56, 202, 221, 0.15));
  box-shadow: 0 0 6px rgba(56, 202, 221, 0.55), 0 0 14px rgba(100, 180, 255, 0.25);
  opacity: var(--op, 0.45);
  animation: particleDrift linear infinite;
  will-change: transform, opacity;
}

@keyframes particleDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: calc(var(--op, 0.45) * 0.35);
  }
  20% { opacity: var(--op, 0.45); }
  50% {
    transform: translate3d(var(--dx, 12px), var(--dy, -28px), 0) scale(1.05);
    opacity: calc(var(--op, 0.45) * 1.1);
  }
  80% { opacity: calc(var(--op, 0.45) * 0.75); }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: calc(var(--op, 0.45) * 0.35);
  }
}

.float-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.float-deco__item {
  position: absolute;
  will-change: transform;
}

.float-deco__bob {
  animation: floatBob 7s ease-in-out infinite;
}

.float-deco__item:nth-child(2) .float-deco__bob { animation-duration: 8.5s; animation-delay: -1s; }
.float-deco__item:nth-child(3) .float-deco__bob { animation-duration: 6.2s; animation-delay: -2.3s; }
.float-deco__item:nth-child(4) .float-deco__bob { animation-duration: 9s; animation-delay: -0.5s; }
.float-deco__item:nth-child(5) .float-deco__bob { animation-duration: 7.4s; animation-delay: -3.1s; }
.float-deco__item:nth-child(6) .float-deco__bob { animation-duration: 8.1s; animation-delay: -1.8s; }

.float-deco__img {
  display: block;
  width: clamp(72px, 9vw, 128px);
  max-width: 100%;
  height: auto;
  opacity: 0.88;
  filter: blur(0.35px) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 28px rgba(56, 202, 221, 0.38)) drop-shadow(0 0 52px rgba(90, 160, 255, 0.22));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.float-deco__item:nth-child(1) .float-deco__img { animation-name: decoTilt1; animation-duration: 14s; }
.float-deco__item:nth-child(2) .float-deco__img { animation-name: decoTilt2; animation-duration: 21s; }
.float-deco__item:nth-child(3) .float-deco__img { animation-name: decoTilt3; animation-duration: 11s; }
.float-deco__item:nth-child(4) .float-deco__img { animation-name: decoTilt4; animation-duration: 26s; }
.float-deco__item:nth-child(5) .float-deco__img { animation-name: decoTilt5; animation-duration: 9.5s; }
.float-deco__item:nth-child(6) .float-deco__img {
  animation-name: decoTilt6;
  animation-duration: 17s;
  animation-direction: alternate-reverse;
}

@keyframes decoTilt1 {
  from { transform: rotate(-9deg); }
  to { transform: rotate(10deg); }
}
@keyframes decoTilt2 {
  from { transform: rotate(-4deg); }
  to { transform: rotate(7deg); }
}
@keyframes decoTilt3 {
  from { transform: rotate(-13deg); }
  to { transform: rotate(6deg); }
}
@keyframes decoTilt4 {
  from { transform: rotate(-6deg); }
  to { transform: rotate(5deg); }
}
@keyframes decoTilt5 {
  from { transform: rotate(-8deg); }
  to { transform: rotate(12deg); }
}
@keyframes decoTilt6 {
  from { transform: rotate(-11deg); }
  to { transform: rotate(5deg); }
}

@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 768px) {
  .float-deco__img {
    width: clamp(44px, 11vw, 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-particles .particle {
    animation: none !important;
    opacity: 0.22 !important;
    box-shadow: none;
  }
  .float-deco__img,
  .float-deco__bob {
    animation: none !important;
  }
}