/* ===========================
   Glass Card Component
   =========================== */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
}

/* ===========================
   Hero Glow
   =========================== */
.hero-glow {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, rgba(13, 17, 23, 0) 70%);
}

/* ===========================
   Scroll-Triggered Animations
   =========================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback: if JS hasn't loaded or observer not supported, show content */
.no-js .animate-on-scroll,
.animate-on-scroll.no-observer {
    opacity: 1;
    transform: none;
}

/* ===========================
   Nav States
   =========================== */
.nav-scrolled {
    background: rgba(13, 17, 23, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* ===========================
   Carousel: Hide Scrollbar
   =========================== */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ===========================
   Selection
   =========================== */
::selection {
    background: #22C55E;
    color: white;
}

/* ===========================
   Mobile Menu Animation
   =========================== */
#mobile-menu {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

#mobile-menu.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* ===========================
   Smooth Scroll
   =========================== */
html {
    scroll-behavior: smooth;
}

/* ===========================
   Phone Frame Pulse (Hero)
   =========================== */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.35; }
}

.phone-glow-pulse {
    animation: pulse-glow 3s ease-in-out infinite;
}