/* 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; }
}