/*--------------------------------------------- CSS Reset --------------------------------------------------------*/

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
    padding: 0;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    color: var(--main-txt-clr);
}

/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

a {
    cursor: pointer;
}

/*--------------------------------------------- Variables / Utilities ----------------------------------------------------------*/
:root {
    /* Colors */
    --bg-clr: hsl(47, 70%, 96%);
    --main-txt-clr: #141414;
    --accent-clr: #ddc92a;
    --card-bg-clr: #e7d6c4;

    /* Fonts */
    --main-font: "Favorit";
    --accent-font: "Cyberthrone";
    --shoe-font: "TT Trailers";
}
/*--------------------------------------------- Typography ---------------------------------------------------------*/
@font-face {
    font-family: "Cyberthrone";
    src: url("./fonts/Cyberthrone.ttf") format("truetype");
}

@font-face {
    font-family: "Favorit";
    src: url("./fonts/Favorit.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    src: url("./fonts/Montserrat.ttf") format("truetype");
}

@font-face {
    font-family: "TT Trailers";
    src: url("./fonts/TT Trailers Trial Variable.ttf") format("truetype");
}

body {
    background: var(--bg-clr);
    font-family: var(--main-font);
    letter-spacing: 0px;
}

a {
    color: var(--main-txt-clr);
    cursor: pointer;
    text-decoration: none;
}

/*--------------------------------------------------- Header --------------------------------------------------------------------*/
.sidebar {
    display: none;
}

.header-wrapper {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    letter-spacing: 0.1px;
}

.header-left {
    display: flex;
    justify-content: flex-start;
    flex: 1;
}

header svg {
    width: clamp(5rem, 0.6923rem + 19.6923vw, 6.6rem);
    cursor: pointer;
}

.logo-outer-wrapper {
    display: none;
}

.header-middle {
    display: flex;
    justify-content: center;
    flex: 1;
}

.header-menu-icon {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
}

.top-line {
    border: 1px solid var(--main-txt-clr);
    width: 12px;
}

.middle-line {
    border: 1px solid var(--main-txt-clr);
    width: 25px;
}

.bottom-line {
    border: 1px solid var(--main-txt-clr);
    width: 12px;
    align-self: flex-end;
}

.ink-mode-wrapper {
    display: none;
}

.header-right {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.cart-outer-wrapper {
    display: none;
}

.header-right p {
    font-size: clamp(0.875rem, 0.5385rem + 1.5385vw, 1rem);
    margin-bottom: -0.25rem;
    text-transform: uppercase;
}

/*--------------------------------------------------- Sidebar Menu --------------------------------------------------------------*/

/*--------------------------------------------------- Hero Section --------------------------------------------------------------*/
.hero-section {
    padding: clamp(0.5rem, -0.1176rem + 2.8235vw, 2rem)
        clamp(2.3rem, 0.3647rem + 8.8471vw, 7rem);
}

.hero-text-wrapper {
    max-width: clamp(17.25rem, 4.1765rem + 59.7647vw, 49rem);
    margin-left: auto;
}

.hero-image-wrapper {
    position: relative;
    display: flex;
    gap: clamp(0.5rem, 0.0882rem + 1.8824vw, 1.5rem);
    margin: 1rem 0 1rem auto;
    max-width: clamp(17.25rem, 4.2794rem + 59.2941vw, 48.75rem);
}

.hero-image-wrapper img {
    border: 2px solid black;
}

.hero-image-text-wrapper {
    display: flex;
}

.hero-image-text {
    flex: 1;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.double-dash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(3.75rem, 0.9191rem + 12.9412vw, 10.625rem);
    transform: translate(-50%, -70%);
    mix-blend-mode: multiply;
}

.hero-cta-text {
    text-transform: uppercase;
}

.hero-cta-wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0rem 0 0;
}

.hero-cta-wrapper svg {
    width: 45px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*--------------------------------------------------- Marquee Section --------------------------------------------------------------*/
.marquee-wrapper {
    /* position: relative; */
    display: flex;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    margin: 2rem 0 5rem 0;
    overflow: hidden;
    background: var(--accent-clr);
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.marquee-track {
    /* position: absolute; */
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    animation: marquee-wrapper 30s linear infinite;
}

@keyframes marquee-wrapper {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

.marquee-content h2 {
    display: flex;
    align-items: center;
    font-size: clamp(0.875rem, 0.5147rem + 1.6471vw, 1.75rem);
    font-weight: 400;
    text-transform: uppercase;
    padding: 0.125rem 0;
    margin-top: clamp(0.25rem, 0.1676rem + 0.3765vw, 0.45rem);
}

.marquee-wrapper span {
    font-size: 0.5rem;
}

/*--------------------------------------------------- Quote Section --------------------------------------------------------------*/
.quote-section {
    display: flex;
    justify-content: center;
    padding: clamp(0.5rem, -0.1176rem + 2.8235vw, 2rem)
        clamp(2.3rem, 0.3647rem + 8.8471vw, 7rem);
}

.quote-wrapper {
    margin-left: auto;
}

.quote:nth-child(1) {
    display: flex;
}

.quote-section h2 {
    font-size: clamp(1rem, 0.1765rem + 3.7647vw, 3rem);
    font-weight: 600;
}

.quote-section p {
    font-size: clamp(0.65rem, 0.5059rem + 0.6588vw, 1rem);
    text-transform: uppercase;
    text-decoration: underline;
    margin: clamp(0.3rem, -0.0912rem + 1.7882vw, 1.25rem)
        clamp(1rem, -2.7059rem + 16.9412vw, 10rem) 0 0;
}

/*--------------------------------------------------- Slider/Product Cards -------------------------------------------------------------*/
.embla {
    max-width: 100%;
    margin: clamp(3rem, 2.5882rem + 1.8824vw, 4rem) 0 1rem 0;
    --slide-height: clamp(18rem, 14.2941rem + 16.9412vw, 27rem);
    --slide-spacing: 1rem;
    /* --slide-size: 30%; */
    --slide-size: clamp(12rem, 8.2941rem + 16.9412vw, 21rem);
}

.embla__viewport {
    overflow: hidden;
    cursor: grab;
}

.embla__viewport:active {
    cursor: grabbing;
}

.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * 22);
}

.embla__slide {
    transform: translate3d(0, 0, 0);
    flex: 0 0 var(--slide-size);
    min-width: 0;
    padding-left: var(--slide-spacing);
}

.embla__slide__number {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 0.25rem;
    height: var(--slide-height);
    background: var(--card-bg-clr);
    border: 2px solid var(--main-txt-clr);
    letter-spacing: -1px;
    user-select: none;
    overflow: hidden;
}

.embla__slide__number img {
    position: absolute;
    top: -1.5rem;
    /* margin-top: clamp(1rem, 1.4118rem + -1.8824vw, 0rem); original font clamp*/
    margin-top: clamp(0rem, 1.4118rem - 1.8824vw, 1rem);
    width: 90%;
}

.bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
    z-index: 1;
}

.embla__slide__number svg {
    width: clamp(3.75rem, 3.5441rem + 0.9412vw, 4.25rem);
    margin-bottom: 0.5rem;
}

.embla__slide__number h3 {
    font-family: var(--shoe-font);
    font-size: clamp(3.75rem, 2.9265rem + 3.7647vw, 5.75rem);
    font-weight: 500;
    text-transform: uppercase;
    text-box: trim-both cap alphabetic;
}

.slide-item-season {
    font-size: 0.75rem;
}

.slide-item-old-price {
    font-size: clamp(1rem, 0.9485rem + 0.2353vw, 1.125rem);
    text-decoration: line-through;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

.slide-item-new-price {
    font-size: clamp(1.25rem, 1.0441rem + 0.9412vw, 1.75rem);
    margin-top: -0.5rem;
    text-transform: uppercase;
}

.carousel-cta-section {
    padding: clamp(0.5rem, -0.1176rem + 2.8235vw, 2rem)
        clamp(2.3rem, 0.3647rem + 8.8471vw, 7rem);
}

.carousel-cta-wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
}

.carousel-cta-wrapper p {
    text-transform: uppercase;
}

.carousel-cta-wrapper svg {
    width: 45px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*--------------------------------------------------- Testimony --------------------------------------------------------------------*/
.testimony-section {
    display: flex;
    justify-content: center;
    margin: 4rem 0;
}

.testimony-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    width: fit-content;
    height: 70px;
}

.first-testimony {
    font-family: var(--main-font);
}

.testimony-left {
    height: 36px;
    overflow: hidden;
    /* border: solid green; */
}

.testimony-names {
    animation: translateHeader 12s linear infinite;
    margin-top: 0.25rem;
}

@keyframes translateHeader {
    0%,
    47.5% {
        transform: translateY(0px);
    }
    50%,
    52.5% {
        transform: translateY(-36px);
    }
    55%,
    97.5% {
        transform: translateY(-36px);
    }
    100% {
        transform: translateY(0px);
    }
}

.testimony-left svg {
    position: absolute;
    top: 0;
    left: -2.25rem;
    width: 55px;
}

.testimony-left h4 {
    font-size: 1.5rem;
    font-family: var(--accent-font);
    font-weight: 400;
}

.testimony-right {
    width: 200px;
    overflow: hidden;
    /* border: solid green; */
}

.testimony-content {
    animation: translateTestimony 12s linear infinite;
}

@keyframes translateTestimony {
    0%,
    47.5% {
        transform: translateY(0px); /* First testimony (10s pause) */
    }
    50%,
    52.5% {
        transform: translateY(-68px); /* Quick transition (1s) */
    }
    55%,
    97.5% {
        transform: translateY(-68px); /* Second testimony (10s pause) */
    }
    100% {
        transform: translateY(0px); /* Quick transition back (1s) */
    }
}

.testimony-right p {
    font-size: 0.65rem;
    /* width: 190px; */
    line-height: 1;
    /* font-weight: 600; */
    /* margin: 0.5rem 0; */
}

.first-testimony {
    margin: 0.5rem 0.5rem 1rem 0.5rem;
    /* margin: 0.5rem; */
}

.second-testimony {
    margin: 0.5rem;
}
/*--------------------------------------------------- Footer --------------------------------------------------------------------*/
footer {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    padding: 3rem 2rem;
    font-family: var(--main-font);
    text-transform: uppercase;
}

.newsletter,
.newsletter-email {
    display: none;
}

.newsletter-email {
    justify-self: left;
    align-self: end;
    border-bottom: solid 1px black;
}

.newsletter svg {
    width: 40px;
}

.newsletter-input {
    display: flex;
    align-items: center;
}

.newsletter-email input {
    font-size: 0.875rem;
    background: none;
    border: none;
    width: clamp(10rem, 4.6667rem + 17.7778vw, 18rem);
    padding: 0.5rem;
}

.newsletter-email input:focus {
    outline: none;
}

.newsletter-email input::placeholder {
    font-size: 0.5rem;
}

.newsletter-email button {
    background: none;
    border: none;
    font-size: 0.5rem;
    text-transform: uppercase;
    cursor: pointer;
}

.footer-link-outer-wrapper {
    display: none;
}

.info-wrapper,
.policy-wrapper {
    justify-self: left;
}

footer h4 {
    font-size: 0.5rem;
    letter-spacing: 0.75px;
}

footer ul {
    padding: 0;
}

footer li {
    font-size: 1.125rem;
    letter-spacing: 1px;
    list-style: none;
    cursor: pointer;
}

.back-to-top svg {
    width: 40px;
    transform: rotate(-90deg);
    justify-self: left;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.credits,
.copyright {
    font-size: 0.5rem;
    align-self: end;
    justify-self: left;
}

.credits {
    cursor: pointer;
}

.social-media {
    display: flex;
    align-self: end;
    justify-self: left;
}

.social-media svg {
    width: 20px;
    cursor: pointer;
    transition: 0.3s ease;
}

.credits,
.copyright,
.social-media {
    padding-block-start: 2rem;
}

/*--------------------------------------------------- Media Queries -------------------------------------------------------------*/
/* 480 */
@media (width > 480px) {
    header svg {
        width: clamp(4.8rem, 2.7692rem + 6.7692vw, 7rem);
    }

    .header-right p {
        font-size: clamp(0.75rem, 0.5192rem + 0.7692vw, 1rem);
    }

    .carousel-cta-wrapper svg {
        width: clamp(2.8125rem, 2.3958rem + 1.3889vw, 3.4375rem);
    }

    .testimony-section {
        display: flex;
        justify-content: center;
        padding-block: 7rem;
    }

    .testimony-wrapper {
        height: 115px;
        width: fit-content;
        gap: 2rem;
    }

    .testimony-left {
        height: 40px;
        /* margin-block-start: 2rem; */
    }

    .testimony-left svg {
        position: absolute;
        width: 60px;
        top: 0rem;
        left: 2.25rem;
    }

    .testimony-left h4 {
        font-size: 2rem;
        width: 185px;
        text-align: right;
    }

    .testimony-names h4:first-child {
        padding-block-end: 0.25rem;
    }

    @keyframes translateHeader {
        0%,
        47.5% {
            transform: translateY(0px);
        }
        50%,
        52.5% {
            transform: translateY(-52px);
        }
        55%,
        97.5% {
            transform: translateY(-52px);
        }
        100% {
            transform: translateY(0px);
        }
    }

    .testimony-right {
        width: 300px;
        /* border: solid green; */
    }

    .testimony-right p {
        font-size: 1rem;
        line-height: 1.2;
        width: 300px;
    }

    @keyframes translateTestimony {
        0%,
        47.5% {
            transform: translateY(0px); /* First testimony (10s pause) */
        }
        50%,
        52.5% {
            transform: translateY(-110px); /* Quick transition (1s) */
        }
        55%,
        97.5% {
            transform: translateY(-110px); /* Second testimony (10s pause) */
        }
        100% {
            transform: translateY(0px); /* Quick transition back (1s) */
        }
    }

    footer {
        grid-template-columns: auto auto auto auto;
    }

    .newsletter,
    .newsletter-email {
        display: block;
    }

    footer h4 {
        font-size: clamp(0.5rem, 0.4rem + 0.3333vw, 0.65rem);
        padding-block-end: 0.75rem;
    }

    .newsletter svg {
        width: clamp(1.875rem, 1.4583rem + 1.3889vw, 2.5rem);
    }

    footer li {
        font-size: clamp(1.125rem, 0.875rem + 0.8333vw, 1.5rem);
    }

    .back-to-top svg {
        width: clamp(2.8125rem, 2.3958rem + 1.3889vw, 3.4375rem);
    }

    .newsletter-email input::placeholder {
        font-size: clamp(0.5rem, 0.4rem + 0.3333vw, 0.65rem);
    }

    .newsletter-email button {
        font-size: clamp(0.5rem, 0.4rem + 0.3333vw, 0.65rem);
    }

    .credits,
    .copyright {
        font-size: clamp(0.5rem, 0.4rem + 0.3333vw, 0.65rem);
    }

    .social-media {
        gap: clamp(0rem, -0.3333rem + 1.1111vw, 0.5rem);
    }

    .social-media svg {
        width: clamp(1.25rem, 1.0833rem + 0.5556vw, 1.5rem);
    }
}

/* 768 */
@media (width > 768px) {
    .testimony-wrapper {
        height: 160px;
    }

    .testimony-left {
        height: 60px;
        margin-block-start: 2rem;
        /* border: solid green; */
    }

    .testimony-left svg {
        width: 80px;
        top: 1.5rem;
        left: 4rem;
    }

    .testimony-names {
        margin-top: -10px;
    }

    .testimony-left h4 {
        font-size: 3rem;
        width: 285px;
    }

    .testimony-names h4:first-child {
        padding-block-end: 0.4rem;
    }

    @keyframes translateHeader {
        0%,
        47.5% {
            transform: translateY(0px);
        }
        50%,
        52.5% {
            transform: translateY(-80px);
        }
        55%,
        97.5% {
            transform: translateY(-80px);
        }
        100% {
            transform: translateY(0px);
        }
    }

    .testimony-right {
        width: 450px;
        /* border: solid green; */
    }

    .testimony-right p {
        font-size: 1.5rem;
        width: 450px;
    }

    .testimony-right p:first-child {
        padding-block-end: 0.1rem;
    }

    @keyframes translateTestimony {
        0%,
        47.5% {
            transform: translateY(0px); /* First testimony (10s pause) */
        }
        50%,
        52.5% {
            transform: translateY(-160px); /* Quick transition (1s) */
        }
        55%,
        97.5% {
            transform: translateY(-160px); /* Second testimony (10s pause) */
        }
        100% {
            transform: translateY(0px); /* Quick transition back (1s) */
        }
    }
}

/* 1000 */
@media (width > 1000px) {
    /* header */
    header {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .sidebar {
        position: fixed;
        bottom: 1.75rem;
        left: 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        z-index: 1;
    }

    .sidebar-outer-wrapper {
        display: block;
        overflow: hidden;
        height: 0.75rem;
        cursor: pointer;
        /* border: 1px red solid; */
    }

    .sidebar-inner-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0rem;
        transition: 0.7s cubic-bezier(0, 0, 0.1, 1.1);
    }

    .sidebar-inner-wrapper:hover {
        transform: translateY(-0.9rem);
    }

    .sidebar p {
        font-size: 0.75rem;
        line-height: 1.2;
        text-transform: uppercase;
        cursor: pointer;
    }

    .header-wrapper {
        padding: 1rem 2.75rem 1.5rem 1.75rem;
    }

    .header-left {
        position: relative;
    }

    .header-left > svg {
        display: none;
    }

    .logo-outer-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        overflow: hidden;
        /* border: 1px red solid; */
        width: 85px;
        height: 30px;
        transform: rotate(-90deg);
        transform-origin: 50% 160%;
    }

    .logo-inner-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        cursor: pointer;
        transition: 0.6s cubic-bezier(0, 0, 0.1, 1.1);
    }

    .logo-inner-wrapper:hover {
        transform: translateY(-38px);
    }

    .logo-inner-wrapper svg {
        width: 100%;
    }

    .header-menu-icon {
        display: none;
    }

    .ink-mode-wrapper {
        display: block;
        background-image: url("./assets/label-filled.svg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        padding: 0 0.25rem;
        cursor: pointer;
    }

    .ink-mode-wrapper p {
        font-family: var(--accent-font);
        font-size: clamp(1rem, 0.375rem + 1vw, 1.125rem);
    }

    .header-right > a {
        display: none;
    }

    .cart-outer-wrapper {
        display: block;
        overflow: hidden;
        height: 0.75rem;
        cursor: pointer;
        /* border: 1px red solid; */
    }

    .cart-inner-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        transition: 0.6s cubic-bezier(0, 0, 0.1, 1.1);
    }

    .cart-inner-wrapper:hover {
        transform: translateY(-0.85rem);
    }

    .cart-inner-wrapper p {
        font-size: 0.75rem;
        line-height: 1.2;
    }

    /* hero */
    .hero-image-wrapper img {
        border: 3px solid black;
    }

    .hero-cta-wrapper svg:hover {
        transform: rotate(360deg) scale(1.125);
    }

    /* carousel */
    .carousel-cta-wrapper svg:hover {
        transform: rotate(360deg) scale(1.125);
    }

    /* testimony */
    .testimony-wrapper {
        gap: 2.5rem;
    }

    /* footer */
    footer {
        background-color: hsl(47, 70%, 95%);
    }

    .footer-link {
        display: none;
    }

    .footer-link-outer-wrapper {
        display: block;
        overflow: hidden;
        height: 1.5rem;
        cursor: pointer;
        /* border: 1px red solid; */
    }

    .footer-link-inner-wrapper {
        display: flex;
        flex-direction: column;
        transition: 0.7s cubic-bezier(0, 0, 0.1, 1.1);
    }

    .footer-link-inner-wrapper:hover {
        transform: translateY(-1.8rem);
    }

    footer ul {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    footer li {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .back-to-top svg:hover {
        transform: rotate(270deg) scale(1.125);
    }

    .social-media svg:hover {
        transform: scale(1.125);
    }
}

@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Cursor Styling */
.goo {
    position: absolute;
    top: 0;
}
.ink-cursor {
    pointer-events: none;
    position: fixed;
    display: block;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    mix-blend-mode: difference;
    top: 0;
    left: 0;
    z-index: 1000;
    filter: url("#goo");
    -webkit-filter: url("#goo");
}

.ink-cursor span {
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background-color: white;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

@media (max-width: 991px) {
    .ink-cursor,
    .ink-cursor span {
        display: none;
    }
}

body {
    cursor: none;
}