/* ========== Custom Styles & Animations ========== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f1f1f1; /* Warm Creamy Background */
}
/* ========== Custom Font Class ========== */
.font-display {
    font-family: 'Playfair Display', serif;
}
/* Timeline Styling */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #2f9ea8; /* Lighter teal */
    border: 3px solid #e1ede5; /* Lightest teal */
}

/* Subtle Card Top Border Style (New) */
.card-outline-project,
.card-outline-blog,
.card-outline-book {
    border: none;
}

.card-outline-project {
    border-top: 6px solid #80cbc4; /* Muted Blue (sky-300) */
}
.card-outline-blog {
    border-top: 6px solid #80cbc4; /* Thematic Teal (teal-300) */
}
.card-outline-book {
    border-top: 6px solid #80cbc4; /* Neutral Slate (slate-300) */
}

/* ========== Scroll Animation Styles ========== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ========== Modal Styles ========== */
#project-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

#project-modal.is-open #modal-content {
    transform: scale(1);
}

/* Media Modal Styles */
#media-modal {
    display: flex;
    opacity: 0;
    pointer-events: none;
}

#media-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

#media-modal.is-open #media-modal-content {
    transform: scale(1);
}

#media-modal #media-modal-content {
    transform: scale(0.95);
}

/* ========== Shimmer Animation Styles (NEW) ========== */
@keyframes shimmer {
    0%, 100% {
        transform: scale(0.8) translate(0, 0);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.2) translate(20px, -20px);
        opacity: 0.5;
    }
}

.shimmer-dot {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px); 
    animation: shimmer 20s ease-in-out infinite;
    opacity: 0;
}



/* ========== Shooting Star Particle Styles (NEW) ========== */
.shooting-star {
    position: absolute;
    border-radius: 50%;
    /* A subtle glow effect that looks great on our dark teal stars */
    box-shadow: 0 0 10px 2px currentColor; 
    /* We will control opacity and transform with JavaScript */
    transition: opacity 0.2s ease-out; 
}

/* ========== EXPERIENCE Tab Styles (ISOLATED) ========== */
.experience-btn {
    font-weight: 600;
    color: #64748b; /* slate-500 */
    transition: color 0.3s ease;
}
.experience-btn.is-active {
    color: #2f9ea8; /* Theme teal */
}
#experience-indicator {
    background-color: #4db6ac;
}
#experience-indicator-mobile {
    background-color: #4db6ac;
}
/* Mobile button improvements */
@media (max-width: 767px) {
    .experience-btn {
        min-height: 44px; /* Better touch target */
        border-radius: 0.5rem;
    }
    .experience-btn:hover {
        background-color: rgba(20, 184, 166, 0.1); /* teal-500 with opacity */
    }
    .experience-btn.is-active {
        background-color: rgba(20, 184, 166, 0.1);
    }
}
/* Dark Mode Styles */
.dark .experience-btn {
    color: #94a3b8;
}
.dark .experience-btn.is-active {
    color: #6ee7b7;
}
.dark #experience-indicator {
    background-color: #6ee7b7;
}
.dark #experience-indicator-mobile {
    background-color: #6ee7b7;
}
@media (max-width: 767px) {
    .dark .experience-btn:hover {
        background-color: rgba(110, 231, 183, 0.1); /* brand-mint with opacity */
    }
    .dark .experience-btn.is-active {
        background-color: rgba(110, 231, 183, 0.1);
    }
}
/* ========== Dark Mode Styles========== */

/* 1. Base dark mode background and text colors */
.dark body {
    background-color: #1e293b; /* slate-800 */
    color: #cbd5e1; /* slate-300 */
}

/* 2. Adjust heading and strong text colors */
.dark h1, .dark h2, .dark h3, .dark h4, .dark strong, .dark .font-bold {
    color: #f1f5f9; /* slate-100 */
}

/* 3. Invert card and other light element backgrounds */
.dark .bg-white {
    background-color: #334155; /* slate-700 */
    border-color: rgba(255, 255, 255, 0.1);
}
.dark .timeline-content {
    background-color: rgba(51, 65, 85, 0.6); /* Semi-transparent slate-700 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark .timeline-content::after {
    background-color: rgba(51, 65, 85, 0.6);
}
.dark .timeline-dot {
    background-color: #f1f5f9; /* slate-100 */
    color: #1e293b; /* slate-800 */
    border-color: #1e293b;
    box-shadow: 0 0 0 3px #4db6ac;
}

