@import url('/assets/css/reset.css');
@import url('/assets/css/bootstrap-utilities.min.css');
@import url('/assets/css/bootstrap-grid.min.css');

:root {
    color-scheme: dark;

    --shade-step:   10;
    --tint-step:    7.5;

    --fg: #FFFFFF;
    --fg-100: hsl(from var(--fg) h s calc(l - (var(--shade-step) * 1)));
    --fg-200: hsl(from var(--fg) h s calc(l - (var(--shade-step) * 2)));
    --fg-300: hsl(from var(--fg) h s calc(l - (var(--shade-step) * 3)));
    --fg-400: hsl(from var(--fg) h s calc(l - (var(--shade-step) * 4)));
    --fg-500: hsl(from var(--fg) h s calc(l - (var(--shade-step) * 5)));

    --bg: #000000;
    --bg-100: hsl(from var(--bg) h s calc(l + (var(--tint-step) * 1)));
    --bg-200: hsl(from var(--bg) h s calc(l + (var(--tint-step) * 2)));
    --bg-300: hsl(from var(--bg) h s calc(l + (var(--tint-step) * 3)));
    --bg-400: hsl(from var(--bg) h s calc(l + (var(--tint-step) * 4)));
    --bg-500: hsl(from var(--bg) h s calc(l + (var(--tint-step) * 5)));

    --error: #df1c4d;
    --error-100: hsl(from var(--error) h s calc(l + (var(--tint-step) * 1)));
    --error-200: hsl(from var(--error) h s calc(l + (var(--tint-step) * 2)));
    --error-300: hsl(from var(--error) h s calc(l + (var(--tint-step) * 3)));
    --error-400: hsl(from var(--error) h s calc(l + (var(--tint-step) * 4)));
    --error-500: hsl(from var(--error) h s calc(l + (var(--tint-step) * 5)));

    --font-family: "Inter", sans-serif; /* Archivo Black */
    --font-size: 16px;
    --font-weight: normal;
    --line-height: 1.5em;

    --title-font-family: "akzidenz-grotesk-next-extend", var(--font-family);
    --title-font-weight: 700;
    --title-line-height: 1.15em;

    --padding: 3rem;
    --header-padding: 2rem;
    --card-padding: 1.5rem;

    --logo-height: 3rem;

    --radius-xs: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    --transition:   color 0.15s ease-in-out,
                    text-decoration 0.15s ease-in-out,
                    border 0.15s ease-in-out,
                    background-color 0.15s ease-in-out,
                    box-shadow 0.15s ease-in-out,
                    transform 0.15s ease-in-out,
                    fill 0.15s ease-in-out,
                    stroke 0.15s ease-in-out,
                    height 0.15s ease-in-out;
    
    --shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    --shadow-dk: 0 10px 15px 0 rgba(0, 0, 0, 0.2);
}
html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-family);
    font-size: var(--font-size);
    overflow-x: clip;
}
body {
    color: var(--fg);
    font-family: var(--font-family);
    font-size: var(--font-size);
}
:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px var(--bg);
}
/* Allow animations and transitions to animate from auto to a height */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}



/** WAYPOINTS **/
.waypoint {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    transform: translateY( calc( -1 * (var(--logo-height) + (var(--header-padding) * 2)) ) );
}



/** ROWS, MARGIN, SPACING **/
.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    z-index: 100;
}
.container-fluid {
    max-width: 100%;
    padding: 0;
    position: relative;
    isolation: isolate;
    z-index: 0;

    &::before, &::after {
        content: '';
        display: block;
        position: absolute;
        inset: unset;
        z-index: 100;

        width: 1.5rem;
        height: 100vh;;

        translate: 0 -50%;
    }
    &::before {
        inset: 50% auto 0 0;
        background-image: linear-gradient(90deg, var(--bg), hsl(from var(--bg) h s l / 0.0));
    }
    &::after {
        inset: 50% 0 0 auto;
        background-image: linear-gradient(-90deg, var(--bg), hsl(from var(--bg) h s l / 0.0));
    }
}
.text-container {
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

[class*='container'] + [class*='container'] {
    margin-top: var(--padding);
}

.row > [class*='col'] > :last-child {
    margin-bottom: 0;
}
.row + .row:not([class*='gy-']) {
    margin-top: var(--padding);
}
.row + .row[class*='gy-'] {
    margin-top: 0;
}
@media(min-width: 1200px) {
    .col-lg-FIVE {
        flex: 0 0 calc(100% / 5);
        max-width: calc(100% / 5);
    }
}


/** PAGE SECTIONS **/
section,
footer {
    isolation: isolate;
    padding: var(--padding) 0;

    & > #footer-brand {
        margin-bottom: 1.5rem;
    }
}
section {
    position: relative;
    color: var(--fg);
    background: var(--bg);

    min-height: calc(100vh - (var(--logo-height) + (var(--header-padding) * 2)));
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    display: flex;
    align-items: center;
    & img {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        object-fit: cover;
        object-position: center;
        opacity: 0.5;
    }
}


