/*==============================================================
HERO COMPOSITION
FelipeOliveros.cl
==============================================================*/

.hero-composition{

    position:absolute;

    inset:0;

    z-index:6;

    pointer-events:none;

}

/*==============================================================
GENERAL
==============================================================*/

.hero-composition *{

    position:absolute;

    box-sizing:border-box;

}
/*==============================================================
EDITORIAL LINES
==============================================================*/

.comp-line{

    position:absolute;

    display:block;

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

}

.line-v{

    width:1px;

    height:72%;

    left:42%;

    top:14%;

}

.line-h-top{

    width:340px;

    height:1px;

    left:42%;

    top:43%;

}

.line-h-bottom{

    width:260px;

    height:1px;

    left:18%;

    bottom:18%;

}
/*==============================================================
EDITORIAL RECTANGLES
==============================================================*/

.comp-rect{

    position:absolute;

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

    border-radius:30px;

}

.rect-large{

    width:220px;

    height:300px;

    left:22%;

    top:34%;

}

.rect-small{

    width:180px;

    height:120px;

    left:46%;

    top:58%;

}
/*==============================================================
EDITORIAL CIRCLES
==============================================================*/

.comp-circle{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(198,155,88,.18);
    
    animation:circleOrbit 22s ease-in-out infinite;

}

.circle-big{

    width:520px;

    height:520px;

    right:-170px;

    top:18%;

}

.circle-medium{

    width:280px;

    height:280px;

    right:20px;

    bottom:-50px;

}
/*==============================================================
EDITORIAL NODES
==============================================================*/

.comp-node{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--color-gold);
    
    animation:nodePulse 9s ease-in-out infinite;

}
.node-1{

    left:42%;

    top:43%;
    
     animation-delay:0s;

}
.node-2{

    left:42%;

    top:84%;
    
     animation-delay:2s;

}
.node-3{

    right:170px;

    top:33%;
    
     animation-delay:4s;

}
.node-4{

    right:145px;

    bottom:96px;
    
     animation-delay:6s;

}
/*==============================================================
EDITORIAL MOTION
==============================================================*/

.comp-node{

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

}

.comp-circle{

    animation:circleFloat 18s ease-in-out infinite;

}

.rect-large{

    animation:rectFloat 14s ease-in-out infinite;

}
@keyframes nodePulse{

    0%,100%{

        transform:scale(1);

        opacity:.55;

    }

    50%{

        transform:scale(1.55);

        opacity:1;

    }

}
@keyframes circleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}
@keyframes rectFloat{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(8px);

    }

}
@keyframes circleOrbit{

    0%{

        transform:

            translateY(0)

            rotate(0deg);

    }

    50%{

        transform:

            translateY(-8px)

            rotate(2deg);

    }

    100%{

        transform:

            translateY(0)

            rotate(0deg);

    }

}