body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.hero-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.card-hover:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.logo-blend {
    mix-blend-mode: multiply;
}

.form-input {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

/* View Switching Transitions */
#main-content,
#detail-view,
#join-team-view {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Added !important to ensure JS overrides Tailwind */
.hidden-view {
    display: none !important;
    opacity: 0;
    transform: translateY(20px);
}

.visible-view {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

.map-container {
    height: 500px;
    width: 100%;
}

/* Faded Backdrop for Join Team */
.join-team-backdrop {
    position: relative;
    background-color: #f8fafc;
    overflow: hidden;
}

.join-team-backdrop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

/* Success Animation */
@keyframes scaleIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-animate {
    animation: scaleIn 0.5s ease-out forwards;
}

.nav-link-big {
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.2s;
}

.mobile-logo {
    height: 60px;
    width: auto;
    transition: height 0.3s ease;
}

.responsive-title {
    font-size: clamp(1.75rem, 8vw, 3rem);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Media Queries */
@media (max-width: 1280px) {
    .nav-link-big {
        font-size: 1.1rem;
    }
}

@media (min-width: 1024px) {
    .mobile-logo {
        height: 160px;
    }
}

@media (max-width: 768px) {
    .map-container {
        height: 350px;
    }
}