/** TYPOGRAPHY **/
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
    color: var(--fg);
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    text-wrap: balance;
    text-transform: uppercase;
    margin-bottom: 1ex;

    display: block;
    
    & icon {
        float: left;
        width: 1em;
        height: 1em;
        margin-right: .75ex;
    }
}
h1, .h1         { font-size: 3rem; }
h2, .h2         { font-size: 2.5rem; }
h3, .h3         { font-size: 2rem; }
h4, .h4         { font-size: 1.6rem; }
h5, .h5         { font-size: 1.3rem; }
h6, .h6, p.lead { font-size: 1.25rem; }
@media(max-width: 991px) {
    h1, .h1         { font-size: 2.2rem; }
    h2, .h2         { font-size: 1.8rem; }
    h3, .h3         { font-size: 1.5rem; }
    h4, .h4         { font-size: 1.35rem;}
    h5, .h5         { font-size: 1.2rem; }
    h6, .h6, p.lead { font-size: 1.1rem; }
}
p, ul, ol, li, figcaption {
    color: var(--fg-400);
    font-size: 1rem;
    font-weight: var(--font-weight);
    line-height: var(--line-height);
    margin-bottom: 1.5ex;
    text-wrap: pretty;
}
small {
    color: var(--bg-500);
    font-size: .85rem;
    line-height: var(--line-height);
}


/** LINKS **/
a, button, input {
    transition: unset !important;
    color: var(--fg);
}
a, button, input {
    transition: var(--transition);
}
a:not(.btn) {
    color: var(--fg-200);
    text-decoration-color: currentColor;
    text-decoration-line: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.4em;

    &:hover, &:focus-within {
        color: var(--fg-100);

        text-decoration-color: currentColor;
        text-decoration-thickness: 0.1em;
        text-underline-offset: 0.4em;
    }
    &:active, &.active {
        color: var(--fg);

        text-decoration-color: currentColor;
        text-decoration-thickness: 0.2em;
        text-underline-offset: 0.35em;
    }
}
.btn {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight) !important;
    text-transform: uppercase;
    display: inline-block;
    border-radius: var(--radius-md);
    border: 2px solid var(--fg-200);
    box-shadow: var(--shadow);

    background: transparent !important;
    color: var(--fg-200) !important;

    &:hover, &:focus-visible {
        border-color: var(--fg-100) !important;
        background: var(--fg-100) !important;
        color: var(--bg-100) !important;
    }
    &:active, &.active {
        border-color: var(--fg) !important;
        background: var(--fg) !important;
        color: var(--bg) !important;
    }
}



/** BUTTONS & INPUTS **/
form {
    display: grid;
    gap: var(--card-padding);

    padding: var(--card-padding);
    border-radius: var(--radius-md);
    background: var(--bg-100);

    & > button:last-child {
        place-self: end;
    }
}
.form-group {
    display: grid;
    gap: 1ex;
    & > label {
        display: flex;
        justify-content: space-between;
    }
    & > label:has(> input[type="checkbox"], > input[type="radio"]) {
        display: inline-block;
    }
}
label {
    color: var(--fg-200);
    & input {
        align-self: inline-start;
        margin-right: 1ex;
    }
}
.form-group:has(input:focus) label {
    color: var(--fg-100);
}
.help-block {
    display: block;
    font-style: italic;
    font-size: .875rem;
}
.optional {
    font-weight: 300;
    color: currentColor;
    opacity: .5;
}



.btn, .form-control {
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;

    font-size: 1rem;
    line-height: var(--line-height);

    padding: 1.5ex 2ex;
    border-radius: var(--radius-xs);
}

