/* ============================================================
   PersonaStack — shared styles included on every page.
   Page-specific styles remain in each page's <style> block.
   ============================================================ */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a14; }
::-webkit-scrollbar-thumb { background: #1b52f5; border-radius: 3px; }

/* Nav blur on scroll */
.nav-scrolled {
  background: rgba(10, 10, 20, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile slide-in menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* Glass card */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Animated gradient border */
.border-gradient { position: relative; }
.border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(51,116,255,0.4), rgba(139,92,246,0.4), rgba(6,182,212,0.4));
  -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;
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax background layers */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Glow utilities */
.glow-brand { box-shadow: 0 0 40px rgba(51, 116, 255, 0.3); }

/* Dot grid (used on subpages) */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: dotDrift 20s linear infinite;
}
@keyframes dotDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Active nav item highlight */
.nav-active {
  background: rgba(51, 116, 255, 0.15) !important;
  color: white !important;
}

/* Prose content (legal/docs pages) */
.prose h2 { font-size:1.5rem; font-weight:700; margin-top:2.5rem; margin-bottom:1rem; color:white; }
.prose h3 { font-size:1.125rem; font-weight:600; margin-top:1.5rem; margin-bottom:0.75rem; color:white; }
.prose p, .prose li { color:rgb(156,163,175); line-height:1.8; margin-bottom:1rem; }
.prose ul, .prose ol { padding-left:1.5rem; }
.prose ul { list-style-type:disc; }
.prose ol { list-style-type:decimal; }
.prose li { margin-bottom:0.5rem; }

/* ============================================================
   Mobile performance overrides (touch / coarse pointer devices)
   ============================================================ */
@media (pointer: coarse) {
  /* backdrop-filter forces a GPU compositing layer per element —
     very expensive on iOS; replaced with slightly more opaque bg */
  .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.07) !important;
  }

  /* filter:blur() on large elements is the PRIMARY cause of iOS freezes.
     Each blurred element allocates a full offscreen GPU texture and runs
     multi-pass Gaussian blur kernels. 9 such elements = ~10s initial paint
     block on iPhone. Hide scroll-orbs entirely; strip blur from the rest. */
  .scroll-orb {
    display: none !important;
  }
  /* Tailwind blur-[Xpx] utility classes used on hero background orbs */
  [class*="blur-["] {
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* will-change:transform creates persistent GPU layers — remove on mobile
     since parallax animations don't run on touch devices anyway */
  .parallax-layer {
    will-change: auto !important;
    transition: none !important;
  }

  /* cursor-glow is never visible on touch (no mousemove) — skip the layer */
  #cursor-glow {
    display: none !important;
  }

  /* Stop non-essential decorative CSS animations */
  .geo-shape,
  .ai-team-line,
  .ai-team-node,
  .divider-line {
    animation: none !important;
  }

  /* will-change forces persistent GPU layers even with animation:none — remove */
  .geo-shape {
    will-change: auto !important;
  }

  /* drop-shadow filter on ai-team-line creates a compositing layer — remove */
  .ai-team-line {
    filter: none !important;
  }

  /* dot-grid drift is decorative — skip on mobile */
  .dot-grid {
    animation: none !important;
  }

  /* On touch devices, immediately reveal elements without waiting for
     IntersectionObserver — iOS Safari has reliability issues with it,
     and Google Fonts (now async) previously blocked script setup. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-stagger,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Eliminate iOS 300ms tap delay on menu links */
  #mobile-menu a {
    touch-action: manipulation;
  }

  /* Tap confirmation flash */
  #mobile-menu a:active {
    background-color: rgba(51, 116, 255, 0.25);
    border-radius: 8px;
  }
}

@keyframes menu-tap-flash {
  0%   { background-color: rgba(51, 116, 255, 0.35); }
  100% { background-color: transparent; }
}
#mobile-menu a.menu-tapped {
  border-radius: 8px;
  animation: menu-tap-flash 0.5s ease-out forwards;
}