/* ========================================
   ScholarLab AI - Landing Page Styles
   ======================================== */

/* Glass Navigation */
.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* AI Glow Effect */
.ai-glow {
    box-shadow: 0 0 40px rgba(0, 91, 190, 0.1), 0 0 20px rgba(60, 215, 255, 0.05);
}

/* Azure-tinted Shadow */
.shadow-azure {
    box-shadow: 0 8px 30px rgba(1, 121, 248, 0.08);
}

/* ========================================
   Form Submission States
   ======================================== */
.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.form-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1.25rem;
}

/* Submit button spinner */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
    border: 3px solid rgba(105, 67, 0, 0.3);
    border-top-color: #694300;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success / Error message styles */
.form-message {
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    animation: fadeSlideIn 0.4s ease-out;
}

.form-message.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast notification */
.toast {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 100;
    padding: 16px 24px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    animation: toastIn 0.4s ease-out;
    transition: opacity 0.3s, transform 0.3s;
}

.toast.success {
    background: #065f46;
    color: #ffffff;
}

.toast.error {
    background: #991b1b;
    color: #ffffff;
}

.toast.hiding {
    opacity: 0;
    transform: translateY(-12px);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   Hero SVG Illustration Animations
   ======================================== */
.hero-float-1 { animation: heroFloat1 6s ease-in-out infinite; transform-origin: center; }
.hero-float-2 { animation: heroFloat2 7s ease-in-out infinite; transform-origin: center; }
.hero-float-3 { animation: heroFloat3 5s ease-in-out infinite; transform-origin: center; }
.hero-float-4 { animation: heroFloat4 8s ease-in-out infinite; transform-origin: center; }
.hero-particle-1 { animation: heroParticle1 4s ease-in-out infinite; }
.hero-particle-2 { animation: heroParticle2 5s ease-in-out infinite; }
.hero-pulse { animation: heroPulse 3s ease-in-out infinite; transform-origin: center; }
.hero-dash { animation: heroDash 12s linear infinite; }

@keyframes heroFloat1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}
@keyframes heroFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-8px, -10px); }
}
@keyframes heroFloat4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(6px, -8px); }
}
@keyframes heroParticle1 {
    0%, 100% { opacity: 0.12; transform: translateY(0) scale(1); }
    50% { opacity: 0.45; transform: translateY(-8px) scale(1.3); }
}
@keyframes heroParticle2 {
    0%, 100% { opacity: 0.15; transform: translateY(0) scale(1); }
    50% { opacity: 0.5; transform: translateY(10px) scale(1.2); }
}
@keyframes heroPulse {
    0%, 100% { opacity: 0.06; transform: scale(1); }
    50% { opacity: 0.14; transform: scale(1.06); }
}
@keyframes heroDash {
    to { stroke-dashoffset: -40; }