.form-control,
.form-control:not(:invalid) {
    border: 2px solid var(--fg-200);
    background: var(--bg-100);
    color: var(--fg-200);

    font-weight: var(--font-weight);

    & + .help-block {
        color: var(--bg-400);
    }
    &:focus-visible {
        border: 2px solid var(--fg-100);
        background: var(--bg-200);
        color: var(--fg);
    }

    &[readonly] {
        cursor: text;
        color: var(--fg-500);

        & + .help-block {
            color: var(--bg-300);
            cursor: text;
        }

        &:focus-visible {
            color: var(--fg-500);
        }
    }

    &[disabled] {
        cursor: not-allowed;
        border: 2px solid var(--bg-400);
        background: var(--bg-200);
        color: var(--bg-500);

        & + .help-block {
            color: var(--bg-300);
            cursor: not-allowed;
        }
    }
}
input, textarea, select {
    &::placeholder {
        color: var(--bg-500);
        font-style: italic;
        opacity: 1;
    }
    &:focus-within {
        &::placeholder {
            opacity: 0;
        }
    }
}
textarea {
    resize: vertical;
    min-height: calc((1.5ex * 2) + 3lh);
}

/** ERROR STATES **/
.has-error .form-control,
.form-control:invalid:not(:placeholder-shown) {
    border-color: var(--error-100);
    color: var(--error-200);

    & + .help-block {
        color: var(--error-200);
    }

    &:focus-visible {
        border-color: var(--error);
        color: var(--error-100);

        & + .help-block {
            color: var(--error-100);
        }
    }
}



.btn.btn-link {
    border: none !important;
    background: none !important;

    padding: 0;

    color: var(--fg-200);
    text-decoration-color: rgb(0 0 0 / 0);
    text-decoration-line: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.4em;

    &:hover, &:focus-within {
        border: none;
        background: none;

        text-decoration-color: currentColor;
        text-decoration-thickness: 0.1em;
        text-underline-offset: 0.4em;

        color: var(--fg-100) !important;
    }
    &:active, &.active {
        border: none;
        background: none;

        text-decoration-color: currentColor;
        text-decoration-thickness: 0.2em;
        text-underline-offset: 0.35em;

        color: var(--fg) !important;
    }
}








/** LOGO **/
logo {
    display: flex;
    height: inherit;
}
.card logo {
    height: auto;
    width: auto;
    height: 2rem;
    margin-bottom: 1rem;
    & > svg {
        width: auto;
        height: 100%;
        place-self: start;
    }
}


/** ICONS **/
icon {
    display: block;
    font-size: inherit;
    width: 1.1em;
    height: 1.1em;

    & svg {
        display: block;
        width: inherit;
        height: inherit;
        line-height: 0;
        & * {
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            vector-effect: non-scaling-stroke;
            transition: var(--transition);
        }
    }

    &.solid-fill {
        & svg * {
            fill: currentColor;
            stroke: none;
            stroke-width: unset;
            stroke-linecap: unset;
            stroke-linejoin: unset;
            transition: var(--transition);
        }
    }
}
a > icon {
    line-height: inherit;
    margin-right: 0.5em;
    display: block;
    float: left;
}
.btn > icon {
    margin-right: 0.5em;
    display: block;
    float: left;
    line-height: var(--line-height);
    width: var(--line-height);
    height: var(--line-height);
}
.btn > icon svg {  
    width: inherit;
    height: inherit;
}








footer {
    background: var(--bg);
}
footer p,
footer li {
    font-size: .85rem;
    line-height: var(--line-height);
}
footer li {
    margin-bottom: .5em;
}
.copyright, .credit {
    font-size: .75rem;
    line-height: 1em;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    opacity: .75;
    align-items: anchor-center;
    align-items: center;
}
.copyright a, .credit a {
    color: var(--fg);
}
.credit a {
    display: flex;
    flex-direction: row;
    gap: 0.4em;
    text-decoration: none;
    align-items: anchor-center;
    align-items: center;
}
.credit icon {
    margin-right: 0em;
    font-size: 1.3em;
}
.credit icon svg * {
    fill: none;
    stroke-width: 1;
}


