/* ═══════════════════════════════════════════════════════
   DNA PAGE TRANSITIONS & GLOBAL ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* ── Page Load DNA Helix Animation ── */
.dna-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #07090d;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.dna-page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dna-helix-loader {
  width: 80px;
  height: 200px;
  position: relative;
}
.dna-helix-loader .strand {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: dnaHelixSpin 2s ease-in-out infinite;
}
.dna-helix-loader .strand-a { background: rgba(0, 200, 255, 0.9); }
.dna-helix-loader .strand-b { background: rgba(160, 80, 255, 0.9); }
.dna-helix-loader .connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.4), rgba(160, 80, 255, 0.4));
  animation: dnaConnectorPulse 2s ease-in-out infinite;
}

@keyframes dnaHelixSpin {
  0%, 100% { transform: translateX(-20px); }
  50% { transform: translateX(20px); }
}
@keyframes dnaConnectorPulse {
  0%, 100% { opacity: 0.3; width: 20px; }
  50% { opacity: 1; width: 50px; }
}

/* ── Page Transition Overlay ── */
.dna-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
}
.dna-transition-overlay.active {
  pointer-events: all;
  opacity: 1;
}
.dna-transition-overlay .dna-strand-left,
.dna-transition-overlay .dna-strand-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #07090d;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.dna-transition-overlay .dna-strand-left {
  left: 0;
  transform: translateX(-100%);
}
.dna-transition-overlay .dna-strand-right {
  right: 0;
  transform: translateX(100%);
}
.dna-transition-overlay.active .dna-strand-left {
  transform: translateX(0);
}
.dna-transition-overlay.active .dna-strand-right {
  transform: translateX(0);
}
.dna-transition-overlay .dna-center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}
.dna-transition-overlay.active .dna-center-icon {
  transform: translate(-50%, -50%) scale(1);
}

/* ── Scroll Reveal Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }

/* ── Floating DNA Particles Background ── */
.dna-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.dna-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: dnaFloat 12s ease-in-out infinite;
}
@keyframes dnaFloat {
  0% { opacity: 0; transform: translateY(100vh) rotate(0deg); }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-10vh) rotate(360deg); }
}

/* ── Glowing Text Effect ── */
.glow-text {
  text-shadow: 0 0 20px rgba(0, 200, 255, 0.3),
               0 0 40px rgba(0, 200, 255, 0.15),
               0 0 80px rgba(0, 200, 255, 0.05);
}

/* ── DNA Double Helix Divider ── */
.dna-divider {
  width: 100%;
  height: 60px;
  position: relative;
  overflow: hidden;
  opacity: 0.5;
}
.dna-divider svg {
  width: 100%;
  height: 100%;
}