/* =========================================
   INTERACTIVE STAGE – DESKTOP / TABLETA
   ========================================= */

.interactive-stage {
    position: relative;
    width: 100%;
    height: 420px;
    min-height: 420px;
    overflow: hidden;
}


/* =========================================
   TOATE NODURILE
   ========================================= */

.interactive-stage .node {
    position: absolute;

    width: 110px;
    min-height: 110px;

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

    text-align: center;

    background: #ffffff;
    border-radius: 24px;

    padding: 15px;
    box-sizing: border-box;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    cursor: pointer;
}


/* =========================================
   ICON
   ========================================= */

.interactive-stage .node .elementor-icon {
    font-size: 38px;
    color: #1d1d1d;
}


/* =========================================
   TITLU
   ========================================= */

.interactive-stage .node .elementor-heading-title {
    margin-top: 8px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    color: #1d1d1d;
}


/* =========================================
   IDEA – CENTRU
   ========================================= */

.interactive-stage .node-idea {
    width: 150px;
    min-height: 150px;

    top: 50%;
    left: 50%;

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

    background: #ffffff;
    border-radius: 50%;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.10);
}


.interactive-stage .node-idea .elementor-heading-title {
    color: #e60202;
    font-size: 18px;
}


.interactive-stage .node-idea .elementor-icon {
    font-size: 48px;
}


/* =========================================
   WEBSITE – SUS STÂNGA
   ========================================= */

.interactive-stage .node-website {
    top: 30px;
    left: 8%;
}


/* =========================================
   BRAND – SUS DREAPTA
   ========================================= */

.interactive-stage .node-brand {
    top: 30px;
    right: 8%;
}


/* =========================================
   AI & CONTENT – MIJLOC STÂNGA
   ========================================= */

.interactive-stage .node-ai {
    top: 50%;
    left: 2%;

    transform: translateY(-50%);
}


/* =========================================
   GRAFICA – MIJLOC DREAPTA
   ========================================= */

.interactive-stage .node-grafica {
    top: 50%;
    right: 2%;

    transform: translateY(-50%);
}


/* =========================================
   SOCIAL MEDIA – JOS
   ========================================= */

.interactive-stage .node-social {
    bottom: 20px;
    left: 50%;

    transform: translateX(-50%);
}



/* =========================================
   AJUSTARE POZITIONARE – DESKTOP / TABLETA
   NU SE APLICA PE MOBILE
   ========================================= */

@media (min-width: 768px) {

    /* IDEA – putin mai sus */
    .interactive-stage .node-idea {
        top: calc(50% - 50px);
    }


    /* WEBSITE – mai sus si mai spre stanga */
    .interactive-stage .node-website {
        top: 5px;
        left: 5%;
    }


    /* BRAND – mai sus si mai spre dreapta */
    .interactive-stage .node-brand {
        top: 5px;
        right: 5%;
    }


    /* AI – putin mai departe spre stanga */
    .interactive-stage .node-ai {
        left: 0;
    }


    /* GRAFICA – putin mai departe spre dreapta */
    .interactive-stage .node-grafica {
        right: 0;
    }


    /* SOCIAL – mai jos */
    .interactive-stage .node-social {
        bottom: 5px;
    }

}

/* Animatie desktop */

/* =========================================
   DESKTOP + TABLET – ANIMATIE NODURI
   ========================================= */

