@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
/* Ocean Theme CSS */
:root {
    --ocean-dark: #0a1628;
    --ocean-deep: #1a3a5c;
    --ocean-blue: #2d6a9f;
    --ocean-light: #4a90c2;
    --ocean-cyan: #00bcd4;
    --ocean-teal: #008080;
    --ocean-foam: #e0f7fa;
    --ocean-sand: #f5f5dc;
    --ocean-coral: #ff7f50;
    --ocean-white: #ffffff;
    --ocean-gray: #b0bec5;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:  
        url('../img/quadromadre.jpg') no-repeat top center,
        linear-gradient(180deg, var(--ocean-dark) 0%, var(--ocean-deep) 50%, var(--ocean-blue) 100%);    
    background-attachment: fixed;
    background-size: cover;
    color: var(--ocean-white);
    min-height: 100vh;
    line-height: 1.6;
}

.container {
    /* max-width: 1200px; */
    container-type: scroll-state;
    container-name: scroller;
    margin: 0 auto;
    padding: 0 1px;
}

/* Header Styles */
header {    
    display: flex;    
    justify-content: space-around;
    align-items: center;
    background: rgba(10, 22, 40, 0.9);
    background: var(--ocean-blue);
    opacity: 0.9;
    padding: 20px 10px;    
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--ocean-cyan);
    transition: .5s ease-in-out opacity;
    font-family: "Monoton", sans-serif;    
}
header a {     
    color: white ; display: flex; align-items: center; font-weight: bold; text-decoration: none;
    &:hover {color: var(--ocean-cyan); transition: .3s ease-in-out color;}
}

header h1 {    
    color: var(--ocean-white);
    font-size: 2.5rem;
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

/* Language Switcher */
.language-switcher {
    display: flex;
    gap: 10px;
    margin-left: 10px;
    align-items: center;
    margin-top: 10px;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--ocean-cyan);
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn img {
    width: 30px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
}

.lang-btn:hover {
    background: rgba(0, 188, 212, 0.3);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

.lang-btn.active {
    background: rgba(0, 188, 212, 0.5);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.6);
    border-color: var(--ocean-white);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin-top: 15px;
}

nav a {
    color: var(--ocean-white);
    color: var(--ocean-blue);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    position: relative;
}

nav a:hover {
    color: var(--ocean-cyan);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ocean-cyan);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

/* Main Content */
main {
    padding: 40px 0;
}

/* Hero Section */
.hero {
    /* the bigger the perspective the less distorted it'll be*/
    perspective: 1800px; 
    text-align: center;
    padding: 40px 0px;
    margin: auto 40px 40px;    
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.5) 0%, rgba(45, 106, 159, 0.6) 100%);    
    border-radius: 20px;    
    border: 1px solid rgba(0, 188, 212, 0.3);
    ul {
        padding: 5%;
        margin: 2% 0;
        width: 100%;
        text-align: left;
        list-style: none;
        background-color: var(--ocean-cyan);
        color: var(--ocean-white);
        border-radius: 5px;
        li {
            padding: 10px; font-weight: bold; font-size: 20px; margin-left: -130%; transition: 1.2s ease-in-out all; background-color: var(--ocean-deep); width: 100%;            
        }  
        
    }
}
@media screen and (max-width: 850px) {
    .hero ul.ocean-info-item { margin-left: 130%; width: auto;}
}

.hero h2 {
    font-size: 2rem;
    font-family: "Monoton", sans-serif;
    margin-bottom: 20px;
    color: var(--ocean-sand);
    /* background-color: var(--ocean-cyan); */
    text-shadow: 0 0 20px rgba(0, 188, 212, 0.3);
}
.hero p {font-size: 1.3rem; margin-bottom: 30px;}
.terra {    
    color: var(--ocean-white);    
    background-color: black;
    background-image: url('../img/terra.png');
    background-size: 15%;
    background-position: 100px 10px;    
    background-position: center center;
    text-transform: uppercase;
    text-shadow: 7px 3px 5px var(--ocean-light);
    font-weight: bold;
    height: 80vh;
    display: flex;    
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;    
}
@media screen and (min-width:851px) {
    .terra {
        transform-style: preserve-3d; transform-origin: top; animation: rotateEarth 2s both;
    }
}

