*,
*::before,
*::after {
    box-sizing: border-box;
}

html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

:root {
    --color-bg: #08070d;
    --color-card: #120f1c;
    --color-accent: #a78bfa;
    --color-accent-dark: #2e2252;
    --color-text: #ffffff;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    width: 100%;
    opacity: 0;
    transition: background-color 0.6s ease, color 0.6s ease, opacity 0.5s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/*
 * Theme-switch sync: dozens of elements use Tailwind's bare .transition-colors
 * utility (defaults to 150ms) while the body/.glass cards transition over
 * 500-600ms, so the page visibly split into a half-light/half-dark state for
 * a few hundred ms during a theme toggle. Force a single shared duration for
 * just the color-related properties so every element recolors in lockstep.
 * Transform/opacity transitions (hover lifts, reveal animations, etc.) are
 * left untouched so hover interactions stay fast and responsive.
 */
.transition-colors {
    transition-duration: 0.6s !important;
}

section {
    scroll-margin-top: 80px;
}