/* RIGHT SKILL BOX */
    .skills-card {
        border: 1px solid rgba(170, 210, 180, .35);
        border-radius: 16px;
        padding: 32px;
        animation: fadeRight 1s ease .2s both;
        background: rgba(255,255,255,.015);
    }

    .skill {
        /* margin-bottom: 35px; */
        margin-bottom: 50px;
    }

    .skill:last-child {
        margin-bottom: 0;
    }

    .skill-name {
        display: block;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .progress {
        width: 100%;
        height: 30px;
        background: #e8ebed;
        border-radius: 8px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        width: 0;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        animation: progressLoad 1.8s cubic-bezier(.2,.8,.2,1) forwards;
    }

    .progress-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.18) 0,
            rgba(255,255,255,.18) 8px,
            transparent 8px,
            transparent 16px
        );
        animation: stripes 1s linear infinite;
    }

    .blue   { background: #1677ff; --width: 90%; animation-delay: .3s; }
    .green  { background: #16a83d; --width: 94%; animation-delay: .45s; }
    .cyan   { background: #10a8c7; --width: 95%; animation-delay: .6s; }
    .yellow { background: #ffbd16; --width: 90%; animation-delay: .75s; }
    .red    { background: #e33a4d; --width: 90%; animation-delay: .9s; }
    .pink   { background: #ff60b2; --width: 65%; animation-delay: 1.05s; }

   
    /* ANIMATIONS */
    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(-2deg);
        }
        50% {
            transform: translateY(-18px) rotate(3deg);
        }
    }

    @keyframes progressLoad {
        from { width: 0; }
        to { width: var(--width); }
    }

    @keyframes stripes {
        from { transform: translateX(0); }
        to { transform: translateX(16px); }
    }

    @keyframes fadeLeft {
        from {
            opacity: 0;
            transform: translateX(-60px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeRight {
        from {
            opacity: 0;
            transform: translateX(60px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* TABLET */
    @media (max-width: 1000px) {
        .skills-container {
            grid-template-columns: 1fr;
            gap: 50px;
        }

        .floating-icons {
            max-width: 650px;
        }

        .skills-card {
            max-width: 750px;
        }
    }

    /* MOBILE */
    @media (max-width: 600px) {
        .skills-section {
            padding: 55px 20px;
        }

        .title {
            font-size: 54px;
            letter-spacing: -2px;
        }

        .floating-icons {
            height: 190px;
        }

        .icon {
            width: 105px;
            height: 105px;
        }

        .wordpress {
            left: 0;
        }

        .figma {
            left: 38%;
            top: -25px;
        }

        .photoshop {
            left: auto;
            right: 0;
            top: 35px;
        }

        .fake-logo {
            font-size: 45px;
        }

        .ps-logo {
            font-size: 35px;
        }

        .skills-card {
            padding: 22px;
        }

        .skill-name {
            font-size: 16px;
        }

        .description {
            font-size: 16px;
        }
    }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
        }
    }