/* Uno360 Custom Styles */

:root {
  --navy: #1a2332;
  --navy-light: #2a3a4e;
  --navy-50: rgba(26, 35, 50, 0.05);
  --navy-10: rgba(26, 35, 50, 0.1);
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

/* Slide-based keynote navigation */
.slide {
  scroll-snap-align: start;
  min-height: 100dvh;
  min-height: 100vh; /* fallback for older browsers */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Slides with content that may exceed viewport — still snap, just taller */
.slide-tall {
  scroll-snap-align: start;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Footer snaps but doesn't need full viewport height */
.slide-end {
  scroll-snap-align: start;
}

/* Ensure slide children take full width */
.slide > div,
.slide-tall > div {
  width: 100%;
}

/* Disable snap on mobile for better UX (mandatory can be jarring on small screens) */
@media (max-width: 768px) {
  html { scroll-snap-type: y proximity; }
  .slide, .slide-tall { min-height: auto; }
}

/* Scroll-triggered animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-right.active { opacity: 1; transform: translateX(0); }

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.15s; }
.stagger > *:nth-child(3) { transition-delay: 0.3s; }
.stagger > *:nth-child(4) { transition-delay: 0.45s; }

/* Typewriter cursor */
.typewriter-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--navy); margin-left: 2px; animation: blink 1s step-end infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }

/* Particle canvas */
#particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Counter animation */
.count-up { font-variant-numeric: tabular-nums; }

/* Navbar blur */
.nav-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Chat demo styling */
.chat-demo { font-family: inherit; }

/* Gradient text for hero accent */
.gradient-text {
  background: linear-gradient(135deg, var(--navy) 0%, #4a6fa5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .typewriter-cursor { animation: none; }
}

/* ==============================================
   DARK MODE — html.dark overrides
   ============================================== */

/* CSS custom properties */
html.dark {
  --navy: #f1f5f9;
  --navy-light: #e2e8f0;
  --navy-50: rgba(241, 245, 249, 0.05);
  --navy-10: rgba(241, 245, 249, 0.1);
}

/* Page background — body wins over .bg-white because body selector is more specific */
html.dark .bg-white { background-color: #111827; }
html.dark body { background-color: #0c1019; color: #f1f5f9; }

/* Surfaces */
html.dark .bg-gray-50 { background-color: #111827; }
html.dark .bg-gray-100 { background-color: #1f2937; }
html.dark .bg-navy-50 { background-color: rgba(241, 245, 249, 0.05); }

/* Text */
html.dark .text-navy { color: #f1f5f9; }
html.dark .text-navy\/80 { color: rgba(241, 245, 249, 0.8); }
html.dark .text-navy\/70 { color: rgba(241, 245, 249, 0.7); }
html.dark .text-navy\/60 { color: rgba(241, 245, 249, 0.6); }
html.dark .text-navy\/50 { color: rgba(241, 245, 249, 0.5); }
html.dark .text-navy\/30 { color: rgba(241, 245, 249, 0.3); }
html.dark .text-navy\/20 { color: rgba(241, 245, 249, 0.2); }

/* Borders */
html.dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.08); }
html.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.1); }
html.dark [class*="border-navy"] { border-color: rgba(255, 255, 255, 0.08); }
/* .border-t / .border-b intentionally omitted — too broad; targeted via border-navy and border-gray-* above */

/* Mobile menu */
html.dark #mobile-menu {
  background-color: #0c1019;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dropdown menus */
html.dark .nav-dropdown-menu > div {
  background-color: #1a2332;
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark .hover\:bg-navy-50:hover { background-color: rgba(241, 245, 249, 0.06); }

/* Navbar scrolled state (dark) — applied via JS */
.nav-dark-scrolled { background-color: rgba(12, 16, 25, 0.9); }

/* Gradient text — dark mode: navy var resolves to near-white, so swap gradient to stay visible */
html.dark .gradient-text {
  background: linear-gradient(135deg, #f1f5f9 0%, #93c5fd 100%);
}

/* Logo — invert to white in dark mode */
html.dark img[src*="logo-mono"] { filter: brightness(0) invert(1); }

/* Theme toggle button in dark mode */
html.dark #theme-toggle,
html.dark #theme-toggle-mobile {
  background-color: rgba(241, 245, 249, 0.1);
}
html.dark #theme-toggle:hover,
html.dark #theme-toggle-mobile:hover {
  background-color: rgba(241, 245, 249, 0.2);
}