/* ==============================================================================
   HassleFreebooks — Enhanced Home Page Stylesheet
   ==============================================================================
   Purpose: Dedicated styles for the home page with enhanced visual design,
   improved typography, refined spacing, and polished UI details.

   Features:
   1. Enhanced hero section with gradient overlays and animations
   2. Improved feature cards with hover effects and depth
   3. Refined newsletter section with better form styling
   4. Polished CTA section with social proof elements
   5. Responsive design optimizations
   6. Micro-interactions and animations
   7. Visual hierarchy improvements

   Author: UI Enhancement Implementation
   Date: February 2026
   Version: 1.0.0
   ============================================================================== */

/* ==============================================================================
   INLINE STYLE REPLACEMENTS
   ============================================================================== */

/* Email checkmark - replaces style="display: none;" */
.email-checkmark--hidden {
    display: none;
}

.email-checkmark--visible {
    display: inline-block;
    color: var(--color-success, #27ae60);
    animation: checkmarkAppear 0.3s ease-in-out;
}

@keyframes checkmarkAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal hidden state - replaces style="display: none;" */
.modal--hidden {
    display: none;
}

.modal--visible {
    display: block;
    animation: modalFadeIn 0.3s ease-in-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==============================================================================
   ENHANCED HERO SECTION
   ============================================================================== */

/* Animated gradient background */
.gradient-animated {
    background: linear-gradient(-45deg,
        #f8f9fa 0%,
        #e3f2fd 25%,
        #f8f9fa 50%,
        #e8f5e9 75%,
        #f8f9fa 100%);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Enhanced hero container */
.hero__container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Refined hero title animation */
.hero__title {
    position: relative;
    overflow: hidden;
}

.hero__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    animation: underlineExpand 1s ease-out 0.5s forwards;
}

@keyframes underlineExpand {
    to { width: 100%; }
}

/* Enhanced button hover lift effect */
.btn--hover-lift {
    transform-style: preserve-3d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--hover-lift:hover {
    transform: translateY(-3px) scale(1.02);
}

/* Enhanced trust badge */
.trust-badge {
    position: relative;
    overflow: hidden;
}

.trust-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateY(-50%);
    animation: shimmerPass 3s infinite;
}

@keyframes shimmerPass {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Floating feature cards with parallax */
.feature-float[data-mouse-parallax] {
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.feature-float__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.feature-float__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 0;
}

/* Glass morphism enhancement */
.glass-morphism {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* Scroll indicator animation */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: bounce 2s infinite;
}

.scroll-indicator__mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--color-gray-400);
    border-radius: 15px;
    margin: 0 auto var(--space-2);
    position: relative;
}

.scroll-indicator__wheel {
    width: 4px;
    height: 8px;
    background: var(--color-gray-400);
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes scrollWheel {
    0% { opacity: 1; top: 10px; }
    100% { opacity: 0; top: 25px; }
}

/* ==============================================================================
   ENHANCED FEATURE CARDS
   ============================================================================== */

/* Gradient border animation on hover */
.gradient-border {
    position: relative;
    background: var(--color-white);
    border: 2px solid transparent;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: var(--gradient-primary);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
    animation: gradientRotate 3s linear infinite;
}

@keyframes gradientRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced shadow on cards */
.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease;
}

.card--hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Icon enhancements */
.card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    font-size: 1.75rem;
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.p-3 {
    padding: var(--space-3);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

/* Text color utilities */
.text-white {
    color: var(--color-white);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-info {
    background-color: var(--color-info);
}

/* ==============================================================================
   ENHANCED NEWSLETTER SECTION
   ============================================================================== */

.newsletter--enhanced {
    background: linear-gradient(135deg,
        var(--color-white) 0%,
        rgba(52, 152, 219, 0.02) 100%);
    border: 1px solid var(--color-gray-100);
}

.newsletter__form {
    max-width: 500px;
    margin: 0 auto;
}

.newsletter__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.newsletter__row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.newsletter__input-wrapper {
    flex: 1;
    position: relative;
}

/* Enhanced email input */
.form-control--email {
    padding-left: var(--space-10) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%236c757d" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    background-repeat: no-repeat;
    background-position: var(--space-3) center;
    background-size: 20px;
}

/* Newsletter submit button enhancement */
.newsletter__submit {
    min-width: 140px;
    white-space: nowrap;
}

.newsletter__privacy {
    text-align: center;
    margin-top: var(--space-4);
}

.link--underline {
    text-decoration: underline;
}

/* ==============================================================================
   ENHANCED CTA SECTION
   ============================================================================== */

.cta--enhanced {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.cta--enhanced::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(52, 152, 219, 0.03) 0%,
        transparent 70%);
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Stats counter animation */
.stat {
    position: relative;
}

.stat__number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-2);
}

.stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CTA note with icon */
.cta__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-gray-600);
}

.icon--check {
    width: 16px;
    height: 16px;
    color: var(--color-success);
}

/* ==============================================================================
   ENHANCED FOOTER NAVIGATION
   ============================================================================== */

.footer-nav {
    padding: var(--space-16) 0 var(--space-8);
    background: var(--color-gray-900);
    color: var(--color-gray-300);
}

.footer-nav__column {
    margin-bottom: var(--space-8);
}

.footer-nav__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-nav__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav__links li {
    margin-bottom: var(--space-2);
}

.footer-nav__link {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-nav__link:hover {
    color: var(--color-white);
    text-decoration: none;
}

.footer-nav__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-gray-800);
}

.footer-nav__copyright {
    color: var(--color-gray-500);
    margin: 0;
}

.footer-nav__social {
    display: flex;
    gap: var(--space-3);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-800);
    border-radius: var(--radius-full);
    color: var(--color-gray-400);
    transition: all var(--transition-base);
}

.social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-link .icon {
    width: 20px;
    height: 20px;
}

/* ==============================================================================
   RESPONSIVE DESIGN
   ============================================================================== */

@media (max-width: 768px) {
    /* Hero adjustments */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__content {
        padding-right: 0;
    }

    .hero__subtitle {
        max-width: 100%;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__features {
        display: none;
    }

    /* Feature grid adjustments */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Newsletter adjustments */
    .newsletter__row {
        flex-direction: column;
    }

    .newsletter__submit {
        width: 100%;
    }

    /* CTA stats adjustments */
    .cta__stats {
        flex-direction: column;
        gap: var(--space-6);
    }

    /* Footer nav adjustments */
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-nav__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
}

@media (max-width: 640px) {
    /* Section padding adjustments */
    .section {
        padding: var(--space-12) 0;
    }

    /* Hero section mobile */
    .hero-section {
        padding: var(--space-16) 0 var(--space-12);
    }

    /* Footer columns */
    .footer-nav {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-nav__column {
        margin-bottom: var(--space-6);
    }
}

/* ==============================================================================
   PRINT STYLES
   ============================================================================== */

@media print {
    .hero__features,
    .scroll-indicator,
    .newsletter,
    .footer-nav__social,
    .modal {
        display: none !important;
    }

    .hero-section {
        background: none !important;
        padding: var(--space-8) 0 !important;
    }

    .btn {
        border: 1px solid currentColor !important;
        background: none !important;
        color: inherit !important;
    }
}