/* Custom Scrollbar, Animations, and Fan Card logic */
body {
  font-family: 'Lexend', 'Noto Sans', sans-serif;
}

.glass-nav {
  background: rgba(17, 23, 20, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Toast notification */
.toast {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Autofill override — keeps dark theme when browser fills email */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #1c2620 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border-radius: 0 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Mobile menu animation */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  opacity: 0;
}

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

/* Screenshot Fan Section */
.fan-container {
  perspective: 2000px;
  height: 550px;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 40px;
}

.fan-card {
  position: absolute;
  transform-origin: bottom center;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  width: 240px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}

.card-1 { transform: translateX(-120px) rotate(-15deg) translateZ(0); z-index: 10; }
.card-2 { transform: translateX(-40px) rotate(-5deg) translateZ(50px); z-index: 20; }
.card-3 { transform: translateX(40px) rotate(5deg) translateZ(50px); z-index: 20; }
.card-4 { transform: translateX(120px) rotate(15deg) translateZ(0); z-index: 10; }

/* Desktop Hover Effects */
@media (min-width: 1024px) {
  .fan-card.active-fan {
    transform: rotate(0) translateY(-60px) scale(1.15) translateZ(250px) !important;
    z-index: 100 !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1280px) {
  .fan-container {
    height: 420px;
    transform: scale(0.85);
    margin-bottom: 2rem;
  }
  .fan-card { width: 200px; }
  .card-1 { transform: translateX(-100px) rotate(-15deg); }
  .card-2 { transform: translateX(-35px) rotate(-5deg); }
  .card-3 { transform: translateX(35px) rotate(5deg); }
  .card-4 { transform: translateX(100px) rotate(15deg); }
}

@media (max-width: 640px) {
  .fan-container {
    height: 350px;
    transform: scale(0.7);
  }
  .fan-card { width: 160px; }
}