/* ============================================================================
   MATTER.JS CARDS SECTION - SEKCIJA 5
   ============================================================================
   Interaktivne kartice koje "beže" od pokazivača miša koristeći Matter.js
   Kartice su postavljene u donjoj trećini
   ============================================================================ */

/* Mobile first - default styles (≤360px) */
.matter-cards-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;    
    background: linear-gradient(135deg, #4A02A9 40%, #020102 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    
    /* Card positions - Extra small mobile */
    --card-1-x: 10%;
    --card-1-angle: -1.05rad;
    
    --card-2-x: 25%;
    --card-2-angle: -1.15rad;
    
    --card-3-x: 50%;
    --card-3-angle: 0rad;
    
    --card-4-x: 75%;
    --card-4-angle: 1.15rad;
    
    --card-5-x: 93%;
    --card-5-angle: 1.05rad;
    /*cherry je trazio da se i na mobilnom dodaju jos dve pilulice iako nije po dizajnu */
    --card-6-x: 35%;
    --card-6-angle: 0.4rad;

    --card-7-x: 65%;
    --card-7-angle: -0.4rad;
}

#matter-world {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    touch-action: pan-y; /* Dozvoljava vertikalni scroll, blokira horizontalni */
}

/* Horizontalna linija koja odvaja kartice od linkova */
.matter-cards-section::after {
    content: '';
    position: absolute;
    bottom: 38%;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    z-index: 0;
    pointer-events: none;
}

.matter-links {
    position: absolute;
    /* bottom: 27%; */
    left: 5%;
    z-index: 10;
    pointer-events: all;
    line-height: 1;
}

.matter-expertise {
    position: absolute;
    top: 28%;
    right: -6%;
    transform-origin: 50% 50%;
    transform: translateY(-50%) rotate(-90deg);
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 4;
    display: none; /* Sakriven na mobilnom */
}

.matter-cards-section .cairon-container {
    position: absolute;
    left: 50%;
    /* bottom: 3%; */
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
}

.matter-link {
    display: flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;   
    font-size: 20px;
    font-weight: 500;    
}

.matter-link span { 
    margin-right: 10px;       
}

.matter-link .button-icon {   
    width: 25px; 
    height: 25px; 
    transition: transform 0.8s ease;
    flex-shrink: 0;
    margin-bottom: 5px;
}