@media (min-width: 768px) {

    /* STAGE */
    .interactive-stage {
        position: relative;
    }


    /* =========================================
       CARDURI
       ========================================= */

    .interactive-stage .node {
        z-index: 3;
    }


    /* =========================================
       LINII PERMANENTE
       ========================================= */

    .desktop-base-line {
        position: absolute;
        height: 2px;
        transform-origin: 0 50%;
        pointer-events: none;
        z-index: 1;
        background: rgba(30, 30, 30, 0.22);
    }


    /* =========================================
       LINIA DE FLUX ANIMATA
       ========================================= */

    .desktop-flow-line {
        position: absolute;
        height: 2px;
        transform-origin: 0 50%;
        pointer-events: none;
        z-index: 2;
        overflow: hidden;
    }


    .desktop-flow-line::after {
        content: "";
        position: absolute;
        top: 0;
        left: -35%;
        width: 35%;
        height: 100%;
        background: linear-gradient(90deg,
                transparent,
                #111,
                #e30613,
                #111,
                transparent);
        opacity: 0;
    }


    .desktop-flow-line.is-flowing::after {
        animation: desktopFlow 0.8s linear forwards;
    }


    @keyframes desktopFlow {

        0% {
            left: -35%;
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            left: 100%;
            opacity: 0;
        }

    }


    /* =========================================
       PULSE IDEA
       FARA SA MUTE CARDUL
       ========================================= */

    .interactive-stage .node-idea::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(227, 6, 19, 0.65),
            0 0 0 0 rgba(0, 0, 0, 0.35);
    }


    .interactive-stage .node-idea.is-desktop-pulsing::after {
        animation: ideaDesktopPulse 0.8s ease-out forwards;
    }


    @keyframes ideaDesktopPulse {

        0% {
            opacity: 1;
            box-shadow:
                0 0 0 0 rgba(227, 6, 19, 0.65),
                0 0 0 0 rgba(0, 0, 0, 0.35);
        }

        45% {
            opacity: 1;
            box-shadow:
                0 0 0 18px rgba(227, 6, 19, 0),
                0 0 0 35px rgba(0, 0, 0, 0);
        }

        100% {
            opacity: 0;
            box-shadow:
                0 0 0 25px rgba(227, 6, 19, 0),
                0 0 0 45px rgba(0, 0, 0, 0);
        }

    }


    /* =========================================
       PULSE CARD DESTINATIE
       FARA TRANSFORM = NU SE MUTA
       ========================================= */

    .interactive-stage .node:not(.node-idea)::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(227, 6, 19, 0.6),
            0 0 0 0 rgba(0, 0, 0, 0.3);
    }


    .interactive-stage .node:not(.node-idea).is-desktop-pulsing::after {
        animation: nodeDesktopPulse 0.7s ease-out forwards;
    }


    @keyframes nodeDesktopPulse {

        0% {
            opacity: 1;
            box-shadow:
                0 0 0 0 rgba(227, 6, 19, 0.6),
                0 0 0 0 rgba(0, 0, 0, 0.3);
        }

        45% {
            opacity: 1;
            box-shadow:
                0 0 0 15px rgba(227, 6, 19, 0),
                0 0 0 30px rgba(0, 0, 0, 0);
        }

        100% {
            opacity: 0;
            box-shadow:
                0 0 0 25px rgba(227, 6, 19, 0),
                0 0 0 40px rgba(0, 0, 0, 0);
        }

    }

}


/* animatie mouse pe carduri */



/* =========================================
   CUSTOM CURSOR – DESKTOP + TABLET
   ========================================= */

@media (min-width: 768px) {

    .container-interactiv {
        cursor: none;
    }


    /* PUNCTUL CENTRAL */

    .interactive-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;

        width: 6px;
        height: 6px;

        border-radius: 50%;

        background: #e30613;

        pointer-events: none;

        z-index: 9999;

        opacity: 0;

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


    /* CERCUL EXTERIOR */

    .interactive-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;

        width: 32px;
        height: 32px;

        border: 1px solid rgba(0, 0, 0, 0.7);

        border-radius: 50%;

        pointer-events: none;

        z-index: 9998;

        opacity: 0;

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

        transition:
            width 0.25s ease,
            height 0.25s ease,
            border-color 0.25s ease,
            background 0.25s ease;
    }


    /* CAND INTRA PESTE UN NODE */

    .interactive-cursor-ring.is-hovering {
        width: 58px;
        height: 58px;

        border-color: #e30613;

        background: rgba(227, 6, 19, 0.05);
    }


    /* ASCUNDEM CURSORUL CAND IESE DIN CONTAINER */

    .interactive-cursor-dot.is-visible,
    .interactive-cursor-ring.is-visible {
        opacity: 1;
    }

}




/* =========================================================
   MOBILE ONLY
   TOT CE ESTE MAI JOS SE APLICĂ DOAR SUB 768px
   ========================================================= */