/* 4. Adjust specific text and element colors for contrast */
.dark .text-slate-500 { color: #94a3b8; /* slate-400 */ }
.dark .text-slate-600 { color: #cbd5e1; /* slate-300 */ }
.dark .text-slate-700 { color: #e2e8f0; /* slate-200 */ }
.dark .experience-tab-btn { color: #94a3b8; /* slate-400 */ }
.dark .experience-tab-btn.is-active { color: #6ee7b7; /* brand-mint */ }
.dark .coreskills-text {
    color: #0c0f12!important;
}
.dark #active-tab-indicator { background-color: #6ee7b7; }

/* 5. Invert the footer */
.dark #footer-shimmer-container { background-color: #0f172a; /* slate-900 */ }
.dark footer h2 { color: white; }
.dark footer p { color: #94a3b8; }

/* 6. Darken the project modal */
.dark #modal-content { background-color: #1e293b; }
.dark #modal-overlay { background-color: #020617/70; }

/* 7. Darken the media modal */
.dark #media-modal-content { background-color: #1e293b; }
.dark #media-modal-overlay { background-color: rgba(2, 6, 23, 0.7); }

/* 8. Art learning note dark mode */
.dark .bg-amber-50 {
    background-color: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}
.dark .text-amber-800 {
    color: #fbbf24 !important;
}

/* ========== Dark Mode Navbar Styles (Corrected & Final) ========== */

/* The thin accent bar at the very top of the page */
#top-accent-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fde047; 
    z-index: 60; 
    display: none;
}
.dark #top-accent-bar {
    display: block;
}

/* 1. Main header styles in dark mode */
.dark header {
    background-color: #484e57 !important; /* Our custom 'footer-gray' */
    --tw-bg-opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 2. Main Logo Style */
.dark header > nav > a.font-bold {
    color: rgb(255, 255, 255) !important;
}

/* 3. Desktop Navigation Links */
.dark header .hidden.md\:flex a {
    color: rgba(255, 255, 255, 0.7) !important; /* Muted white */
    transition: color 0.3s ease;
}
.dark header .hidden.md\:flex a:hover {
    color: white !important;
}

/* 4. Desktop "Contact Me" Button - Override the link color */
.dark header .hidden.md\:flex a.bg-brand-mint {
    color: #232f40 !important; /* Dark text on mint background */
}

/* 5. Right-side Icons (Theme Toggle & Mobile Menu) */
.dark header #theme-toggle-btn,
.dark header #menu-toggle-btn {
    color: rgba(255, 255, 255, 0.7) !important;
}
.dark header #theme-toggle-btn:hover,
.dark header #menu-toggle-btn:hover {
    color: white !important;
}

/* 6. Mobile Menu Popup */
.dark #mobile-menu {
    background-color: rgba(32, 45, 65, 0.95) !important;
}
.dark #mobile-menu a {
    color: #1e293b !important; /* Dark text */
}
.dark #mobile-menu a:hover {
    color: #0f172a !important;
}

/* ========== Reusable Tab Component Styles========== */

/* --- Main Button Styling --- */
.tab-btn {
    font-weight: 600;
    color: #64748b; /* slate-500 */
    transition: color 0.3s ease;
    padding: 0.75rem 0.5rem;
}
.tab-btn.is-active {
    color: #2f9ea8; /* Theme teal */
}

/* --- Dark Mode Button Styling --- */
.dark .tab-btn {
    color: #94a3b8; /* slate-400 */
}
.dark .tab-btn.is-active {
    color: #6ee7b7; /* brand-mint */
}

/* --- Indicator Styling --- */
.tab-indicator {
    position: absolute;
    background-color: #2f9ea8; /* Theme teal */
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .tab-indicator {
    background-color: #6ee7b7; /* brand-mint */
}

/* --- Hobbies/Favorites Section Specific Styles --- */
#hobbies .tab-component {
    max-width: 48rem; /* 768px */
    margin-left: auto;
    margin-right: auto;
}
#hobbies .tab-indicator {
    bottom: -1px;
    height: 2px;
}
#hobbies .tab-btn {
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
#hobbies .flex.justify-center > .relative {
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
}
.dark #hobbies .flex.justify-center > .relative {
    border-bottom-color: #334155; /* slate-700 */
}

/* --- Experience Section Specific Styles --- */
#experience .tab-indicator {
    left: 0;
    top: 0;
    width: 2px;
    height: 0; /* JS will set the height */
}
#experience .experience-heading {
    position: relative;
    display: inline-block;
}

/* --- Shared Responsive & Content Styles --- */
@media (max-width: 768px) {
    #experience .experience-heading::before,
    #experience .experience-heading::after {
        display: none;
    }
}
.tab-content ul {
    list-style: none;
    padding-left: 0;
}
.tab-content li {
    display: flex;
    align-items: flex-start;
}
.tab-content li i {
    margin-top: 5px;
    flex-shrink: 0;
}

/* Dark mode text styles for content cards */
.dark .tab-content h3, .dark .tab-content h4 {
    color: #f1f5f9 !important;
}
.dark .tab-content p {
    color: #cbd5e1 !important;
}
.dark .tab-content span, .dark #hobbies .tab-panel span {
    color: #6ee7b7 !important;
}
.dark #hobbies a.flex:hover {
    background-color: rgba(71, 85, 105, 0.4) !important;
}
/* ========== Sticky Sidebar Styles ========== */
.writing-mode-vertical-rl {
    /* This makes the text flow from top to bottom */
    writing-mode: vertical-rl;
    
    /* This ensures the letters themselves are not rotated */
    text-orientation: mixed;
    
    /* This adds a little space after the text, before the line */
    padding-bottom: 1.5rem; /* 24px */
}