/* Landing Page Global Styles */
/* Component-scoped styles are in LandingPage.razor.css */
/* Keyframes are in app.css */

/* These selectors need to be global because they are used by */
/* the LandingPage component which may not get scoped CSS applied */
/* in all render paths (e.g., NotAuthorized template in App.razor) */

.landing-page {
    min-height: 100vh;
    overflow-x: hidden;
}

.landing-page .hero-section {
    background: linear-gradient(135deg, #4FD0CB 0%, #3A8F8A 100%);
    min-height: 80vh;
    position: relative;
    overflow: hidden;
}

.landing-page .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.12) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(79,208,203,0.2) 0%, transparent 20%),
        radial-gradient(circle at 20% 90%, rgba(58,143,138,0.2) 0%, transparent 25%);
    animation: backgroundShift 20s ease-in-out infinite;
    z-index: 1;
}

.landing-page .hero-section::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(255,255,255,0.03) 60px, rgba(255,255,255,0.03) 120px),
        repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 120px);
    animation: rotateBackground 60s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes rotateBackground {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.landing-page .gradient-text {
    background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-page .hero-visual-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    z-index: 10;
}

.landing-page .hero-card { position: relative; z-index: 2; }

.landing-page .floating-icon {
    position: absolute;
    z-index: 1;
    animation: float 4s ease-in-out infinite;
}
.landing-page .floating-icon.icon-1 { top: -20px; left: -40px; }
.landing-page .floating-icon.icon-2 { top: 50%; right: -40px; animation-delay: 1s; }
.landing-page .floating-icon.icon-3 { bottom: -20px; left: 50px; animation-delay: 2s; }
.landing-page .floating-icon.icon-4 { top: 20%; left: -60px; animation-delay: 1.5s; }

.landing-page .feature-card {
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-page .feature-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.landing-page .stat-item { transition: transform 0.3s ease; }
.landing-page .stat-item:hover { transform: scale(1.1); }

.landing-page .cta-button { transition: all 0.3s ease; }
.landing-page .cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

@media (max-width: 960px) {
    .landing-page .hero-section { min-height: auto; }
    .landing-page .hero-visual-container { margin-top: 3rem; }
    .landing-page .floating-icon { display: none; }
}

@media (max-width: 600px) {
    .landing-page .feature-card:hover {
        transform: translateY(-8px) scale(1.01);
    }
}