/* Global typography and component resets */
@layer base {
  :root {
    scroll-behavior: smooth;
  }

  body {
    font-feature-settings: 'cv01', 'ss03';
  }

  :focus-visible {
    outline: 2px solid #10AFC1;
    outline-offset: 2px;
  }
}

/* ═══ PREMIUM VISUAL EFFECTS (Phase B) ═══ */

/* 1. Grain/Noise Texture Overlay */
.fx-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* 2. Shimmer Animation for CTA Buttons */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.fx-shimmer {
  position: relative;
  overflow: hidden;
}

.fx-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* 3. Border Gradient Glow for Featured Cards */
.fx-glow-border {
  position: relative;
  background: #191a1b;
  border-radius: 12px;
  overflow: hidden;
}

.fx-glow-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from 180deg,
    transparent 0%,
    #10AFC1 25%,
    transparent 50%,
    #10AFC1 75%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.fx-glow-border:hover::before {
  opacity: 0.6;
}

/* 4. Layered Box-Shadows for Depth */
.fx-depth {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.10),
    0 4px 4px rgba(0,0,0,0.08),
    0 8px 8px rgba(0,0,0,0.06);
}

.fx-depth-hover {
  transition: box-shadow 0.3s ease;
}

.fx-depth-hover:hover {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.14),
    0 2px 4px rgba(0,0,0,0.12),
    0 4px 8px rgba(0,0,0,0.10),
    0 8px 16px rgba(0,0,0,0.08),
    0 16px 32px rgba(0,0,0,0.06);
}

/* 5. Scroll-Triggered Reveal */
.fx-reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fx-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.fx-reveal-delay-1 { transition-delay: 0.1s; }
.fx-reveal-delay-2 { transition-delay: 0.2s; }
.fx-reveal-delay-3 { transition-delay: 0.3s; }

/* 6. Mouse-Follow Glow */
.fx-mouse-glow {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: relative;
  overflow: hidden;
}

.fx-mouse-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    rgba(16,175,193,0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

.fx-mouse-glow:hover::after {
  opacity: 1;
}

/* 7. Radial Gradient Spotlight */
.fx-spotlight {
  position: relative;
}

.fx-spotlight::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(16,175,193,0.06) 0%,
    rgba(16,175,193,0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* 8. Glassmorphism Panel */
.fx-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* 9. Premium Text Gradient */
.fx-text-gradient {
  background: linear-gradient(135deg, #fff 0%, #10AFC1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 10. Animated Mesh Background */
.fx-mesh-bg {
  background-color: #08090a;
  background-image: 
    radial-gradient(at 0% 0%, rgba(16, 175, 193, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(245, 179, 53, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(16, 175, 193, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(16, 175, 193, 0.05) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Hero A/B test states */
.hero-a,
.hero-b {
  display: none;
}

.hero-a.active,
.hero-b.active {
  display: block;
}

/* Mobile menu states — index.njk uses #mobileMenu */
#mobileMenu {
  display: none;
}

#mobileMenu.open {
  display: block;
}

/* Mobile menu states — base.njk (nav.njk) uses #mobileNavMenu */
#mobileNavMenu {
  display: none;
}

#mobileNavMenu.open {
  display: block;
}

/* Accessibility: disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}