/** HEADER & NAV **/
#brand,
#footer-brand {
    height: var(--logo-height);
}
header {
    width: 100%;
    padding: var(--header-padding) 0;
    min-height: calc(var(--logo-height) + (var(--header-padding) * 2));

    background: linear-gradient(180deg, rgb(from var(--bg) r g b / 1) 0%, rgb(from var(--bg) r g b / 0.75) 50%, rgb(from var(--bg) r g b / 0) 100%);

    color: var(--fg);
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    isolation: isolate;
}
header + section:first-of-type {
    margin-top: calc(var(--logo-height) + (var(--header-padding) * 2));
}
header > .container.grid {
    display: grid;
    grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    & .justify-content-between {
        justify-content: end !important;
    }
}
header ul {
    margin: 0;
}
nav ul li {
    flex: 1 1 auto;
    margin: 0;
}
nav ul li a {
    font-size: 0.875rem;
    text-transform: uppercase;
}
nav ul li a:not(.current-page) {
    text-decoration: unset !important;
}
nav ul li a.current-page {
    color: var(--fg) !important;
}

@media(max-width: 991px) {
    header {
        /* position: relative; */
        padding: calc(var(--header-padding) / 2) 0;
    }
    header > .container.grid {
        grid-template-columns: var(--logo-height) 1fr var(--logo-height);
        grid-template-rows: auto;
        gap: 1rem;
        align-content: center;
        & .justify-content-between {
            justify-content: space-evenly !important;
        }
    }
    nav {
        grid-row-start: -1;
        grid-column: 1 / -1;
    }
    /** DROPDOWN NAV **/
    nav {
        transition: var(--transition);
        overflow: hidden;
        height: 0;

        &.open {
            height: auto;
            & > * {
                opacity: 1;
            }
        }
        &.close {
            height: 0;
            & > * {
                opacity: 0;
            }
        }

        & ul {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            padding: 1rem 0;
            align-items: center;

            & > li a {
                font-size: 1rem;
            }
        }
    }
}


/** SOCIAL MENU **/
.social-menu {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.social-menu li {
    font-size: 1rem;
    margin: 0;
}


/** INLINE SOCIAL MENU **/
.social-menu-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
}


/** HAMBURGER MENU **/
[data-role="hamburger-menu"] {
    float: right;
    text-align: right;
    font-size: 1.5rem;
    padding: .5em 0;
}
[data-role="hamburger-menu"] icon {
    position: relative;
    margin: 0;
    float: right;
}
[data-role="hamburger-menu"] icon svg {
    position: absolute;
}
[data-role="hamburger-menu"] icon svg path {
    will-change: d;
    transition: var(--transition);
}
/* Hamburger icon animation fallback for iOS/Safari (no CSS d property support) */
[data-action="open"] icon svg path,
[data-action="close"] icon svg path {
    transform-origin: 50% 50%;
}
[data-action="open"] icon svg path:nth-child(1) { transform: rotate(0deg) translateY(0); opacity: 1; }
[data-action="open"] icon svg path:nth-child(2) { opacity: 1; }
[data-action="open"] icon svg path:nth-child(3) { transform: rotate(0deg) translateY(0); opacity: 1; }

[data-action="close"] icon svg path:nth-child(1) { transform: rotate(45deg) translateY(28.5%) scaleX(1.2); }
[data-action="close"] icon svg path:nth-child(2) { opacity: 0; }
[data-action="close"] icon svg path:nth-child(3) { transform: rotate(-45deg) translateY(-28.5%) scaleX(1.2); }

/* Original d property for browsers that support it */
@supports (d: path('M0,0')) {
    [data-action="open"] icon svg path:nth-child(1) { d: path('M4,12 24,12 44,12'); transform: none; }
    [data-action="open"] icon svg path:nth-child(2) { d: path('M4,24 24,24 44,24'); opacity: 1; }
    [data-action="open"] icon svg path:nth-child(3) { d: path('M4,36 24,36 44,36'); transform: none; }

    [data-action="close"] icon svg path:nth-child(1) { d: path('M4,4 24,24 44,4'); transform: none; }
    [data-action="close"] icon svg path:nth-child(2) { d: path('M24,24 24,24 24,24'); opacity: 0;}
    [data-action="close"] icon svg path:nth-child(3) { d: path('M4,44 24,24 44,44'); transform: none; }
}


