/* --- Material You Base Styles --- */
:root {
    --md-sys-color-primary: #2D5A27;
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
    background-color: #F8FAF7;
    overflow-x: hidden;
    font-feature-settings: "cv11", "ss01";
}

/* Glassmorphism Implementation */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark-glass-panel {
    background: rgba(25, 28, 25, 0.8);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* MD3 Ripple Effect Simulation */
.md3-ripple {
    position: relative;
    overflow: hidden;
}

.md3-ripple::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.md3-ripple:active::after {
    opacity: 1;
}

/* Custom Scrollbar (MD3 Style) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: #2D5A27;
    border-radius: 10px;
    border: 3px solid #f0f0f0;
}

/* Animation Keyframes */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

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

@keyframes scan-line {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(400%);
    }
}

.scan-line {
    background: linear-gradient(180deg, transparent, #7ED321, transparent);
    height: 100px;
    width: 100%;
    position: absolute;
    animation: scan-line 3s linear infinite;
}

/* Three.js Layer Management */
#globe-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Typography Polish */
.text-hero {
    line-height: 1.05;
    letter-spacing: -0.04em;
}

/* SVG Patterns */
.bg-leaf-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 20C50 20 55 35 70 35C85 35 85 50 85 50C85 50 70 50 70 65C70 80 50 80 50 80C50 80 30 80 30 65C30 50 15 50 15 50C15 50 15 35 30 35C45 35 50 20 50 20Z' fill='%232d5a27' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* Card Perspective Effect */
.perspective-card {
    perspective: 1000px;
}

.perspective-card:hover .card-content {
    transform: rotateY(5deg) rotateX(5deg);
}

.card-content {
    transition: transform 0.4s var(--transition-bounce);
}

/* Language Toggle Button */
#lang-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
}

/* English Version Font Scale */
html[lang="en"] #hero-title {
    transform: scale(0.8);
    transform-origin: top left;
}

html[lang="en"] #hero-desc {
    margin-top: -5rem !important;
}