body {
    --tobar-bg: var(--color-primary);
    --hero-bg: var(--color-secondary);
    --hero-scroll-bg: var(--color-secondary);
}

body.hero--primary { /* light petrol bg -> secondary logo */
    --tobar-bg: var(--color-secondary);
    --hero-bg: var(--color-primary);
    --hero-scroll-bg: var(--color-primary);
}

body.hero--secondary { /* dark petrol bg -> primary logo */
    --tobar-bg: var(--color-primary);
    --hero-bg: var(--color-secondary);
    --hero-scroll-bg: var(--color-secondary);
}

body.hero--dark { /* black bg -> primary logo */
    --tobar-bg: var(--color-primary);
    --hero-bg: var(--color-dark);
    --hero-scroll-bg: var(--color-dark);
}

body.hero--video {
    --tobar-bg: var(--color-primary);
    --hero-bg: transparent;
    --hero-scroll-bg: var(--color-secondary);
}

body:is(.hero--primary) #branding .logo.logo-primary {
    display: none;
}

body:not(.hero--primary) #branding .logo.logo-secondary {
    display: none;
}

.hero {
    width: 100%;

    height: calc(100vh);
    height: calc(100svh);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    margin-top: calc(var(--navbar-height) * -1);

    --hero-max-width: 46.25rem;

    padding-inline: var(--container-padding);
    margin-inline: auto;

    position: relative;
}

.hero > :is(div,.h1,form) {
    width: min(100%, var(--hero-max-width));
}

.hero.hero--video,
.hero.hero--with-buttons.hero--with-lead {
    justify-content: flex-end;
}

.hero.hero--primary {
    background-color: var(--color-primary);
    --color-text: var(--color-secondary);
    --color-accent: var(--color-danger);
}

.hero.hero--secondary {
    background-color: var(--color-secondary);
    --color-text: var(--color-white);
    --color-accent: var(--color-primary);
}

.hero.hero--dark {
    background-color: var(--color-dark);
    --color-text: var(--color-white);
    --color-accent: var(--color-secondary);
}

.hero.hero--image {
    background-color: var(--color-secondary);
    --color-text: var(--color-white);
    --color-accent: var(--color-white);
}

.hero.hero--video {
    background-color: var(--color-secondary);
    --color-text: var(--color-white);
    --color-accent: var(--color-white);
}

.hero.hero--video::before {
    content: ' ';
    width: 100%;
    height: 25.625rem;
    display: block;

    background: linear-gradient(180deg, var(--color-secondary) 0%, hsla(from var(--color-secondary) h s l / 0) 100%);
    z-index: 2;

    position: absolute;
    top: 0;
    left: 0;
}

.hero.hero--image::before {
    content: ' ';
    display: block;
    width: 22.5rem;
    aspect-ratio: 1 / 1;
    background-image: url('../assets/images/CARO_O.svg');
    background-size: contain;

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    transform: translate(-26%, -46%);

    pointer-events: none;
}

.hero .h1 {
    margin-bottom: 0.6em;
    hyphens: auto;

    z-index: 1;
}

.hero.hero--video .h1,
.hero.hero--image .h1 {
    font-size: var(--fluid-42-80);
    text-shadow: 0px 3px 6px hsla(0, 0%, 0%, 0.161);
}

.hero.hero--with-buttons.hero--with-lead .h1 {
    margin-bottom: 0.9em;
}

.hero .h1 span {
    color: var(--color-accent);
}

.hero .lead {
    font-family: var(--font-family-headline);
    font-weight: bold;

    margin-bottom: 0.75em;

    z-index: 1;

    color: var(--color-white);
}

.hero .hero-buttons {
    margin-bottom: 3.5em;
    max-width: 31.25rem;
}

.hero .hero-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    justify-content: center;

    z-index: 1;
}

.hero :is(a, button).btn {
    font-size: 1.25rem;
}

.hero .hero-player {
    z-index: 1;
    margin-bottom: 0.625rem;
}

    .hero .hero-player button {
        width: min(100%, 14.5rem);
        padding-inline: 2rem;
    }

.hero.hero--image .hero-buttons {
    margin-bottom: 10em;
}

.hero form {
    z-index: 1;
    margin-bottom: 0.625rem;

    max-width: 31.25rem;
}

.hero .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 0;
}

    .hero .hero-image img {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }

.hero .bunnycdn-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    z-index: 0;
}
    .hero.hero--video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.hero input {
    border: none;
}


@media screen and (min-width: 62rem) {
    .hero {
        height: clamp(36.875rem, calc(100vh - var(--navbar-height)), 43.75rem);
        height: clamp(36.875rem, calc(100svh - var(--navbar-height)), 43.75rem);
    }

    .hero .h1 {
        /* hyphens: none; */
    }

    .hero.hero--video,
    .hero.hero--image {
        height: 100vh;
        justify-content: flex-end;
    }

    .hero.hero--image {
        --color-accent: var(--color-primary);
    }
    
    .hero.hero--video .hero-buttons,
    .hero.hero--image .hero-buttons {
        margin-bottom: 11.25rem;
    }

    .hero.hero--image::before {
        width: 44.6875rem;
        transform: translate(0, -45%);
    }

    .hero.hero--video .h1,
    .hero.hero--image .h1 {
        text-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.161);
    }

    .hero.hero--image .hero-image {
        overflow: hidden;
    }

    .hero.hero--image img {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        width: 86%;
        height: auto;

        position: absolute;
        top: 0;
        left: 0;

        transform: translate(51%, -27%);

        object-position: 190% 90% !important;
    }

    
    
    .hero:is(.hero--video,.hero--image) .hero-buttons :is(a, button).btn {
        height: 3.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .hero.hero--with-buttons.hero--with-lead .lead {
        margin-bottom: 2.25em;
    }
}