@import url('https://fonts.googleapis.com/css2?family=BBH+Bartle&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Zalando Sans Expanded", sans-serif;
    line-height: 1.4;
}
a {
    text-decoration: none;
}

/* text */
.text-primary {
    color: #93cb52;
}
.text-center {
    text-align: center;
}

/* Background color */

#background {
    background-color: #0C0F0A;
}









/* --- KICK & PULSE EFFECTS --- */

/* 1. The Kick Motion (Zoom In/Out) */
@keyframes kickBeat {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px #FF8C00;
    }
    5% {
        /* The "Hit" - fast expansion and bright flash */
        transform: scale(1.15); 
        color: #fff; /* Flashes white momentarily */
        text-shadow: 0 0 20px #FF8C00, 0 0 40px #FF4500;
    }
    50% {
        /* Slow release back to normal */
        transform: scale(1);
        text-shadow: 0 0 5px #FF8C00;
        color: inherit;
    }
    100% {
        transform: scale(1);
    }
}

/* 2. The Shockwave Effect (Ripples behind the text) */
@keyframes shockwave {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5); /* Expands wide */
        opacity: 0; /* Fades out completely */
    }
}

/* 3. The Class to apply to your H1 */
.kick-effect {
    display: inline-block; /* Vital for scale to work */
    position: relative;    /* Vital for the shockwaves to position correctly */
    
    /* Animation Settings */
    /* 0.5s is roughly 120 BPM. Change this number to make it faster/slower */
    animation: kickBeat 0.8s infinite; 
    
    /* This makes the beat feel snappy (Fast attack, slow decay) */
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* 4. Adding the Visual "Ghost" Bars behind the text */
.kick-effect::before,
.kick-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 140, 0, 0.2); /* Orange glow */
    border-radius: 8px;
    z-index: -1; /* Puts it behind the text */
}

.kick-effect::before {
    animation: shockwave 0.8s infinite ease-out;
}

.kick-effect::after {
    animation: shockwave 0.8s infinite ease-out;
    animation-delay: 0.2s; /* Starts slightly later for a "double ripple" */
}




/* --- SCROLL REVEAL ANIMATION --- */

/* 1. The starting state (Hidden) */
.reveal {
    opacity: 0;
    transform: translateY(50px); /* Moves element down 50px */
    transition: all 0.8s ease-out; /* Smooth transition duration */
    will-change: opacity, transform;
}

/* 2. The active state (Visible) */
.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Returns to original position */
}

/* --- CINEMATIC STAGGER EFFECT (For Cards & Steps) --- */
/* This makes the 2nd and 3rd cards wait a bit before appearing */

.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }










#navbar {
    background: #2B2F26;
    color: #D9D9D9;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    padding: 1rem;
    z-index: 1000; /* Hoiab navbari kõige peal */
}

/* --- Peamenüü (UL) --- */
#navbar > ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* --- Tavalised lingid (Avaleht, Kontakt) --- */
#navbar > ul > li > a {
    color: #D9D9D9;
    text-decoration: none; 
    padding: 0.75rem 1.5rem;
    margin: 0 0.25rem;
    font-weight: bold;
    display: block;
    transition: background 0.3s ease; /* Sujuv värvimuutus */
}

/* Tavaliste linkide hover */
#navbar > ul > li > a:hover {
    background: #FF8C00;
    color: #D9D9D9; 
}

/* --- RIPPMENÜÜ (DROPDOWN) --- */

/* 1. Konteiner nupule ja menüüle */
.dropdown-wrapper {
    position: relative; 
    display: inline-block;
}

/* 2. Ikooniga nupp (kolm täppi) */
.icon-link {
    cursor: pointer;
    padding: 10px 1.5rem; /* Sama suurus mis teistel linkidel */
}

/* 3. Rippmenüü sisu (Vaikimisi PEIDUS) */
.dropdown-content {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: #2B2F26; /* Sama mis navbar */
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    border-radius: 0 0 4px 4px;
    
    /* Tühistame peamenüü flexi */
    flex-direction: column; 
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 1001;
}

/* See klass lisatakse JavaScriptiga (NÄITAB MENÜÜD) */
.dropdown-content.show {
    display: block !important; 
}

/* 4. Rippmenüü lingid */
.dropdown-content li {
    width: 100%;
}

.dropdown-content li a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    color: #D9D9D9;
    border-bottom: 1px solid #3e4236; /* Õrn joon vahele */
    margin: 0; /* Eemaldame peamenüü marginid */
}

