/* Critical CSS for BizzBit - Above the fold styles only */

/* Reset and base styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

/* Critical above-the-fold styles */
.hero-section {
    min-height: 100vh;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.navbar-gradient {
    background: linear-gradient(to right, #0d1b3f, #1e3a8a);
}

/* Critical animations */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Performance optimizations */
.parallax-bg {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 100vh 100vw;
}

/* Reduce repaints */
.fade-in,
.slide {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize font loading */
@font-face {
    font-family: 'system-ui';
    font-display: swap;
    src: local('system-ui');
}

/* Critical text styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-display: swap;
    font-size: inherit;
}

h1 {
    font-size: 2.5rem;
    contain: layout style paint;
    will-change: transform;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* Hero content optimization */
#hero-content {
    contain: layout style paint;
    will-change: transform;
}

#hero-title {
    contain: layout style paint;
    will-change: transform;
}

/* Reduce layout shifts */
img {
    max-width: 100%;
    height: auto;
}

/* Optimize animations */
.slide {
    will-change: transform, opacity;
}

/* Reduce paint complexity */
.parallax-bg {
    contain: layout style paint;
}