header {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    position: absolute;
    top: 0;
    left: -6rem; /* Start position before animation */
    bottom: 0;

    animation-name: header-fly-in;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(.7, 1.6, .75, .9);
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

@keyframes header-fly-in {
    100%{left: 0;}
}

nav {

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: start;

    margin: var(--gap-s);
    padding: var(--gap-xs);
    gap: var(--gap-xs);

    overflow: hidden;
    z-index: 10;

    width: calc(2 * var(--size-icons) + 2 * (var(--gap-xs) + var(--size-borders)));
    border-radius: calc(var(--size-icons) + var(--gap-xs) + var(--size-borders));

    /* Frosted glass background */
    background-color: var(--frosted-glass-background);
    background-blend-mode: var(--frosted-glass-blendmode);
    backdrop-filter: var(--frosted-glass-blur);
    -webkit-backdrop-filter: var(--frosted-glass-blur);
    border: var(--frosted-glass-border);

    box-shadow: var(--shadow-elevation-high);

    transition: width 1s cubic-bezier(.4,.01,.25,1) 1s;
}

nav:hover,
nav:has(.btn-nav:focus) {
    width: 15rem;
    transition: width 1s cubic-bezier(.4,.01,.25,1);
}


nav span {
    opacity: 0;
    transform: translateX(-8px);

    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.4, 0, .25, 1);
    transition-delay: .5s;
}

nav:hover span,
nav:has(.btn-nav:focus) span {
    opacity: 1;
    transform: translateX(0px);
}


/* Animations for menu icons */

/* Rocket */
.btn-nav:hover #svg-rocket {
    animation-name: rocket-launch;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.75, 0, .75, 1);
    animation-iteration-count: 1;
    animation-delay: .5s;
}


.btn-nav:hover #svg-rocket-flame {
    animation-name: rocket-flame;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.75, 0, .75, 1);
    animation-iteration-count: 1;
    animation-delay: .5s;
}

@keyframes rocket-launch {
    0%  {transform: translate(0, 0); opacity: 1;}
    60% {transform: translate(60px, -60px); opacity: 1;}
    61% {opacity: 0;}
    62% {transform: translate(0, 0);}
    75% {opacity: 1;}
    100%{opacity: 1;}
}

@keyframes rocket-flame {
    0%  {color: var(--c-text);}
    20% {color: var(--c-highlight);}
    60% {color: var(--c-highlight);}
    61% {color: var(--c-text)}
    100%{color: var(--c-text);}
}


/* Brush and ruler */

.btn-nav:hover #svg-ruler-path {
    animation-name: rotate-180;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.5, -.5, .5, 1.5);
    animation-iteration-count: 1;
    animation-direction: reverse;
    animation-delay: .5s;

    transform-origin: 50% 50%;
}

.btn-nav:hover #svg-brush,
.btn-nav:hover #svg-ruler-mask1,
.btn-nav:hover #svg-ruler-mask2,
.btn-nav:hover #svg-ruler-mask3 {
    animation-name: rotate-360;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.5, -.5, .5, 1.5);
    animation-iteration-count: 1;
    animation-delay: .5s;

    transform-origin: 50% 50%;
}

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

@keyframes rotate-180 {
    0%  {transform: rotate(0deg);}
    100%{transform: rotate(180deg);}
}

/* Portfolio */

.btn-nav:hover #svg-portfolio-line1 {
    animation: line-undraw 1s ease 1s 1 normal forwards, line-draw 1s ease 2s 1 normal forwards;
}

.btn-nav:hover #svg-portfolio-line2 {
    animation: line-undraw 1s ease .75s 1 normal forwards, line-draw 1s ease 2.25s 1 normal forwards;
}

.btn-nav:hover #svg-portfolio-line3 {
    animation: line-undraw 1s ease .5s 1 normal forwards, line-draw 1s ease 2.5s 1 normal forwards;
}

.btn-nav:hover #svg-portfolio-box1 {
    animation: color-bounce 3s ease-in-out .5s 1 forwards;
}


@keyframes line-undraw {
    0%  {stroke-dasharray: 6, 6; stroke-dashoffset: 0;}
    100%{stroke-dasharray: 6, 6; stroke-dashoffset: -5.5;}
}

@keyframes line-draw {
    0%  {stroke-dasharray: 6, 6; stroke-dashoffset: -5.5;}
    100%{stroke-dasharray: 6, 6; stroke-dashoffset: 0;}
}

@keyframes color-bounce {
    0%  {transform: translateY(0); opacity: 1;}
    25% {transform: translateY(-10px); opacity: 0;}
    50% {transform: translate(10px, 0); opacity: 0; color: var(--c-highlight);}
    75% {transform: translateX(0); opacity: 1; color: var(--c-highlight);}
    100%{color: var(--c-text);}
}

/* Chat Bubble */

.btn-nav:hover #svg-chat {
    transform-origin: 50% 100%;
    animation: bubble-growth 3s ease .5s 1 forwards;
}

.btn-nav:hover #svg-chat-line1 {
    animation: blink 1s ease 1s 1;
}

.btn-nav:hover #svg-chat-line2 {
    animation: blink 1s ease 2s 1;
}

@keyframes bubble-growth {
    0%  {transform: scale(1);}
    25% {transform: scale(1.25); stroke-width: 1.2;}
    30% {transform: scale(1.25) rotate(-5deg);}
    40% {transform: scale(1.25) rotate(5deg);}
    50% {transform: scale(1.25) rotate(-5deg);}
    60% {transform: scale(1.25) rotate(5deg);}
    70% {transform: scale(1.25) rotate(-5deg);}
    75% {transform: scale(1.25) rotate(0); stroke-width: 1.2;}
    100%{transform: scale(1); stroke-width: 1.5;}
}

@keyframes blink {
    0%  {color: var(--c-text);}
    25% {color: var(--c-highlight);}
    75% {color: var(--c-highlight);}
    100%{color: var(--c-text);}
}