Minden mozog

```css
/* =========================================
   09. MINDEN MOZOG
   ========================================= */

.hero-minden-mozog {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 42%, rgba(111, 139, 126, 0.18), transparent 24%),
        radial-gradient(circle at 20% 75%, rgba(186, 160, 103, 0.10), transparent 25%),
        #101614;
    color: #f3f0e8;
    isolation: isolate;
}


/* ---------- FÉNYFOLTOK ---------- */

.hero-minden-mozog .mm-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: .55;
    z-index: -3;
}

.hero-minden-mozog .mm-glow-1 {
    width: 330px;
    height: 330px;
    left: 8%;
    top: 12%;
    background: rgba(133, 165, 150, .18);
    animation: mmGlowOne 9s ease-in-out infinite alternate;
}

.hero-minden-mozog .mm-glow-2 {
    width: 420px;
    height: 420px;
    right: 5%;
    bottom: -80px;
    background: rgba(190, 159, 92, .13);
    animation: mmGlowTwo 12s ease-in-out infinite alternate;
}

.hero-minden-mozog .mm-glow-3 {
    width: 220px;
    height: 220px;
    right: 32%;
    top: 10%;
    background: rgba(116, 153, 145, .13);
    animation: mmGlowThree 7s ease-in-out infinite alternate;
}


/* ---------- RÁCS ---------- */

.hero-minden-mozog .mm-grid {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    animation: mmGridMove 18s linear infinite;
}


/* ---------- ORBITÁK ---------- */

.hero-minden-mozog .mm-orbit {
    position: absolute;
    border: 1px solid rgba(205, 191, 158, .16);
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
}

.hero-minden-mozog .mm-orbit-1 {
    width: 620px;
    height: 620px;
    right: -150px;
    top: 40px;
    animation: mmOrbitOne 24s linear infinite;
}

.hero-minden-mozog .mm-orbit-2 {
    width: 430px;
    height: 430px;
    right: -45px;
    top: 135px;
    border-color: rgba(136, 164, 151, .18);
    animation: mmOrbitTwo 18s linear infinite reverse;
}

.hero-minden-mozog .mm-orbit-3 {
    width: 780px;
    height: 780px;
    right: -230px;
    top: -40px;
    border-style: dashed;
    opacity: .45;
    animation: mmOrbitThree 35s linear infinite;
}


/* ---------- FORMÁK ---------- */

.hero-minden-mozog .mm-shape {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}


/* kör */

.hero-minden-mozog .mm-circle {
    width: 54px;
    height: 54px;
    left: 58%;
    top: 18%;
    border-radius: 50%;
    border: 1px solid rgba(224, 202, 148, .65);
    box-shadow:
        0 0 30px rgba(224, 202, 148, .15),
        inset 0 0 18px rgba(224, 202, 148, .08);
    animation: mmCircle 6s ease-in-out infinite;
}


/* négyzet */

.hero-minden-mozog .mm-square {
    width: 82px;
    height: 82px;
    right: 19%;
    bottom: 19%;
    border: 1px solid rgba(155, 188, 171, .55);
    transform: rotate(25deg);
    animation: mmSquare 8s ease-in-out infinite;
}


/* háromszög */

.hero-minden-mozog .mm-triangle {
    width: 0;
    height: 0;
    left: 73%;
    bottom: 23%;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid rgba(206, 180, 119, .45);
    filter: drop-shadow(0 0 18px rgba(206, 180, 119, .16));
    animation: mmTriangle 7s ease-in-out infinite;
}


/* rombusz */

.hero-minden-mozog .mm-diamond {
    width: 38px;
    height: 38px;
    right: 34%;
    top: 30%;
    border: 1px solid rgba(191, 213, 202, .55);
    transform: rotate(45deg);
    animation: mmDiamond 5s ease-in-out infinite;
}


/* ---------- ALSÓ MOZGÓ VONALAK ---------- */

.hero-minden-mozog .mm-lines {
    position: absolute;
    left: 9%;
    bottom: 0;
    width: 260px;
    height: 145px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    opacity: .7;
    z-index: -1;
}

.hero-minden-mozog .mm-lines span {
    display: block;
    width: 2px;
    height: 30px;
    background: linear-gradient(
        to top,
        rgba(216, 194, 145, .05),
        rgba(216, 194, 145, .75)
    );
    transform-origin: bottom;
    animation: mmWave 2.8s ease-in-out infinite;
}

.hero-minden-mozog .mm-lines span:nth-child(1) {
    height: 55px;
    animation-delay: -.4s;
}

.hero-minden-mozog .mm-lines span:nth-child(2) {
    height: 90px;
    animation-delay: -.8s;
}

.hero-minden-mozog .mm-lines span:nth-child(3) {
    height: 125px;
    animation-delay: -1.2s;
}

.hero-minden-mozog .mm-lines span:nth-child(4) {
    height: 78px;
    animation-delay: -.7s;
}

.hero-minden-mozog .mm-lines span:nth-child(5) {
    height: 43px;
    animation-delay: -.2s;
}


/* ---------- TARTALOM ---------- */

.hero-minden-mozog .mm-content {
    position: relative;
    z-index: 5;
    width: min(650px, 80%);
    margin-left: 11%;
    padding-top: 185px;
    transition: transform .25s ease-out;
}


/* kicker */

.hero-minden-mozog .mm-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 27px;
    color: #cbb889;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.hero-minden-mozog .mm-kicker i,
.hero-minden-mozog .mm-kicker b {
    display: block;
    width: 28px;
    height: 1px;
    background: #cbb889;
}

.hero-minden-mozog .mm-kicker b {
    width: 7px;
    opacity: .5;
}

.hero-minden-mozog .mm-typing {
    min-width: 145px;
}


/* cím */

.hero-minden-mozog h1 {
  margin: 0 !important;
    color: #f3f0e8 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(70px, 9vw, 142px);
    line-height: .86;
    font-weight: 400;
    letter-spacing: -.065em;
}

.hero-minden-mozog h1 span {
    display: block;
color: #f3f0e8 !important;
    animation: mmTitleOne 1.1s cubic-bezier(.2,.8,.2,1) both;
}

.hero-minden-mozog h1 strong {
    display: block;
    margin-left: 13%;
    color: #d4bc82 !important;
    font-weight: 400;
    font-style: italic;
    animation: mmTitleTwo 1.2s .18s cubic-bezier(.2,.8,.2,1) both;
}


/* szöveg */

.hero-minden-mozog .mm-content p {
    max-width: 420px;
    margin: 42px 0 32px 4px;
    color: rgba(243,240,232,.68);
    font-size: 15px;
    line-height: 1.8;
}


/* gomb */

.hero-minden-mozog .mm-button {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 14px 20px;
    border: 1px solid rgba(216, 194, 145, .38);
    color: #f3f0e8;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .08em;
    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}

.hero-minden-mozog .mm-button span {
    font-size: 19px;
    transition: transform .35s ease;
}

.hero-minden-mozog .mm-button:hover {
    background: rgba(216,194,145,.1);
    border-color: rgba(216,194,145,.75);
    transform: translateY(-3px);
}

.hero-minden-mozog .mm-button:hover span {
    transform: translate(4px, -4px);
}


/* ---------- OLDALSÓ FELIRAT ---------- */

.hero-minden-mozog .mm-side-text {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: rotate(90deg) translateX(50%);
    transform-origin: right center;
    color: rgba(243,240,232,.3);
    font-size: 9px;
    letter-spacing: .28em;
}


/* ---------- SORSZÁM ---------- */

.hero-minden-mozog .mm-number {
    position: absolute;
    right: 48px;
    bottom: 35px;
    color: rgba(243,240,232,.28);
    font-family: Georgia, serif;
    font-size: 15px;
    letter-spacing: .15em;
}


/* =========================================
   ANIMÁCIÓK
   ========================================= */

@keyframes mmGlowOne {
    from {
        transform: translate(-30px, 20px) scale(.9);
    }
    to {
        transform: translate(90px, -60px) scale(1.25);
    }
}

@keyframes mmGlowTwo {
    from {
        transform: translate(30px, 30px) scale(.85);
    }
    to {
        transform: translate(-90px, -80px) scale(1.15);
    }
}

@keyframes mmGlowThree {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-80px, 90px);
    }
}

@keyframes mmGridMove {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(70px, 70px, 0);
    }
}

@keyframes mmOrbitOne {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg) scale(1.03);
    }
}

@keyframes mmOrbitTwo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes mmOrbitThree {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(-360deg) scale(.98);
    }
}

@keyframes mmCircle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(45px, -55px) scale(1.25);
    }
}

@keyframes mmSquare {
    0%, 100% {
        transform: translate(0, 0) rotate(25deg);
    }
    50% {
        transform: translate(-60px, -40px) rotate(115deg);
    }
}

@keyframes mmTriangle {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(55px, -65px) rotate(70deg);
    }
}

@keyframes mmDiamond {
    0%, 100% {
        transform: translate(0, 0) rotate(45deg);
    }
    50% {
        transform: translate(-45px, 55px) rotate(145deg);
    }
}

@keyframes mmWave {
    0%, 100% {
        transform: scaleY(.35);
        opacity: .35;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes mmTitleOne {
    from {
        opacity: 0;
        transform: translateX(-70px);
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes mmTitleTwo {
    from {
        opacity: 0;
        transform: translateX(90px);
        clip-path: inset(0 0 0 100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
}


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

@media (max-width: 700px) {

    .hero-minden-mozog {
        min-height: 700px;
    }

    .hero-minden-mozog .mm-content {
        width: 86%;
        margin-left: 7%;
        padding-top: 145px;
    }

    .hero-minden-mozog h1 {
        font-size: clamp(60px, 17vw, 92px);
    }

    .hero-minden-mozog h1 strong {
        margin-left: 8%;
    }

    .hero-minden-mozog .mm-orbit-1 {
        width: 480px;
        height: 480px;
        right: -280px;
    }

    .hero-minden-mozog .mm-orbit-2 {
        right: -200px;
    }

    .hero-minden-mozog .mm-side-text {
        display: none;
    }

    .hero-minden-mozog .mm-number {
        right: 20px;
        bottom: 20px;
    }

    .hero-minden-mozog .mm-lines {
        left: 7%;
        width: 180px;
        height: 110px;
    }
}


/* mozgás kikapcsolása */

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

    .hero-minden-mozog *,
    .hero-minden-mozog *::before,
    .hero-minden-mozog *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

```javascript
/* =========================================
   09. MINDEN MOZOG
   ========================================= */

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

    const hero = document.querySelector(".hero-minden-mozog");

    if (!hero) return;


    /* -----------------------------------------
       GÉPELŐDŐ FELIRAT
       ----------------------------------------- */

    const typing = hero.querySelector(".mm-typing");

    const texts = [
        "Ötletek mozgásban",
        "Szabad gondolatok",
        "Új lehetőségek",
        "Kreatív világ"
    ];

    let textIndex = 0;
    let charIndex = 0;
    let deleting = false;

    function typeWriter() {

        const current = texts[textIndex];

        if (!deleting) {

            charIndex++;

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

            if (charIndex === current.length) {

                deleting = true;

                setTimeout(typeWriter, 1800);
                return;
            }

        } else {

            charIndex--;

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

            if (charIndex === 0) {

                deleting = false;
                textIndex = (textIndex + 1) % texts.length;
            }
        }

        setTimeout(
            typeWriter,
            deleting ? 45 : 75
        );
    }

    typeWriter();


    /* -----------------------------------------
       EGÉR PARALLAX
       ----------------------------------------- */

    const content = hero.querySelector(".mm-content");
    const shapes = hero.querySelectorAll(".mm-shape");
    const glows = hero.querySelectorAll(".mm-glow");

    let mouseX = 0;
    let mouseY = 0;

    let currentX = 0;
    let currentY = 0;

    hero.addEventListener("mousemove", (event) => {

        const rect = hero.getBoundingClientRect();

        mouseX =
            (event.clientX - rect.left) / rect.width - 0.5;

        mouseY =
            (event.clientY - rect.top) / rect.height - 0.5;

    });


    function animate() {

        currentX += (mouseX - currentX) * 0.045;
        currentY += (mouseY - currentY) * 0.045;


        if (content) {

            content.style.transform =
                `translate3d(${currentX * -12}px,
                             ${currentY * -8}px,
                             0)`;
        }


        shapes.forEach((shape, index) => {

            const strength =
                10 + (index * 8);

            const x =
                currentX * strength;

            const y =
                currentY * strength;

            shape.style.marginLeft = `${x}px`;
            shape.style.marginTop = `${y}px`;
        });


        glows.forEach((glow, index) => {

            const strength = 10 + index * 14;

            glow.style.marginLeft =
                `${currentX * strength}px`;

            glow.style.marginTop =
                `${currentY * strength}px`;
        });


        requestAnimationFrame(animate);
    }

    animate();

});