.matter-link:hover .button-icon {
    transform: rotate(90deg);
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS - MOBILE FIRST
   ============================================================================ */

/* Small mobile (≥361px) */
@media (min-width: 361px) {
    .matter-cards-section {
        /* Card positions - Small mobile */
        --card-1-x: 10%;         
        --card-1-angle: -1.07rad;

        --card-2-x: 18%;
        --card-2-angle: -0.6rad;

        --card-3-x: 46%;
        --card-3-angle: 0rad;

        --card-4-x: 72%;
        --card-4-angle: 1.4rad;

        --card-5-x: 90%;
        --card-5-angle: 1.1rad;
         /*cherry je trazio da se i na mobilnom dodaju jos dve pilulice iako nije po dizajnu */
        --card-6-x: 35%;
        --card-6-angle: 0.4rad;

        --card-7-x: 62%;
        --card-7-angle: -0.4rad;
    }   
}

/* Mobile (≥481px) */
@media (min-width: 481px) {
    .matter-cards-section {
        min-height: 600px;
        
        /* Card positions - Mobile */
        --card-1-x: 8%;
        --card-1-angle: -0.9rad;
        
        --card-2-x: 20%;
        --card-2-angle: -0.9rad;
        
        --card-3-x: 32%;
        --card-3-angle: -0.8rad; 
        
        --card-4-x: 50%; 
        --card-4-angle: 0.4rad;
        
        --card-5-x: 67%;
        --card-5-angle: 0.8rad;
        
        --card-6-x: 80%;
        --card-6-angle: 0.7rad; 
        
        --card-7-x: 92%;
        --card-7-angle: 0.9rad; 
    }
}
/* samsung, android, ios*/
@media (max-width: 767px) {
    .android-device .matter-cards-section .cairon-container {
        bottom: 4.5vh;
    }
    .android-device .matter-cards-section .matter-links {
        bottom: 25.5vh;
    }

    .ios-device .matter-cards-section .cairon-container {
        bottom: 0.2vh;
    }
    .ios-device .matter-cards-section .matter-links {
        bottom: 22vh;
    }

    .samsung-browser .matter-cards-section .cairon-container {
        bottom: 8vh;
    }
    .samsung-browser .matter-cards-section .matter-links {
        bottom: 28vh;
    }
}

@media (min-width: 768px) {
     .matter-cards-section .cairon-container {
        bottom: 0%;
    }    
    .matter-cards-section .cairon-container {
        bottom: 0%;
    }
    .matter-link {
        font-size: 30px;
    }
    
    .matter-link .button-icon {   
        width: 43px; 
        height: 43px;
    }
    .matter-expertise {
        display: block;
    }
}

/* Tablet (≥769px) */
@media (min-width: 769px) {
    .matter-cards-section {
        min-height: 500px;        
        
        --card-1-x: 18%;
        --card-1-angle: 0rad;
        
        --card-2-x: 27%;
        --card-2-angle: 0.6rad;
        
        --card-3-x: 37%;
        --card-3-angle: -0.6rad;
        
        --card-4-x: 48%;
        --card-4-angle: -0.4rad;
        
        --card-5-x: 60%;
        --card-5-angle: 0rad;
        
        --card-6-x: 69%;
        --card-6-angle: 0.30rad;
        
        --card-7-x: 80%;
        --card-7-angle: 0.5rad;
    }
    
    .matter-cards-section::after {
        bottom: 43%;
        left: 5%;
        right: 5%;
    }    
    
    .matter-cards-section .cairon-container {
        bottom: 0%;
    }
}
@media (min-width: 992px) {
    .matter-links {
        bottom: 30%;
        left: 10%;
    }
    .matter-expertise {
        right: -3.5%;        
    }
}

@media (min-width: 1025px) {
    .matter-cards-section {
        --card-1-x: 18%;
        --card-1-angle: 0rad;
        
        --card-2-x: 27%;
        --card-2-angle: 0.6rad;
        
        --card-3-x: 37%;
        --card-3-angle: -0.6rad;
        
        --card-4-x: 48%;
        --card-4-angle: -0.4rad;
        
        --card-5-x: 60%;
        --card-5-angle: 0rad;
        
        --card-6-x: 69%;
        --card-6-angle: 0.30rad;
        
        --card-7-x: 80%;
        --card-7-angle: 0.5rad;
    }
    
    .matter-links {
        bottom: 30%;
        left: 10%;
    }
    .matter-link {
        font-size: 34px;
    }
    
    .matter-link .button-icon {   
        width: 53px; 
        height: 53px;
        margin-bottom: 0px;
    }
   
    .matter-cards-section .cairon-container {
        bottom: 2%;
    }
    .matter-expertise {
        right: -2.5%;
    }
}
@media (min-width: 1400px) {    
    .matter-cards-section .cairon-container {
        bottom: 0%;
    }
    .matter-expertise {
        right: -4.5%;
        font-size: 27px;
    }
}
@media (min-width: 1600px) {
    .matter-link {
        font-size: 40px;
    }
    .matter-expertise {
        right: -3.5%;
    }
}

@media (min-width: 1920px) {
    .matter-cards-section {       
        --card-1-x: 18%;
        --card-1-angle: 0rad;
        
        --card-2-x: 27%;
        --card-2-angle: 0.6rad;
        
        --card-3-x: 37%;
        --card-3-angle: -0.6rad;
        
        --card-4-x: 48%;
        --card-4-angle: -0.4rad;
        
        --card-5-x: 60%;
        --card-5-angle: 0rad;
        
        --card-6-x: 69%;
        --card-6-angle: 0.30rad;
        
        --card-7-x: 80%;
        --card-7-angle: 0.5rad;
    }

    .matter-cards-section .cairon-container {
        bottom: 3%;
    }
}

@media (min-width: 2560px) {
    .matter-cards-section {       
        --card-1-x: 25%;
        --card-1-angle: 0rad;

        --card-2-x: 33%;
        --card-2-angle: 0.2rad;
        
        --card-3-x: 43%;
        --card-3-angle: -0.9rad;
        
        --card-4-x: 51%;
        --card-4-angle: -0.3rad;

        --card-5-x: 58%;
        --card-5-angle: 0rad;
        
        --card-6-x: 67%;
        --card-6-angle: 0.4rad;
        
        --card-7-x: 75%;
        --card-7-angle: 0.8rad;
    }
}
@media (min-width: 2560px) {
    .matter-expertise {
        right: -2.5%;
    }
}