/* Global Styles - Applied Site-Wide */

/* Disable overscroll bounce effect on all pages */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

/* Global background color for iPhone Safari status bar integration */
html {
  background-color: #0a0a0f;
}

/* Prevent pull-to-refresh on mobile */
body {
  background-color: #0a0a0f;
  overflow-x: hidden;
  position: relative;
}

/* Additional fix for iOS Safari */
html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: auto;
}

/* Safe area insets for iPhone notch and status bar */
header,
nav,
.header,
.navbar,
.top-section {
  padding-top: env(safe-area-inset-top);
}

/* ===== UPLY UNIFIED BACKGROUND SYSTEM ===== */
/* Centralized background for consistent visual identity across all pages */
/* Pages can customize via CSS custom properties for 10-20% variation */

/* CSS Custom Properties for per-page customization */
:root {
  /* Base gradient colors (brand colors) */
  --uply-primary-light: rgba(77, 75, 255, 0.12);
  --uply-primary-medium: rgba(77, 75, 255, 0.3);
  --uply-primary-dark: rgba(34, 32, 175, 0.4);
  --uply-primary-subtle: rgba(34, 32, 175, 0.15);
  
  /* Layer 1: Base gradient intensities (adjustable per page) */
  --uply-gradient-opacity-1: 0.12;
  --uply-gradient-opacity-2: 0.12;
  --uply-gradient-opacity-3: 0.15;
  --uply-gradient-opacity-4: 0.2;
  --uply-gradient-opacity-5: 0.1;
  
  /* Layer 2: Orb positions and sizes (adjustable per page) */
  --uply-orb1-top: 25%;
  --uply-orb1-left: 25%;
  --uply-orb1-size: 384px;
  --uply-orb1-opacity: 0.2;
  --uply-orb1-duration: 20s;
  
  --uply-orb2-top: 66.67%;
  --uply-orb2-right: 25%;
  --uply-orb2-size: 384px;
  --uply-orb2-opacity: 0.2;
  --uply-orb2-duration: 25s;
  
  --uply-orb3-bottom: 25%;
  --uply-orb3-left: 33.33%;
  --uply-orb3-size: 320px;
  --uply-orb3-opacity: 0.15;
  --uply-orb3-duration: 30s;
  
  /* Layer 3: Particle count and animation */
  --uply-particle-opacity: 0.3;
  --uply-particle-duration: 25s;
}

/* Apply background system to body when .uply-bg class is present */
body.uply-bg {
  background: #0a0a0f;
  position: relative;
}

/* Layer 1: Animated Base Gradient (z-index: -1) */
body.uply-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at -10% 50%, 
      rgba(77, 75, 255, var(--uply-gradient-opacity-1)) 0%, transparent 40%),
    radial-gradient(ellipse at 110% 50%, 
      rgba(77, 75, 255, var(--uply-gradient-opacity-2)) 0%, transparent 40%),
    radial-gradient(circle at 20% 50%, 
      rgba(34, 32, 175, var(--uply-gradient-opacity-3)) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, 
      rgba(34, 32, 175, var(--uply-gradient-opacity-4)) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, 
      rgba(34, 32, 175, var(--uply-gradient-opacity-5)) 0%, transparent 50%);
  z-index: -1;
  animation: uplyGradientShift 15s ease infinite;
  pointer-events: none;
}

@keyframes uplyGradientShift {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Layer 2: Floating Orbs Container (z-index: 0) */
.uply-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.uply-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  -webkit-filter: blur(48px);
}

.uply-orb:nth-child(1) {
  top: var(--uply-orb1-top);
  left: var(--uply-orb1-left);
  width: var(--uply-orb1-size);
  height: var(--uply-orb1-size);
  opacity: var(--uply-orb1-opacity);
  background: radial-gradient(circle, rgba(34, 32, 175, 0.4) 0%, transparent 70%);
  animation: uplyFloatOrb var(--uply-orb1-duration) ease-in-out infinite;
}

