main.hidden nav li {
    transform: translateY(-20px);
}

nav li {
    transform: translateY(0px);
}

nav li:nth-child(1) {
    transition: color var(--linkTransition) 0s, transform var(--fadeTransition) 0s;
}

nav li:nth-child(2) {
    transition: color var(--linkTransition) 0s, transform var(--fadeTransition) .05s;
}

nav li:nth-child(3) {
    transition: color var(--linkTransition) 0s, transform var(--fadeTransition) .1s;
}

nav li:nth-child(4) {
    transition: color var(--linkTransition) 0s, transform var(--fadeTransition) .15s;
}

main.hidden .media-player .container .media-nav-wrapper {
    transform: translateX(-20px);
}

.media-player .container .media-nav-wrapper {
    transform: translateX(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
}

main.hidden .media-player .container .controls {
    transform: translateY(20px);
}

.media-player .container .controls {
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
}

main.hidden .player canvas {
    transform: scale(0.9);
}

.player canvas {
    transform: scale(1);
    transition: transform 0.8s;
}

.click-animated {
    scale: 1;
    animation: click-animated var(--scaleTransition) forwards;
}

@keyframes click-animated {
    50% {
        scale: var(--scaleAmount);
    }

    100% {
        scale: 1;
    }
}

section.band .photo {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: none;
    transition-delay: 0s;
}

section.band:has(.logo-large.animated) .photo {
    opacity: 1;
    transform: translateY(0px) scale(1);
    transition: opacity var(--fadeTransition) .1s, transform var(--fadeTransition) .1s;
}

section.band .photo figure {
    display: none;
}

section.band .photo figure.animated {
    display: block;
}

section.band .logo-large {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.band .logo-large.animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}

section.album img {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.album img.animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}

section.album h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.album h2.animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}

section.album p {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.album:has(h2.animated) p {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0.1s;
}


section.album .platform-links a:nth-child(1) {
    opacity: 0;
    transform: translateY(50%);
    transition: none;
    transition-delay: 0s;
}

section.album .platform-links a:nth-child(1).animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}

section.album .platform-links a:nth-child(2) {
    opacity: 0;
    transform: translateY(50%);
    transition: none;
    transition-delay: 0s;
}

section.album:has(.platform-links a:nth-child(1).animated) .platform-links a:nth-child(2) {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0.1s;
}

section.album .platform-links a:nth-child(3) {
    opacity: 0;
    transform: translateY(50%);
    transition: none;
    transition-delay: 0s;
}

section.album:has(.platform-links a:nth-child(1).animated) .platform-links a:nth-child(3) {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0.2s;
}

section.biography h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.biography h2.animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}

section.biography .columns {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.biography:has(h2.animated) .columns {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0.1s;
}

section.biography img {
    transition: translate 0.2s ease-out;
}

section.thanks h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.thanks h2.animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}

section.thanks .carousel {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.thanks:has(h2.animated) .carousel {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0.1s;
}

section.footer .max-width-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    transition-delay: 0s;
}

section.footer .max-width-wrapper.animated {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity var(--fadeTransition), transform var(--fadeTransition);
    transition-delay: 0s;
}