/* Custom color overrides for Life Armor Labs */
/* Overriding the default green primary color with a blue to match the Aura effect */

:root {
  /* Primary Blue - matching the aura effect */
  --color-primary: #3b82f6;
  --bs-primary-rgb: 59, 130, 246;
  --color-primary-: #3b82f6;
  --bs-primary--rgb: 59, 130, 246;

  /* Primary color shades */
  --color-primary-10: rgb(239, 246, 255);
  --bs-primary-10-rgb: 239, 246, 255;
  --color-primary-25: rgb(235, 243, 254);
  --bs-primary-25-rgb: 235, 243, 254;
  --color-primary-50: rgb(219, 234, 254);
  --bs-primary-50-rgb: 219, 234, 254;
  --color-primary-100: rgb(191, 219, 254);
  --bs-primary-100-rgb: 191, 219, 254;
  --color-primary-200: rgb(147, 197, 253);
  --bs-primary-200-rgb: 147, 197, 253;
  --color-primary-300: rgb(96, 165, 250);
  --bs-primary-300-rgb: 96, 165, 250;
  --color-primary-400: rgb(59, 130, 246);
  --bs-primary-400-rgb: 59, 130, 246;
  --color-primary-500: #3b82f6;
  --bs-primary-500-rgb: 59, 130, 246;
  --color-primary-600: rgb(37, 99, 235);
  --bs-primary-600-rgb: 37, 99, 235;
  --color-primary-700: rgb(29, 78, 216);
  --bs-primary-700-rgb: 29, 78, 216;
  --color-primary-800: rgb(30, 64, 175);
  --bs-primary-800-rgb: 30, 64, 175;
  --color-primary-900: rgb(30, 58, 138);
  --bs-primary-900-rgb: 30, 58, 138;
  --color-primary-950: rgb(23, 37, 84);
  --bs-primary-950-rgb: 23, 37, 84;

  /* Update theme color meta tag */
  --theme-color: #3b82f6;
}

/* Gradient overrides */
.from-primary {
  --uc-gradient-from: #3b82f6;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}

.to-primary-25 {
  --uc-gradient-to: rgb(235, 243, 254);
}

.to-primary-100 {
  --uc-gradient-to: rgb(191, 219, 254);
}

.to-primary-700 {
  --uc-gradient-to: rgb(29, 78, 216);
}

.to-primary-800 {
  --uc-gradient-to: rgb(30, 64, 175);
}

:where(.uc-dark) .dark\:from-primary-700 {
  --uc-gradient-from: rgb(29, 78, 216) !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}

/* Button overrides */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3b82f6;
  --bs-btn-border-color: #3b82f6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(37, 99, 235);
  --bs-btn-hover-border-color: rgb(37, 99, 235);
  --bs-btn-focus-shadow-rgb: 96, 165, 250;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(29, 78, 216);
  --bs-btn-active-border-color: rgb(29, 78, 216);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3b82f6;
  --bs-btn-disabled-border-color: #3b82f6;
}

.btn-outline-primary {
  --bs-btn-color: #3b82f6;
  --bs-btn-border-color: #3b82f6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3b82f6;
  --bs-btn-hover-border-color: #3b82f6;
  --bs-btn-focus-shadow-rgb: 59, 130, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(29, 78, 216);
  --bs-btn-active-border-color: rgb(29, 78, 216);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #3b82f6;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #3b82f6;
  --bs-gradient: none;
}

.btn-alt-primary {
  background: #fff !important;
  color: #3b82f6 !important;
}

.btn-alt-primary:focus,
.btn-alt-primary:hover {
  background: #3b82f6 !important;
  color: #fff !important;
}

.btn-ghost-primary {
  background: rgb(219, 234, 254) !important;
  color: #3b82f6 !important;
}

.btn-ghost-primary:focus,
.btn-ghost-primary:hover {
  background: rgb(191, 219, 254) !important;
  color: #3b82f6 !important;
}

