/* ========================================
   TOOLBOX SWISS ARMY KNIFE ANIMATION
   ======================================== */

/* Container for the entire animation */
.toolbox-animation-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 500px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base toolbox image (always visible) */
.toolbox-base {
    position: relative;
    z-index: 1;
    width: 200px;
    height: auto;
}

.toolbox-base img {
    width: 100%;
    height: auto;
    display: block;
}

/* Strip Wrapper - contains both the strip and the skill badge */
.strip-wrapper {
    position: absolute;
    /* Animation will be applied here */
    opacity: 0;
    /* Each strip starts invisible */
}

/* The actual strip (the white/metallic bar) */
.strip {
    background: linear-gradient(135deg, 
        #f6f6f6 0%, 
        #ffffff 20%, 
        #f4f4f4 40%, 
        #e8e8e8 60%, 
        #f6f6f6 100%);
    border: 1px solid #b5b5b5;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.1),
        inset 0 1px 2px rgba(255,255,255,0.8);
    border-radius: 4px;
}

/* Horizontal strips extending LEFT */
.strip-horizontal-left {
    width: 260px;
    height: 16px;
}

/* Horizontal strips extending RIGHT */
.strip-horizontal-right {
    width: 260px;
    height: 16px;
}

/* Skill badge (the rounded rectangle with text) */
.skill-badge {
    position: absolute;
    background: linear-gradient(135deg, #020b19 0%, #0069c1 50%, #082247 100%);
    border: 1px solid #b5b5b5;
    border-radius: 42px;
    padding:12px 36px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    
    /* Text styling */
    font-family: 'Amatica SC', cursive;
    font-size: 24px;
    color: #eae8e8;
    white-space: nowrap;
    
    /* Initially hidden, will pop in after strip opens */
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
}

/* ========================================
   POSITIONING FOR EACH STRIP
   ======================================== */

/* LEFT SIDE STRIPS */
.strip-left-1 {
    top: 30%;
    left: 30%;
    transform-origin: right center;
    transform: translateY(-50%) rotate(-90deg);
}

.strip-left-1 .skill-badge {
    left: -100px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-left-2 {
    top: 40%;
    left: 20%;
    transform-origin: right center;
    transform: translateY(-50%) rotate(-90deg);
}

.strip-left-2 .skill-badge {
    left: -130px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-left-3 {
    top: 50%;
    left: 30%;
    transform-origin: right center;
    transform: translateY(-50%) rotate(-90deg);
}

.strip-left-3 .skill-badge {
    left: -90px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-left-4 {
    top:60%;
    left: 20%;
    transform-origin: right center;
    transform: translateY(-50%) rotate(-90deg);
}

.strip-left-4 .skill-badge {
    left: -110px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-left-5 {
    top: 70%;
    left: 30%;
    transform-origin: right center;
    transform: translateY(-50%) rotate(-90deg);
}

.strip-left-5 .skill-badge {
    left: -100px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

/* RIGHT SIDE STRIPS */
.strip-right-1 {
    top: 30%;
    right: 20%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

.strip-right-1 .skill-badge {
    right: -70px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-right-2 {
    top: 40%;
    right: 35%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

.strip-right-2 .skill-badge {
    right: -70px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-right-3 {
    top: 50%;
    right: 20%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

.strip-right-3 .skill-badge {
    right: -50px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-right-4 {
    top: 60%;
    right: 30%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

.strip-right-4 .skill-badge {
    right: -60px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-right-5 {
    top: 70%;
    right: 20%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

.strip-right-5 .skill-badge {
    right: -70px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

.strip-right-6 {
    top: 80%;
    right: 30%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
}

.strip-right-6 .skill-badge {
    right: -60px;
    top: 50%;
    transform: translateY(-50%) scale(0);
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Strip opening animation */
@keyframes openStripLeft {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) rotate(0deg);
    }
}

@keyframes openStripRight {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) rotate(0deg);
    }
}

/* Badge pop-in animation */
@keyframes popBadge {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }
    60% {
        transform: translateY(-50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* ========================================
   APPLY ANIMATIONS WITH INTERSECTION OBSERVER
   (JavaScript will add this class when scrolled into view)
   ======================================== */

.toolbox-animation-container.animated .strip-left-1,
.toolbox-animation-container.animated .strip-left-2,
.toolbox-animation-container.animated .strip-left-3,
.toolbox-animation-container.animated .strip-left-4,
.toolbox-animation-container.animated .strip-left-5 {
    animation: openStripLeft 0.6s ease-out forwards;
    animation-delay: var(--strip-delay);
}

.toolbox-animation-container.animated .strip-right-1,
.toolbox-animation-container.animated .strip-right-2,
.toolbox-animation-container.animated .strip-right-3,
.toolbox-animation-container.animated .strip-right-4,
.toolbox-animation-container.animated .strip-right-5,
.toolbox-animation-container.animated .strip-right-6 {
    animation: openStripRight 0.6s ease-out forwards;
    animation-delay: var(--strip-delay);
}

.toolbox-animation-container.animated .skill-badge {
    animation: popBadge 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: var(--text-delay);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 1200px) {
    .toolbox-animation-container {
        height: 500px;
    }
    
    .strip-horizontal-left,
    .strip-horizontal-right {
        width: 260px;
    }
    
    .skill-badge {
        font-size: 20px;
        padding: 8px 16px;
    }
}

@media (max-width: 768px) {
    .toolbox-animation-container {
        height: 400px;
        max-width: 100%;
        overflow: hidden; /* IMPORTANT: Prevents overflow */
    } 
    
    .toolbox-base {
        width: 150px;
    }
    
    .strip-horizontal-left,
    .strip-horizontal-right {
        width: 150px;
        height: 14px;
    }
    
    .skill-badge {
        font-size: 16px;
        padding: 8px 18px;
    }
    
    /* Adjust positioning for mobile  
    .strip-left-1 { left: 15%; }
    .strip-left-2 { left: 10%; }
    .strip-left-3 { left: 5%; }
    .strip-left-4 { left: 13%; }
    .strip-left-5 { left: 8%; }
    
    .strip-right-1 { right: 15%; }
    .strip-right-2 { right: 10%; }
    .strip-right-3 { right: 13%; }
    .strip-right-4 { right: 17%; }
    .strip-right-5 { right: 8%; }
    .strip-right-6 { right: 20%; }
    */
}
@media (max-width: 480px) {
    .toolbox-animation-container {
        height: 350px;
        padding: 0 20px;
        overflow:visible;

    }
    
    .toolbox-base {
        width: 120px;
    }
    .strip-horizontal-left,
    .strip-horizontal-right {
        width: 100px;
        height: 12px;
    }
    .skill-badge {
        font-size: 13px;
        padding: 6px 12px;
        white-space: nowrap;
    }
     /* Tighter positioning */
    .strip-left-1 { left: 18%; }
    .strip-left-2 { left: 12%; }
    .strip-left-3 { left: 15%; }
    .strip-left-4 { left: 10%; }
    .strip-left-5 { left: 13%; }
    
    .strip-right-1 { right: 18%; }
    .strip-right-2 { right: 12%; }
    .strip-right-3 { right: 15%; }
    .strip-right-4 { right: 19%; }
    .strip-right-5 { right: 10%; }
    .strip-right-6 { right: 22%; }
    
    /* Adjust badge positions */
    .strip-left-1 .skill-badge { left: -55px; }
    .strip-left-2 .skill-badge { left: -65px; }
    .strip-left-3 .skill-badge { left: -50px; }
    .strip-left-4 .skill-badge { left: -60px; }
    .strip-left-5 .skill-badge { left: -55px; }
    
    .strip-right-1 .skill-badge { right: -45px; }
    .strip-right-2 .skill-badge { right: -45px; }
    .strip-right-3 .skill-badge { right: -35px; }
    .strip-right-4 .skill-badge { right: -40px; }
    .strip-right-5 .skill-badge { right: -45px; }
    .strip-right-6 .skill-badge { right: -40px; }
}

/* ADD THIS for extra small phones */
@media (max-width: 375px) {
    .toolbox-animation-container {
        height: 300px;
    }
    
    .toolbox-base {
        width: 100px;
    }
    
    .strip-horizontal-left,
    .strip-horizontal-right {
        width: 85px;
        height: 10px;
    }
    
    .skill-badge {
        font-size: 12px;
        padding: 5px 10px;
    }
}