/* Rippmenüü hover */
.dropdown-content li a:hover {
    background-color: #FF8C00;
    color: #fff;
}









/* Üldine box */
.box {
    position: relative;
    background: #2B2F26;
    padding: 5rem 1rem 1.5rem;
    margin: 2rem auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Sisemine kiht */
.box-layer {
    position: relative;
    background: #2F6B02;
    padding: 3rem 1.5rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Pealkiri – hõljub boxi kohal */
.box-main {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);

    background: #5F7F2A;
    padding: 0.75rem 1.5rem;
    width: fit-content;

    text-align: center;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(95,127,42,0.9);
    z-index: 10;    
}

/* Tekst */
.box-text {
    margin-top: 1rem;
    padding: 1rem;
    background: #2F6B02;
    border: 2px solid #5F7F2A;
    border-radius: 4px;
    box-shadow: 0 6px 2px #2B2F26;
}






/* Avalehe css */

#showcase {
    background-image: url("../img/Backg2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-attachment: fixed; 
    overflow: hidden; 

    height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF8C00;
    text-align: center;
}
#showcase h1 {
    font-family: "Funnel Sans", sans-serif;
    font-size: 4rem;

    display: inline-block;
    border-bottom: 4px solid #ffffff;
    padding-bottom: 0.3rem;
    text-shadow: 0 0 5px #FF8C00;
}
#showcase h2 {
    text-align: left;
    padding-left: 12rem;
    padding-top: 4rem;
    color: #D9D9D9;
}
#showcase p {
    padding-top: 1rem;
    font-size: larger;
    padding-left: 10%;
    padding-right: 10%;
    color: #D9D9D9;
}
@media (max-width: 768px) {
    #showcase h2 {
        padding-left: 0;
        text-align: center; /* Või jäta vasakule, aga väiksema paddinguga */
    }
    #showcase h1 {
        font-size: 2.5rem; /* Väiksem pealkiri mobiilis */
    }
}








/* info */

#info {
    color: #D9D9D9;
    padding: 1rem;
}
#info p {
    font-size: larger   ;
    text-align: left;
    padding: 1rem;
}

.info-img {
    background-color: #0C0F0A;
    width: 100%; 
    max-width: 100px;
    display: block;
    margin: 1rem;
    border-radius: 8px;
    box-shadow: 0 5px 2px #2B2F26;
}







/* Teemad */
#topic {
    background-image: url("../img/pic2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #D9D9D9;
    padding: 1rem;
}
#topic h2 {
    width: fit-content;
    margin: 0 auto; 
    border-bottom: 4px solid #ffffff;
    padding: 1rem;
    text-align: center;
}

/* cardid */

.card-container {
    display: flex;          /* Kastid on kõrvuti */
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    
    /* See on oluline: kui ekraan on väike, lähevad kastid ise alumisele reale */
    flex-wrap: wrap; 
}

.card {
    background: #0C0F0A;
    padding: 15px; /* Väiksem padding sobib püstisele videole paremini */
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;

    /* Määrame laiuse */
    flex: 1;             /* Kastid püüavad olla võrdsed */
    min-width: 200px;    /* Minimaalne laius */
    max-width: 300px;    /* <--- OLULINE: Ära lase kastil liiga laiaks minna */
}

.card-media {
    width: 100%;            /* Täidab kasti laiuse */
    
    /* See teeb video püstiseks (TikTok/Reels formaat) */
    aspect-ratio: 9 / 16;   
    
    /* "cover" tagab, et video katab ala ilusti ega veni välja */
    object-fit: cover;      
    
    border-radius: 4px;
    margin-bottom: 10px;
    display: block;
}

.card h3 {
    color: #D9D9D9;
    font-size: 1.2rem;
    margin: 0;
}

/* Mobiilivaade: kui ekraan on kitsas, lähevad kastid üksteise alla */
@media (max-width: 600px) {
    .card-container {
        flex-direction: column;
    }
}







/* Stepid */

#steps {
    color:#D9D9D9;
    padding: 1rem;
}
#steps h2 {
    margin: center;
}

/* --- Konteinerid --- */
.steps-container {
    display: flex;
    justify-content: center; /* Kastid keskele */
    gap: 30px; /* Vahe kastide vahel */
    flex-wrap: wrap; /* Mobiilis lähevad üksteise alla */
    margin-top: 2rem; /* Ruumi pealkirja ja kastide vahele */
    margin-bottom: 2rem; /* Ruumi kastide ja video vahele */
}

