/* this is the style sheet served for this route ilovepsx.com/portfolio-tracking */


/* DESIGN SYSTEM TOKENS (Re-declared in case you wiped the file entirely) */
:root {
    --color-bg: #FDFBF7;
    --color-surface: #FFFFFF;
    --color-dark: #1C1917;
    --color-text-primary: #1C1917;
    --color-text-secondary: #78716C;
    --color-border: #E7E5E4;
    --color-orange: #DC7041;
    --color-orange-hover: #C26139;
    --color-green: #166534;
    --color-red: #DC2626;
    --color-cream: #FDFBF7;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* S02: HERO ENTRY ANIMATION CLASSES */
#hero-left {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
#hero-left.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#hero-right {
    transition: opacity 0.5s ease-out 0.1s, transform 0.5s ease-out 0.1s;
}
#hero-right.is-visible {
    opacity: 1;
    transform: scale(1);
}

.hero-chip {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.hero-chip.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* css for the portfolio overview section */

/* Append to existing CSS */

/* --- GLOBAL SCROLL REVEAL UTILITIES --- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    /* transition-delay is handled via inline styles for stagger effects */
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}