Üzleti radar

/* =========================================================
   13. ÜZLETI RADAR
   ========================================================= */

.hero-uzleti-radar {
    position: relative;
    width: 100%;
    height: 760px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(56, 166, 151, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(212, 188, 130, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071b1a 0%,
            #0b2927 50%,
            #061514 100%
        );

    color: #f3efe5;

    /*
       A HERO valódi aszimmetriája.
       Az alja ferde, nem a tartalom ugrál.
    */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 87%,
        0 100%
    );
}


/* =========================================================
   HÁTTÉR RÁCS
   ========================================================= */

.ur-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    opacity: .7;

    pointer-events: none;

    z-index: -3;

    animation: urGridMove 18s linear infinite;
}

@keyframes urGridMove {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 70px 70px, 70px 70px;
    }
}


/* =========================================================
   HÁTTÉR FÉNY
   ========================================================= */

.ur-glow {
    position: absolute;

    width: 620px;
    height: 620px;

    right: -150px;
    top: 30px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(71, 185, 167, .15),
            rgba(71,185,167,.04) 40%,
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;

    z-index: -2;

    animation:
        urGlowMove 9s ease-in-out infinite alternate;
}

@keyframes urGlowMove {
    from {
        opacity: .55;
    }

    to {
        opacity: .9;
    }
}


/* =========================================================
   FŐ TARTALOM
   ========================================================= */

.ur-content {
    position: absolute;

    left: max(7%, calc((100% - 1180px) / 2));
    top: 50%;

    width: 560px;

    transform: translateY(-50%);

    z-index: 5;
}


/* =========================================================
   KICKER
   ========================================================= */

.ur-kicker {
    display: flex;

    align-items: center;

    min-height: 24px;

    margin-bottom: 24px;

    color: #d4bc82;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: .22em;

    text-transform: uppercase;
}


.ur-kicker span {
    display: block;

    width: 34px;
    height: 1px;

    margin-right: 14px;

    background: #d4bc82;

    box-shadow:
        0 0 12px rgba(212,188,130,.45);
}


.ur-kicker em {
    min-width: 220px;

    font-style: normal;
}


.ur-kicker i {
    width: 6px;
    height: 6px;

    margin-left: 10px;

    border-radius: 50%;

    background: #d4bc82;

    box-shadow:
        0 0 12px rgba(212,188,130,.8);

    animation:
        urKickerDot 1.3s ease-in-out infinite alternate;
}


