@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+SemiExpanded:ital,wght@0,200..900;1,200..900&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');
/* https://mindmarket.com/ */
:root {
    /* Base Colors */
    --black: rgb(12 15 10);
    --white: rgb(244 244 244);
    --blue: rgb(91 192 235);
    --green: rgb(155 197 61);
    --yellow: rgb(253 231 76);
    --red: rgb(229 52 52);
    --orange: rgb(250 121 33);
    --purple: rgb(127 92 255);

    --content-width: 1300px;
    --main-radius: 0.5rem;

    --accent-font: "Zalando Sans SemiExpanded", system-ui, sans-serif;

    scroll-behavior: auto;
}
/* RESET */
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0; padding: 0; font: inherit;}
html {/* color-scheme: dark light; */hanging-punctuation: first last;}
img, picture, svg, video {display: block; max-width: 100%;}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
p, li {max-width: 65ch;text-wrap: pretty;}
/* RESET END */
a {
    --initial-color: var(--red);
    --hover-color: var(--black);
    color: var(--initial-color);
    transition: color 250ms, text-decoration 250ms, text-underline-offset 300ms;
    &:hover {color: var(--hover-color);}
}
body {
    background-color: var(--white);
    display: grid;
    font-family: "Zalando Sans", system-ui, sans-serif;
    font-size: 1.25em;
    grid-template-columns: [fullWidth-start] minmax(2rem, 1fr) [mainContent-start] minmax(2rem, var(--content-width)) [mainContent-end] minmax(1rem, 1fr) [fullWidth-end];

    &>* {grid-column: mainContent;}
    &:first-child :not(nav) {margin-top: 4rem;}
}
body, html {overflow-x: clip;}
button, a.button {
    --button-color: var(--green);
    --button-hover: var(--blue);
    background-color: var(--button-color);
    border: none;
    border-radius: var(--main-radius);
    color: var(--black);
    cursor: pointer;
    display: block;
    font-family: var(--accent-font);
    font-weight: bold;
    height: fit-content;
    margin-inline: auto;
    padding: 1.25rem 1.75rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 250ms;
    width: fit-content;
    /* &[href^="https"]::after { content: "\a\276F";} */
    &:hover {
        animation: button-bounce 1 450ms ease-in-out forwards;
        background-color: var(--button-hover);
        &::after {scale: 1.5;}
    }
    &:active {animation: none;box-shadow: 0 0.2rem 0 var(--black);transform: translateY(-0.2rem);transition: all 250ms;}
}
@keyframes button-bounce {
    50% {box-shadow: 0 0.65rem 0 var(--black);transform: translateY(-0.65rem);}
    70% {box-shadow: 0 0.45rem 0 var(--black);transform: translateY(-0.45rem);}
    100% {box-shadow: 0 0.5rem 0 var(--black);transform: translateY(-0.5rem);}
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--accent-font);
    font-weight: bold;
    line-height: 1.1em;
    margin-bottom: 0.05em;
    padding-top: 0.35em;
}
h1 {font-size: 2em;&.section-header {font-size: 2.75em;}}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: 0.83em}
h6 {font-size: 0.67em}
p {margin: 0 0 0.75em 0;}


nav#main-nav {
    background: rgba(255, 255, 255, 0.043);
    background-image: linear-gradient(140deg,rgba(157 157 157 / 0.21) 1%,rgba(151 151 151 / 0.35) 100%);
    box-shadow: rgba(0 0 0 / 0.15) 0px 8px 32px, rgba(0 0 0 / 0.05) 0px 2px 8px, rgba(255 255 255 / 0.25) 0px 1px 0px inset, rgba(255 255 255 / 0.15) 0px -1px 0px inset;
    backdrop-filter: blur(16px) saturate(1.2);
    position: relative;
    align-items: center;
    border-radius: var(--main-radius);
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(1rem, 350px) auto;
    grid-column: mainContent;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
    z-index: 9991;
    & ul {
        display: flex;
        flex-direction: row;
        /* gap: 1rem; */
        & li {
            list-style-type: none;
            & a {
                --initial-color: var(--black);
                --hover-color: var(--black);
                background-image: linear-gradient(170deg, rgb(91 192 235 / 0), rgb(91 192 235 / 0) 50%, rgb(91 192 235) 50%, rgb(91 192 235));
                background-repeat: no-repeat;
                background-size: 300% 300%;
                background-position: top;
                border-radius: 1rem;
                display: block;
                font-size: clamp(0.5em, 1.75vw, 1em);
                font-weight: bold;
                padding: 0.65rem;
                text-decoration: none;
                text-decoration-color: transparent;
                text-transform: uppercase;
                text-underline-offset: -3px;
                transition: 350ms;
                &:hover {
                    /* background-color: var(--red); */
                    background-image: linear-gradient(190deg, rgb(91 192 235 / 0), rgb(91 192 235 / 0) 50%, rgb(91 192 235) 50%, rgb(91 192 235));
                    background-position: bottom;
                    /* text-decoration: underline;
                    text-decoration-color: var(--hover-color);
                    text-underline-offset: 3px; */
                    scale: 1.1;
                }
            }
        }
    }
}
#hamburger {display: none;}

