/**
 * ORA Shared Glass UI Styles
 * iOS 17-inspired glassmorphism design system
 */

/* CSS Variables for Design System - n8n.io inspired */
:root {
  /* Primary Accent - Unified single color */
  --primary-accent: #6366F1;  /* Refined indigo - n8n style */
  --primary-accent-hover: #4F46E5;
  --primary-accent-light: rgba(99, 102, 241, 0.1);
  --primary-accent-glow: rgba(99, 102, 241, 0.3);
  
  /* Navigation Colors */
  --nav-home: #6366f1;
  --nav-stats: #8b5cf6;
  --nav-features: #ec4899;
  --nav-projects: #06b6d4;
  --nav-timeline: #10b981;
  --nav-faq: #f59e0b;
  --nav-contact: #ef4444;
  
  /* Text Colors - Softer contrasts */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-muted: rgba(255, 255, 255, 0.35);
  
  /* Glass Morphism - More subtle */
  --glass-bg: rgba(255, 255, 255, 0.06);  /* Lighter for floating effect */
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-bg-light: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.12);  /* Thinner borders */
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);  /* Softer shadows */
  --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.35);
  --blur-amount: 20px;  /* Increased blur for softer look */
  --blur-amount-strong: 24px;
  
  /* Gradients - Subtler and lighter */
  --gradient-primary: linear-gradient(135deg, var(--primary-accent), #8B5CF6);
  --gradient-background: linear-gradient(135deg, #0F0F23 0%, #1A1A2E 30%, #16213E 70%, #1A1A2E 100%);
  --gradient-animated: linear-gradient(45deg, 
    rgba(99, 102, 241, 0.15) 0%, 
    rgba(139, 92, 246, 0.15) 25%, 
    rgba(168, 85, 247, 0.15) 50%, 
    rgba(99, 102, 241, 0.15) 75%, 
    rgba(99, 102, 241, 0.15) 100%);
  
  /* Animations - Consistent n8n-style easing */
  --transition-smooth: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* n8n easing */
  --transition-fast: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Spacing - n8n style generous spacing */
  --spacing-section: 6rem;  /* Larger section spacing */
  --spacing-card: 2rem;     /* Card spacing */
  --spacing-element: 1rem;  /* Element spacing */
}

/* Performance Optimization */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Base Body Styling - Lighter typography like n8n */
body {
  font-family: 'Inter', 'SF Pro Display', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;  /* Light weight as default */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--gradient-background);
  background-attachment: fixed; /* Ensure background stays fixed on mobile */
  position: relative;
}

/*
 * Custom Scrollbar
 *
 * Subtle, translucent scrollbars inspired by glassmorphism.  These styles
 * apply globally to all scrollable areas in the application (chat messages,
 * sidebars, input areas, etc.).  On desktop the scrollbar width is narrow
 * with a soft glass accent; on mobile the default system scrollbar is used.
 */
@media (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
  }

  html {
    scrollbar-color: rgba(99, 102, 241, 0.5) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
  }
}

/* Animated Gradient Background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-animated);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  z-index: -2;
  will-change: background-position;
}

@keyframes gradientShift {
  0%, 100% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
}

/* Interactive Cursor Light Effect - Subtle n8n style */
.cursor-light {
  position: fixed;
  width: 200px;  /* Smaller size */
  height: 200px;
  background: radial-gradient(circle, var(--primary-accent-light) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transition: var(--transition-smooth);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
}

/* Only show cursor light on desktop and when reduced motion is not enabled */
@media (min-width: 769px) {
  .cursor-light {
    opacity: 0.6;
  }
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  body {
    background: var(--gradient-background) !important;
    background-attachment: scroll; /* Use scroll instead of fixed on mobile for better performance */
  }
  
  body::before {
    background: var(--gradient-animated) !important;
    background-size: 200% 200% !important; /* Smaller size for mobile performance */
    animation: gradientShift 30s ease infinite !important; /* Slower animation */
  }
  
  /* Ensure minimum height on mobile */
  html, body {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
  }
  
  /* Fix viewport height issues on mobile */
  .min-h-screen {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
  }
}

/* Glass Morphism Base Classes */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  will-change: transform, box-shadow;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-amount-strong));
  -webkit-backdrop-filter: blur(var(--blur-amount-strong));
  border: 1px solid var(--glass-border);
  border-radius: 16px;  /* Slightly smaller radius like n8n */
  box-shadow: 
    var(--glass-shadow),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.08);  /* Subtle inner highlight */
  transition: var(--transition-smooth);
  will-change: transform, box-shadow, background;
}

