/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;

    font-family: "Montserrat", sans-serif;

    /* background: #f2f2f2; */

    color: #111;
}


/* =====================================================
   SLIDER
===================================================== */

.slider {
    position: relative;

    width: 100%;
    height: 100dvh;

    overflow: hidden;
}

.slides {
    display: flex;

    width: 100%;
    height: 100%;

    transform: translateX(0);

    transition:
        transform 650ms cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );

    touch-action: pan-y;

    user-select: none;
}


/* =====================================================
   SLIDES
===================================================== */

.slide {
    flex: 0 0 100%;

    width: 100%;
    height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    /* padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(4rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left)); */
}


/* =====================================================
   CARD
===================================================== */

.card {
    position: relative;

    width: min(90vw, 55rem);

    /* aspect-ratio: 1.7 / 1; */

    background: #fff;

    overflow: hidden;

    /* box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.08); */
}


/* =====================================================
   PAGE 1
===================================================== */

.page {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding:
        clamp(2rem, 6vw, 4rem)
        clamp(1.5rem, 5vw, 3rem);

    width: 100%;
    height: 100%;
}


/* =====================================================
   VMV LOGO
===================================================== */

.vmv-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: auto;

    position: relative;
    margin-top: 5%;
}

.vmv-logo img {
    width: 40%;
    height: auto;
}


/* Logo frame */

/* .vmv-logo::before {
    content: "";

    position: absolute;

    inset: 12% 0;

    border: 1px solid #111;
} */


/* Logo text */

/* .vmv-text {
    position: relative;

    z-index: 2;

    background: #fff;

    padding: 0 0.8rem;

    font-size:
        clamp(1.1rem, 3vw, 1.7rem);

    letter-spacing: 0.12em;

    font-weight: 500;
} */


/* =====================================================
   LOGO LINES
===================================================== */

/* .logo-lines {
    position: absolute;

    width: 2rem;
    height: 2rem;

    z-index: 3;
}

.logo-lines span {
    position: absolute;

    display: block;

    width: 100%;
    height: 100%;
} */


/* left */

.logo-left {
    left: -0.35rem;
    top: 0.35rem;
}

.logo-left span {
    border-left: 1px solid #111;
}

.logo-left span:nth-child(1) {
    left: 0;
}

.logo-left span:nth-child(2) {
    left: 0.35rem;
}

.logo-left span:nth-child(3) {
    left: 0.7rem;
}


/* right */

.logo-right {
    right: -0.35rem;
    top: 0.35rem;
}

.logo-right span {
    border-right: 1px solid #111;
}

.logo-right span:nth-child(1) {
    right: 0;
}

.logo-right span:nth-child(2) {
    right: 0.35rem;
}

.logo-right span:nth-child(3) {
    right: 0.7rem;
}


/* =====================================================
   AESTHETICS
===================================================== */

/* .aesthetics {
    margin-top: -0.3rem;

    font-family: Georgia, serif;

    font-size:
        clamp(0.7rem, 2vw, 1rem);

    font-style: italic;

    letter-spacing: 0.12em;
} */


/* =====================================================
   THE SKIN KONCEPT
===================================================== */
@font-face {
    font-family: "Monotype Corsiva";
    src: url("fonts/Monotype-Corsiva-Bold.ttf") format("woff2");
    font-weight: normal;
    font-style: normal;
}

.page h1 {
    margin-top:
        clamp(1rem, 3vw, 1.6rem);

    font-size:
        clamp(1.1rem, 3.3vw, 4rem);

    font-weight: 600;

    font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;

    letter-spacing: 0.03em;
}


/* =====================================================
   REPRESENTATIVE
===================================================== */

.representative {
    /* margin-top: clamp(1rem, 7vw, 10rem); */
    
    /* margin-bottom: clamp(1rem, 3vw, 10rem); */

    margin-top: 10%;

    display: flex;

    flex-direction: column;

    gap: 0.45rem;
}

.representative p {
    font-size:
        clamp(0.45rem, 1.5vw, 2rem);

    letter-spacing: 0.04em;
}

