/** @file       <css/style.css>
 *  @details    Tá (quase) tudo aq.
 */

/*
 *
 *  Variables
 *
 */

:root {
    /*  General style */
    --gap:              24px;
    --sidebar-width:    200px;
    --roundness:        20px;


    /*  Colors */
    --color-bg:         #ffffff;
    --color-primary:    #4affa4;
    --color-secondary:  #FA8334;
    --color-black:      #0C120C;

    --color-1:          #FCC29C;
    --color-2:          #EE6C4D;
    --color-3:          #4affa4;

    --color-icon-1:     #B9FAF8;
    --color-icon-2:     #D561B3;
    --color-icon-3:     #8E57DA;
    --color-desc-bg:    #8E57DA;

    --color-text:       #B9FAF8;
    --color-text2:      #0F1020;
}





/*
 *
 *  Global style
 *
 */

body {
    /*
     *  Background #0b0b2c
     */

    background:             linear-gradient(to bottom, #121529FF, #151E3AFF);
    background-image:       url("../assets/img/HU BG.png");
    background-size:        cover;
    background-repeat:      no-repeat;
    background-attachment:  fixed;

    font-family:            "Barlow", monospace;
    margin:                 0px;
}


h1 {
    color:      var(--color-1);
}


p {
    font-size:  16px;
    color:      var(--color-text);

}


button {
    background-color: #3366cc;
    color: white;
    padding: 10px;
    border: none;
}


a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}



/*
 *
 *  Elements
 *
 */

.layout {
    display:    flex;   /* flex layout lays children horizontally... */
    min-height: 100vh;  /* ensures all of it can be viewed on vertical. */
}


.content {
    flex:               1;
    display:            flex;
    justify-content:    center;
    align-items:        center;
}


.container {
    width:          300px;
    margin:         50px auto;
    padding:        20px;
    border-radius:  10px;
}


.dot {
    position: absolute;

    width:  6px;
    height: 6px;
}


.box {
    position: relative;
    z-index: - 1;
}




/*
 *
 *  Left
 *
 */

.logo {
    text-align: center;

    /*
     *  Animations
     */

    animation:  animation-logo-intro 500ms cubic-bezier(0.12, 0.9, 0.2, 1) 1;

    display:    inline-block;
    transition: transform 400ms ease-in-out;
}



.logo:hover {
    transform: rotate(60deg);
}


@keyframes animation-logo-intro {
    0% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


.left-panel {
    position:       fixed;
    top:            var(--gap);
    bottom:         var(--gap);
    right:          var(--gap);
    left:           var(--gap);
    width:          150px;

    display:        flex;
    flex-direction: column;

    /*  Border */
    padding:        16px;
    border-radius:  var(--roundness) var(--roundness);


    /*  Background */
    background:     linear-gradient(to bottom, rgba(107, 50, 251, 0.336) 0%, rgba(0, 0, 0, 0) 95%),
                    linear-gradient(to right, transparent, rgba(255, 47, 0, 0.346));
    background-blend-mode: multiply;

    animation: animation-left-intro 1s linear 1;
}





@keyframes animation-left-intro {
    0% {
        filter: blur(5px);
    }

    100% {
        filter: blur(0px);
    }
}







/*
 *
 *  Main
 *
 */

.main-panel {
    /*  Layout */
    position:   fixed;
    top:        var(--gap);
    bottom:     var(--gap);
    left:       calc(var(--gap) * 2 + var(--sidebar-width));
    right:      var(--gap);


    /*  Border */
    padding:        16px;
    border:         2px solid transparent;
    border-radius:  var(--roundness);
    /* box-shadow:     0px 0px 4px var(--color-primary); */


    /*  Animations */
    animation:  animation-main-panel-blur 20s linear infinite,
                animation-main-panel-intro 1s linear 1;
    overflow:   hidden;
}


@keyframes animation-main-panel-intro {
    0% {
        filter: blur(5px);
    }

    100% {
        filter: blur(0px);
    }
}


@keyframes animation-main-panel-blur {
    0% {
        filter: blur(0px);
    }

    90% {
        filter: blur(0px)
    }

    95% {
        filter: blur(1px)
    }

    100% {
        filter: blur(0px)
    }
}


.comet {
    position:   absolute;

    top:        0;
    right:      0;

    width:      3px;
    height:     3px;

    background-color:   var(--color-primary);
    border-radius:      50%; /* circle */

    box-shadow:
        0px 0px 10px        var(--color-primary),
        0px 0px 20px        var(--color-primary);

    animation:          animation-comet-fly 20.0s linear infinite;
    animation-delay:    2s;
}


.comet::before {
    content:    "";

    position:   absolute;
    right:      100%;
    top:        50%;
    transform:  translate(100%, -50%);

    width:      8000%;
    height:     0.5px;

    background: linear-gradient(to left, transparent, var(--color-primary));
    filter:     blur(1px);
}


@keyframes animation-comet-fly {
    0% {
        transform:  translate(50%, 100%);
        opacity:    0%;
    }

    5% {
        opacity:    0%;
    }

    20% {
        opacity:    100%;
    }

    90% {
        opacity:    0%;
    }

    100% {
        transform: translate(-100vw, 100%);
        opacity:    0%;
    }
}



.title {
    font-family:    "Cinzel Decorative";
    font-size:      36px;
    font-weight:    400;
    text-shadow:    0px 0px 5px var(--color-secondary);

    margin-bottom:  8px;
    color:          var(--color-secondary);
}


.subtitle {
    font-family:    "Cinzel";
    font-size:      16px;
    font-weight:    100;
    text-shadow:    0px 0px 5px var(--color-secondary);

    text-align:     right;
    margin-bottom:  8px;

    color:          var(--color-secondary);
}


.description {
    font-family:    "Cinzel";
    font-size:      16px;
    font-weight:    100;


    /* Text */
    position:       relative;
    padding:        24px 12px;
    text-align:     center;
    color:          var(--color-text);
    z-index:        0;

    animation:  animation-desc-text 5s ease infinite alternate;
}


.description::before {
    position:   absolute;
    inset:      0;

    /* Background */
    border-radius:      var(--roundness);
    background:         radial-gradient(ellipse, var(--color-secondary), transparent 60%);
    z-index: - 1;

    animation:  animation-desc-bg 8s ease infinite alternate;
}


/* @todo text-shadow */
@keyframes animation-desc-bg {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 25%;
    }
}


@keyframes animation-desc-text {
    0% {
        text-shadow:    0px 0px 20px var(--color-secondary),
                        0px 0px 5px var(--color-secondary);
    }

    100% {
        text-shadow:    0px 0px 2px var(--color-secondary);
    }
}