:root {
    --clr-neutral-900: rgb(41, 45, 49);
    --clr-neutral-100: hsl(0,0%,100%);
    --clr-accent-400: hsl(142, 90%, 61%);
}

*,
*::before,
*::after {
    box-sizing:border-box;
}

body{
    display: grid;
    min-height: 100vh;
    place-items: center;
    line-height: 1.6;
    background: var(--clr-neutral-900);
    font-family: sans-serif;
    padding-right: 10em;
}

.card {
    color: var(--clr-neutral-100);
    background-image: url(img/kaguya1.jpg);
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 1rem;
    overflow: hidden;

    transition: transform 500ms ease;
}


.card:hover,
.card:focus-within {
    transform: scale(1.05);
}

.card-content {

    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient(
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 0.3) 20%,
        hsl(0 0% 0% / 1)
    );
    
}

/* For devices that have hover ability (phones and tablets do not) */
@media (hover) {
    .card-content {
        transform: translateY(65%);
        transition: transform 500ms ease;
    }
    .card-content > *:not(.card-title){
        opacity: 0;
        transition: opacity 500ms linear;
    }
    
    .card:hover .card-content,
    .card:focus-within .card-content {
        transform: translateY(0);
        transition-delay: 500ms;
    }
    
    .card:focus-within .card-content {
        transition-duration: 0ms;
    }
    
    .card:hover .card-content > *:not(.card-title),
    .card:focus-within .card-content > *:not(.card-title) {
        opacity: 1;
        transition-delay: 1000ms;
    }

    .card-title::after {
        transform: scaleX(0);
    }
}



.card-title {
    position: relative;
    width: max-content;
}

.card-body {
    color: rgb(255 255 255 / 0.8);
}

.card-title::after {
    content: '';
    position: absolute;
    left: calc(var(--padding) * -1);
    bottom: -2px;
    height: 4px;
    width: calc(100% + var(--padding));
    background: var(--clr-accent-400);
    transform-origin: left;
    transition: transform 500ms ease;
}

.card:hover .card-title::after,
.card:focus-within .card-title::after{
    transform: scaleX(1);
}

.button {
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color: var(--clr-neutral-900);
    background-color: var(--clr-accent-400);
    padding:0.5em 1.25em;
    border-radius: .5em;
}

.button:hover,
.button:focus {
    background-color: var(--clr-neutral-100);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition-delay: 0ms !important;
    }
}