/* HORIZONTAL */

.horizontal {
    display: block;
    position: relative;
    
    margin: 0 !important;
    padding: 0 !important;
    height: calc(var(--number-of-items) * var(--width) - var(--nav-height-small));
    max-width: unset !important;
    
    scroll-snap-align: start end;
	scroll-margin: calc(var(--nav-height-small)) 0 0 !important;
}

.horizontal~.horizontal {
    display: flex;
    height: auto;
    justify-content: center;
}

.horizontal~.horizontal::before {
    content: "Error caused by having multiple horizontal scroll sections on the same page; please don't use this pattern more than once per page.";

    margin: auto !important;
    padding: var(--standard-margin) .714285rem !important;
    width: 100%;
    max-width: 1200px !important;
}

.horizontal~.horizontal * {
    display: none !important;
}

.horizontal>.wp-block-group {
	position: sticky;
	top: var(--nav-height-small);
	width: 100%;
    height: calc(100vh - var(--nav-height-small) - var(--wordpress-support-bar));
    height: calc(100lvh - var(--nav-height-small) - var(--wordpress-support-bar));
	margin-top: 0;

    will-change: transform;
    transform-style: preserve-3d;
    transform: translate3d(calc((var(--number-of-items) - 1) * var(--left)), 0px, 0px);
    gap: 0;
}

.horizontal>.wp-block-group>.wp-block-group {
	flex: none;
	width: var(--width);
    max-width: 1200px;
	max-height: calc(100vh - var(--nav-height-small) - var(--wordpress-support-bar));
    max-height: calc(100lvh - var(--nav-height-small) - var(--wordpress-support-bar));
    padding: var(--standard-margin) .714285rem;

    overflow: hidden;
}

@media (min-width: 1200px) {
    .horizontal>.wp-block-group>.wp-block-group {
        margin: 0 calc(50vw - 600px);
    }
}

.horizontal>.wp-block-group .photo-credit {
    top: var(--standard-margin);
    left: .714285rem !important;
}

@media (min-width: 601px) {
    .horizontal>.wp-block-group .photo-credit {
        top: unset;
        bottom: calc(var(--standard-margin) + .6em);
    }
}

.horizontal .wp-block-media-text__content {
    padding: 1rem 1.5rem !important;

    background-color: color-mix(in srgb, var(--primary-background-color) 50%, transparent) !important
}

@supports not (background-color: color-mix(in srgb, var(--primary-background-color) 50%, transparent)) {
    .horizontal .wp-block-media-text__content {
        background-color: var(--primary-color) !important;
    }
}

@media (min-width: 992px) {
    .horizontal:not(:has(.pitch)) .wp-block-media-text__content {
        padding: 0 !important;
    }
}

.horizontal.secondary-color-scheme .wp-block-media-text__content,
.horizontal:not(:has(.pitch)) .wp-block-media-text__content {
    background-color: unset !important;
}

@media (max-width: 600px) {
    .horizontal .wp-block-media-text__content {
        padding: 1rem 0 !important;
    }
}

.horizontal .has-cover h2:not(.subtitle + h2):hover::after,
.horizontal .has-cover h3:not(.subtitle + h3):hover::after,
.horizontal .has-cover h4:not(.subtitle + h4):hover::after,
.horizontal .has-cover h5:not(.subtitle + h5):hover::after,
.horizontal :has(.wp-block-heading:hover) > .subtitle::after {
    animation: none;
}



/* PITCH */

.pitch-wrapper {
    height: calc(100lvh - var(--nav-height-small) - var(--wordpress-support-bar));
    width: 100%;

    position: sticky;
    top: var(--wordpress-support-bar);
    left: 0;

    z-index: -1;
}

@media (min-width: 992px) {
    .pitch-wrapper {
        top: calc(var(--nav-height-small) + var(--wordpress-support-bar));
    }
}

.pitch {
    --size-factor: 5;
    --angle: 67.5deg;
    
    --line-width: .5rem;

    position: absolute;
    top: calc(.5 * (100% - (.5 * var(--size-factor) * var(--width) / 3)));
    width: calc(var(--size-factor) * var(--width) / 3);
    height: calc(.5 * var(--size-factor) * var(--width) / 3);

    transform-style: preserve-3d;
    transform: perspective(100vw) translateX(calc(.5 * var(--left))) translateZ(-40rem) rotateX(var(--angle));

    background-color: #336F1A;
    opacity: 1;

    /* Anti Aliasing on Firefox */
    outline: 1px solid transparent;
}

@media (max-width: 600px) {
    .pitch {
        --size-factor: 7;

        top: calc(.9 * (100% - (.5 * var(--size-factor) * var(--width) / 3)));
    }
}

@media (min-width: 992px) {
    .pitch {
        background-color: #050;
    }
}

.hoops {
    position: absolute;
    top: 41.66667%;
    bottom: 41.66667%;
    width: calc(100% / 60);

    transform-style: preserve-3d;
    transform: none;
}

.hoops:nth-of-type(1) {
    left: calc(22.5% - 50% / 60);
}

.hoops:nth-of-type(2) {
    right: calc(22.5% - 50% / 60);
}

