/* FONTS */

@font-face {
    font-family: 'Futuru';
    src: url('../fonts/futuru-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futuru';
    src: url('../fonts/futuru-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montrose';
    src: url('../fonts/montrose-narrow.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* RESET */

*,*::before,*::after{box-sizing:border-box}*:not(dialog){margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}

/* VARIABLES */

:root {
    --color-dark: 29, 29, 27;
    --color-light: 249, 243, 233;
    --color-red: 227, 0, 33;

    --font-family-sans: 'Futuru', sans-serif;
    --font-family-serif: 'Montrose', serif;

    --font-size-small: 0.75rem;
    --font-size-medium: 1.25rem;
    --font-size-large: clamp(1.5rem, 1.4091rem + 0.4545vw, 1.75rem);
    --font-size-extra-large: clamp(2rem, 1.8182rem + 0.9091vw, 2.5rem);
    --font-size-huge: clamp(3rem, 2.6364rem + 1.8182vw, 4rem);
    --font-size-mega: clamp(5rem, 4.6364rem + 1.8182vw, 6rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --line-height-small: 1;
    --line-height-medium: 1.2;
    --line-height-large: 1.4;

    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 3rem;
    --spacing-extra-large: 5rem;

    --width-mobile: 480px;
    --width-tablet: 720px;
    --width-desktop: 960px;
}

/* TAGS */

body {
    background: rgb(var(--color-dark));
    font-family: var(--font-family-sans);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-large);
    text-wrap-style: auto;
    color: rgb(var(--color-dark));
}

h1, h2, h3 {
    text-wrap-style: auto;
}

h2 {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-extra-large);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-small);
    text-transform: uppercase;
    color: rgb(var(--color-light));
}

/* UTILITY */

.visually-hidden {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* HERO */

.hero {
    position: relative;
}

.hero__container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.hero__link {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    transition: transform 0.2s ease;
}

.hero__link:hover {
    transform: translateY(-0.5rem);
}

.hero__logo {
    width: clamp(14rem, 12.5455rem + 7.2727vw, 18rem);
}

.hero__image {
    width: 100vw;
}

.hero__ticker {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-small) 0;
    background: rgb(var(--color-dark));
    container-type: inline-size;
    overflow: hidden;
}

.hero__ticker-container {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ticker-bounce 40s linear infinite alternate;
    will-change: transform;
}

.hero__ticker:hover .hero__ticker-container {
    animation-play-state: paused;
}

.hero__ticker-text {
    padding: 0.5rem 1rem 0 1rem;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-extra-large);
    line-height: var(--line-height-small);
    text-transform: uppercase;
    color: rgb(var(--color-light));
    white-space: nowrap;
}

.hero__ticker-logo {
    height: 2.5rem;
    transform: translateY(-0.25rem);
}

@keyframes ticker-bounce {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-100% + 100cqw), 0, 0);
    }
}

@media (min-width: 720px) {
    .hero__image {
        height: 100vh;
        object-fit: cover;
        object-position: bottom;
    }

    .hero__ticker {
        position: absolute;
        bottom: 0;
    }
}

/* INTRO */

.intro {
    padding: var(--spacing-extra-large) var(--spacing-medium);
    background: rgb(var(--color-light));
    text-align: center;
}

.intro__container {
    max-width: var(--width-mobile);
    margin: auto;
}

.intro__title {
    margin-bottom: var(--spacing-medium);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-medium);
    text-transform: none;
    color: rgb(var(--color-red));
}

.intro__subtitle {
    margin-bottom: var(--spacing-medium);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-extra-large);
    line-height: var(--line-height-small);
    text-transform: uppercase;
}

.intro__content {
    columns: 1;
}

.intro__text + .intro__text {
    margin-top: var(--spacing-medium);
}

.intro__logo {
    width: 8rem;
    margin: var(--spacing-large) auto 0 auto;
}

