/* -- Parallax on hover states -- */
.parallax-item:hover {
    cursor: pointer;
    padding-left: 0.5dvh;
    padding-top: 0.5dvh;
    transform: translate(-0.25dvh, -0.25dvh);

    background-color: rgba(120, 120, 120);
    opacity: 1;
    z-index: 3;
    box-shadow: 0 0 2dvh rgba(0, 0, 0, 0.7);
}
.parallax-item:hover > .parallax-item-colour-bg {
    opacity: 0.5;
}
.parallax-item:hover > .parallax-item-bg {
    opacity: 0.5;
}

/* -- Parallax Keyframes -- */
[animation] {
    transition: transform 0.75s ease, opacity 0.3s ease !important;
}
[animation*="-shown"]:not([id*="preview-"]) {
    opacity: 1;
    transform: translate(0dvh, 0dvh);
}
[animation]:not([animation*="-shown"]) {
    opacity: 0;
    pointer-events: none;
}

/* -- Bookmark UI animations -- */
.bookmark-minimise-icon:hover {
    cursor: pointer;
}
.bookmark-minimise-icon.minimised {
    transform: rotateZ(-180deg);
}
.parallax-bookmark-container.minimised {
    transform: translateY(31dvh);
}
.parallax-bookmark-container.no-bookmarks.minimised {
    transform: translateY(12dvh);
}
.parallax-bookmark-dot:hover, .parallax-item-preview:hover {
    cursor: pointer;
}
.parallax-bookmark-dot.hidden {
    opacity: 0;
    pointer-events: none;
}
.show-animation:last-child {
    animation: display-bookmark-preview 1s forwards;
}

/* -- Bookmark preview animations -- */
@keyframes bookmark-dot-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes bookmark-dot-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes display-bookmark-preview {
    0% {
        transform: translateY(-5dvh) perspective(20dvh) rotateY(-4deg);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(0dvh) perspective(20dvh) rotateY(-4deg);
    }
}
[item-state="hidden"] {
    transition: all 0.5s ease, color 1ms linear;
    top: -5dvh !important;
    opacity: 0;
    min-width: 0 !important;
    width: 0;
    min-height: 5dvh !important;
    height: 5dvh;
    pointer-events: none;
}
[item-state="hidden-last"] {
    transition: all 0.5s ease;
    top: -5dvh !important;
    opacity: 0;
    pointer-events: none;
}
[item-state="hidden"] > span {
    color: rgba(0, 0, 0, 0) !important;
}