/* ============================================
   SHARED PAGE DECORATIONS
   ============================================ */

.page-decorations {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.deco {
  position: absolute;
  color: var(--color-orange);
  opacity: 0.08;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes deco-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes deco-float-reverse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}

@keyframes deco-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes deco-pulse {
  0%, 100% {
    opacity: 0.06;
  }
  50% {
    opacity: 0.12;
  }
}

/* ============================================
   VERIFY PAGE DECORATIONS
   ============================================ */

.verify-page .deco-1 {
  width: 280px;
  top: 12%;
  right: 3%;
  opacity: 0.1;
  animation: deco-float 14s ease-in-out infinite;
}

.verify-page .deco-2 {
  width: 120px;
  bottom: 25%;
  left: 4%;
  opacity: 0.08;
  animation: deco-float-reverse 12s ease-in-out infinite;
}

.verify-page .deco-3 {
  width: 80px;
  top: 60%;
  right: 6%;
  opacity: 0.1;
  animation: deco-pulse 6s ease-in-out infinite;
}

.verify-page .deco-4 {
  width: 70px;
  top: 30%;
  left: 6%;
  opacity: 0.06;
  animation: deco-float 10s ease-in-out infinite 2s;
}

.verify-page .deco-5 {
  width: 60px;
  bottom: 35%;
  right: 12%;
  opacity: 0.05;
  animation: deco-float-reverse 11s ease-in-out infinite 1s;
}

/* ============================================
   LEGAL PAGE DECORATIONS
   ============================================ */

.legal-page .deco-1 {
  width: 200px;
  top: 15%;
  right: 4%;
  opacity: 0.07;
  animation: deco-float 16s ease-in-out infinite;
}

.legal-page .deco-2 {
  width: 180px;
  bottom: 15%;
  left: 2%;
  opacity: 0.06;
  animation: deco-float-reverse 14s ease-in-out infinite;
}

.legal-page .deco-3 {
  width: 100px;
  top: 50%;
  right: 5%;
  opacity: 0.08;
  animation: deco-float 12s ease-in-out infinite 3s;
}

.legal-page .deco-4 {
  width: 80px;
  top: 25%;
  left: 5%;
  opacity: 0.05;
  animation: deco-float-reverse 10s ease-in-out infinite 1s;
}

.legal-page .deco-5 {
  width: 50px;
  bottom: 40%;
  right: 10%;
  opacity: 0.06;
  animation: deco-pulse 8s ease-in-out infinite;
}

/* ============================================
   FAQ PAGE DECORATIONS
   ============================================ */

.faq-page .deco-1 {
  width: 150px;
  top: 12%;
  right: 5%;
  opacity: 0.1;
  animation: deco-float 12s ease-in-out infinite;
}

.faq-page .deco-2 {
  width: 130px;
  bottom: 20%;
  left: 3%;
  opacity: 0.07;
  animation: deco-float-reverse 14s ease-in-out infinite;
}

.faq-page .deco-3 {
  width: 80px;
  top: 55%;
  right: 4%;
  opacity: 0.08;
  animation: deco-pulse 5s ease-in-out infinite;
}

.faq-page .deco-4 {
  width: 90px;
  top: 28%;
  left: 4%;
  opacity: 0.06;
  animation: deco-float 10s ease-in-out infinite 2s;
}

.faq-page .deco-5 {
  width: 45px;
  bottom: 35%;
  right: 8%;
  opacity: 0.07;
  animation: deco-float-reverse 9s ease-in-out infinite 1s;
}

/* ============================================
   SUCCESS PAGE DECORATIONS
   ============================================ */

.success-page .deco-1 {
  width: 200px;
  top: 15%;
  right: 8%;
  opacity: 0.12;
  animation: deco-float 10s ease-in-out infinite;
}

.success-page .deco-2 {
  width: 150px;
  bottom: 20%;
  left: 5%;
  opacity: 0.08;
  animation: deco-float-reverse 12s ease-in-out infinite;
}

.success-page .deco-3 {
  width: 100px;
  top: 50%;
  left: 8%;
  opacity: 0.1;
  animation: deco-pulse 4s ease-in-out infinite;
}

.success-page .deco-4 {
  width: 80px;
  bottom: 40%;
  right: 10%;
  opacity: 0.06;
  animation: deco-float 8s ease-in-out infinite 1s;
}

.success-page .deco-5 {
  width: 60px;
  top: 30%;
  left: 15%;
  opacity: 0.05;
  animation: deco-float-reverse 11s ease-in-out infinite 2s;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
  .deco-1 { transform: scale(0.8); }
  .deco-2 { transform: scale(0.8); }
  .deco-3, .deco-4, .deco-5 { opacity: 0.04; }
}

@media (max-width: 768px) {
  .deco-1 { 
    transform: scale(0.6); 
    opacity: 0.06;
  }
  .deco-2 { 
    transform: scale(0.5); 
    opacity: 0.04;
  }
  .deco-3, .deco-4, .deco-5 { 
    display: none; 
  }
}

@media (max-width: 480px) {
  .deco-1 { 
    transform: scale(0.4); 
    opacity: 0.04;
  }
  .deco-2 { 
    display: none; 
  }
}