/* NEW SKILLS */

		/* =====================================================
           RESET
        ===================================================== */

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

/* =========================================================
   GLITCH IMAGE - 150 x 150 px
   ========================================================= */

.glitch {
    position: relative;
    margin-top: -2rem;
    margin-bottom: -5rem;
    width: 100%;
    height: 250px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}


/* ---------------------------------------------------------
   Main image
   --------------------------------------------------------- */

.glitch::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background-image: url("../../images/Eclipse.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150px 150px;

    z-index: 1;
}


/* ---------------------------------------------------------
   Glitch image
   --------------------------------------------------------- */

.glitch::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background-image: url("../../images/Eclipse.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150px 150px;

    opacity: 0.7;

    mix-blend-mode: hard-light;

    z-index: 2;

    animation: glitch2 4s steps(1) infinite;
}


/* ---------------------------------------------------------
  Hover glitch image
   --------------------------------------------------------- */

.glitch:hover::before {
    animation: glitch1 0.8s steps(1) infinite;
}


/* =========================================================
   NORMAL GLITCH 
   ========================================================= */

@keyframes glitch2 {

    0% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(0deg);
    }

    10% {
        transform: translate(calc(-50% + 4px), -50%);
    }

    15% {
        transform: translate(calc(-50% - 4px), -50%);
    }

    20% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(90deg);
    }

    25% {
        transform: translate(calc(-50% + 3px), -50%);
    }

    30% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(180deg);
    }

    40% {
        transform: translate(calc(-50% - 5px), -50%);
    }

    45% {
        transform: translate(-50%, -50%);
    }

    60% {
        transform: translate(calc(-50% + 5px), calc(-50% - 2px));
        filter: hue-rotate(270deg);
    }

    65% {
        transform: translate(-50%, -50%);
    }

    80% {
        transform: translate(calc(-50% - 3px), calc(-50% + 2px));
    }

    85% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(360deg);
    }

    100% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(0deg);
    }
}


/* =========================================================
   GLITCH AU SURVOL
   ========================================================= */

@keyframes glitch1 {

    0% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(0deg);
    }

    10% {
        transform: translate(calc(-50% + 8px), -50%);
        filter: hue-rotate(60deg);
    }

    20% {
        transform: translate(calc(-50% - 8px), -50%);
        filter: hue-rotate(120deg);
    }

    30% {
        transform: translate(calc(-50% + 15px), calc(-50% - 3px));
    }

    40% {
        transform: translate(calc(-50% - 12px), calc(-50% + 3px));
        filter: hue-rotate(180deg);
    }

    50% {
        transform: translate(calc(-50% + 20px), -50%);
    }

    60% {
        transform: translate(calc(-50% - 15px), -50%);
        filter: hue-rotate(240deg);
    }

    70% {
        transform: translate(calc(-50% + 5px), calc(-50% - 5px));
    }

    80% {
        transform: translate(calc(-50% - 10px), calc(-50% + 5px));
        filter: hue-rotate(300deg);
    }

    90% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-50%, -50%);
        filter: hue-rotate(360deg);
    }
}
        
 
        /* =====================================================
           TREE
        ===================================================== */

        .tree {
            width: 1200px;
            max-width: 95%;
            margin: 40px auto 80px;
            display: grid;
            grid-template-columns:
                repeat(4, 1fr);
            gap: 25px;
            position: relative;
        }

        
        /* =====================================================
           CATEGORY
        ===================================================== */

        .category {
            position: relative;
            margin-top: 50px;
            z-index: 1;
            cursor: pointer;
        }


        .category-title {
            min-height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            border: 1px solid #0e0f0f;
            border-radius: 18px;

            background:
                linear-gradient(
                    145deg,
                    #111,
                    #282b30
                );

            box-shadow:
                0 15px 30px rgba(0,0,0,.25);

            transition:
                transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
        }


        .category:hover .category-title {
            transform:
                translateY(-8px)
                scale(1.03);

            border-color: #e0e5ea;

            box-shadow:
                0 20px 50px rgba(0,0,0,.45),
                0 0 25px rgba(80,150,255,.15);
        }


        .category-icon {
            font-size: 35px;
            margin-bottom: 10px;
        }


        .category-name {
            font-size: 21px;
            font-weight: bold;
        }


        .category-description {
            margin-top: 7px;
            font-size: 12px;
            color: #8794a7;
        }



        .skills {
            padding-top: 35px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
             }


        .skill {
            width: 90%;
            padding: 13px 16px;
            border-radius: 10px;
            background: #2111;
            border: 1px solid #8d8a8a;
            color: #b9c5d4;
            text-align: center;
            opacity: 0;
            transform:
                translateY(-20px)
                scale(.9);
            pointer-events: none;
            transition:
                opacity .3s ease,
                transform .35s ease,
                background .25s ease,
                border-color .25s ease,
                color .25s ease;
        }


        /* =====================================================
           APPARITION DES COMPÉTENCES
        ===================================================== */

        .category:hover .skill {
            opacity: 1;
            transform:
                translateY(0)
                scale(1);
            pointer-events: auto;
        }


        /* =====================================================
           DÉCALAGE DES ANIMATIONS
        ===================================================== */

        .skill:nth-child(1) {
            transition-delay: .05s;
        }

        .skill:nth-child(2) {
            transition-delay: .10s;
        }

        .skill:nth-child(3) {
            transition-delay: .15s;
        }

        .skill:nth-child(4) {
            transition-delay: .20s;
        }

        .skill:nth-child(5) {
            transition-delay: .25s;
        }


        /* =====================================================
           HOVER 
        ===================================================== */

        .skill:hover {
            background: #111;

            border-color: #818385;

            color: white;

            transform:
                translateX(8px)
                scale(1.03) !important;
        }


         /* =====================================================
          CENTRAL SECTION 
        ===================================================== */

        .center {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }


         .center-node strong {
            font-size: 24px;
        }


        .center-node span {
            color: #ebeef2;

            font-size: 13px;

            margin-top: 6px;
        }

       
        /* =====================================================
           LÉGENDE
        ===================================================== */

        .legend {
            text-align: center;
            color: #78879a;
            font-size: 13px;
            margin-bottom: 50px;
        }

        .legend span {
            color: #b9c5d4;
        }


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

        @media (max-width: 900px) {

            .tree {
                grid-template-columns: repeat(2, 1fr);
            }

            .tree::before {
                display: none;
            }

            .category::after {
                display: none;
            }

        }


        @media (max-width: 550px) {

            header h1 {
                font-size: 30px;
            }

            .tree {
                grid-template-columns: 1fr;
            }

            .category-title {
                min-height: 100px;
            }

            .skills {
                padding-top: 15px;
            }

            .skill {
                opacity: 1;
                transform: none;

                pointer-events: auto;
            }

        }