/* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION
=================================================== */
/* Notes...

    URL example
    -----------
    Home

    What does it do?
    ----------------
    Two synced carousels between the departments on the homepage

*/
@keyframes carousel-shrink-clip-path {
    0% {
        clip-path: inset(0 0 0 0 round var(--border-radius-l));
    }
    100% {
        clip-path: inset(var(--shrink-amount) 0 0 0 round var(--border-radius-l));
    }
}
@keyframes carousel-blur-and-darken {
    to {
        backdrop-filter: blur(50px);
        background: var(--color-black-for-backdrop-filter);
    }
}
@keyframes carousel-move-logo-down {
    from {
        top: var(--spacing-l);
    }
    to {
        top: 77%;
    }
}
@layer ui {
    .c-fancybox-department-heading {
        container-type: inline-size;
        max-width: var(--max-width-2);
        margin-inline: auto;
        padding-inline: var(--spacing-gutter);
        padding-block: 0 var(--spacing-xs);
        .c-fancybox-department-heading__inner {
            display: block;
            font-size: var(--font-size-l-4); line-height: var(--font-size-l-4-line-height);
        }
    }
    /* Modifier for "What we're great at" where we need the text to line up exactly */
    .c-fancybox-department-heading--custom {
        /* --mq-fancybox-carousel-cards-showing-after */
        @media (min-width: 599px) {
            padding: 0 var(--spacing-2xs);
            line-height: 1cap;
            /* Pull up slightly because of the line-height creating the optical illusion of the heading being further away */
            margin-block-start: -0.5rem;
        }
    }
    .c-fancybox-department-heading__inner > span:first-child {
        .c-fancybox-department-heading--creative & {
            color: var(--color-creative);
        }
        .c-fancybox-department-heading--digital & {
            color: var(--color-digital);
        }
        .c-fancybox-department-heading--social & {
            color: var(--color-social);
        }
        .c-fancybox-department-heading--events & {
            color: var(--color-events);
        }
        .c-fancybox-department-heading--merchandise & {
            color: var(--color-merchandise);
        }
    }
    /* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION / NAVIGATION
    =================================================== */
    .c-fancybox-department-navigation {
        --f-carousel-slide-width: 100px;
        --f-carousel-spacing: var(--spacing-2xs);

        max-width: var(--max-width-2);
        margin-inline: auto;
        padding-inline: var(--spacing-gutter);
        padding-block-end: var(--spacing-l);
        cursor: pointer;

        view-timeline-name: --department-navigation-in-view;

        /* Hide the video cover unless an interaction has happened, or unless hovering  */
        &:not([data-js-interacted]) .f-carousel__slide:not(:hover) .o-video-cover {
            opacity: 0;
        }
        /* Once an interaction has happened, hide the video unless it's the current nav or unless hovering  */
        &[data-js-interacted] .f-carousel__slide:not(:hover, .is-nav-selected) .o-video-cover {
            opacity: 0;
        }

        .f-carousel__slide {
            --video-cover-height: 34rem;
            --border-radius-vision-pro: 35px; /* Decrease */
            --width: 45%;
            /* Custom */
            @media (min-width: 900px) {
                --width: 25%; /* Decrease */
            }

            display: grid;
            align-items: end;
            aspect-ratio: var(--aspect-ratio-card);
            width: calc(var(--width) - var(--f-carousel-spacing));
            padding: var(--spacing-xs) 2rem;
            background: var(--color-gray-dark-transparent-1);
            backdrop-filter: blur(20px);
            clip-path: inset(0 0 0 0 round var(--border-radius-l));
            transition: opacity 0.2s ease-in 0s;

            &:not(.is-nav-selected) {
                background: var(--color-gray-dark-transparent-2);
                & svg {
                    opacity: 0;
                }
            }
            & svg {
                transition: all 0.25s ease-in 0s;
            }
            &.is-nav-selected svg {
                opacity: 1;
                z-index: var(--z-index-above-navbar-background);
            }

            & svg {
                animation: carousel-move-logo-down auto linear;
            }
            --shrink-amount: 71%;
            /* Custom */
            @media (min-width: 1024px) {
                --shrink-amount: 74%;
            }
            animation: carousel-shrink-clip-path auto linear;
            &, & svg {
                will-change: transform;
                animation-timeline: --department-navigation-in-view;
                animation-range: entry-crossing 140% exit-crossing 30%;
                animation-fill-mode: both;
            }

            .o-video-cover {
                transition: all 0.5s ease-in 0s;
                position: absolute;
                top: 0;
                height: 100%;
                width: 100%;
                pointer-events: none;

                /* Blur cover */
                &::before {
                    content: '';
                    position: absolute;
                    z-index: var(--z-index-above-body);
                    inset: 0;
                    /* Blur cover - Scroll-driven Animation */
                    will-change: backdrop-filter;
                    animation: carousel-blur-and-darken auto linear;
                    animation-timeline: --department-navigation-in-view;
                    animation-range: entry-crossing 140% exit-crossing 30%;
                    animation-fill-mode: both;
                }
            }
        }
        .f-carousel__slide__text {
            position: absolute;
            z-index: var(--z-index-above-body);
            padding: var(--spacing-xs) 2rem;
        }

        & svg {
            top: var(--spacing-l);
            right: var(--spacing-l);
            position: absolute;
            font-size: var(--icon-size-m);
        }
    }
    .c-fancybox-department-navigation__eyebrow,
    .c-fancybox-department-navigation__title {
        display: block;
    }
    .c-fancybox-department-navigation__eyebrow {
        text-transform: uppercase;
        font-size: var(--font-size-s-x-x); font-weight: var(--font-family-heading-weight-normal);
    }
    .c-fancybox-department-navigation__title {
        font-size: var(--font-size-m);
        /* Custom */
        @media (min-width: 1380px) {
            font-size: var(--font-size-l);
            font-size: clamp(2.48776em, 9vw, 2.6em);
            font-weight: var(--font-family-heading-weight-normal);
        }
    }
    /* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION / NAVIGATION / MQs
    =================================================== */
    /* --mq-fancybox-carousel-cards-showing-before */
    @media (max-width: 599px) {
        .c-fancybox-department-navigation {
            display: none;
        }
    }
    /* Custom */
    @media (max-width: 719px) {
        .c-fancybox-department-navigation {
            .f-carousel__track {
                > * {
                    flex-basis: 100%;
                    /* --mq-fancybox-carousel-cards-showing-after */
                    @media (min-width: 600px) {
                        flex-basis: 70%;
                    }
                }
            }
        }
    }
    /* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION / CAROUSEL
    =================================================== */
    /* .c-fancybox-department-carousel */
    #carousel {
        scroll-margin: 30vh;
    }
    .c-fancybox-department-carousel {
        --f-carousel-slide-width: 100%;
        --f-carousel-spacing: 10px;
        /* --f-button-bg: hsl(0deg 0% 5%); */
        --f-button-color: white;
        --f-button-hover-color: white;
        --f-button-border-radius: 0%;
        --f-button-width: 1.5rem;
        --f-button-height: var(--f-button-width);
        --f-button-height: 100%;
        --f-carousel-dots-height: 0px;

        margin-block-end: var(--spacing-4xl);

        .f-carousel__viewport {
            max-width: var(--max-width-2);
            margin-inline: auto;
            padding-inline: var(--spacing-gutter);
        }
        .f-carousel__slide {
            width: 99%;
            /* Custom */
            @media (min-width: 1300px) {
                width: 70%;
            }
            margin-inline-end: var(--spacing-4xl);
        }
        .c-fancybox-department-carousel__heading {
            font-size: var(--font-size-l-4);
            line-height: 1cap;
            padding-block-end: var(--spacing-3xs);
            /* --mq-fancybox-carousel-cards-showing-before */
            /* Custom */
            @media (max-width: 599px) {
                font-size: var(--font-size-m); line-height: var(--font-size-m-line-height);
                padding-block: var(--spacing-2xs);
            }
        }
        .f-button.is-prev {
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        .f-button.is-next {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .f-carousel__dots {
            display: none;
        }
    }
    .c-fancybox-department-carousel__autoplaying-video-and-text {
        --video-cover-height: 24rem;
        max-width: var(--max-width-2);
        margin-inline: auto;

        & p {
            font-size: var(--font-size-s);
            max-width: var(--max-width-reading-short-1);
        }

        .plyr {
            pointer-events: none;
        }
    }
    /* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION / CAROUSEL / MQs
    =================================================== */
    /* Custom */
    @media (min-width: 460px) {
        .c-fancybox-department-carousel__autoplaying-video-and-text {
            /* Increase */
            --video-cover-height: 33rem;
        }
    }
    /* --mq-fancybox-carousel-cards-showing-after to Custom */
    @media (min-width: 600px) (max-width: 1023px) {
        .c-fancybox-department-carousel__autoplaying-video-and-text {
            .plyr {
                max-width: 80%;
            }
        }
    }
    /* Custom */
    @media (min-width: 1024px) {
        .c-fancybox-department-carousel__autoplaying-video-and-text {
            display: grid;
            grid-template-columns: 33.333% 1fr;
            gap: min(6vw, 7rem);
        }
    }
    /* Custom */
    @media (min-width: 1200px) {
        .c-fancybox-department-carousel {
            --f-button-width: 3.25rem; /* Increase */
            .f-carousel__slide {
                width: 85%;
            }
            .f-carousel__viewport::before {
                content: '';
                position: absolute;
                z-index: var(--z-index-above-body);
                top: 0;
                right: 0;
                height: 100%;
                width: 35%;
                background: linear-gradient(to left, black 0%,transparent 100%);
            }
        }
    }
    @media (min-width: 1600px) {
        .c-fancybox-department-carousel {
            --f-button-width: 6rem; /* Increase */
        }
    }
    /* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION / TABBED INTERFACE
    =================================================== */
    .c-fancybox-department-carousel .o-tabbed-interface {
        padding-block-start: var(--spacing-2xl);
        [aria-selected] {
            /* Reset some object styles */
            background: none;
            top: unset;
            border-inline: 0;
            border-block-start: 0;
            /* -- */
            color: white;
            border-block-end: 3px solid white;
        }
        [role="tab"]:not([aria-selected]) {
            color: var(--color-gray-reading);
            border-block-end: 3px solid var(--color-gray);
        }
        [role="tablist"] a {
            padding-inline: 0 var(--spacing-xl);
            font-size: var(--font-size-s);
        }
        [role="tabpanel"] {
            /* Reset some object styles */
            border: 0;
            padding-inline: 0;
            padding-block: var(--spacing-xl);
            /* --mq-fancybox-carousel-cards-showing-after */
            @media (min-width: 600px) {
                padding-block: var(--spacing-l); /* Decrease */
            }
        }
        /* Put some padding between the paragraphs and the buttons */
        & p:has(+ .c-btn) {
            padding-block-end: var(--spacing-l);
        }
        /* GROUP PLUGINS / FANCYBOX / DEPARTMENT NAVIGATION / TABBED INTERFACE / ANIMATIONS
        =================================================== */
        /* When the services tab activates then add some progressive animation */
        &:has(#tab2[aria-selected='true']) [aria-labelledby="tab2"] {
            .c-btn a, p {
                animation: fade-in 1.2s var(--animation-timing-function-out-quadratic) both;
            }
            & p + p {
                animation-delay: 0.15s;
            }
            .c-btn a {
                animation-delay: 0.25s;
            }
        }
    }
}