/* Secondary color overrides - replacing tan with light blue-gray */
:root {
  --color-secondary: #f0f5fa;
  --bs-secondary-rgb: 240, 245, 250;
  --color-secondary-: #f0f5fa;
  --bs-secondary--rgb: 240, 245, 250;
  --color-secondary-10: rgb(254, 254, 255);
  --bs-secondary-10-rgb: 254, 254, 255;
  --color-secondary-25: rgb(252, 253, 254);
  --bs-secondary-25-rgb: 252, 253, 254;
  --color-secondary-50: rgb(248, 250, 253);
  --bs-secondary-50-rgb: 248, 250, 253;
  --color-secondary-100: rgb(244, 247, 251);
  --bs-secondary-100-rgb: 244, 247, 251;
  --color-secondary-200: rgb(236, 241, 248);
  --bs-secondary-200-rgb: 236, 241, 248;
  --color-secondary-300: rgb(228, 235, 245);
  --bs-secondary-300-rgb: 228, 235, 245;
  --color-secondary-400: rgb(220, 229, 242);
  --bs-secondary-400-rgb: 220, 229, 242;
  --color-secondary-500: #f0f5fa;
  --bs-secondary-500-rgb: 240, 245, 250;
  --color-secondary-600: rgb(192, 196, 200);
  --bs-secondary-600-rgb: 192, 196, 200;
  --color-secondary-700: rgb(144, 147, 150);
  --bs-secondary-700-rgb: 144, 147, 150;
  --color-secondary-800: rgb(96, 98, 100);
  --bs-secondary-800-rgb: 96, 98, 100;
  --color-secondary-900: rgb(48, 49, 50);
  --bs-secondary-900-rgb: 48, 49, 50;
  --color-secondary-950: rgb(24, 24, 25);
  --bs-secondary-950-rgb: 24, 24, 25;
}

.from-secondary {
  --uc-gradient-from: #f0f5fa;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}

.btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: #f0f5fa;
  --bs-btn-border-color: #f0f5fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(220, 229, 242);
  --bs-btn-hover-border-color: rgb(220, 229, 242);
  --bs-btn-focus-shadow-rgb: 236, 241, 248;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(200, 212, 230);
  --bs-btn-active-border-color: rgb(200, 212, 230);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f0f5fa;
  --bs-btn-disabled-border-color: #f0f5fa;
}

/* GDPR Notification Overrides */
/* Ensure the wrapper has high z-index and fixed positioning */
#uc-gdpr-notification.uc-notification,
.uc-gdpr-notification {
  z-index: 10000 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transform: translateY(100%);
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px;
}

#uc-gdpr-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* Base message styling */
#uc-gdpr-notification .uc-notification-message {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  width: 100%;
}

/* Content area */
#uc-gdpr-notification .vstack {
  text-align: center;
}

#uc-gdpr-notification .vstack h2 {
  font-size: 1rem;
  margin-bottom: 4px;
}

#uc-gdpr-notification .vstack p {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Button - full width and touch-friendly on mobile */
#uc-gdpr-notification #uc-accept-gdpr {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  min-height: 44px; /* iOS touch target */
}

/* Close button positioning */
#uc-gdpr-notification .uc-notification-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tablet and up (768px+) */
@media (min-width: 768px) {
  #uc-gdpr-notification.uc-notification,
  .uc-gdpr-notification {
    left: auto;
    right: auto;
    max-width: 500px;
    padding: 16px;
  }

  #uc-gdpr-notification .uc-notification-message {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px;
  }

  #uc-gdpr-notification .vstack {
    text-align: left;
    flex: 1;
  }

  #uc-gdpr-notification .vstack h2 {
    font-size: 1.125rem;
  }

  #uc-gdpr-notification .vstack p {
    font-size: 0.9rem;
  }

  #uc-gdpr-notification #uc-accept-gdpr {
    width: auto;
    padding: 10px 20px;
    white-space: nowrap;
  }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
  #uc-gdpr-notification.uc-notification,
  .uc-gdpr-notification {
    max-width: 550px;
  }

  #uc-gdpr-notification .uc-notification-message {
    padding: 24px;
    gap: 20px;
  }

  #uc-gdpr-notification .vstack h2 {
    font-size: 1.25rem;
  }
}

/* ============================================
   Microscope View Section
   ============================================ */

/* Microscope lens container */
.microscope-lens-container {
  width: 300px;
  height: 300px;
  position: relative;
}

@media (min-width: 768px) {
  .microscope-lens-container {
    width: 400px;
    height: 400px;
  }
}

@media (min-width: 1200px) {
  .microscope-lens-container {
    width: 450px;
    height: 450px;
  }
}

/* Prevent cut-off on shorter screens */
@media (max-height: 850px) {
  .microscope-lens-container {
    width: 350px !important;
    height: 350px !important;
  }
}

@media (max-height: 700px) {
  .microscope-lens-container {
    width: 250px !important;
    height: 250px !important;
  }
}

