/* ============================================
   HERO SECTION TEXT - PLAIN WHITE WITH ALFA SLAB ONE FONT
   ============================================ */

/* Hero text with Alfa Slab One font and shadow for visibility */
.hero-headline,
.hero-subtext {
    color: #ffffff !important;
    /* Plain white */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.6),
        0 6px 24px rgba(0, 0, 0, 0.4) !important;
    /* Multiple shadows for depth */
    font-weight: 400 !important;
    /* Normal weight */
    font-family: 'Alfa Slab One', cursive !important;
    /* Google Alfa Slab One font */
    background: none !important;
    /* Remove any gradients */
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    opacity: 0 !important;
    /* Hidden until animation starts */
    position: relative;
    z-index: 3;
    transition: opacity 0.3s ease;
}

/* Show text container after JavaScript processes it (when .letter classes are added) */
.hero-headline:has(.letter),
.hero-subtext:has(.letter) {
    opacity: 1 !important;
}

/* Letter by letter animation */
.hero-headline,
.hero-subtext {
    /* Split into individual letters via JavaScript */
    display: inline-block;
}

/* Word wrapper - keeps letters of each word together */
.hero-headline .word-wrapper,
.hero-subtext .word-wrapper {
    display: inline-block;
    white-space: nowrap;
    /* Never break words */
}

/* Individual letter styling */
.hero-headline .letter,
.hero-subtext .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInLetter 0.4s ease-out forwards;
    /* Faster: 0.6s → 0.4s */
    white-space: normal;
}

/* Space character styling - acts as word boundary */
.hero-headline .space,
.hero-subtext .space {
    display: inline;
    width: 0.3em;
    white-space: pre;
}

/* Fade in letter animation */
@keyframes fadeInLetter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable gradient animation on hero subtext */
.hero-section.is-headline-scrolled-out .hero-subtext {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    opacity: 1 !important;
}


/* ============================================
   NAVIGATION CIRCLES - RIGHT SIDE FIXED
   ============================================ */

/* Container for navigation circles */
.nav-circles {
    position: fixed;
    right: 3mm;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3mm;
    z-index: 150;
    /* Above header */
}

/* Navigation circles - change cursor */
.nav-circle {
    width: 4mm;
    height: 4mm;
    border-radius: 50%;
    cursor: pointer !important;
    /* Force pointer cursor */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* Same liquid glass style as main header */
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 0 rgba(255, 255, 255, 0.1);
}

/* Active circle (current section) */
.nav-circle.active {
    background-color: #D3AA2C;
    border-color: #D3AA2C;
    box-shadow: 0 0 15px rgba(211, 170, 44, 0.6);
    transform: scale(1.2);
}

/* Hover effect */
.nav-circle:hover {
    background-color: rgba(211, 170, 44, 0.3);
    border-color: rgba(211, 170, 44, 0.6);
    transform: scale(1.15);
}

/* Responsive sizes */
@media (max-width: 768px) {
    .nav-circle {
        width: 1mm;
        height: 1mm;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .nav-circle {
        width: 2mm;
        height: 2mm;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .nav-circle {
        width: 3mm;
        height: 3mm;
    }
}

@media (min-width: 1441px) {
    .nav-circle {
        width: 4mm;
        height: 4mm;
    }
}


/* ============================================
   COLOR CHANGE: CRIMSON → #D3AA2C
   ============================================ */

/* Update accent color variable */
:root {
    --accent-color: #D3AA2C !important;
}

/* Skills card category */
.card-category {
    color: #D3AA2C !important;
}

/* All hover states with accent color */
.work-card:hover .card-title {
    color: #D3AA2C !important;
}

.main-nav a:hover {
    color: #D3AA2C !important;
}

.mobile-bottom-nav nav a:hover {
    color: #D3AA2C !important;
}


/* ============================================
   HEADER TEXT COLOR - SMOOTH TRANSITION + VISIBILITY FIX
   ============================================ */

/* Header logo and nav - smooth color changes */
.main-header .logo,
.main-nav a {
    color: var(--text-color-dark) !important;
    /* Default: Dark text */
    transition: color 0.5s ease-in-out !important;
}

/* When header is collapsed at top - dark text for visibility */
.main-header:not(.expanded) .logo,
.main-header:not(.expanded) .main-nav a {
    color: var(--text-color-dark) !important;
    /* Dark text on bright glass */
}

/* When header is expanded - light text */
.main-header.expanded .logo,
.main-header.expanded .main-nav a {
    color: var(--text-color) !important;
    /* Light text */
}

/* Override for specific background detection */
.main-header.over-dark-bg .logo,
.main-header.over-dark-bg .main-nav a {
    color: var(--text-color) !important;
    /* Light text on dark */
}

/* When header is over light sections - dark text */
.main-header.over-light-bg .logo,
.main-header.over-light-bg .main-nav a {
    color: var(--text-color-dark) !important;
    /* Dark text on light */
}

/* HOVER AND ACTIVE STATES - ALWAYS YELLOWISH - MAXIMUM SPECIFICITY */
html body .main-nav a:hover,
html body .main-nav a.active,
html body .main-header.over-light-bg .main-nav a:hover,
html body .main-header.over-light-bg .main-nav a.active,
html body .main-header.over-dark-bg .main-nav a:hover,
html body .main-header.over-dark-bg .main-nav a.active {
    color: #D3AA2C !important;
    /* Hardcoded yellowish accent color */
    opacity: 1 !important;
}

html body .mobile-bottom-nav nav a:hover,
html body .mobile-bottom-nav nav a.active {
    color: #D3AA2C !important;
    /* Hardcoded yellowish accent color */
    opacity: 1 !important;
}

/* Mobile nav text transitions */
.mobile-bottom-nav nav a {
    transition: color 0.5s ease-in-out !important;
}