/* --- Rohelised kastikesed (sammud) --- */
.step-card {
    position: relative; /* See on vajalik, et number püsiks kasti küljes */
    background: #2F6B02; /* Sinu roheline taust */
    padding: 2rem 1.5rem;
    border-radius: 8px;
    width: 200px; /* Või pane flex: 1, kui tahad venitada */
    text-align: center;
    border: 1px solid #5F7F2A; /* Kerge ääris */
    margin-top: 20px; /* Teeme ruumi numbrile, mis on kasti kohal */
}

/* --- Numbrid (1. 2. 3.) --- */
.step-number {
    position: absolute;
    top: -25px; /* Tõstab numbri kasti servale (pool sisse, pool välja) */
    left: 50%;
    transform: translateX(-50%); /* Tsentreerib täpselt keskele */
    
    background: #5F7F2A; /* Numbri taustavärv (heledam roheline) */
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Teeb ringiks */
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 6px 2px #2B2F26;
}

/* --- Suur video kast all --- */
.video-area {
    /* Eemalda vana taustvärv, kui videot näidatakse */
    /* background: #D9D9D9;  <- võid selle välja kommenteerida või alles jätta laadimise ajaks */
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    
    /* TÄHTIS: Eemalda või muuda height 'auto'-ks, et video proportsioonid säiliks */
    height: auto; 
    padding-bottom: 2rem; /* Väike vahe alla */
}

/* Lisa see uus osa, et video oleks alati 100% kasti laiusest */
.video-area video {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Et nurgad oleksid samasugused nagu su kastil */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Väike vari ilu pärast */
}



/* Preview */

#underground-start,
#edm-start,
#cloudrap-start {
    color:#D9D9D9;
    padding: 1rem;
}

#underground-start h1,
#edm-start h1,
#cloudrap-start h1 {
    text-align: center;
    font-weight: bold;
    border-bottom: 4px solid #ffffff;
}

#underground-start h2,
#edm-start h2,
#cloudrap-start h2 {
    text-align: center;
    font-weight: bold;
    margin: 1rem;
}











#underground {
    color: #D9D9D9;
    padding: 1rem;
}
#underground h3 {
    border-bottom: 1px solid #D9D9D9;
    font-weight: 900;
    width: fit-content;
}
#underground h4{
    position: relative;
    border-bottom: 3px solid #5F7F2A;
    width: fit-content;
    font-weight: 700;
}
#underground p {
    text-align: left;
    padding: 1rem;
}
#underground ul {
    margin: 1rem;
}
#underground .box-layer {
    /* 1. Tume filter + Pilt */
    /* Filter on vajalik, et tekst pildi pealt välja paistaks */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../img/BG4.png");
    
    /* 2. Katab terve kasti */
    background-size: cover;
    
    /* 3. POSITSIOONIMINE (Kõige tähtsam osa 1080x1920 pildi puhul) */
    /* Esimene sõna 'center' joondab horisontaalselt keskele */
    /* Teine number (nt 20%) määrab vertikaalse koha ülevalt alla */
    background-position: center 20%; 
    
    background-repeat: no-repeat;
    
    /* Need on sinu olemasolevad stiilid, jäta need alles: */
    position: relative;
    padding: 3rem 1.5rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
/* Konteiner parempoolse video jaoks */
.video-right {
    display: flex;
    justify-content: flex-end; /* See lükkab video paremasse serva */
    width: 100%;               /* Võtab vanemkasti laiuse */
    margin-bottom: 2rem;
    padding: 0 1rem;           /* Väike varu äärtest */
}

/* Konteiner vasakpoolse video jaoks */
.video-left {
    display: flex;
    justify-content: flex-start; /* See lükkab video vasakusse serva */
    width: 100%;                 /* Võtab vanemkasti laiuse */
    margin-bottom: 2rem;
    padding: 0 1rem;
}

/* Ühine stiil videote suurusele nendes kastides */
.video-right video, 
.video-left video {
    width: 50%;         /* Video on pool ekraani laiusest (muuda vajadusel 40-60%) */
    max-width: 450px;   /* Et suurel ekraanil liiga hiiglaseks ei läheks */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Vari ilu jaoks */
}

/* MOBIILIVAADE: Mobiilis on videod alati keskel ja suured */
@media (max-width: 768px) {
    .video-right, 
    .video-left {
        justify-content: center; /* Joondab keskele */
    }
    
    .video-right video, 
    .video-left video {
        width: 100%; /* Mobiilis täislaius */
    }
}
/* --- KÕRVUTI PAIGUTUS --- */

