/* ==========================
        NOISE
========================== */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
    opacity:.16;
    pointer-events:none;
    z-index:999;
    mix-blend-mode:soft-light;
}

/* ==========================
      GLASS EFFECT
========================== */

.hero-right,
.project-body,
.resume, .skills, .education,
footer,
header{
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    background:rgba(255,255,255,.42);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:
        0 20px 60px rgba(42,93,255,.10),
        inset 0 1px rgba(255,255,255,.7);
    border-radius:var(--radius);
}

/* ==========================
      THUMBNAILS
========================== */

.thumbnail{
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
        140deg,
        #ffffff,
        #d7e6ff);
}

.thumbnail::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(255,255,255,.95),
    transparent);
    right:-80px;
    top:-120px;
    filter:blur(35px);
}

.thumbnail::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.22),
        transparent 80%
    );
}

.system-card{
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    background:rgba(255,255,255,.42);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:
        0 20px 60px rgba(42,93,255,.10),
        inset 0 1px rgba(255,255,255,.7);

    border-radius:var(--radius);

    transition:.35s ease;
}

.system-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 25px 80px rgba(55,105,255,.20);
}

.click-ripple{
    position:fixed;

    width:20px;
    height:20px;

    border-radius:50%;

    background:rgba(62,107,255,.05);

    pointer-events:none;

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

    animation:ripple .8s ease-out;

    z-index:1000;
}


@keyframes ripple{

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

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

}

@media (hover:none){
    .project-body:hover,
    .system-card:hover,
    .contact-item:hover,
    .socials a:hover{
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce){
    body::after{
        transform:scale(1.1);
    }

    .click-ripple{
        display:none;
    }
}