/* ─── Base & Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d1b2a; }
::-webkit-scrollbar-thumb { background: rgba(94,234,212,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(94,234,212,0.4); }

/* ─── Navigation ─── */
#nav {
  background: transparent;
  transition: background 0.5s ease, backdrop-filter 0.5s ease, padding 0.5s ease;
}
#nav.scrolled {
  background: rgba(13, 27, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ─── Floating Cards ─── */
.floating-card-1 { animation: float1 6s ease-in-out infinite; }
.floating-card-2 { animation: float2 7s ease-in-out infinite; }
.floating-card-3 { animation: float3 5.5s ease-in-out infinite; }

@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(0.5deg); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-0.5deg); }
}
@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.3deg); }
}

/* ─── Scroll Reveal ─── */
.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Progressive enhancement: only animate if user prefers motion */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
  }
  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Mobile Menu ─── */
#mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}
.menu-line:nth-child(1) {
  transform-origin: center;
}
.menu-line:nth-child(2) {
  transform-origin: center;
}
body.menu-open .menu-line:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
body.menu-open .menu-line:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* ─── Selection ─── */
::selection {
  background: rgba(94,234,212,0.3);
  color: #f0fdf9;
}

/* ─── Focus ─── */
a:focus-visible, button:focus-visible {
  outline: 1px solid rgba(94,234,212,0.5);
  outline-offset: 4px;
  border-radius: 4px;
}