/* CSS BY FAIRUZ AGHNA MULYA */

/* --- ROOT VARIABLES FOR THEME: MINIMALIST DARK (PURPLE/CYAN) --- */
:root {
    --bg-color: #0A0E14; /* Darker, almost black blue */
    --text-color: #cdd6f4; /* Softer text color */
    --text-color-muted: #a6adc8;
    --heading-color: #ffffff;
    --accent-gradient: linear-gradient(to right, #89b4fa, #00d4ff); /* Purple to Cyan */
    --accent-color-1: #89b4fa; /* Purple */
    --accent-color-2: #00d4ff; /* Cyan */
    --card-bg: rgba(30, 30, 47, 0.4);
    --card-border: rgba(255, 255, 255, 0.1);
    --backdrop-blur: 10px;
    --scrollbar-thumb: #89b4fa;
    --scrollbar-track: #0A0E14;
}

/* --- BASE STYLES --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow', sans-serif;
    color: var(--heading-color);
}

/* --- UTILITY CLASSES --- */
.text-muted {
    color: var(--text-color-muted);
}

.accent-border {
    border-color: var(--accent-color-1);
}

.accent-1-color {
    color: var(--accent-color-1);
}

.accent-2-color {
    color: var(--accent-color-2);
}

.accent-1-icon {
    color: var(--accent-color-1);
}

.accent-2-icon {
    color: var(--accent-color-2);
}

.border-border {
    border-color: var(--card-border);
}

.profile-img {
    border-color: var(--accent-color-2);
}

/* --- BACKGROUNDS --- */
.animated-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--bg-color);
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: moveGrid 20s linear infinite;
}
.animated-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(137, 180, 250, 0.15), rgba(10, 14, 20, 0) 60%);
    animation: pulseGlow 10s infinite alternate;
}

@keyframes moveGrid { from { background-position: 0 0; } to { background-position: 50px 50px; } }
@keyframes pulseGlow { from { transform: scale(0.8); opacity: 0.7; } to { transform: scale(1.2); opacity: 1; } }

/* --- UTILITIES & COMPONENTS --- */
.gradient-text { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.typing-cursor { background-color: var(--accent-color-1); animation: blink 0.7s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.glass-card { background: var(--card-bg); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); border: 1px solid var(--card-border); transition: background-color 0.5s, border-color 0.5s; }
.contact-btn { position: relative; overflow: hidden; transition: transform 0.3s ease; z-index: 1; }
.contact-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); transform: translateX(-100%); transition: transform 0.4s ease; z-index: -1; }
.contact-btn:hover { transform: scale(1.05); }
.contact-btn:hover::before { transform: translateX(0); }
.interactive-card { perspective: 1000px; }
.interactive-card .card-inner { transition: transform 0.4s ease; }
.interactive-card:hover .card-inner { transform: rotateY(5deg) rotateX(5deg) scale(1.02); }
.interactive-card .card-overlay { opacity: 0; transition: opacity 0.4s ease; background: linear-gradient(to top, rgba(10, 14, 20, 0.9) 20%, rgba(10, 14, 20, 0) 100%); }
.interactive-card:hover .card-overlay { opacity: 1; }
.interactive-card .card-content { opacity: 0; transition: opacity 0.4s ease; }
.interactive-card:hover .card-content { opacity: 1; }
.modal-overlay { background: rgba(10, 14, 20, 0.8); backdrop-filter: blur(8px); }
.modal-content { background-color: #1e1e2e; border: 1px solid var(--card-border); }
.modal-close:hover { color: var(--accent-color-1); transform: rotate(90deg); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }

/* --- TIMELINE --- */
.timeline { position: relative; }
.timeline::before { content: ''; position: absolute; left: 1rem; top: 0; bottom: 0; width: 2px; background-color: var(--card-border); }
.timeline-item { position: relative; padding-left: 3rem; margin-bottom: 2.5rem; }
.timeline-dot { position: absolute; left: 0; top: 0.25rem; height: 2rem; width: 2rem; display: flex; align-items: center; justify-content: center; background-color: var(--bg-color); border: 2px solid var(--accent-color-2); border-radius: 50%; }

/* --- CONTACT FORM --- */
.form-input { background: var(--card-bg); border: 1px solid var(--card-border); transition: border-color 0.3s, box-shadow 0.3s; }
.form-input:focus { outline: none; border-color: var(--accent-color-1); box-shadow: 0 0 10px rgba(137, 180, 250, 0.5); }

/* --- MARQUEE --- */
.marquee-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee {
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
}
.marquee-left {
    animation: scroll-left 40s linear infinite;
}
.marquee-right {
    animation: scroll-right 40s linear infinite;
}
@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@keyframes scroll-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}