/* VARIABLES */

:root{
    --hero-padding: 96px;
    --cardheight: 25vw;
    --card-gap: 32px;
    --animtime: 800ms;

    /* Font sizes */
    --hctext-size: 30px;
    --hctiny-size: 24px;
    --wyttd-size: 44px;
}

/* LAYOUT */

.hero{
    padding-top: calc(var(--header-height) + var(--hero-padding));
    flex-grow: 1;
    background: #ffffff;
}

.hcards{
    display: flex;
    justify-content: center;
    gap: var(--card-gap);
}

.hcard{
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 800px;
}

/* CARDS */

.hcimg, .buttcard{
    height: var(--cardheight);
}

.hcimg{
    aspect-ratio: 63/88;
    pointer-events: none;
    transform-origin: center;
    border-radius: 24px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.7) /* DOUBLED UP IN HERO.JS */;
    cursor: pointer;
    transform-style: preserve-3d;
}

.hcimg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 24px;
    transform-origin: center;
}

.hcfront, .hcback{
    backface-visibility: hidden;
}

.hcback{
    rotate: y 180deg;
}

#hcard-3 .hcfront img{
    rotate: z 180deg !important;
}

#hcard-3 .hcback{
    transform: rotateZ(180deg);
}

@keyframes hovering {
    100%{
        scale: 1.25;
        rotate: 0;
        z-index: 10;
    }
}

.hcard:hover .hcimg{
    animation: hovering 250ms forwards !important;
}

/* CARD TEXT */

.hctc{
    margin-top: 24px;
}

.hctext{
    text-align: center;
    width: calc(var(--cardheight) * (63/88) * 1.1);
    max-height: 72px;
    margin: 0;
}

.hctext, .butt p{
    font-size: var(--hctext-size);
}

.hctext, .butt p, .wyttd{
    font-family: NeueHelveticaPro95Black, sans-serif;
}

.tiny{
    font-size: var(--hctiny-size) !important;
}

.teensy{
    font-size: 10px;
}

.purpley{
    color: var(--purple);
}

.bluey{
    color: var(--blue);
}

.redy{
    color: var(--red);
}

/* "BUT..." CARD */

.butt{
    margin: 0 16px;
}

.butt p{
    scale: 1.5;
}

/* BOTTOM ROW */

.hero-bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

.wyttd{
    text-align: center;
    font-size: var(--wyttd-size);
    margin: 16px 0;
}

/* ANIMATIONS */

@keyframes flade {
    0%{
        opacity: 100%
    }
    30% {
        opacity: 0;
        transform: translateY(16px);
    }
    70%{
        opacity: 0;
        transform:translateY(16px);
    }
    100%{
        opacity: 100%;
    }
}

.flader{
    animation: flade calc(var(--animtime) / 2);
}

@keyframes flup {
    0%{
        transform: rotateY(360deg) rotateZ(-7deg);
        scale: 1.0;
    }
    25%{
        scale: 1.5;
    }
    50%{
        transform: rotateY(0);
        scale: 1.0;
    }
    62%{
        scale: 1.1;
    }
    75% {
        scale: 1.0;
    }
    87%{
        scale: 1.02;
    }
    100%{
        scale: 1.0;
        transform:rotateZ(5deg);
    }
}

@keyframes flup2 {
    0%{
        transform: rotateY(-360deg) rotateZ(7deg);
        scale: 1.0;
    }
    25%{
        scale: 1.5;
    }
    50%{
        transform: rotateY(0);
        scale: 1.0;
    }
    62%{
        scale: 1.1;
    }
    75% {
        scale: 1.0;
    }
    87%{
        scale: 1.02;
    }
    100%{
        scale: 1.0;
        transform:rotateZ(-5deg);
    }
}

.flupper{
    animation: flup var(--animtime) ease-out forwards;
}

.flupper2{
    animation: flup2 var(--animtime) ease-out forwards;
}

/* HIDDEN TEXT STORAGE */

#hiddenbox{
    display: none;
}

/* RESPONSIVE */

@media (max-width: 1234px) {
    :root{
        --cardheight: 45vw;
        --hctext-size: 17px;
        --hctiny-size: 12px;
        --hero-padding: 40px;
        --wyttd-size: 22px;
    }

    .hero-desktop{
        padding: 0 16px;
    }

    .hcards{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 48px;
    }

    .hcard{
        align-items: end;
    }

    .hcard:nth-of-type(3n-1){
        align-items: start;
    }

    .hcimg, .hcimg img{
        border-radius: 12px;
    }

    .hctext{
        margin-bottom: 0;
        height: 60px;
        overflow: visible;
    }

    .butt{
        align-items: center;
        grid-column: 1/3;
    }

    .butt p{
        margin: 0;
    }

    .buttcard{
        display: none;
    }

    .hero-bottom{
        margin-top: 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        overflow: visible;
    }

    .wyttd{
        margin-top: 24px;
    }

    @keyframes flup {
        0%{
            transform: rotateY(-360deg);
        }
        50%{
            opacity: 0;
        }
        100%{
            transform: rotateY(0);
        }
    }

    @keyframes flup2 {
        0%{
            transform: rotateY(360deg);
        }
        50%{
            opacity: 0;
        }
        100%{
            transform: rotateY(0);
        }
    }
}

@media (min-width: 1480px) {
    .hcimg, .buttcard{
        max-height: 400px;
    }
}