/* ============================================
   Green Energy Revolution - Global Styles
   ============================================ */

/* --- Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Custom Properties (CSS Variables) --- */
:root {
    --color-primary: #36444f;
    --color-primary-container: #4d5b67;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #c4d2e1;

    --color-secondary: #a43e00;
    --color-secondary-container: #fd712a;
    --color-on-secondary: #ffffff;
    --color-secondary-fixed: #ffdbcd;
    --color-secondary-fixed-dim: #ffb596;

    --color-tertiary: #004d10;
    --color-tertiary-container: #13671f;
    --color-tertiary-fixed: #a3f69c;
    --color-tertiary-fixed-dim: #88d982;

    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;

    --color-surface: #fbf9f8;
    --color-surface-dim: #dcd9d9;
    --color-surface-bright: #fbf9f8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f6f3f2;
    --color-surface-container: #f0eded;
    --color-surface-container-high: #eae8e7;
    --color-surface-container-highest: #e4e2e1;
    --color-surface-variant: #e4e2e1;

    --color-on-surface: #1b1c1c;
    --color-on-surface-variant: #43474b;
    --color-background: #fbf9f8;
    --color-on-background: #1b1c1c;

    --color-outline: #74777c;
    --color-outline-variant: #c4c7cb;

    --color-inverse-surface: #303030;
    --color-inverse-on-surface: #f3f0f0;
    --color-inverse-primary: #bac8d6;

    --font-headline: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* --- Global Styles --- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--color-secondary-fixed);
    color: var(--color-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Material Icons Setup --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Utility Classes --- */
.glass-panel {
    backdrop-filter: blur(12px);
    background: rgba(251, 249, 248, 0.8);
}

.bg-gradient-industrial {
    background: linear-gradient(135deg, #36444f 0%, #4d5b67 100%);
}

.hero-text-overlay {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 40%,
            rgba(255, 255, 255, 0) 100%);
}

/* --- Scroll Animations --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

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

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

/* --- Stagger Delays --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-container);
}

::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}