/* iOS GLASSMORPHISM POZADINA */ 
.header {
    background: rgba(0, 0, 0, 0.15);

    backdrop-filter: blur(10px) saturate(180%) contrast(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(180%) contrast(1.2);
}


/* GLASS BOX */
.glass-box {
    backdrop-filter: blur(15px) saturate(180%) contrast(120%);
    -webkit-backdrop-filter: blur(15px) saturate(180%) contrast(120%);
    border-radius: 10px;
}


/* CAMERA FOCUS EFFECT */
.camera-focus {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: rgba(0, 0, 0, 0.15);

    backdrop-filter: blur(8px) saturate(160%) contrast(110%);
    -webkit-backdrop-filter: blur(8px) saturate(160%) contrast(110%);

    --x: 50%;
    --y: 50%;
    --focus-size: 440px;
    --blur-strength: 12px;
}


/* Element koji treba ostati iznad blur efekta */
.focus-clear {
    position: relative;
    z-index: 50;
    border: none;
}


/* Kada miš NIJE preko elementa: sve je mutno */
.camera-focus::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;

    backdrop-filter: blur(var(--blur-strength)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(140%);

    background: rgba(0, 0, 0, 0.04);

    opacity: 1;
    transition: opacity 0.25s ease;

    mask-image: none;
    -webkit-mask-image: none;
}


/* Kada miš PREĐE preko elementa: otvara se oštri fokus oko miša */
.camera-focus:hover::after {
    mask-image: radial-gradient(
        circle var(--focus-size) at var(--x) var(--y),
        transparent 0%,
        transparent 45%,
        rgba(0, 0, 0, 0.7) 72%,
        black 100%
    );

    -webkit-mask-image: radial-gradient(
        circle var(--focus-size) at var(--x) var(--y),
        transparent 0%,
        transparent 45%,
        rgba(0, 0, 0, 0.7) 72%,
        black 100%
    );
}
/* GLOBAL MOUSE GLOW EFFECT - PREMIUM APPLE STYLE */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;

    width: 240px;
    height: 240px;

    pointer-events: none;
    z-index: 9999;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(60, 200, 255, 0.38) 18%,
            rgba(60, 200, 255, 0.18) 42%,
            rgba(60, 200, 255, 0.06) 65%,
            rgba(60, 200, 255, 0) 78%
        );

    filter: blur(18px) saturate(140%);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;

    mix-blend-mode: screen;

    transition:
        opacity 0.35s ease,
        filter 0.35s ease;

    animation: cursorGlowApplePulse 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


/* Unutrašnji mekani highlight */
.cursor-glow::before {
    content: "";
    position: absolute;
    inset: 32%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(60, 200, 255, 0.32) 45%,
            rgba(60, 200, 255, 0) 75%
        );

    filter: blur(10px);
    opacity: 0.75;

    animation: cursorGlowInnerPulse 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


/* Vanjski ultra mekani halo */
.cursor-glow::after {
    content: "";
    position: absolute;
    inset: -18%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(60, 200, 255, 0.18) 0%,
            rgba(60, 200, 255, 0.08) 45%,
            rgba(60, 200, 255, 0) 75%
        );

    filter: blur(28px);
    opacity: 0.65;

    animation: cursorGlowOuterPulse 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


/* Kada je miš na stranici, glow je vidljiv */
body:hover .cursor-glow {
    opacity: 1;
}


/* Premium Apple-style pulse */
@keyframes cursorGlowApplePulse {
    0% {
        transform: translate(-50%, -50%) scale(0.96);
        filter: blur(18px) saturate(135%) brightness(1);
    }

    35% {
        transform: translate(-50%, -50%) scale(1.04);
        filter: blur(22px) saturate(155%) brightness(1.18);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.01);
        filter: blur(20px) saturate(145%) brightness(1.08);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.96);
        filter: blur(18px) saturate(135%) brightness(1);
    }
}


/* Unutrašnji highlight pulsira malo drugačije radi dubine */
@keyframes cursorGlowInnerPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.92);
    }

    45% {
        opacity: 0.9;
        transform: scale(1.12);
    }

    100% {
        opacity: 0.55;
        transform: scale(0.92);
    }
}


/* Vanjski halo se širi sporije */
@keyframes cursorGlowOuterPulse {
    0% {
        opacity: 0.35;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.75;
        transform: scale(1.18);
    }

    100% {
        opacity: 0.35;
        transform: scale(0.95);
    }
}


/* Na mobitelima se efekat gasi */
@media (hover: none) {
    .cursor-glow {
        display: none;
    }
}


/* APPLE + LIQUID GLASS + AURORA PLASMA */
.wave-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            #000000 0%,
            #020406 45%,
            #000000 100%
        );
}