.uply-orb:nth-child(2) {
  top: var(--uply-orb2-top);
  right: var(--uply-orb2-right);
  width: var(--uply-orb2-size);
  height: var(--uply-orb2-size);
  opacity: var(--uply-orb2-opacity);
  background: radial-gradient(circle, rgba(77, 75, 255, 0.3) 0%, transparent 70%);
  animation: uplyFloatOrb var(--uply-orb2-duration) ease-in-out infinite reverse;
}

.uply-orb:nth-child(3) {
  bottom: var(--uply-orb3-bottom);
  left: var(--uply-orb3-left);
  width: var(--uply-orb3-size);
  height: var(--uply-orb3-size);
  opacity: var(--uply-orb3-opacity);
  background: radial-gradient(circle, rgba(34, 32, 175, 0.3) 0%, transparent 70%);
  animation: uplyFloatOrb var(--uply-orb3-duration) ease-in-out infinite;
}

@keyframes uplyFloatOrb {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(50px, -50px); }
  66% { transform: translate(-30px, 30px); }
}

/* Layer 3: Floating Particles Container (z-index: 1) */
.uply-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.uply-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #2220af, #4d4bff);
  border-radius: 50%;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  animation: uplyFloatParticle var(--uply-particle-duration) infinite ease-in-out;
  box-shadow: 0 0 20px rgba(34, 32, 175, 0.5);
}

@keyframes uplyFloatParticle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
  25% { transform: translate(100px, -100px) rotate(90deg); opacity: 0.6; }
  50% { transform: translate(200px, -50px) rotate(180deg); opacity: 0.3; }
  75% { transform: translate(100px, 50px) rotate(270deg); opacity: 0.6; }
}

/* Particle positioning - 6 particles with staggered delays */
.uply-particle:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.uply-particle:nth-child(2) { top: 20%; right: 15%; animation-delay: 3s; }
.uply-particle:nth-child(3) { top: 60%; left: 20%; animation-delay: 6s; }
.uply-particle:nth-child(4) { bottom: 20%; right: 25%; animation-delay: 9s; }
.uply-particle:nth-child(5) { top: 40%; right: 40%; animation-delay: 12s; }
.uply-particle:nth-child(6) { bottom: 30%; left: 35%; animation-delay: 15s; }

/* Ensure content appears above background layers (but preserve header fixed positioning) */
body.uply-bg > *:not(.uply-orbs):not(.uply-particles):not(header):not(nav):not(.modal) {
  position: relative;
  z-index: 2;
}

/* Ensure header and top nav stay fixed at top */
header,
body > nav.fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

header {
  z-index: 100;
}

body > nav.fixed {
  z-index: 1000;
}

/* ===== SHARED SCROLL HINT ARROW ===== */
/* Unified arrow component for pixel-perfect consistency across all pages */

/* CSS Custom Properties for arrow positioning */
:root {
  --arrow-offset-y: 2.5rem;  /* 40px from viewport bottom */
  --arrow-offset-x: 50%;     /* Centered horizontally */
  --arrow-size: 1.5rem;      /* 24px (w-6 h-6) */
  --arrow-z-index: 50;       /* Above particles (1), below header (100) */
  --arrow-animation-duration: 1s;
}

/* Bounce animation keyframes (Tailwind-compatible) */
@keyframes scrollHintBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateX(-50%) translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Unified scroll-hint arrow component - viewport-relative positioning */
.scroll-hint-arrow {
  position: fixed;
  bottom: var(--arrow-offset-y);
  left: var(--arrow-offset-x);
  z-index: var(--arrow-z-index);
  pointer-events: none;
  animation: scrollHintBounce var(--arrow-animation-duration) infinite;
  will-change: transform;
}

/* Support reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow {
    animation: none;
  }
}

.scroll-hint-arrow svg {
  width: var(--arrow-size);
  height: var(--arrow-size);
  color: rgb(203 213 225);  /* text-neutral-300 */
}