/** CARDS **/
.card {
    display: flex;
    flex-direction: column;
    height: 100%;

    background: var(--bg-100);
    border: 1px solid var(--bg-200);

    border-radius: var(--radius-md) !important;

    isolation: isolate;
    overflow: hidden;
    overflow: clip !important;
    position: relative;

    &.video-card {
        /* aspect-ratio: 9 / 16; */
        aspect-ratio: 9 / 15;

        & video {
            width: 100%;
            height: 100%;
            aspect-ratio: inherit;
            object-fit: cover;
        }
    }

    & .card-header,
    & .card-body,
    & .card-footer {
        isolation: isolate;
        position: relative;
        padding: var(--card-padding);
        flex: 0 0 auto;

        & :last-child {
            margin-bottom: 0;
        }
    }
    & .card-body {
        flex-grow: 1;
    }
    & .card-footer {
        padding-top: 0;
        & small {
            font-style: italic;
        }
    }

    & .card-header {
        aspect-ratio: 16 / 9;
        place-content: end;
        background: var(--bg-200);
        & > *:not(.background) {
            z-index: 1;
        }
        & .background {
            filter: grayscale(1);
        }
    }
    & .card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0;

        & :last-child {
            margin-bottom: 0;
        }

        & ul.list-includes {
            padding: 0;
            margin-inline: calc(-1 * var(--card-padding));
            width: calc(100% + 2 * var(--card-padding));

            & li {
                margin: 0;
                padding: 1.5ex var(--card-padding);
                border-top: 1px dashed var(--bg-200);
                align-items: center;

                display: grid;
                gap: 1ex;
                grid-template-columns: auto 1fr;
                align-items: start;
                
                icon {
                    display: block;
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-top: .1rem;

                    & svg * {
                        stroke-width: 1.25;
                        stroke: var(--bg-500);
                    }
                }
                &:last-child {
                    border-bottom: 1px dashed var(--bg-200);
                }
            }
        }
    }
}

@media(min-width: 768px) {
    .card.card-horizontal {
        flex-direction: row;

        & .card-header {
            aspect-ratio: unset;
        }
        & .card-header,
        & .card-body {
            flex: 0 0 50%;
            place-content: end;
        }
    }
}

.price {
    display: block;
    & > span {
        display: table-cell;
        white-space: nowrap;
    }
    & > .from, & > .item {
        font-size: 1rem;
        color: var(--fg-300);
        font-weight: var(--font-weight);

        vertical-align: baseline;
        text-transform: none;
        text-transform: lowercase;
    }
    & > .from {
        padding-right: 1ex;
    }
    & > .item {
        padding-left: 1ex;
    }
    & > .currency {
        font-size: .75em;
        vertical-align: baseline;
    }
}
@media(max-width: 991px) {
    .price > .item {
        display: block;
        padding-inline: 0;
    }
}






/** Reviews **/
q::before {
    content: "\201C"; /* Unicode for left double quotation mark */
}
q::after {
    content: "\201D"; /* Unicode for right double quotation mark */
}
q::before,
q::after {
    color: var(--bg);
    opacity: 0.5;
}
blockquote {
    color: var(--bg);
    margin-bottom: 1rem;
}
blockquote p {
    color: var(--bg);
}
blockquote cite::before {
    content: '– ';
}
blockquote cite {
    font-size: 1rem;
    font-style: normal;
}











.carousel {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    
    overscroll-behavior-x: contain;

    overflow-x: scroll;
    overflow-y: clip;
    scroll-snap-type: x mandatory;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;

    & .slide {
        animation: scale 1ms linear;
        animation-timeline: view(inline);
        transform-origin: 50% 50%;


        --flex: 20vw;
        flex: 0 0 var(--flex);

        &.active {
            scroll-snap-align: center;
        }

        &:first-child, &:nth-child(1) {
            margin-inline-start: calc(50vw - var(--flex) / 2);
        }
        &:last-child, &:nth-last-child(1) {
            margin-inline-end: calc(50vw - var(--flex) / 2);
        }
    }
}
@media (max-width: 991px) {
    .carousel .slide {
        --flex: 33.33vw;
        flex: 0 0 var(--flex);
    }
}
@keyframes scale {
    0% {
        opacity: .45;
        transform: scale(.8) rotate(5deg);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: .45;
        transform: scale(.8) rotate(-5deg);
    }
}