@media (min-width: 720px) {
    .intro__container {
        max-width: var(--width-desktop);
        margin: auto;
    }

    .intro__content {
        max-width: var(--width-tablet);
        margin: auto;
        /*
        text-align: left;
        columns: 2;
        gap: var(--spacing-medium);
        */
    }

    .intro__title {
        max-width: var(--width-desktop);
        margin: 0 auto var(--spacing-small) auto;
        text-wrap-style: balance;
    }

    .intro__subtitle {
        max-width: var(--width-desktop);
        margin-left: auto;
        margin-right: auto;
        font-size: var(--font-size-huge);
        text-wrap-style: balance;
    }
}

/* PRODUCT */

.product {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-large);
    padding: var(--spacing-extra-large) var(--spacing-medium) 0 var(--spacing-medium);
    text-align: center;
    color: rgb(var(--color-light));
}

.product--red {
    margin-top: calc(-1 * var(--spacing-large));
    background: rgb(var(--color-red));
    position: relative;
    z-index: 2;
}

.product__title {
    font-size: var(--font-size-huge);
    margin-bottom: calc(-1 * var(--font-size-small));
}

.product__content {
    max-width: var(--width-mobile);
    margin: auto;
    columns: 1;
}

.product__text {
    margin-bottom: var(--spacing-medium);
}

.product__ingredients {
    width: 100%;
    max-width: var(--width-mobile);
    margin: auto;
}

@media (min-width: 720px) {
    .product__content {
        max-width: var(--width-tablet);
        /*
        max-width: var(--width-desktop);
        text-align: left;
        columns: 2;
        gap: var(--spacing-medium);
        */
    }
}

@media (min-width: 960px) {
    .product--red {
        margin-top: calc(-1 * var(--spacing-extra-large));
    }

    .product__title {
        font-size: var(--font-size-mega);
    }
}

/* OUTRO */

.outro {
    margin-top: calc(-1 * var(--spacing-large));
    padding: var(--spacing-extra-large) var(--spacing-medium);
    background: rgb(var(--color-light));
    text-align: center;
    position: relative;
    z-index: 2;
}

.outro__title {
    margin-bottom: calc(-1 * var(--font-size-small));
    font-size: var(--font-size-huge);
    color: rgb(var(--color-dark));
}

.outro__subtitle {
    display: block;
}

@media (min-width: 960px) {
    .outro {
        margin-top: calc(-1 * var(--spacing-extra-large));
    }
}

/* FOOTER */

.site-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-small);
    padding: var(--spacing-extra-large) var(--spacing-small) 0 var(--spacing-small);
    text-align: center; 
    color: rgb(var(--color-light));
    position: relative;
    z-index: 2;
}

.site-footer__text {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-extra-large);
    line-height: var(--line-height-small);
    text-transform: uppercase;
}

.site-footer__image {
    width: 100%;
    max-width: var(--width-mobile);
}

/* PLAYER */

.player__poster {
    display: block;
    max-width: var(--width-desktop);
    cursor: pointer;
    position: relative;
}

.player__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
}

.player__button {
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.player__button--play {
    width: 6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.player__poster:hover .player__button--play {
    transform: translate(-50%, -50%) scale(0.9);
}

.player__modal {
    width: 100vw;
    max-width: var(--width-desktop);
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    overflow: visible;
}

.player__modal::backdrop {
    background: rgba(var(--color-dark), 0.8);
    backdrop-filter: blur(0.5rem);
}

.player__media {
    width: 100%;
    background: rgb(var(--color-dark));
    aspect-ratio: 16 / 9;
    position: relative;
}

.player__iframe iframe {    
    width: 100%;
    height: 100%;
    border: none;
    inset: 0;
    position: absolute;
}

.player__button--close {
    display: none;
    width: 1.25rem;
    outline: none;
    position: absolute;
    top: -2.25rem;
    right: 0;
    transition: all 0.2s ease;
}

.player__button--close:hover {
    transform: scale(0.9);
}

.player__icon {
    display: block;
    width: 100%;
    height: auto;
}