/* =========================================================
   PULSE-X TECH – HERO TECH TABLE / WORKSPACE ILLUSZTRÁCIÓ
   ========================================================= */


/* ---------------------------------------------------------
   AZ EGÉSZ ILLUSZTRÁCIÓ KONTÉNERE
   --------------------------------------------------------- */

.hero-visual {
    position: relative;
    min-height: 560px;
    perspective: 1000px;
}


/* Az egész technológiai setup alatti elmosott árnyék */
.hero-visual::after {
    content: "";
    position: absolute;

    left: 9%;
    right: 2%;
    bottom: 28px;

    height: 70px;

    background:
            radial-gradient(
                    ellipse,
                    rgba(0, 0, 0, .7),
                    transparent 70%
            );

    filter: blur(10px);
}


/* ---------------------------------------------------------
   PADLÓRÁCS
   --------------------------------------------------------- */

.floor-grid {
    position: absolute;

    left: -8%;
    right: -8%;
    bottom: 5%;

    height: 50%;

    transform: rotateX(65deg);
    transform-origin: bottom;

    background-image:
            linear-gradient(
                    rgba(212, 175, 55, .12) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(212, 175, 55, .12) 1px,
                    transparent 1px
            );

    background-size: 38px 38px;

    opacity: .55;

    mask-image:
            linear-gradient(
                    to top,
                    #000,
                    transparent 80%
            );
}


/* ---------------------------------------------------------
   FÉNYCSÍKOK
   --------------------------------------------------------- */

.light-beam {
    position: absolute;

    width: 2px;
    height: 560px;

    background:
            linear-gradient(
                    transparent,
                    var(--gold-bright),
                    transparent
            );

    box-shadow:
            0 0 14px 2px rgba(255, 215, 0, .65);

    opacity: .85;
}


/* Jobb felső arany fénycsík */
.beam-a {
    right: 26%;
    top: -80px;

    transform: rotate(45deg);
}


/* Balról érkező halványabb fénycsík */
.beam-b {
    left: 22%;
    top: 90px;

    height: 420px;

    transform: rotate(-48deg);

    opacity: .35;
}


/* ---------------------------------------------------------
   MUNKATERÜLET
   Ebben található:
   - monitorok
   - PC
   - telefon
   - kamera
   - 3D nyomtató
   - asztal
   --------------------------------------------------------- */

.workspace {
    position: absolute;

    inset: 95px 0 0 0;
}


/* ---------------------------------------------------------
   ASZTAL
   --------------------------------------------------------- */

.desk {
    position: absolute;

    left: 3%;
    right: 1%;
    bottom: 90px;

    height: 32px;

    border-radius: 8px;

    background:
            linear-gradient(
                    180deg,
                    #0c234c,
                    #020b1d 75%
            );

    box-shadow:
            0 7px 0 #000817,
            0 15px 35px rgba(0, 0, 0, .7),
            inset 0 1px rgba(212, 175, 55, .22);

    transform: skewX(-5deg);
}


/* =========================================================
   MONITOROK
   ========================================================= */


/* Mindhárom monitor közös kinézete */
.monitor {
    position: absolute;

    z-index: 3;

    background: #020815;

    border: 2px solid #153e77;

    border-radius: 8px;

    box-shadow:
            0 16px 35px rgba(0, 0, 0, .7),
            0 0 28px rgba(10, 70, 155, .25);

    overflow: hidden;
}


/* Monitor belső arany kerete */
.monitor::before {
    content: "";

    position: absolute;

    inset: 5px;

    border:
            1px solid rgba(212, 175, 55, .22);

    border-radius: 4px;
}


/* Monitor talpa */
.monitor::after {
    content: "";

    position: absolute;

    left: 45%;
    bottom: -26px;

    width: 10%;
    height: 27px;

    background:
            linear-gradient(
                    #1d3255,
                    #071126
            );

    box-shadow:
            0 26px 0 -1px #152746;
}


/* ---------------------------------------------------------
   KÖZÉPSŐ MONITOR
   --------------------------------------------------------- */

.monitor-main {
    width: 39%;
    height: 220px;

    left: 31%;
    top: 40px;

    transform: translateZ(20px);
}


/* ---------------------------------------------------------
   BAL MONITOR
   --------------------------------------------------------- */