@keyframes urKickerDot {
    from {
        opacity: .35;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   FŐCÍM
   ========================================================= */

.ur-content h1 {
    margin: 0;

    color: #f5f1e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(70px, 8vw, 124px);

    font-weight: 400;

    line-height: .86;

    letter-spacing: -.065em;
}


.ur-content h1 strong {
    display: block;

    margin-left: 12%;

    color: #d4bc82;

    font-weight: 400;

    font-style: italic;
}


/* =========================================================
   LEÍRÁS
   ========================================================= */

.ur-content p {
    max-width: 470px;

    margin: 38px 0 30px;

    color: rgba(243,239,229,.68);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   GOMB
   ========================================================= */

.ur-button {
    display: inline-flex;

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

    gap: 20px;

    min-width: 145px;

    padding: 15px 22px;

    color: #071b1a;

    background: #d4bc82;

    border: 1px solid #d4bc82;

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;

    box-sizing: border-box;

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.ur-button span {
    font-size: 18px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.ur-button:hover {
    color: #071b1a;

    background: #ead9a9;

    border-color: #ead9a9;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);
}


.ur-button:hover span {
    transform: translate(4px,-4px);
}


/* =========================================================
   RADAR
   ========================================================= */

.ur-radar {
    position: absolute;

    width: min(470px, 40vw);
    aspect-ratio: 1 / 1;

    right: 7%;
    top: 50%;

    /*
       EZ CSAK POZICIONÁL.
       NINCS JS-ES MOZGATÁS.
    */
    transform: translateY(-50%);

    z-index: 3;

    pointer-events: none;
}


/* =========================================================
   RADAR KÖRÖK
   ========================================================= */

.ur-radar-circle {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border: 1px solid rgba(89,183,166,.25);

    box-sizing: border-box;

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


.ur-circle-1 {
    width: 100%;
    height: 100%;
}


.ur-circle-2 {
    width: 76%;
    height: 76%;
}


.ur-circle-3 {
    width: 52%;
    height: 52%;
}


.ur-circle-4 {
    width: 28%;
    height: 28%;
}


.ur-circle-1 {
    box-shadow:
        0 0 45px rgba(61,168,151,.07);
}


/* =========================================================
   KERESZTVONALAK
   ========================================================= */

.ur-cross {
    position: absolute;

    left: 50%;
    top: 50%;

    background:
        rgba(105,190,176,.16);
}


.ur-cross-x {
    width: 100%;
    height: 1px;

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


.ur-cross-y {
    width: 1px;
    height: 100%;

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


/* =========================================================
   SUGÁRVONALAK HELYETT FINOM SEGÉDVONALAK
   ========================================================= */

.ur-radar::before,
.ur-radar::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 1px;

    transform-origin: center;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(105,190,176,.13),
            transparent
        );
}


.ur-radar::before {
    transform: translate(-50%, -50%) rotate(35deg);
}


.ur-radar::after {
    transform: translate(-50%, -50%) rotate(125deg);
}


/* =========================================================
   RADAR PÁSZTÁZÁS
   ========================================================= */

.ur-scan {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 50%;
    height: 50%;

    transform-origin: 0 0;

    background:
        conic-gradient(
            from 0deg,
            rgba(80,200,175,0),
            rgba(80,200,175,.18),
            rgba(80,200,175,0)
        );

    border-top-right-radius: 100%;

    animation:
        urRadarScan 4.5s linear infinite;
}


@keyframes urRadarScan {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   KÖZÉPSŐ PONT
   ========================================================= */

.ur-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background:
        rgba(212,188,130,.12);

    border:
        1px solid rgba(212,188,130,.5);

    box-shadow:
        0 0 20px rgba(212,188,130,.4);
}


.ur-center span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background: #d4bc82;

    box-shadow:
        0 0 20px rgba(212,188,130,.9);

    animation:
        urCenterPulse 2s ease-in-out infinite;
}


@keyframes urCenterPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .7;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
}


/* =========================================================
   CÉLPONTOK
   ========================================================= */

.ur-target {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #71c9b8;

    box-shadow:
        0 0 0 4px rgba(113,201,184,.08),
        0 0 20px rgba(113,201,184,.7);
}


.ur-target span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 28px;
    height: 28px;

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

    border:
        1px solid rgba(113,201,184,.25);

    border-radius: 50%;

    animation:
        urTargetPulse 2.2s ease-in-out infinite;
}


@keyframes urTargetPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.8);
        opacity: .35;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}


.ur-target-1 {
    left: 67%;
    top: 24%;
}


.ur-target-2 {
    left: 23%;
    top: 63%;
}


.ur-target-3 {
    left: 73%;
    top: 72%;
}


.ur-target-4 {
    left: 34%;
    top: 31%;


/* =========================================================
   RADAR FELIRATOK
   ========================================================= */

.ur-radar-label {
    position: absolute;

    padding: 7px 10px;

    color: rgba(243,239,229,.62);

    background:
        rgba(5,22,21,.6);

    border-left:
        1px solid rgba(212,188,130,.45);

    backdrop-filter: blur(7px);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;
}


.ur-label-1 {
    left: 72%;
    top: 17%;
}


.ur-label-2 {
    left: 8%;
    top: 67%;
}


.ur-label-3 {
    left: 72%;
    top: 78%;
}


/* =========================================================
   ALSÓ INFORMÁCIÓ
   ========================================================= */

.ur-bottom {
    position: absolute;

    left: max(7%, calc((100% - 1180px) / 2));
    bottom: 52px;

    display: flex;

    align-items: center;

    gap: 18px;

    color: rgba(243,239,229,.4);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    z-index: 10;
}


.ur-bottom span {
    color: #d4bc82;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
}


.ur-bottom i {
    display: block;

    width: 42px;
    height: 1px;

    background: #d4bc82;
}


.ur-bottom small {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero-uzleti-radar {
        height: 850px;

        clip-path: polygon(
            0 0,
            100% 0,
            100% 94%,
            0 100%
        );
    }


    .ur-content {
        left: 40px;
        top: 90px;

        width: calc(100% - 80px);

        transform: none;
    }


    .ur-content h1 {
        font-size: clamp(60px, 12vw, 95px);
    }


    .ur-content p {
        max-width: 500px;
    }


    .ur-radar {
        width: 390px;

        right: 50%;
        top: auto;
        bottom: 40px;

        transform: translateX(50%);
    }


    .ur-bottom {
        left: 40px;
        bottom: 25px;
    }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 560px) {

    .hero-uzleti-radar {
        height: 820px;
    }


    .ur-content {
        left: 20px;
        top: 55px;

        width: calc(100% - 40px);
    }


    .ur-kicker {
        font-size: 9px;

        letter-spacing: .15em;
    }


    .ur-kicker em {
        min-width: 160px;
    }


    .ur-content h1 {
        font-size: 57px;
    }


    .ur-content h1 strong {
        margin-left: 8%;
    }


    .ur-content p {
        margin-top: 26px;

        font-size: 14px;

        line-height: 1.65;
    }


    .ur-radar {
        width: 285px;

        bottom: 55px;
    }


    .ur-radar-label {
        padding: 5px 7px;

        font-size: 7px;
    }


    .ur-bottom {
        left: 20px;
        bottom: 18px;

        gap: 10px;
    }


    .ur-bottom small {
        font-size: 7px;

        letter-spacing: .12em;
    }


    .ur-bottom i {
        width: 25px;
    }
}


/* =========================================================
   MOZGÁS CSÖKKENTÉSE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-uzleti-radar *,
    .hero-uzleti-radar::before,
    .hero-uzleti-radar::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   13. ÜZLETI RADAR
   Stabil JS – nincs parallax, nincs hero ugrálás
   ========================================================= */

document.addEventListener("DOMContentLoaded", () => {

    const hero = document.querySelector(".hero-business-radar");

    if (!hero) return;


    /* -----------------------------------------------------
       Típusírógép a kis felső szöveghez
       ----------------------------------------------------- */

    const kicker = hero.querySelector(".radar-kicker");

    if (kicker) {

        const phrases = [
            "Üzleti lehetőségek",
            "Tudatos növekedés",
            "Jó döntések",
            "Erősebb irányok"
        ];

        let phraseIndex = 0;
        let charIndex = phrases[0].length;
        let deleting = true;

        /*
         * Az első szöveg már látható,
         * ezért innen törléssel indulunk.
         */

        function typeRadarText() {

            const current = phrases[phraseIndex];

            if (deleting) {

                charIndex--;

                kicker.textContent =
                    current.substring(0, charIndex);

                if (charIndex <= 0) {

                    deleting = false;

                    phraseIndex =
                        (phraseIndex + 1) % phrases.length;

                    charIndex = 0;

                    setTimeout(typeRadarText, 350);

                    return;
                }

                setTimeout(typeRadarText, 45);

            } else {

                const next = phrases[phraseIndex];

                charIndex++;

                kicker.textContent =
                    next.substring(0, charIndex);

                if (charIndex >= next.length) {

                    deleting = true;

                    setTimeout(typeRadarText, 1800);

                    return;
                }

                setTimeout(typeRadarText, 70);
            }
        }


        /*
         * Kicsit később indul,
         * hogy az első betöltés ne rángassa a layoutot.
         */

        setTimeout(typeRadarText, 1800);
    }


    /* -----------------------------------------------------
       FONTOS:
       Nincs egér-parallax.
       
       Nem mozgatjuk:
       - a teljes hero-t
       - a radar külső konténerét
       - a tartalmat
       - a clip-path-ot
       
       Így a fejléc stabil marad.
       ----------------------------------------------------- */


    /* -----------------------------------------------------
       Radar állapotjelző – teljesen belső animáció
       ----------------------------------------------------- */

    const targets = hero.querySelectorAll(".radar-target");

    targets.forEach((target, index) => {

        /*
         * Az animációt CSS végzi.
         * Itt direkt nem használunk transformot.
         */

        target.setAttribute(
            "data-radar-target",
            String(index + 1)
        );
    });


    /* -----------------------------------------------------
       Biztonsági ellenőrzés:
       a hero méretét nem engedjük JS-ből módosítani.
       ----------------------------------------------------- */

    hero.style.transform = "none";


    /* -----------------------------------------------------
       Ha valamilyen külső CSS/JS transformot rakna rá,
       azonnal visszaállítjuk.
       ----------------------------------------------------- */

    const observer = new MutationObserver(() => {

        if (hero.style.transform !== "none") {
            hero.style.transform = "none";
        }

    });

    observer.observe(hero, {
        attributes: true,
        attributeFilter: ["style"]
    });

});