/*==============================================================
HERO STUDIO
FelipeOliveros.cl
==============================================================*/

.hero-studio{

    position:relative;

    width:100%;

    height:620px;

    border-radius:28px;

    overflow:hidden;

    isolation:isolate;

}

/*==============================================================
IMAGE
==============================================================*/

.studio-image{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    transform:scale(1.02);

    filter:

        contrast(1.12)

        brightness(.78)

        saturate(.88)

        sepia(.08)

        hue-rotate(-4deg);

    transition:

        transform .9s cubic-bezier(.22,.61,.36,1),

        filter .9s cubic-bezier(.22,.61,.36,1);

}
/*==============================================================
OVERLAY
==============================================================*/

.studio-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(8,8,8,.62) 0%,

            rgba(8,8,8,.30) 40%,

            rgba(8,8,8,.12) 100%

        );

    z-index:2;

}
/*==============================================================
LEFT FADE
==============================================================*/

.studio-gradient{

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 72% 20%,

            rgba(198,155,88,.16),

            transparent 45%

        ),

        radial-gradient(

            circle at 35% 80%,

            rgba(198,155,88,.08),

            transparent 55%

        );

    mix-blend-mode:screen;

    z-index:3;

}
/*==============================================================
FRAME
==============================================================*/

.studio-frame{

    position:absolute;

    inset:0;

    border:1px solid rgba(198,155,88,.12);

    border-radius:28px;

    z-index:10;

}
.hero-studio:hover .studio-image{

    transform:scale(1.07);

}
/*==============================================================
TECH LINES
==============================================================*/

.studio-lines{

    position:absolute;

    inset:0;

    z-index:5;

    pointer-events:none;

}
.studio-line{

    position:absolute;

    background:rgba(198,155,88,.14);

}
.studio-line-1{

    width:260px;

    height:1px;

    top:140px;

    right:80px;

}
.studio-line-2{

    width:1px;

    height:180px;

    top:140px;

    right:180px;

}
.studio-line-3{

    width:220px;

    height:1px;

    bottom:150px;

    right:120px;

    transform:rotate(-28deg);

}
.studio-node{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--color-gold);

    box-shadow:

        0 0 10px rgba(198,155,88,.8),

        0 0 25px rgba(198,155,88,.35);

}
.node-a{

    top:136px;

    right:176px;

}

.node-b{

    bottom:148px;

    right:116px;

}

.node-c{

    top:136px;

    right:336px;

}
.studio-line{

    animation:studioLineGlow 8s ease-in-out infinite;

}

.studio-node{

    animation:studioNodePulse 3s ease-in-out infinite;

}
@keyframes studioLineGlow{

    0%,100%{

        opacity:.15;

    }

    50%{

        opacity:.45;

    }

}

@keyframes studioNodePulse{

    0%,100%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.5);

        opacity:1;

    }

}

.hero-studio:hover .studio-image{

    transform:scale(1.045);

    filter:

        contrast(1.16)

        brightness(.82)

        saturate(.95);

}