/* The lens itself */
.microscope-lens {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 8px rgba(59, 130, 246, 0.3),
    0 0 0 12px rgba(59, 130, 246, 0.15),
    0 0 60px rgba(59, 130, 246, 0.4),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
}

/* Glass frame effect */
.microscope-lens-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  pointer-events: none;
  z-index: 10;
}

/* Specimen container */
.microscope-specimen {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  transform-origin: center center;
}

/* Crosshair overlay */
.microscope-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.3;
}

.microscope-crosshair .crosshair-h,
.microscope-crosshair .crosshair-v {
  position: absolute;
  background: rgba(59, 130, 246, 0.5);
}

.microscope-crosshair .crosshair-h {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

.microscope-crosshair .crosshair-v {
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
}

/* Lab scene styling */
.microscope-lab-scene {
  z-index: 0;
}

.microscope-lab-scene::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}

/* ============================================
   Active Navigation Menu Item
   ============================================ */

/* Active menu link styling - subtle glow */
nav a.active,
.nav a.active,
.navbar a.active,
ul.nav-x a.active,
ul.nav-y a.active {
  color: var(--color-primary, #3b82f6) !important;
  text-shadow:
    0 0 10px rgba(59, 130, 246, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3);
}

/* Dark mode active link */
:where(.uc-dark) nav a.active,
:where(.uc-dark) .nav a.active,
:where(.uc-dark) .navbar a.active,
:where(.uc-dark) ul.nav-x a.active,
:where(.uc-dark) ul.nav-y a.active {
  color: var(--color-quaternary, #a5f3fc) !important;
  text-shadow:
    0 0 10px rgba(165, 243, 252, 0.5),
    0 0 20px rgba(165, 243, 252, 0.3);
}

/* ============================================
   Footer Watermark - LIFE ARMOR Effect
   ============================================ */

.footer-watermark {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 150px; /* Increased to show more of letters */
  margin-top: 24px;
  pointer-events: none;
}

.footer-watermark-text {
  display: block;
  font-size: clamp(100px, 17vw, 210px); /* Smaller font size */
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 0.85;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  user-select: none;
  
  /* Gradient: visible at top, fading to transparent */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.02) 70%,
    transparent 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================
   Bioenergetic Aura Effect - Visible but Calm
   ============================================ */

/* Gentle wave animation - slow and visible */
@keyframes energy-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

/* Gentle breathing glow */
@keyframes energy-breathe {
  0%, 100% {
    box-shadow: 
      0 0 15px rgba(59, 130, 246, 0.3),
      0 0 30px rgba(59, 130, 246, 0.15);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(59, 130, 246, 0.4),
      0 0 40px rgba(59, 130, 246, 0.2);
  }
}

/* Slow shimmer effect */
@keyframes energy-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.bio-aura-container {
  position: relative !important;
  overflow: visible !important;
}

/* Visible glowing corona effect */
.bio-aura-container::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    rgba(59, 130, 246, 0.4) 0%,
    rgba(96, 165, 250, 0.3) 50%,
    rgba(59, 130, 246, 0.4) 100%
  );
  background-size: 200% 200%;
  animation: energy-shimmer 6s ease-in-out infinite;
  z-index: -1;
  filter: blur(8px);
}

/* Gentle pulsing glow overlay */
.bio-aura-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  animation: energy-breathe 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

/* Energy wave rings - visible circular rings */
.bio-aura-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  animation: energy-wave 3s ease-out infinite;
  pointer-events: none;
  z-index: 15;
}

.bio-aura-wave:nth-child(2) {
  animation-delay: 1s;
  border-color: rgba(96, 165, 250, 0.4);
}

.bio-aura-wave:nth-child(3) {
  animation-delay: 2s;
  border-color: rgba(147, 197, 253, 0.35);
}

/* Corner energy accents */
.bio-aura-container .bio-aura-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 12;
  pointer-events: none;
}

.bio-aura-container .bio-aura-corner::before,
.bio-aura-container .bio-aura-corner::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, transparent 100%);
}

.bio-aura-container .bio-aura-corner::before {
  width: 100%;
  height: 2px;
}

.bio-aura-container .bio-aura-corner::after {
  width: 2px;
  height: 100%;
}

.bio-aura-corner.top-left { top: 0; left: 0; }
.bio-aura-corner.top-right { top: 0; right: 0; transform: rotate(90deg); }
.bio-aura-corner.bottom-right { bottom: 0; right: 0; transform: rotate(180deg); }
.bio-aura-corner.bottom-left { bottom: 0; left: 0; transform: rotate(270deg); }