@media (max-width: 767px) {


    /* =========================================
       STAGE MOBILE
       ========================================= */

    .interactive-stage {
        position: relative !important;

        width: 100% !important;

        height: 560px !important;
        min-height: 560px !important;

        display: block !important;

        overflow: hidden !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =========================================
       IDEA – SUS
       ========================================= */

    .interactive-stage .node-idea {
        position: absolute !important;

        top: 20px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 140px !important;
        height: 140px !important;

        min-width: 140px !important;
        min-height: 140px !important;

        margin: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 20 !important;
    }


    /* =========================================
       LINIA NEAGRĂ PERMANENTĂ
       ========================================= */

    .interactive-stage::before {
        content: "" !important;

        position: absolute !important;

        top: 160px !important;
        left: 50% !important;

        width: 2px !important;
        height: 190px !important;

        transform: translateX(-50%) !important;

        background: #111111 !important;

        z-index: 2 !important;
    }


    /* =========================================
       ELIMINĂM DOAR PUNCTELE
       NU LINIA
       ========================================= */

    .interactive-stage::after {
        content: none !important;
        display: none !important;
    }


    /* =========================================
       CELE 5 CARDURI MOBILE

       TOATE STAU ÎN ACEEAȘI POZIȚIE
       JS LE ARATĂ PE RÂND
       ========================================= */

    .interactive-stage .node-brand,
    .interactive-stage .node-website,
    .interactive-stage .node-grafica,
    .interactive-stage .node-social,
    .interactive-stage .node-ai {

        position: absolute !important;

        top: 370px !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        width: 112px !important;
        height: 112px !important;

        min-width: 112px !important;
        min-height: 112px !important;

        margin: 0 !important;

        transform:
            translateX(-50%) scale(0.90) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 20 !important;

        transition:
            opacity 0.35s ease,
            transform 0.35s ease,
            visibility 0.35s ease !important;
    }


    /* =========================================
       CARD ACTIV
       ========================================= */

    .interactive-stage .node-brand.active,
    .interactive-stage .node-website.active,
    .interactive-stage .node-grafica.active,
    .interactive-stage .node-social.active,
    .interactive-stage .node-ai.active {

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translateX(-50%) scale(1) !important;
    }


    /* =========================================
       PULSAȚIE IDEA – EXACT 2
       ========================================= */

    .interactive-stage .node-idea.idea-pulse {
        animation:
            ideaPulse 1.1s ease-in-out 2 !important;
    }


    @keyframes ideaPulse {

        0% {
            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.10),
                0 0 0 0 rgba(0, 0, 0, 0),
                0 0 0 0 rgba(230, 2, 2, 0);
        }

        50% {
            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.10),
                0 0 22px 8px rgba(0, 0, 0, 0.40),
                0 0 38px 16px rgba(230, 2, 2, 0.45);
        }

        100% {
            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.10),
                0 0 0 0 rgba(0, 0, 0, 0),
                0 0 0 0 rgba(230, 2, 2, 0);
        }
    }


    /* =========================================
       FLOW CREAT DE JS

       SE PUNE PESTE LINIA NEAGRĂ EXISTENTĂ
       ========================================= */

    .mobile-flow {
        position: absolute !important;

        width: 8px !important;

        transform:
            translateX(-50%) !important;

        pointer-events: none !important;

        z-index: 10 !important;

        overflow: hidden !important;

        opacity: 0 !important;
    }


    .mobile-flow.flow-run {
        opacity: 1 !important;
    }


    /* =========================================
       GRADIENT CARE CURGE CA WINDOWS COPY
       ========================================= */

    .mobile-flow::before {
        content: "";

        position: absolute;

        top: -100%;
        left: 0;

        width: 100%;
        height: 100%;

        background:
            linear-gradient(to bottom,
                transparent 0%,
                rgba(17, 17, 17, 0.95) 20%,
                #e60202 38%,
                #ff5a5a 50%,
                #e60202 62%,
                rgba(17, 17, 17, 0.95) 80%,
                transparent 100%);

        box-shadow:
            0 0 6px rgba(230, 2, 2, 0.80),
            0 0 12px rgba(230, 2, 2, 0.35);

        opacity: 0;
    }


    .mobile-flow.flow-run::before {
        animation:
            mobileFlow 1.1s linear forwards !important;
    }


    @keyframes mobileFlow {

        0% {
            transform:
                translateY(-100%);

            opacity: 0;
        }

        8% {
            opacity: 1;
        }

        100% {
            transform:
                translateY(200%);

            opacity: 1;
        }
    }


    /* =========================================
       PULSAȚIE CARD – EXACT 2
       ========================================= */

    .interactive-stage .node-brand.card-pulse,
    .interactive-stage .node-website.card-pulse,
    .interactive-stage .node-grafica.card-pulse,
    .interactive-stage .node-social.card-pulse,
    .interactive-stage .node-ai.card-pulse {

        animation:
            cardPulse 0.55s ease-in-out 2 !important;
    }


    @keyframes cardPulse {

        0% {
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.08),
                0 0 0 0 rgba(0, 0, 0, 0),
                0 0 0 0 rgba(230, 2, 2, 0);
        }

        50% {
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.08),
                0 0 18px 6px rgba(0, 0, 0, 0.30),
                0 0 30px 12px rgba(230, 2, 2, 0.45);
        }

        100% {
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.08),
                0 0 0 0 rgba(0, 0, 0, 0),
                0 0 0 0 rgba(230, 2, 2, 0);
        }
    }

}