@keyframes rotateEarth {
    0% { 
        scale: 0.1; transform:rotateX(360deg); transform: rotateY(360deg); 
        /* -webkit-box-shadow: 0px 3px 0px 2px rgba(0,0,0,0.1), 0px 6px 0px 4px rgba(0,0,0,0.1), 0px 9px 0px 6px rgba(0,0,0,0.1), 0px 12px 0px 8px rgba(0,0,0,0.1), 0px 15px 0px 10px rgba(0,0,0,0.1), 0px 18px 0px 12px rgba(0,0,0,0.1), 0px 21px 0px 14px rgba(0,0,0,0.1), 0px 24px 0px 16px rgba(0,0,0,0.1), 0px 27px 0px 18px rgba(0,0,0,0.1), 0px 30px 0px 20px rgba(0,0,0,0.1), 5px 5px 15px 5px rgba(0,0,0,0);  */
    box-shadow: 
        0px 30px 0px 100px rgba(0,0,0,0.6), 
        0px 6px 0px 200px rgba(0,0,0,0.6), 
        0px 9px 0px 300px rgba(0,0,0,0.6),
        0px 12px 0px 400px rgba(0,0,0,0.6), 
        0px 15px 0px 500px rgba(0,0,0,0.6), 
        0px 18px 0px 600px rgba(0,0,0,0.6), 
        0px 21px 0px 700px rgba(0,0,0,0.6), 
        0px 24px 0px 800px rgba(0,0,0,0.6), 
        0px 27px 0px 900px rgba(0,0,0,0.6), 
        0px 30px 0px 1000px rgba(0,0,0,0.6), 
        5px 5px 15px 1100px rgba(0,0,0,0);

    }
    25% {
        scale:0.4;
        /* box-shadow: 200px 200px 10px black, 100px 100px 10px black; */
    }
    50% {
        scale: 0.6;
        /* box-shadow: 100px 100px 10px black, 50px 50px 10px black;; */
    }
    75% {
        scale:0.8;
        /* box-shadow: 50px 50px 5px black, 25px 25px 10px black; */
    }
    100%{ scale: .9; box-shadow: 1px 1px 0px black;} 
}

.statement-card {
    background-color: var(--ocean-deep);
    padding: 5%;
    margin: 100px 0 50px;
}
.cta-button, .open-links {
    background: linear-gradient(135deg, var(--ocean-cyan) 0%, var(--ocean-teal) 100%);
    color: var(--ocean-white);
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

.cta-button:hover, .open-links:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
}

.cta-button:active, .open-links:hover {
    transform: translateY(-1px);
}

/* Features Section */
.features {
    overflow: hidden; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;      
    margin: 10% auto;
    cursor: pointer;
}

.feature-card {       
    background: rgba(26, 58, 92, 0.6);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(0, 188, 212, 0.2);
    transition: all 0.9s ease;
    backdrop-filter: blur(5px);
    display: flex; flex-direction: column;
    align-items: center;  justify-content: flex-end;
    a { justify-self: end;}
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--ocean-cyan);
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.3);
}

.feature-card h3 {
    color: var(--ocean-cyan);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.feature-card p {
    color: var(--ocean-foam);
    line-height: 1.8;
}
.left-card {margin-left: -200%;} .right-card {margin-right: -250%;}
.open-links {
    margin-top: 5%;
    padding: 7px 20px; text-decoration: none;font-size: 1em;
}
/* Footer */
/* footer {
    background: rgba(10, 22, 40, 0.95);
    padding: 30px 0;
    text-align: center;
    margin-top: 60px;
    border-top: 2px solid var(--ocean-cyan);
}


footer p {
    color: var(--ocean-white);
} */

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
        font-size: 14px;
    }
    header a {
        font-size: 12px;
    }

    .language-switcher {
        margin-top: 5px;
    }

    .lang-btn img {
        width: 25px;
        height: 17px;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
    }

    .hero h2 {
        font-size: 2rem;
    }
    .hero ul li {
        font-size: 14px;
    }
    .hero p {
        font-size: 1.1rem;
    }
    ul {
        margin: 2% auto;
        width: auto;
    }
    .terra {
        background-size: 50%;
        font-size: 1em;
        height: 40vh;
    }
    .statement-card {
        h1 {
            font-size: 1.5em;
        }
    }
    .features {
        grid-template-columns: 1fr;
    }
}

/* Wave Animation */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero {
    animation: wave 3s ease-in-out infinite;
}






