/* ============================================
   PORTFOLIO ANIMATION SYSTEM
   ============================================ */

/* --- Scroll Reveal Base States --- */
[data-animate] {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Animation Variants (initial hidden state) --- */
[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-down"] {
    transform: translateY(-30px);
}

[data-animate="fade-in-left"] {
    transform: translateX(-30px);
}

[data-animate="fade-in-right"] {
    transform: translateX(30px);
}

[data-animate="scale-up"] {
    transform: scale(0.95);
}

[data-animate="draw-line"] {
    transform: scaleX(0);
    transform-origin: top center;
}

/* --- Visible State --- */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) scaleX(1);
}

/* --- Stagger Delays via CSS Custom Property --- */
[data-animate][data-stagger="1"] { transition-delay: 0.1s; }
[data-animate][data-stagger="2"] { transition-delay: 0.2s; }
[data-animate][data-stagger="3"] { transition-delay: 0.3s; }
[data-animate][data-stagger="4"] { transition-delay: 0.4s; }
[data-animate][data-stagger="5"] { transition-delay: 0.5s; }
[data-animate][data-stagger="6"] { transition-delay: 0.6s; }

/* --- Nav Scroll Effect --- */
.nav-scrolled {
    height: 4rem !important;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08) !important;
}

/* --- Modal Animations --- */
.modal-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.is-visible {
    opacity: 1;
}

.modal-content {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* --- Timeline Draw Animation --- */
.timeline-line-animated {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-line-animated.is-visible {
    transform: scaleY(1);
}

/* --- Counter Animation --- */
.counter-value {
    display: inline-block;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

/* --- Global Small Screen Fixes --- */
@media (max-width: 767px) {
    /* Tighter section spacing on mobile */
    section {
        overflow-x: hidden;
    }

    /* Make all grid cards full width on mobile */
    .grid {
        gap: 1rem;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better touch targets */
    a, button {
        min-height: 44px;
    }

    /* Reduce padding on cards for small screens */
    .glass-panel {
        padding: 1rem;
    }
}

/* --- Hero Section Mobile --- */
@media (max-width: 640px) {
    .hero-title-line span {
        font-size: 2rem !important;
    }
}

/* --- Stats Bar Mobile --- */
@media (max-width: 640px) {
    .divide-y > * + * {
        border-top: 1px solid rgba(197, 198, 205, 0.3);
        padding-top: 1rem;
        margin-top: 1rem;
    }
}

/* --- Featured Project Mobile --- */
@media (max-width: 767px) {
    .md\:flex-row {
        flex-direction: column !important;
    }
    .md\:w-2\/3,
    .md\:w-1\/3 {
        width: 100% !important;
    }
}

/* --- Footer Mobile --- */
@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* --- Skills Timeline Mobile --- */
@media (max-width: 767px) {
    .timeline-mobile-card {
        padding-left: 2rem;
        border-left: 2px solid rgba(0, 99, 152, 0.3);
    }
}

/* --- Contact Form Mobile --- */
@media (max-width: 640px) {
    .input-field {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}

/* --- Marquee Smooth on Mobile --- */
@media (max-width: 767px) {
    .animate-marquee {
        animation-duration: 20s;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .timeline-line-animated {
        transform: scaleY(1) !important;
        transition: none !important;
    }

    .modal-backdrop,
    .modal-content {
        transition: none !important;
    }

    .nav-scrolled {
        transition: none !important;
    }

    .animate-marquee {
        animation: none !important;
    }
}