.hoop {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;

    transform-origin: center bottom;
    transform: rotateX(-90deg) rotateY(90deg);

    background: var(--hoop-src) top center no-repeat;
    background-size: cover;

    /* Anti Aliasing on Firefox */
    outline: 1px solid transparent;
}

.hoop:nth-of-type(1) {
    top: -50%;
}

.hoop:nth-of-type(2) {
    top: 0%;
}

.hoop:nth-of-type(3) {
    top: 50%;
}

.hoop-small {
    transform: rotateX(-90deg) rotateY(90deg) translateY(33.33333%);
}

.hoop-medium {
    transform: rotateX(-90deg) rotateY(90deg) translateY(16.66667%);
}

.line {
    position: absolute;
    top: 0;
    bottom: -5%;
    width: var(--line-width);

    background-color: #fff;
    opacity: .25;

    transform: translateZ(calc(.5 * var(--size-factor) * var(--width) / 200));

    /* Anti Aliasing on Firefox */
    outline: 1px solid transparent;
}

.line:nth-of-type(3) {
    left: calc(31.66667% - 50% / 60);
}

.line:nth-of-type(4) {
    right: calc(31.66667% - 50% / 60);
}

.line:nth-of-type(5) {
    left: calc(50% - 50% / 60);
}

.grass {
    display: none;
}

@media (min-width: 992px) {
    .grass {
        display: grid;
        align-content: space-between;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        transform-style: preserve-3d;
        transform: none;
    }

    .grass-row {
        width: 99.75%;
        height: calc(.5 * var(--size-factor) * var(--width) / 200);
        margin-left: .25%;
    
        transform-origin: center bottom;
        transform: rotateX(-67.5deg);
    
        background: var(--grass-src) top center;
    }
    
    .grass-row:nth-of-type(5n) {
        background-position-x: 40%;
    }
    
    .grass-row:nth-of-type(5n+1) {
        background-position-x: 27%;
    }
    
    .grass-row:nth-of-type(5n+2) {
        background-position-x: 61%;
    }
    
    .grass-row:nth-of-type(5n+3) {
        background-position-x: 83%;
    }
    
    .grass-row:nth-of-type(5n+4) {
        background-position-x: 5%;
    }
}



/* PHOTO CREDIT */

.photo-credit {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .125em .5em !important;
    margin: 0;

    color: var(--accent-color) !important;
    font-size: 1rem !important;
    font-style: normal;
    font-weight: 300;
    
    backdrop-filter: blur(.5rem);

    z-index: 1;
}

@supports not (backdrop-filter: blur(.5rem)) {
    .photo-credit {
        background-color: color-mix(in srgb, var(--primary-color) 60%, transparent) !important;
    }
}

@supports not ((backdrop-filter: blur(.5rem)) or (background-color: color-mix(in srgb, var(--primary-color) 60%, transparent))) {
    .photo-credit {
        background-color: var(--primary-color) !important;
    }
}

.photo-credit a {
    font-style: inherit;
    text-decoration: none;
}

.wp-block-media-text+.photo-credit {
    left: 0;
    right: unset;
    bottom: .6em;
}

.wp-block-media-text.has-media-on-the-right+.photo-credit {
    left: unset;
    right: 0;
}

@media (max-width: 600px) {
    .wp-block-media-text+.photo-credit {
        top: 0;
        bottom: unset;
        left: 0 !important;
        right: unset !important;
    }

    .full-sized .wp-block-media-text+.photo-credit {
        left: 0 !important;
    }
}



/* SCROLL BAR */

.scroll-bar {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
    width: 100%;
    max-width: unset !important;

    overflow: hidden;

    z-index: 2;
}

.secondary-color-scheme+.scroll-bar {
    background: fixed var(--primary-color);
}

.secondary-color-scheme+.scroll-bar::before,
.scroll-bar::after {
    content: '';

    position: absolute;
    height: .6em;
}

.secondary-color-scheme+.scroll-bar::before {
    top: 0;

    background: var(--primary-background-color);
}

.scroll-bar::after {
    bottom: 0;

    background: var(--tertiary-color);
}

.scroll-bar+p {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view(block var(--nav-height-small) 0)) {
        .scroll-bar {
            height: .6em;

            overflow: initial;
        }

        .secondary-color-scheme+.scroll-bar {
            height: 1.8em;
        }

        .scroll-bar::before,
        .scroll-bar::after {
            left: 0;
            right: 100%;

            animation: scroll-bar-left 1ms linear forwards;
            animation-timeline: view(block var(--nav-height-small) 0);
        }

        .scroll-bar::before,
        .scroll-bar:nth-of-type(even)::after {
            left: unset;
            right: 0;

            animation-name: scroll-bar-right;
        }

        .scroll-bar:nth-of-type(even)::before {
            left: 0;
            right: unset;

            animation-name: scroll-bar-left;
        }
    }
}

@keyframes scroll-bar-left {
    from {
        left: 0;
        right: 100%;
    }

    50% {
        left: 0;
        right: 0;
    }

    to {
        left: 100%;
        right: 0;
    }
}

@keyframes scroll-bar-right {
    from {
        left: 100%;
        right: 0;
    }

    50% {
        left: 0;
        right: 0;
    }

    to {
        left: 0;
        right: 100%;
    }
}