.representative strong {
    font-size:
        clamp(0.45rem, 1.5vw, 2rem);

    font-weight: 600;

    letter-spacing: 0.035em;
}


/* =====================================================
   WEBSITES
===================================================== */

.websites {
    position: absolute;

    /* bottom:
        clamp(1rem, 5vw, 5rem); */
    bottom: 10%;
    left: 4%;
    right: 4%;

    font-size:
        clamp(0.35rem, 1.5vw, 2rem);

    letter-spacing: 0.02em;

    white-space: nowrap;
}

.websites span {
    margin: 0 0.2rem;
}

a.custom-link,
a.custom-link:link,
a.custom-link:visited,
a.custom-link:hover,
a.custom-link:active,
a.custom-link:focus {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #000000 !important;
}

/* =====================================================
   PAGE 2
===================================================== */

.page-two-content {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: center;

    padding:
        7% 11%;
}


/* =====================================================
   QR
===================================================== */

.qr-wrapper {
    display: flex;

    align-items: center;
    justify-content: right;
    grid-column: 1;
}

.qr {
    /* width:
        clamp(6rem, 15vw, 9.5rem); */

    width: 50%;
    height: auto;

    display: block;
}


/* =====================================================
   INFORMATION
===================================================== */

.information {
    text-align: right;
    padding-right: 30%;
}

.information h2 {
    font-size:
        clamp(1.1rem, 3.3vw, 1.85rem);

    font-weight: 500;

    letter-spacing: 0.04em;
}

.name-bio {
    text-align: right;
    padding-right: 30%;
    grid-column: 2;
}

.name-bio h2 {
    font-size:
        clamp(1.1rem, 3vw, 5rem);

    font-weight: 500;

    letter-spacing: 0.04em;
}

.tagline {
    margin-top: 0.35rem;

    font-size:
        clamp(0.43rem, 1vw, 5rem);

    letter-spacing: 0.04em;
}


/* =====================================================
   DETAILS
===================================================== */

.details {
    margin-top:
        clamp(1.2rem, 3vw, 1.8rem);

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap:
        clamp(0.35rem, 1vw, 0.55rem);
}

.details strong {
    margin-bottom: 0.1rem;

    font-size:
        clamp(0.48rem, 1vw, 5rem);

    font-weight: 600;

    letter-spacing: 0.04em;
}

.details a {
    /* color: #111; */

    text-decoration: none;

    font-size:
        clamp(0.45rem, 1vw, 5rem);

    letter-spacing: 0.04em;

    transition: opacity 200ms ease;
}

.details a:hover {
    opacity: 0.5;
}


/* =====================================================
   DECORATIVE CORNERS - PAGE 2
===================================================== */

.corner {
    position: absolute;

    width: 20%;

    height: auto;
}


/* TOP LEFT */

.corner-top-left {
    /* top:
        clamp(1rem, 4vw, 2rem);

    left:
        clamp(1rem, 4vw, 2rem); */
    
    left: 10%;
}

.corner-top-left span {
    position: absolute;

    width: 75%;
    height: 75%;

    border-left: 1px solid #111;
}

.corner-top-left span:nth-child(1) {
    left: 0;
}

.corner-top-left span:nth-child(2) {
    left: 0.35rem;
}

.corner-top-left span:nth-child(3) {
    left: 0.7rem;
}


/* BOTTOM RIGHT */

.corner-bottom-right {
    /* right:
        clamp(1rem, 1vw, 2rem);

    bottom:
        clamp(1rem, 0vw, 2rem); */
    
    right: 10%;
    bottom: 5%;
}

.corner-bottom-right span {
    position: absolute;

    width: 75%;
    height: 75%;

    border-right: 1px solid #111;
}

.corner-bottom-right span:nth-child(1) {
    right: 0;
}

.corner-bottom-right span:nth-child(2) {
    right: 0.35rem;
}

.corner-bottom-right span:nth-child(3) {
    right: 0.7rem;
}

.corner-logo {
    width: 50%;
    height: auto;
}

.corner-logo-rotate-180 {
    width: 50%;
    height: auto;
    transform: rotate(180deg);
}


