/* Base Styles */
body {
    background-color: #F8F9FE;
    color: #191C20;
    overflow-x: hidden;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

html {
    scroll-behavior: smooth;
}

.text-balance {
    text-wrap: balance;
}

/* Dialog Animation */
dialog {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.2, 0.0, 0, 1.0), transform 0.4s cubic-bezier(0.2, 0.0, 0, 1.0);
}

dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
}

dialog::backdrop {
    background-color: rgba(13, 33, 55, 0.4);
    backdrop-filter: blur(8px);
}

/* Expressive Scroll Reveal Animations */
[class*="reveal-"] {
    transition: opacity 1s cubic-bezier(0.2, 0.0, 0, 1.0), transform 1s cubic-bezier(0.2, 0.0, 0, 1.0);
    will-change: opacity, transform;
}

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
}

.reveal-active {
    opacity: 1;
    transform: translate(0) scale(1);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* Spotlight Effect Utility */
.spotlight-card {
    background-image: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(40, 104, 216, 0.06),
            transparent 40%);
}