/* GLAVNI LIQUID AURORA SLOJ */
.wave-bg::before {
    content: "";
    position: absolute;
    inset: -22%;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(60, 200, 255, 0.30) 0%,
            rgba(60, 200, 255, 0.14) 18%,
            rgba(60, 200, 255, 0.05) 34%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 78% 24%,
            rgba(120, 225, 255, 0.22) 0%,
            rgba(60, 200, 255, 0.11) 20%,
            rgba(60, 200, 255, 0.04) 38%,
            transparent 64%
        ),
        radial-gradient(
            ellipse at 50% 78%,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(60, 200, 255, 0.13) 18%,
            rgba(60, 200, 255, 0.04) 36%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 32% 62%,
            rgba(90, 215, 255, 0.18) 0%,
            rgba(60, 200, 255, 0.08) 22%,
            transparent 58%
        );

    filter: blur(60px) saturate(155%) brightness(1.08);
    opacity: 0.95;
    mix-blend-mode: screen;

    animation: liquidAuroraFlow 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}


/* GLASS REFLECTION / PLASMA SLOJ */
.wave-bg::after {
    content: "";
    position: absolute;
    inset: -28%;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 16%,
            rgba(60, 200, 255, 0.08) 24%,
            transparent 34%,
            transparent 42%,
            rgba(60, 200, 255, 0.07) 52%,
            rgba(255, 255, 255, 0.035) 60%,
            transparent 72%,
            rgba(60, 200, 255, 0.06) 84%,
            transparent 100%
        ),
        radial-gradient(
            ellipse at 40% 48%,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(60, 200, 255, 0.10) 16%,
            rgba(60, 200, 255, 0.03) 30%,
            transparent 54%
        ),
        radial-gradient(
            ellipse at 68% 42%,
            rgba(60, 200, 255, 0.20) 0%,
            rgba(60, 200, 255, 0.08) 18%,
            transparent 52%
        );

    filter: blur(75px) saturate(180%) brightness(1.18);
    opacity: 0.92;
    mix-blend-mode: screen;

    animation: glassPlasmaShift 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}


/* SADRŽAJ OSTANE IZNAD */
.wave-bg > * {
    position: relative;
    z-index: 1;
}


/* GLAVNI TEČNI TOK */
@keyframes liquidAuroraFlow {
    0% {
        transform: translate3d(-6%, -4%, 0) scale(1.00) rotate(-2deg);
        opacity: 0.72;
        filter: blur(52px) saturate(145%) brightness(1.00);
        border-radius: 42% 58% 48% 52% / 40% 52% 48% 60%;
    }

    25% {
        transform: translate3d(8%, 3%, 0) scale(1.10) rotate(2deg);
        opacity: 0.98;
        filter: blur(66px) saturate(175%) brightness(1.25);
        border-radius: 60% 40% 54% 46% / 58% 40% 60% 42%;
    }

    50% {
        transform: translate3d(-2%, 10%, 0) scale(1.18) rotate(-3deg);
        opacity: 0.85;
        filter: blur(74px) saturate(190%) brightness(1.18);
        border-radius: 48% 52% 38% 62% / 62% 42% 58% 38%;
    }

    75% {
        transform: translate3d(10%, -3%, 0) scale(1.08) rotate(3deg);
        opacity: 1;
        filter: blur(68px) saturate(185%) brightness(1.30);
        border-radius: 56% 44% 62% 38% / 46% 58% 42% 54%;
    }

    100% {
        transform: translate3d(-4%, 6%, 0) scale(1.14) rotate(-1deg);
        opacity: 0.78;
        filter: blur(60px) saturate(160%) brightness(1.08);
        border-radius: 44% 56% 46% 54% / 54% 44% 56% 46%;
    }
}


/* GLASS REFLECTION / PLASMA KRETANJE */
@keyframes glassPlasmaShift {
    0% {
        transform: translate3d(6%, -5%, 0) scale(1.00) rotate(0deg);
        opacity: 0.42;
        filter: blur(60px) saturate(155%) brightness(1.00);
    }

    20% {
        transform: translate3d(-10%, 2%, 0) scale(1.12) rotate(4deg);
        opacity: 0.92;
        filter: blur(82px) saturate(200%) brightness(1.35);
    }

    45% {
        transform: translate3d(8%, 8%, 0) scale(1.22) rotate(-5deg);
        opacity: 0.75;
        filter: blur(92px) saturate(215%) brightness(1.25);
    }

    70% {
        transform: translate3d(-6%, -6%, 0) scale(1.10) rotate(3deg);
        opacity: 1;
        filter: blur(78px) saturate(210%) brightness(1.40);
    }

    100% {
        transform: translate3d(4%, 6%, 0) scale(1.16) rotate(-2deg);
        opacity: 0.55;
        filter: blur(70px) saturate(175%) brightness(1.10);
    }
}