.monitor-left {
    width: 29%;
    height: 184px;

    left: 4%;
    top: 72px;

    transform: rotateY(18deg);
}


/* ---------------------------------------------------------
   JOBB MONITOR
   --------------------------------------------------------- */

.monitor-right {
    width: 27%;
    height: 177px;

    right: 6%;
    top: 82px;

    transform: rotateY(-18deg);
}


/* ---------------------------------------------------------
   MONITOROKON LÉVŐ "PROGRAMKÓD"
   --------------------------------------------------------- */

.monitor .screen-lines {
    position: absolute;

    inset: 14px;

    background:
            linear-gradient(
                    90deg,
                    rgba(10, 70, 150, .2) 49%,
                    transparent 50%
            ),
            linear-gradient(
                    rgba(255, 215, 0, .09) 1px,
                    transparent 1px
            );

    background-size:
            35% 100%,
            100% 14px;
}


/* Kék/arany programkód-szerű vonalak */
.monitor .screen-lines::before,
.monitor .screen-lines::after {
    content: "";

    position: absolute;

    left: 9%;
    right: 18%;

    height: 5px;

    border-radius: 20px;

    background:
            linear-gradient(
                    90deg,
                    var(--gold),
                    transparent
            );

    box-shadow:
            0 24px rgba(56, 129, 234, .35),
            0 48px rgba(56, 129, 234, .28),
            0 72px rgba(56, 129, 234, .18);
}


.monitor .screen-lines::before {
    top: 23%;
}


.monitor .screen-lines::after {
    top: 62%;

    right: 40%;

    opacity: .7;
}


/* ---------------------------------------------------------
   KÖZÉPSŐ MONITOR PX LOGÓ
   --------------------------------------------------------- */

.screen-logo {
    position: absolute;
    inset: 0;
    z-index: 2;

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

    overflow: hidden;
}

.screen-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: scale(3.5);
    transform-origin: center;

    filter: drop-shadow(0 0 25px rgba(255, 215, 0, .20));
}

/* PX mögötti arany fény */
.screen-glow {
    position: absolute;

    width: 100px;
    height: 100px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
            rgba(255, 215, 0, .14);

    filter:
            blur(30px);
}


/* =========================================================
   PC HÁZ
   ========================================================= */

.pc-case {
    position: absolute;

    z-index: 4;

    right: 0;
    bottom: 110px;

    width: 21%;
    height: 290px;

    border-radius: 10px;

    background:
            linear-gradient(
                    135deg,
                    #091a37,
                    #020815 60%
            );

    border:
            1px solid #1d4c89;

    box-shadow:
            0 20px 40px rgba(0, 0, 0, .75),
            0 0 35px rgba(255, 183, 0, .12),
            inset 0 0 25px rgba(16, 70, 145, .24);
}


/* PC oldallap belső kerete */
.pc-case::before {
    content: "";

    position: absolute;

    inset: 8px;

    border:
            1px solid rgba(212, 175, 55, .22);

    border-radius: 7px;
}


/* ---------------------------------------------------------
   PC VENTILÁTOROK
   --------------------------------------------------------- */

.fan {
    position: absolute;

    right: 18%;

    width: 54%;

    aspect-ratio: 1;

    border:
            3px solid rgba(212, 175, 55, .5);

    border-radius: 50%;

    box-shadow:
            0 0 12px rgba(255, 215, 0, .32),
            inset 0 0 15px rgba(255, 215, 0, .15);
}


/* Ventilátor világító közepe */
.fan::after {
    content: "";

    position: absolute;

    inset: 26%;

    border-radius: 50%;

    background:
            var(--gold);

    box-shadow:
            0 0 20px rgba(255, 215, 0, .95);
}


/* Első ventilátor */
.fan-1 {
    top: 10%;
}


/* Második ventilátor */
.fan-2 {
    top: 39%;
}


/* Harmadik ventilátor */
.fan-3 {
    top: 68%;
}


/* PC belső halvány arany fénye */
.pc-glow {
    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 215, 0, .08)
            );
}


/* =========================================================
   TELEFON
   ========================================================= */

