/**
 * Sections - Base styles for alternating sections with 3D effects and paper texture
 */

/* Tech grid pattern - replaces paper texture for a precision developer-tool canvas */
:root {
    --paper-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)' opacity='0.06'/%3E%3C/svg%3E");
    --paper-texture-3d: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise3D'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise3D)' opacity='0.06'/%3E%3C/svg%3E");
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: var(--grid-bg);
    background-size: 32px 32px;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

/* Base section styles */
section {
    position: relative;
    transition: background 0.3s ease;
}

/* Sections with 3D effect background */
.section-with-3d {
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.section-with-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grid-bg);
    background-size: 32px 32px;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

/* White sections with paper texture */
.section-white {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

body.dark-mode .section-white {
    background: var(--color-bg-secondary);
}

.section-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grid-bg);
    background-size: 32px 32px;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.section-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 50% 0%, rgba(102, 126, 234, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 0% 50%, rgba(0, 212, 255, 0.015) 0%, transparent 50%),
        radial-gradient(circle at 100% 50%, rgba(74, 144, 226, 0.015) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

/* Content wrapper to ensure proper z-index */
.section-content {
    position: relative;
    z-index: 1;
}

/* Smooth transitions between sections */
section + section {
    margin-top: 0;
}

/* 3D container full width - covers entire viewport */
#threejs-container,
#model-particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#model-particles-container {
    z-index: 1;
}

@media (max-width: 768px) {
    #threejs-container,
    #model-particles-container {
        height: 100vh;
    }
}

#threejs-container canvas,
#model-particles-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Ensure sections content is above 3D effects */
.hero,
.features-section,
.how-it-works-section,
.multimedia-section,
.use-cases-section,
.testimonials-section,
.cta-section-wrapper {
    position: relative;
    z-index: 2;
}

/* Section content wrapper */
.section-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Smooth gradient transitions between sections */
.section-white {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95) 0%,
        #ffffff 20%,
        #fafafa 50%,
        #ffffff 100%
    );
}

body.dark-mode .section-white {
    background: linear-gradient(
        180deg,
        var(--color-bg-secondary) 0%,
        var(--color-bg-tertiary) 50%,
        var(--color-bg-secondary) 100%
    );
}

.section-with-3d {
    background: linear-gradient(
        180deg,
        var(--color-bg) 0%,
        var(--color-bg-secondary) 50%,
        var(--color-bg) 100%
    );
}

/* Override individual section backgrounds to use new pattern */
.how-it-works-section,
.multimedia-section,
.use-cases-section,
.testimonials-section {
    background: transparent !important;
}

.how-it-works-section::before,
.multimedia-section::before,
.use-cases-section::before,
.testimonials-section::before {
    display: none;
}

/* Features section - white background 100% width */
.features-section {
    background: #ffffff !important;
    width: 100%;
}

[data-theme="dark"] .features-section {
    background: var(--color-bg-secondary) !important;
}

.features-section::before {
    display: none;
}

/* Hero section keeps its own styling but with paper texture */
.hero {
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-secondary) 50%, var(--color-bg) 100%);
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grid-bg);
    background-size: 32px 32px;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}