/** TICKER TAPE **/
.tape {
    display: block;
    padding: 2ex 0;
    gap: 1ex;
    white-space: nowrap;

    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);

    text-transform: uppercase;
    letter-spacing: 0.01ex;

    translate: 0 5rem;

    position: relative;
    width: 100%;

    transform-origin: 38% 50%;
    
    animation-timeline: scroll(root);

    & > span {
        line-height: 4ex;
        display: inline-block;
        position: absolute;
        inset: 0;
        animation-duration: 1ms;
        animation-timeline: inherit;
    }

    &.primary {
        background: var(--fg-100);
        color: var(--bg);
        z-index: 2;

        rotate:     -5deg;
        scale:      1.05;

        direction: ltr;
        & > span {
            animation-name: scroll-left;
        }
    }
    &.secondary {
        background: var(--bg-200);
        color: var(--fg);

        rotate:     8deg;
        scale:      1.05;
        z-index: 1;

        direction: rtl;
        & > span {
            animation-name: scroll-right;
        }
    }

    & span.divider {
        opacity: 0.5;
    }
}
@keyframes scroll-left {
    to {
        inset: 0 0 0 -100%;
    }
}
@keyframes scroll-right {
    to {
        inset: 0 -100% 0 0;
    }
}

@media(max-width: 991px) {
    .tape {
        transform-origin: 50% 50%;

        &.primary {
            rotate:     -8deg;
            scale:      1.05;
        }
        &.secondary {
            rotate:     10deg;
            scale:      1.05;
        }
    }
}




.scroll-snap-container {
    --container-width: 100%;
    --container-padding: calc(1.5rem * 2);
    --gap: calc(var(--container-padding) / 4);
    
    position: relative;
    overflow-x: auto;
    display: flex;
    align-items: stretch; /* ensures children fill height */
    height: 100%;
    gap: var(--gap);

    margin-inline: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc((100vw - (var(--container-width) - var(--container-padding))) / 2);

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    
    overscroll-behavior-x: contain;
}
@media (min-width: 576px)   { .scroll-snap-container { --container-width:540px } }
@media (min-width: 768px)   { .scroll-snap-container { --container-width:720px } }
@media (min-width: 992px)   { .scroll-snap-container { --container-width:960px } }
@media (min-width: 1200px)  { .scroll-snap-container { --container-width:1140px } }
@media (min-width: 1400px)  { .scroll-snap-container { --container-width:1320px } }



.scroll-snap-container .card {
    --columns: 3;
    --combined-gap: calc(var(--gap) * (var(--columns) - 1));
    --scrollable-viewport: calc(var(--container-width) - var(--container-padding) - var(--combined-gap));
    /* width: calc(var(--scrollable-viewport) / var(--columns)); */

    flex: 0 0 calc(var(--scrollable-viewport) / var(--columns));
    height: 100%;
    scroll-snap-align: start;

    &:first-child {
        margin-inline-start: calc((100vw - (var(--container-width) - var(--container-padding))) / 2);
    }
    &:last-child {
        margin-inline-end: calc((100vw - (var(--container-width) - var(--container-padding))) / 2);
        scroll-snap-align: end;
    }
}
.scroll-snap-container:has(> :nth-child(2):last-child) .card {
    --columns: 2;
}


@media (max-width: 1199px) {
    .scroll-snap-container .card,
    .scroll-snap-container:has(> :nth-child(2):last-child) .card {
        --columns: 2;
    }
}
@media (max-width: 991px) {
    .scroll-snap-container .card,
    .scroll-snap-container:has(> :nth-child(2):last-child) .card {
        --columns: 1;
        --container-width: 60%;
    }
}
@media (max-width: 767px) {
    .scroll-snap-container .card,
    .scroll-snap-container:has(> :nth-child(2):last-child) .card {
        --columns: 1;
        --container-width: 80%;
    }
}








/** SCROLL ANIMATIONS **/
section {
    [class^='col']:not(.no-animate) {
        animation-name: fade-in;
        animation-duration: 1ms;
        animation-fill-mode: both;
        
        animation-timeline: view(50% 0%);
    }
    .row > [class^='col']:not(.no-animate),
    .scroll-snap-container > .card:not(.no-animate) {
        animation-range-start: calc(5% * sibling-index());
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(max-width: 991px) {
    section {
        [class^='col']:not(.no-animate) {
            animation-timeline: view(75% 0%);
        }
    }
}