/* css/main.css - additional styles beyond Tailwind */

/* small, tasteful motion */
@keyframes floatUp {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-8px); opacity: .9; }
  100% { transform: translateY(0); opacity: 1; }
}
.animate-float { animation: floatUp 6s ease-in-out infinite; }

/* slow spin for decorative orb */
@keyframes spinSlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 30s linear infinite; }

/* subtle glass effect for cards */
.backdrop-glass {
  backdrop-filter: blur(6px) saturate(1.1);
  background-color: rgba(255,255,255,0.55);
}

/* keep hero image crisp on mobile */
@media (max-width: 768px) {
  .hero { background-position: center top; }
}

/* Utility tweaks for focus accessibility */
:focus { outline: 3px solid rgba(34,197,94,0.15); outline-offset: 2px; border-radius: 6px; }

/* small animation for nav links on load */
.nav-animate { transform: translateY(-6px); opacity: 0; animation: navIn 600ms ease forwards; }
@keyframes navIn { to { transform: none; opacity: 1; } }

/* lightbox for streams (simple) */
#lightbox {
  position: fixed; inset: 0; display: none; z-index: 60;
  background: rgba(0,0,0,0.6); align-items:center; justify-content:center; padding: 20px;
}
#lightbox.open { display:flex; }
#lightbox .frame { width: 90%; max-width: 1100px; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow:hidden; }
#lightbox .close { position:absolute; top:18px; right:24px; font-size:18px; background:rgba(255,255,255,0.12); padding:8px 10px; border-radius:8px; }


### Menu

/* Ensure mobile menu appears above content */
#menu {
    z-index: 50;
}

/* Add smooth transitions */
#menu {
    transition: all 0.3s ease;
}

/* Ensure proper stacking context */
header {
    position: relative;
    z-index: 100;
}

/* Custom animations if needed */
.backdrop-glass {
    backdrop-filter: blur(10px);
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

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