/* =====================================================
   NAVIGATION ARROWS
===================================================== */

.nav {
    position: fixed;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    width: 2.5rem;
    height: 2.5rem;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    color: #111;

    font-size: 1.5rem;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        0 0.3rem 1rem rgba(0, 0, 0, 0.08);

    transition:
        transform 200ms ease,
        background 200ms ease;
}

.nav:hover {
    background: #fff;

    transform:
        translateY(-50%) scale(1.08);
}

.previous {
    left: 1rem;
}

.next {
    right: 1rem;
}


/* =====================================================
   DOTS
===================================================== */

.dots {
    position: fixed;

    z-index: 30;

    bottom:
        max(1.2rem, env(safe-area-inset-bottom));

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 0.55rem;
}

.dot {
    width: 0.45rem;
    height: 0.45rem;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.25);

    padding: 0;

    cursor: pointer;

    transition:
        transform 200ms ease,
        background 200ms ease;
}

.dot.active {
    background: #111;

    transform: scale(1.35);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 700px) {

    .card {
        width: 94vw;
    }

    .page-two-content {
        padding-left: 8%;
        padding-right: 8%;
    }

    .information {
        padding-right: 0;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 480px) {

    body {
        background: #fff;
    }

    .slide {
        padding: 0;
    }

    .card {
        width: 100vw;
        height: 100dvh;

        aspect-ratio: auto;

        box-shadow: none;
    }


    /* ---------------------------------------------
       PAGE 1
    --------------------------------------------- */

    .page {
        padding:
            18vh 1.2rem 8vh;
    }

    .vmv-logo {
        width: min(65vw, 16rem);
        height: clamp(3rem, 12vw, 4rem);
    }

    .vmv-text {
        font-size:
            clamp(1.1rem, 6vw, 1.6rem);
    }

    .aesthetics {
        font-size:
            clamp(0.65rem, 3.2vw, 0.9rem);
    }

    .page h1 {
        font-size:
            clamp(1.15rem, 6vw, 1.7rem);

        margin-top: 1.2rem;
    }

    .representative {
        margin-top: 1.4rem;
    }

    .representative p {
        font-size:
            clamp(0.5rem, 2.6vw, 0.65rem);
    }

    .representative strong {
        font-size:
            clamp(0.45rem, 2.35vw, 0.62rem);

        line-height: 1.5;
    }

    .websites {
        bottom: 10vh;

        font-size:
            clamp(0.32rem, 1.8vw, 0.48rem);

        white-space: normal;

        line-height: 1.7;
    }


    /* ---------------------------------------------
       PAGE 2
    --------------------------------------------- */

    .page-two-content {
        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 2.5rem;

        padding:
            5rem 1.5rem 5rem;
    }

    .qr {
        width:
            min(42vw, 10rem);
    }

    .information {
        text-align: center;

        padding: 0;
    }

    .information h2 {
        font-size:
            clamp(1.25rem, 7vw, 1.8rem);
    }

    .tagline {
        font-size:
            clamp(0.48rem, 2.5vw, 0.65rem);
    }

    .details {
        align-items: center;

        margin-top: 1.5rem;

        gap: 0.6rem;
    }

    .details strong {
        font-size:
            clamp(0.5rem, 2.6vw, 0.68rem);
    }

    .details a {
        font-size:
            clamp(0.48rem, 2.4vw, 0.64rem);
    }


    /* ---------------------------------------------
       NAVIGATION
    --------------------------------------------- */

    .nav {
        width: 2.2rem;
        height: 2.2rem;

        font-size: 1.25rem;
    }

    .previous {
        left: 0.6rem;
    }

    .next {
        right: 0.6rem;
    }

    .dots {
        bottom:
            max(1rem, env(safe-area-inset-bottom));
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 350px) {

    .page {
        padding-top: 15vh;
    }

    .representative {
        margin-top: 1rem;
    }

    .page-two-content {
        gap: 1.8rem;
    }

    .qr {
        width: 7.5rem;
    }
}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .slides {
        transition: none;
    }

    .nav,
    .dot {
        transition: none;
    }
}