/* ----------------------
UNIVERSAL HOVER
---------------------- */

@media (hover:hover) {
    a:hover {
        color: var(--ruby);
        transition: color 0.8s ease;
    }
}

@media (hover:none) {
    h1 a:hover {
        transition: none !important;
        animation: none !important;
    }

    .feature-gallery * {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ----------------------
>480px HAMBURGER MENU
---------------------- */
@media (min-width: 480px) {

    /* RESPONSIVE MENU */
    .navigation li {
        float: left;
        height: 50px;
        display: flex;
        padding: 0px 5px;
        align-items: center;
        justify-content: center;
        position: relative;
        right: 15px;
    }

    .navigation li a {
        padding: 0;
    }

    .navigation .menu {
        clear: none;
        max-height: none;
        float: right;
    }

    .navigation .menu-icon {
        display: none;
    }
}

/* ----------------------
>480px <760px
---------------------- */
@media (min-width:480px) and (max-width:760px) {

    /* SCREENPLAY FORMAT */
    .sp-character {
        width: 30%;
        margin: 0 35%;
    }

    .sp-dialogue {
        width: 60%;
        margin: 0 20% 2rem;
    }

    /* FEATURES */
    .feature {
        min-height: 50vh;
        text-decoration: none;
    }

    .feature-overlay {
        min-height: 50vh;
    }

    /* THUMBNAILS */
    .thumbnail-img {
        width: 22.5vw;
        height: 22.5vw;
    }

    .thumbnail-link:hover .thumbnail-name {
        opacity: 0.6;
        transition: opacity 1s;
    }

    .thumbnail-arrow {
        right: 1.5rem;
        bottom: 1.5rem;
    }

    /* CREDENTIALS */
    #creds-list {
        flex-direction: row;
        gap: 4rem;
        text-align: left;
    }

    #creds-history h2 {
        text-align: left;
    }
}



/* ----------------------
>760px NO HOVER
---------------------- */
@media (min-width:760px) and (hover:none) {

    /* SCREENPLAY FORMAT */
    .sp-character {
        width: 30%;
        margin: 0 435%;
    }

    .sp-dialogue {
        width: 50%;
        margin: 0 25% 2rem;
    }

    /* FEATURES */

    .feature-gallery {
        flex-direction: row;
        gap: 1vw;
        height: 60vh;
    }

    .feature {
        height: 100%;
        transition: none !important;
    }

    .feature:hover {
        flex: 1;
        transition: none !important;
    }

    .feature-overlay {
        position: relative;
        height: 100%;
        width: 100%;
        opacity: 1;
        transition: none !important;
    }

    .feature:hover .feature-overlay {
        opacity: 1;
    }

    .feature-description {
        position: absolute;
        width: 80%;
    }

    .feature-overlay:hover .feature-description {
        opacity: 0.8;
        transition: none !important;
    }

    .feature-arrow {
        position: absolute;
        left: unset;
        right: unset;
        bottom: unset;
        top: 1rem;
        left: 1rem;
    }

    .feature-overlay:hover .feature-arrow {
        transform: none !important;
    }

    /* THUMBNAILS */
    .thumbnail-img {
        width: 22.5vw;
        height: 22.5vw;
    }

    .thumbnail-arrow {
        width: 1.5rem;
        height: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;
    }

    /* CREDENTIALS */
    #creds-content {
        flex-direction: row;
        gap: 4rem;
    }

    #creds-list {
        flex-direction: column;
        gap: 2rem;
        text-align: left;
    }

    #creds-history h2 {
        text-align: left;
    }
}

/* ----------------------
>760px with HOVER
---------------------- */
@media (min-width:760px) and (hover:hover) {

    /* SCREENPLAY FORMAT */
    .sp-character {
        width: 30%;
        margin: 0 35%;
    }

    .sp-dialogue {
        width: 50%;
        margin: 0 25% 2rem;
    }
    /* Features Container */
    .feature-gallery {
        height: 60vh;
        flex-direction: row;
        gap: unset;
    }

    /* Individual Features */
    .feature {
        height: 100%;
        border-radius: unset;
    }

    /* Gradient and Text Overlay */
    .feature-overlay {
        opacity: 0;
    }

    /* Feature Text */
    .feature-description {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        padding: 0 0 3rem 3rem;
        overflow: hidden;
        width: 65%;
    }

    .feature-description p {
        display: contents;
    }

    .feature-overlay:hover .feature-description {
        transition: opacity 1.5s 0.8s;
    }

    .feature-arrow {
        position: absolute;
        width: 2rem;
        height: 2rem;
        bottom: 4rem;
        right: 10rem;
        left: unset;
        opacity: 0;
        transition: all 1s ease-out;
    }

    .feature-overlay:hover .feature-arrow {
        transform: translate(7rem, 0);
        opacity: 1;
    }

    /* THUMBNAILS */
    .thumbnail-img {
        width: 22.5vw;
        height: 22.5vw;
    }

    .thumbnail-link:hover .thumbnail-name {
        opacity: 0.8;
        transition: opacity 1s;
    }

    .thumbnail-arrow {
        width: 1.5rem;
        height: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;
    }

    /* CREDENTIALS */
    #creds-content {
        flex-direction: row;
        gap: 4rem;
    }

    #creds-list {
        flex-direction: column;
        gap: 2rem;
        text-align: left;
    }

    #creds-history h2 {
        text-align: left;
    }
}

/* ----------------------
>960px with HOVER
---------------------- */
@media (min-width: 960px) {

    /* SCREENPLAY */
    .screenplay {
        width: 60vw;
    }

    .sp-character {
        width: 20%;
        margin: 0 40%;
    }

    /* THUMBNAILS */
    .thumbnail-arrow {
        width: 1.5rem;
        height: 1.5rem;
        right: 2rem;
        bottom: 2rem;
    }
}

/* ----------------------
>1280px with HOVER
---------------------- */
@media (min-width: 1280px) {
    /* CREDENTIALS */
    #creds-content {
        width: 60vw;
        flex-direction: row;
        gap: 8rem;
    }
    
    #creds-list {
        flex-direction: column;
        gap: 2rem;
        text-align: left;
    }
    
    #creds-history h2 {
        text-align: left;
    }
}