/* ─── BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ─── NAVBAR ─── */
#navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 245, 251, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(123, 45, 142, 0.08);
  transition: box-shadow 0.3s ease;
}
#navbar.scrolled {
  box-shadow: 0 4px 24px rgba(123, 45, 142, 0.1);
}

/* ─── BURGER ANIMATION ─── */
#menuToggle.open .burger-line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
#menuToggle.open .burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#menuToggle.open .burger-line:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
  width: 1.25rem;
}

/* ─── MOBILE MENU ─── */
.mobile-menu {
  animation: fadeIn 0.25s ease;
}
.mobile-menu.hidden { display: none; }
.mobile-menu-panel {
  background: rgba(45, 15, 48, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
.mobile-link {
  display: block;
  width: 100%;
  text-align: center;
}

/* ─── FLOATING CARDS ─── */
.float-card {
  animation: floatUp 0.7s ease both;
}
.float-card.card-1 { animation-delay: 0.3s; }
.float-card.card-2 { animation-delay: 0.5s; }
.float-card.card-3 { animation-delay: 0.7s; }

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-card.card-1 { animation: floatUp 0.7s ease both, float 4s ease-in-out 1s infinite; }
.float-card.card-2 { animation: floatUp 0.7s ease both, float 4.5s ease-in-out 1.2s infinite; }
.float-card.card-3 { animation: floatUp 0.7s ease both, float 3.8s ease-in-out 1.4s infinite; }

/* ─── REVEAL ANIMATIONS (progressive enhancement) ─── */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-scroll .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.js-scroll .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.js-scroll .reveal:nth-child(2) { transition-delay: 0.1s; }
.js-scroll .reveal:nth-child(3) { transition-delay: 0.2s; }
.js-scroll .reveal:nth-child(4) { transition-delay: 0.3s; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #faf5fb; }
::-webkit-scrollbar-thumb { background: #d5aed7; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a54fa5; }

/* ─── SELECTION ─── */
::selection { background: #e8d4eb; color: #431847; }