.row-container {
    display: flex;
    align-items: center;    /* Joondab vertikaalselt keskele */
    justify-content: space-between; 
    gap: 2rem;              /* Vahe teksti ja video vahel */
    margin-bottom: 3rem;    /* Vahe järgmise sektsiooniga */
}

/* Klass, mis pöörab pooled ümber */
.row-container.reverse {
    flex-direction: row-reverse; 
}

/* Teksti osa */
.row-container .box-text {
    flex: 1;                
    width: 50%;             
    margin-top: 0;          /* Eemaldame vana margini */
}

/* Video konteiner */
.row-container .video-box {
    flex: 1;
    width: 50%;
    display: flex;
    justify-content: center;
}

/* Video ise */
.row-container .video-box video,
.row-container .video-box img {
    width: 100%;                
    max-width: 450px;       
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    object-fit: cover; /* See tagab, et pilt ei veniks välja */
}

/* MOBIILIVAADE */
@media (max-width: 900px) {
    .row-container, 
    .row-container.reverse {
        flex-direction: column; /* Paneb asjad üksteise alla tagasi */
    }
    
    .row-container .box-text, 
    .row-container .video-box {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Mobiilis toome video teksti alla ka reverse puhul, 
       kui soovid videot alati all näha, kasuta column-reverse asemel column */
    .row-container.reverse {
        flex-direction: column; 
    }
}






#edm {
    color:#D9D9D9;
    padding: 1rem;
}
#edm h3 {
    border-bottom: 1px solid #D9D9D9;
    font-weight: 900;
    width: fit-content;
}
#edm h4{
    position: relative;
    border-bottom: 3px solid #5F7F2A;
    width: fit-content;
    font-weight: 700;
}
#edm p {
    text-align: left;
    padding: 1rem;
}
#edm ul {
    margin: 1rem;
}
#edm .box-layer {
    /* 1. Tume filter + Pilt */
    /* Filter on vajalik, et tekst pildi pealt välja paistaks */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../img/BG5.png");
    
    /* 2. Katab terve kasti */
    background-size: cover;
    
    /* 3. POSITSIOONIMINE (Kõige tähtsam osa 1080x1920 pildi puhul) */
    /* Esimene sõna 'center' joondab horisontaalselt keskele */
    /* Teine number (nt 20%) määrab vertikaalse koha ülevalt alla */
    background-position: center 20%; 
    
    background-repeat: no-repeat;
    
    /* Need on sinu olemasolevad stiilid, jäta need alles: */
    position: relative;
    padding: 3rem 1.5rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}






#cloudrap {
    color:#D9D9D9;
    padding: 1rem;
}
#cloudrap h3 {
    border-bottom: 1px solid #D9D9D9;
    font-weight: 900;
    width: fit-content;
}
#cloudrap h4{
    position: relative;
    border-bottom: 3px solid #5F7F2A;
    width: fit-content;
    font-weight: 700;
}
#cloudrap p {
    text-align: left;
    padding: 1rem;
}
#cloudrap ul {
    margin: 1rem;
}
#cloudrap .box-layer {
    /* 1. Tume filter + Pilt */
    /* Filter on vajalik, et tekst pildi pealt välja paistaks */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../img/BG6.png");
    
    /* 2. Katab terve kasti */
    background-size: cover;
    
    /* 3. POSITSIOONIMINE (Kõige tähtsam osa 1080x1920 pildi puhul) */
    /* Esimene sõna 'center' joondab horisontaalselt keskele */
    /* Teine number (nt 20%) määrab vertikaalse koha ülevalt alla */
    background-position: center 20%; 
    
    background-repeat: no-repeat;
    
    /* Need on sinu olemasolevad stiilid, jäta need alles: */
    position: relative;
    padding: 3rem 1.5rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}




#contact {
    color:#D9D9D9;
    padding: 1rem;
}

/* --- SOTSIAALMEEDIA NUPUD --- */
.social-btn, 
.social-btn:visited, 
.social-btn:active {
    color: #D9D9D9 !important; /* Sunnib värvi halliks igas olukorras */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.social-btn:hover {
    color: #FF8C00 !important; /* Muutub oranžiks hoverdades */
    transform: scale(1.2);
    cursor: pointer;
}



#main-footer {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff; 
    font-size: 0.9rem;
    margin-top: 2rem;
}

#main-footer p {
    margin: 0;
}