.phone-mock {
    position: absolute;

    z-index: 6;

    right: 22%;
    bottom: 99px;

    width: 66px;
    height: 132px;

    border-radius: 13px;

    border:
            2px solid #c8961b;

    background:
            linear-gradient(
                    180deg,
                    #041335,
                    #020817
            );

    box-shadow:
            0 15px 24px rgba(0, 0, 0, .55),
            0 0 18px rgba(255, 215, 0, .16);

    transform:
            rotate(9deg);

    display: grid;

    place-items: center;

    color:
            var(--gold);

    font-family:
            "Orbitron";

    font-weight:
            800;
}


/* Telefon felső hangszórója */
.phone-mock::before {
    content: "";

    position: absolute;

    top: 6px;

    width: 24px;
    height: 3px;

    border-radius: 5px;

    background:
            #38496d;
}


/* =========================================================
   KAMERA
   ========================================================= */

.camera-mock {
    position: absolute;

    z-index: 7;

    left: 70%;
    bottom: 86px;

    width: 105px;
    height: 62px;

    border-radius:
            14px 10px 10px 14px;

    background:
            #071224;

    border:
            1px solid #304a76;

    box-shadow:
            0 14px 24px rgba(0, 0, 0, .6);

    transform:
            rotate(-7deg);
}


/* Kamera objektív */
.camera-mock div {
    position: absolute;

    left: 20px;
    top: 10px;

    width: 43px;
    height: 43px;

    border:
            5px solid #151d2e;

    outline:
            2px solid #b5871f;

    border-radius:
            50%;

    box-shadow:
            0 0 18px rgba(255, 215, 0, .25);
}


/* =========================================================
   3D NYOMTATÓ
   ========================================================= */

.printer-mock {
    position: absolute;

    z-index: 5;

    left: 10%;
    bottom: 106px;

    width: 112px;
    height: 150px;

    border:
            6px solid #06142f;

    border-top-width:
            12px;

    border-radius:
            5px;

    box-shadow:
            0 13px 25px rgba(0, 0, 0, .55);
}


/* Nyomtató felső mechanikája */
.printer-mock::before {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    top: 15px;

    height: 7px;

    background:
            #b78d28;

    box-shadow:
            0 28px #0d346f;
}


/* Nyomtatott arany tárgy */
.printer-mock span {
    position: absolute;

    left: 35px;
    right: 35px;

    top: 60px;
    bottom: 12px;

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

    background:
            linear-gradient(
                    145deg,
                    var(--gold),
                    #7b5511
            );
}


/* 3D nyomtató tárgyasztala */
.printer-mock i {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 7px;

    height: 5px;

    background:
            #a77f22;
}


/* =========================================================
   FELIRATOK
   WEB / APP
   3D / TECH
   VIDEO
   ========================================================= */

.visual-badge {
    position: absolute;

    z-index: 10;

    padding:
            8px 11px;

    border:
            1px solid rgba(212, 175, 55, .5);

    border-radius:
            7px;

    background:
            rgba(1, 15, 36, .8);

    color:
            var(--gold);

    font-family:
            "Orbitron";

    font-size:
            9px;

    letter-spacing:
            .12em;

    backdrop-filter:
            blur(8px);

    box-shadow:
            0 0 24px rgba(255, 215, 0, .08);
}


/* WEB / APP */
.badge-one {
    left: 4%;
    top: 14%;
}


/* 3D / TECH */
.badge-two {
    right: 2%;
    top: 8%;
}


/* VIDEO */
.badge-three {
    left: 50%;
    bottom: 5%;
}


/* =========================================================
   RESZPONZÍV BEÁLLÍTÁSOK
   ========================================================= */


/* ---------------------------------------------------------
   1100 PX ALATT
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .hero-visual {
        min-height: 520px;
    }

}


/* ---------------------------------------------------------
   820 PX ALATT – TABLET
   --------------------------------------------------------- */

@media (max-width: 820px) {

    .hero-visual {
        min-height: 430px;

        margin-top: -15px;
    }


    .workspace {
        top: 55px;

        transform:
                scale(.84);

        transform-origin:
                center bottom;

        left: -8%;
        right: -8%;
    }

}


/* ---------------------------------------------------------
   560 PX ALATT – TELEFON
   --------------------------------------------------------- */

@media (max-width: 560px) {

    .hero-visual {
        min-height: 360px;
    }


    .workspace {
        top: 30px;

        transform:
                scale(.68);

        left: -25%;
        right: -25%;
    }


    /* Mobilon eltűnnek a kis feliratok */
    .visual-badge {
        display: none;
    }

}