svg#logo {
    display: block;
    max-height: 30px;
    transition: scale 250ms;
    width: 100%;
    & path{
        fill: var(--black);
        transition: inherit;
    }
    &:hover {rotate: -0.5deg;scale: 1.05;}
}

header {
    display: grid;
    grid-template-columns: inherit;
    grid-column: fullWidth;
    & div.auto-wrapper {grid-column: mainContent;}
}
header.hero {
    min-height: 80vh;
    margin-bottom: 3rem;
    position: relative;
    text-align: center;

    &:has( ~ .ticker) {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75vw), 0% 100%);}

    &::before {
        content: "";
        background-image: var(--hero-bg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(1px);

        position: absolute;
        inset: 0; /* prevents edge reveal */

        transform: translate3d(0, var(--hero-parallax, 0px), 0);
        will-change: transform;
        pointer-events: none;
    }

    & div.auto-wrapper {
        display: flex;
        flex-direction: column;
        inset: 0;
        place-content: center;
        place-items: center;
    }
    & h1 {
        background: linear-gradient(90deg, var(--black), rgb(116, 116, 116));
        background-size: 200% 200%;
        background-clip: text;
        color: transparent;
        animation: gradientPulse 8s ease-in-out infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
  header.hero::before {transform: none !important;}
}
@keyframes gradientPulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

footer {
    display: grid;
    padding: 2rem 0 1rem 0;
    & div {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        &>* {
            flex: 1 0 30%;
            gap: 1rem;
            padding: 1rem;
            &:nth-child(2) {
                border-left: 1px solid var(--black);
                border-right: 1px solid var(--black);
            }
        }
    }

    & div.copy {
        grid-column: 1 / -1;
        text-align: center;
        & p {margin-inline: auto;}
        #logo-icon {
            display: inline-block;
            height: 0.8em;
            vertical-align: -1px;
            & path {fill: var(--black);}
        }
    }
}