/* implementing wave animation and design */
footer {    
    & p {
        font-size: 20px;
        text-align: center;
        font-family: "Monoton", sans-serif;
        font-style: oblique;
    }
    /* margin-top: 100px; */
    position: relative;
    position: fixed;
    opacity: 0;
    bottom: 0;
    width: 100%;
    height: 140px;
    background: var(--ocean-deep);
    transition: .5s linear opacity;
    & .wave {
        position: absolute;
        top: 40px;
        width: 100%;
        height: 100px;
        background: url('../img/wave.png');
        background-size: 1000px 100px;
    }
}
#wave1 {
            z-index: 1; opacity: 1; animation: waveanim 4s linear infinite;
        }
#wave3 {
            z-index: 999; opacity: .2; bottom: 15px; animation: waveanim 3s linear infinite;
        }
#wave2 {
            z-index: 998;  opacity: .5; bottom: 10px; animation: waveanim2 4s linear infinite;
        }
#wave4 {
            z-index: 999;  opacity: .7; bottom: 20px; animation: waveanim2 4s linear infinite;
        }
@keyframes waveanim
{
    0% {
        background-position: 1000px;
    }
    100% {
        background-position: 0;
    }
}

@keyframes waveanim2
{
    0% {
        background-position: 0px;
    }
    100% {
        background-position: 1000px;
    }
}



.back-to-top {
    position: fixed; 
    bottom: 10px; left: 90%;padding: 10px;
    opacity: 0;
    z-index: 9999; 
    font-size: 2em;
    width: 70px;
    background-color: var(--ocean-cyan); color: var(--ocean-sand);box-shadow: 0px 0px 10px var(--ocean-cyan);
    border: 0; border-radius: 100%;
    transition: .5s linear all;
    &:focus {border: none; outline: none;}
    &:hover {
        background-color: var(--ocean-sand); box-shadow: 0px 0px 10px var(--ocean-sand);
        color: var(--ocean-cyan);
        cursor: pointer;        
    }
}
@media screen and (max-width:850px) {
    .back-to-top {
        bottom: 20px; left: 50%;padding: 10px; z-index: 9999999999999;
        background-color: rgba(0, 188, 212, 0.2);
        font-size: 1.5em;
        margin-left: -25px;
        width: 50px;
        opacity: 1;
    }
}

/* modal exemplo de poluições */
.modal-pollution { z-index: -1; opacity: 0; transition: .6s ease-in-out all;
height: 0; width: 0; top: 0; left: 0; border: 2px ridge lightslategray;}
.active-modal  {
    opacity: 1;
    z-index: 1000000;
    position: fixed;    
    background-color: rgba(10, 22, 40, 0.9); /*fallback*/
    background: rgba(26, 58, 92, 0.6);
    border-radius: 5px;
    top: 2px;
    left: 10%;
    width: 80%;
    height: 90vh;
    margin: 1% auto;    
    backdrop-filter: blur(50px);
    ul {        
        li {
            
            display: flex; justify-content: space-around; align-items: center; padding: 5px;}
    }
    p {font-size: 22px; }
    img {width: 15%; border: 2px solid var(--ocean-cyan);  border-radius: 10px;}
    h2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--ocean-foam);
        background-color: var(--ocean-deep);
        padding-right: 10px; padding-left: 10px;
        #close-btn {     
            z-index: 10000001;       
            background-color: lightslategray    ;
            border-radius: 999em;
            padding: 2px;
            transition: 0.5s ease-in-out all;
            cursor: pointer;
            &:hover{background-color: transparent; color: red;}
        }
        
    }
}
@media screen and (max-width: 850px) {
    .modal-pollution {           
        p {font-size: 14px; }
        img {width: auto;}
        ul {
            margin-top: 10%;
            li {
                align-items: center;
                justify-content: space-around;
                margin: 5px 0;                
                img {
                    height: 50px;
                }
            }
        }
    }
    .active-modal {height: 50vh;margin-top: 5%;}
    /* .active-modal  {
    opacity: 1;
    z-index: 1000000;
    position: fixed;    
    background-color: rgba(10, 22, 40, 0.9); 
    background: rgba(26, 58, 92, 0.6);
    border-radius: 5px;
    top: 2px;
    left: 10%;
    width: 80%;
    height: 500px;
    margin: 1% auto;    
    backdrop-filter: blur(50px);
    
} */
}