.glass-card:hover {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  transform: translateY(-2px) translateZ(0);  /* More subtle lift */
  box-shadow: 
    var(--glass-shadow-hover),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}

/* Glass Card Variants */
.glass-card-light {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.glass-card-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border-strong);
}

/* Enhanced Hover Effects */
.card-hover {
  transition: var(--transition-smooth);
  cursor: pointer;
  transform: translateZ(0); /* GPU acceleration */
}

.card-hover:hover {
  transform: translateY(-2px) scale(1.005) translateZ(0);  /* Subtle n8n style */
  box-shadow: 
    var(--glass-shadow-hover), 
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 12px var(--primary-accent-light);
}

/* Interactive Glow Effect */
.glow-on-hover {
  position: relative;
  overflow: hidden;
}

.glow-on-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
  z-index: 1;
}

.glow-on-hover:hover::before {
  left: 100%;
}

/* Gradient Buttons */
.gradient-button {
  background: var(--primary-accent);
  border: none;
  color: white;
  font-weight: 500;  /* Lighter weight like n8n */
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: 12px;  /* More subtle radius */
}

.gradient-button:hover {
  background: var(--primary-accent-hover);
  transform: translateY(-1px) scale(1.01) translateZ(0);  /* Subtle interaction */
  box-shadow: 
    0 4px 20px var(--primary-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gradient-button:active {
  transform: translateY(0) scale(0.98) translateZ(0);
}

/* Navigation Glass Styling - Minimal n8n style */
.nav-glass {
  background: rgba(255, 255, 255, 0.03);  /* More transparent */
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);  /* Subtle border */
  transition: var(--transition-smooth);
}

.nav-glass.scrolled {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);  /* Softer shadow */
}

/* Mobile Menu Animation */
.mobile-menu {
  background: rgba(15, 26, 51, 0.95);
  backdrop-filter: blur(var(--blur-amount-strong));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: 
    max-height 0.3s ease-out,
    opacity 0.3s ease-out;
  opacity: 0;
}

.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* Animation Classes */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-slow);
  will-change: opacity, transform;
}

.fade-in-up.animate {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: var(--transition-slow);
  will-change: opacity, transform;
}

.fade-in-left.animate {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: var(--transition-slow);
  will-change: opacity, transform;
}

.fade-in-right.animate {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: var(--transition-slow);
  will-change: opacity, transform;
}

.scale-in.animate {
  opacity: 1;
  transform: scale(1);
}

/* Stats Counter Animation */
.counter {
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* Sparkle Animation */
.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: sparkleFloat 4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes sparkleFloat {
  0%, 100% { 
    opacity: 0;
    transform: translateY(0px) scale(0);
  }
  50% { 
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
}

/* Typewriter Effect */
.typewriter-cursor {
  color: var(--primary-blue) !important;
  animation: typewriter-blink 1s infinite;
}

@keyframes typewriter-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Logo Animation */
.logo-float {
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px) translateZ(0); }
  50% { transform: translateY(-10px) translateZ(0); }
}

/* Pulse Glow Animation */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1) translateZ(0);
    box-shadow: 0 0 20px rgba(0, 122, 255, 0.3);
  }
  50% {
    transform: scale(1.05) translateZ(0);
    box-shadow: 
      0 0 30px rgba(0, 122, 255, 0.6), 
      0 0 60px rgba(0, 122, 255, 0.3);
  }
}

/* Base Card Classes */
.cardBaseClasses {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-amount-strong));
  -webkit-backdrop-filter: blur(var(--blur-amount-strong));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
  will-change: transform, box-shadow, background;
}

/* Glow Card - Only glows on hover and only the card itself */
.glowCard {
  position: relative;
  overflow: hidden;
}

.glowCard::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--primary-accent-glow) 0%, transparent 70%);
  opacity: 0;
  transition: var(--transition-smooth);
  pointer-events: none;
  z-index: -1;
}

.glowCard:hover::before {
  opacity: 0.3;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
  }
}

/* Hover Note Component */
.hoverNote {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(15, 26, 51, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border-strong);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1000;
  pointer-events: none;
  max-width: 200px;
  white-space: normal;
  text-align: center;
}

.hoverNote::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15, 26, 51, 0.95);
}

.hoverNote.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-12px);
}