section {
  background-color: var(--white);
  display: grid;
  grid-template-columns: inherit;
  grid-column: fullWidth;
  padding: 2rem 0;
  & div.auto-wrapper {
    grid-column: mainContent;}
    &.cover-image {
        background-image: var(--cover-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}
.blue {background-color: var(--blue);}
.green {background-color: var(--green);& a.button, & button {--button-color: var(--white);}}
.black {background-color: var(--black);color: var(--white);}

[class|="col"] .auto-wrapper, .auto-wrapper [class|="col"] {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    & img {
        border-radius: var(--main-radius);
        box-shadow: 0 0.25rem 0.5rem -0.25rem rgb(0 0 0 / 0.5);
    }
    & > div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.5rem 2rem 2rem 2rem;
    }
}
:is(.col-2 .auto-wrapper, .auto-wrapper .col-2) div {flex: 1 0 calc(50% - 1.5rem);min-width: 300px;}
:is(.col-2 .auto-wrapper, .auto-wrapper .col-2) div.card-2 {max-width: calc(50% - 1.5rem);}
:is(.col-3 .auto-wrapper, .auto-wrapper .col-3) div {flex: 1 0 calc(33% - 1.5rem);min-width: 250px;}
:is(.col-4 .auto-wrapper, .auto-wrapper .col-4) div {flex: 1 0 calc(25% - 1.5rem);min-width: 200px;}

[class|="col"] .full-flex {flex-basis: 100% !important;}
[class|="col"] .full-grid {grid-column: 1 / -1 !important;}
.center-text {text-align: center;}

.card {
    backdrop-filter: blur(16px) saturate(1.2);
    background: rgba(255 255 255 / 0.043);
    background-image: linear-gradient(140deg,rgba(57 57 57 / 0.21) 1%,rgba(151 151 151 / 0.35) 100%);
    border-radius: 1.25rem;
    box-shadow: rgba(0 0 0 / 0.15) 0px 8px 32px, rgba(0 0 0 / 0.05) 0px 2px 8px, rgba(255 255 255 / 0.25) 0px 1px 0px inset, rgba(255 255 255 / 0.15) 0px -1px 0px inset;
    height: fit-content;
    place-items: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    }
    @supports (corner-shape: squircle) {
        & {
            corner-shape: squircle;
            border-radius: 5rem;
        }
    }
}
.card-2 {
    backdrop-filter: blur(16px);
    background-image: var(--card-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.25rem;
    box-shadow: rgba(0 0 0 / 0.15) 0px 8px 32px, rgba(0 0 0 / 0.05) 0px 2px 8px, rgba(255 255 255 / 0.25) 0px 1px 0px inset, rgba(255 255 255 / 0.15) 0px -1px 0px inset;
    text-align: center;
}



.showcase .auto-wrapper{
    display: grid;
    gap: 1rem 3rem;
    grid-template-areas:
    "img ."
    "img title"
    "img desc"
    "img btn"
    "img .";
    grid-template-columns: 55% 1fr;
    grid-template-rows: 1fr repeat(auto) 1fr;
    padding: 5rem 0;
    & .img-wrap {
        grid-area: img;
        transform: rotate(-3deg);
        & > img {
            aspect-ratio: 1;
            border-radius: 2rem;
            box-shadow: -2rem 2rem 0.5rem -0.5rem rgb(0 0 0 / 0.15);
            display: block;
            max-height: 60vh;
            object-fit: cover;
        }
    }
    & > h1 {grid-area: title;text-align: center;}
    & > p {grid-area: desc;}
    & > :is(button, a.button) {grid-area: btn;}
}
.showcase.reverse .auto-wrapper {
    grid-template-columns: 1fr 55%;
    grid-template-areas:
    ". img"
    "title img"
    "desc img"
    "btn img"
    ". img";
    & .img-wrap {transform: rotate(3deg);}
}

/* ANIMATIONS */
.animate {
    opacity: 0;
    transition: opacity 900ms ease, transform 900ms cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.animate.in-view {opacity: 1;transform: none;}

.animate.in-view {
    opacity: 1;
    transform: none;
}
.fade-down {transform: translateY(-40px);}
.fade-left {transform: translateX(40px);}
.fade-right {transform: translateX(-40px);}
.scale-out {transform: scale(1.5);}
.scale-in {transform: scale(0.75);}

/* TICKER */
.ticker {
    grid-column: fullWidth;
    --gap: 2.5rem;
    --speed: 30s;
    overflow: hidden;
    white-space: nowrap;
    border-block: 1px solid rgba(255, 255, 255, 0.15);
    transform: rotate(-1deg) translateY(-6vh);
    user-select: none;
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker var(--speed) linear infinite;
}

.ticker__group {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 0.75rem 1rem;

    font-family: var(--accent-font);
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: bold;
    text-transform: uppercase;
    & img {
        aspect-ratio: 1.5/1;
        border-radius: 2rem;
        display: inline-block;
        height: 1em;
        object-fit: cover;
        vertical-align: -4px;
    }
}

/* .ticker:hover .ticker__track {
    animation-play-state: paused;
} */

@media (prefers-reduced-motion: reduce) {
    .ticker__track {animation: none;}
}

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

.tilt {transition: transform 200ms ease-out;}









/* MEDIA QUERIES */

@media (max-width: 770px) {
    .first {order: -999;}
    nav#main-nav ul {
        /* background-color: var(--black) !important; */
        border-radius: var(--main-radius);
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
        flex-direction: column;
        padding: 1rem;
        position: absolute;
        text-align: center;
        top: 110px;
        transform: translateY(-50%);
        transition: all 250ms;
        visibility: hidden;
        width: 100%;
        z-index: -1;
        & li a {font-size: 1.25em;margin-inline: auto;width: 80%;}
    }
    nav#main-nav ul.active {
        background-color: white;
        box-shadow: rgba(0 0 0 / 0.15) 0px 8px 32px, rgba(0 0 0 / 0.05) 0px 2px 8px, rgba(255 255 255 / 0.25) 0px 1px 0px inset, rgba(255 255 255 / 0.15) 0px -1px 0px inset;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        place-content: center;
        position: absolute;
        transform: translateY(0);
        visibility: visible;
        z-index: 9991;
        isolation: isolate;
    }
    button#hamburger {
        --button-color: transparent;
        --button-hover: transparent;
        aspect-ratio: 1;
        display: block;
        height: 50px;
        padding: 0.5rem;
        z-index: 9999;
        & > span {
            background-color: var(--black);
            border-radius: 1rem;
            display: block;
            height: 5px;
            margin: 5px 0;
            transition: 250ms;
            width: 100%;
        }
        &::after {content: "";}
        &:hover {animation: none !important;scale: 1.25;& span {background-color: var(--red);}}
        &:active {box-shadow: none !important;transform: none;scale: 1.1;}
    }
    button#hamburger.active {
        & span {
            &:nth-of-type(1) {rotate: 45deg;transform: translate(7px, 7px);}
            &:nth-of-type(2) {opacity: 0;scale: 0.1;}
            &:nth-of-type(3) {rotate: -45deg;transform: translate(7px, -7px);}
        }
    }
    .showcase .auto-wrapper, .showcase.reverse .auto-wrapper{
        gap: 1.5rem;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas: 
        "img"
        "title"
        "desc"
        "btn";
        & img {box-shadow: -1rem 1rem 0.5rem -0.5rem rgb(0 0 0 / 0.15);margin-inline: auto;width: 75%;}
    }
}