/* Root variables */
:root {
    --theme-primary: #ffffff;
    --theme-secondary: #112a46;
    --theme-brand: #12a0ff;
    --brand-brand: #12a0ff;
    --brand-secondary: #112a46;
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--theme-secondary);
    background-color: var(--theme-primary);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Typography - Custom Font Styles */
h1 {
    font-family: "Libre Baskerville", serif;
    font-weight: 700;
    /* line-height: 1.2; Removed to allow Tailwind overrides */
}

h2 {
    font-family: "Libre Baskerville", serif;
    font-weight: 700;
    line-height: 1.3;
}

h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    line-height: 1.4;
}

p,
span,
a,
button,
div {
    font-family: "Poppins", sans-serif;
}

/* Glassmorphism utility classes - Light Mode */
.glass-light {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(17, 42, 70, 0.1);
}

.glass-medium {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(17, 42, 70, 0.15);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px 0 rgba(17, 42, 70, 0.2);
}

/* Glassmorphism utility classes - Dark Mode */
.dark .glass-light {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.dark .glass-medium {
    background: rgba(17, 42, 70, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.dark .glass-strong {
    background: rgba(17, 42, 70, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* Animation keyframes */
@keyframes blob {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(100px, -50px) scale(1.1);
    }
    50% {
        transform: translate(-50px, 100px) scale(1.2);
    }
    75% {
        transform: translate(50px, 50px) scale(1.1);
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-blob {
    animation: blob 20s ease-in-out infinite;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animation-delay-1000 {
    animation-delay: 1s;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Scroll animation classes */
.scroll-animate {
    opacity: 0;
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.scroll-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.scroll-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.scroll-scale {
    opacity: 0;
    transform: scale(0.9);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.scroll-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.scroll-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

/* When element becomes visible */
.scroll-animate.is-visible,
.scroll-fade-up.is-visible,
.scroll-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

.scroll-slide-left.is-visible,
.scroll-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation delays for children */
.scroll-fade-up:nth-child(1),
.scroll-scale:nth-child(1),
.scroll-slide-left:nth-child(1),
.scroll-slide-right:nth-child(1) {
    transition-delay: 0.1s;
}

.scroll-fade-up:nth-child(2),
.scroll-scale:nth-child(2),
.scroll-slide-left:nth-child(2),
.scroll-slide-right:nth-child(2) {
    transition-delay: 0.2s;
}

.scroll-fade-up:nth-child(3),
.scroll-scale:nth-child(3),
.scroll-slide-left:nth-child(3),
.scroll-slide-right:nth-child(3) {
    transition-delay: 0.3s;
}

.scroll-fade-up:nth-child(4),
.scroll-scale:nth-child(4) {
    transition-delay: 0.4s;
}

.scroll-fade-up:nth-child(5),
.scroll-scale:nth-child(5) {
    transition-delay: 0.5s;
}

.scroll-fade-up:nth-child(6),
.scroll-scale:nth-child(6) {
    transition-delay: 0.6s;
}

/* Custom utilities */
.text-transparent {
    color: transparent;
}

/* Section background utilities for better contrast */
.section-bg-light {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(18, 160, 255, 0.03),
        rgba(255, 255, 255, 0)
    );
}

/* Enhanced text contrast for light mode */
.text-contrast {
    color: #112a46;
}

/* Badge styles for better visibility */
.badge-light {
    background: rgba(18, 160, 255, 0.1);
    color: #112a46;
    border: 1px solid rgba(18, 160, 255, 0.2);
}

/* Smooth transitions */
a,
button {
    transition: all 0.3s ease;
}

.timeline-line {
    transition: height 0.3s ease-out;
}
.step-container {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}