/* Navigation Active States */
.nav-item {
  position: relative;
  transition: var(--transition-smooth);
}

.nav-item.active {
  color: white !important;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nav-item[data-section="home"].active {
  color: var(--nav-home) !important;
}

.nav-item[data-section="stats"].active {
  color: var(--nav-stats) !important;
}

.nav-item[data-section="features"].active {
  color: var(--nav-features) !important;
}

.nav-item[data-section="projects"].active {
  color: var(--nav-projects) !important;
}

.nav-item[data-section="timeline"].active {
  color: var(--nav-timeline) !important;
}

.nav-item[data-section="faq"].active {
  color: var(--nav-faq) !important;
}

.nav-item[data-section="contact"].active {
  color: var(--nav-contact) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .glass-card {
    border-radius: 16px;
  }
  
  .card-hover:hover {
    transform: translateY(-4px) scale(1.01) translateZ(0);
  }
}

@media (max-width: 480px) {
  .glass-card {
    border-radius: 12px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .cursor-light {
    display: none;
  }
  
  body::before {
    animation: none;
  }
  
  .glowCard::before {
    display: none;
  }
  
  .particle {
    display: none;
  }
}

/* Mobile Motion Reduction */
@media (max-width: 768px) {
  .cursor-light {
    display: none;
  }
  
  .particle {
    display: none;
  }
  
/* hero improvements: fix width and readability */
section[data-section="home"] h1{font-weight:700;letter-spacing:-.01em;line-height:1.1;max-width:18ch;}
section[data-section="home"] p{max-width:52ch;opacity:.9;}
section[data-section="home"]{scroll-margin-top:72px;}

/* CTA emphasization and focus ring */
.gradient-button{padding:1rem 1.5rem;border-radius:12px;font-weight:700;}
.gradient-button:focus-visible{outline:3px solid currentColor;outline-offset:3px;}

/* navigation cues */
header nav .nav-item{opacity:.8;text-underline-offset:3px;}
header nav .nav-item:hover{text-decoration:underline;}
.subtle{opacity:.8;}

/* grid layout for >=768px */
@media (min-width:768px){
  section[data-section="home"]{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;}
}

/* optional tags and CTA card */
section[data-section="home"] .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
section[data-section="home"] .tags a{background:rgba(255,255,255,.08);padding:.25rem .5rem;border-radius:6px;font-size:.875rem;}
section[data-section="home"] .cta-card{background:rgba(255,255,255,.05);padding:1rem;border-radius:12px;margin-top:1.5rem;}
section[data-section="home"] .cta-card h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;}
section[data-section="home"] .cta-card p{margin:0 0 1rem;font-size:.875rem;opacity:.8;max-width:40ch;}
section[data-section="home"] .cta-card .gradient-button{display:inline-block;}

/* hero improvements: fix width and readability - appended outside media */
section[data-section="home"] h1{font-weight:700;letter-spacing:-.01em;line-height:1.1;max-width:18ch;}
section[data-section="home"] p{max-width:52ch;opacity:.9;}
section[data-section="home"]{scroll-margin-top:72px;}

/* CTA emphasization and focus ring - appended */
.gradient-button{padding:1rem 1.5rem;border-radius:12px;font-weight:700;}
.gradient-button:focus-visible{outline:3px solid currentColor;outline-offset:3px;}

/* navigation cues - appended */
header nav .nav-item{opacity:.8;text-underline-offset:3px;}
header nav .nav-item:hover{text-decoration:underline;}
.subtle{opacity:.8;}

/* layout for >=768px - appended */
@media (min-width:768px){
  section[data-section="home"]{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;}
}

/* optional tags and CTA card - appended */
section[data-section="home"] .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
section[data-section="home"] .tags a{background:rgba(255,255,255,.08);padding:.25rem .5rem;border-radius:6px;font-size:.875rem;}
section[data-section="home"] .cta-card{background:rgba(255,255,255,.05);padding:1rem;border-radius:12px;margin-top:1.5rem;}
section[data-section="home"] .cta-card h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;}
section[data-section="home"] .cta-card p{margin:0 0 1rem;font-size:.875rem;opacity:.8;max-width:40ch;}
section[data-section="home"] .cta-card .gradient-button{display:inline-block;}

  .glowCard::before {
    opacity: 0.1 !important;
    animation: none !important;
  }
  
  body::before {
    animation-duration: 40s !important;
  }
}