/* Copyright (C) 2024 Setya Budi Pratama

All rights reserved.

This software is proprietary and confidential. Unauthorized copying of this file, via any medium, is strictly prohibited.
You may not decompile, reverse engineer, disassemble, or otherwise attempt to derive the source code of this software.

This software may not be used, copied, modified, or distributed in any form without the prior written consent of the copyright holder.

The Berne Convention is an international agreement that protects literary and artistic works globally. Every member country must provide automatic protection for copyrighted works without requiring registration.

Universal Copyright Convention (UCC)

The UCC was adopted by UNESCO as an alternative to the Berne Convention for countries that are not part of the Berne Union.

World Intellectual Property Organization (WIPO) Copyright Treaty

These treaties strengthen copyright protection in the context of information technology and digital rights.

Sumber Hukum di Indonesia

Undang-Undang No. 28 Tahun 2014 tentang Hak Cipta

Di Indonesia, hak cipta dilindungi oleh Undang-Undang No. 28 tahun 2014. Undang-undang ini memberikan perlindungan terhadap karya-karya berhak cipta di bidang ilmu pengetahuan, seni, dan sastra. */

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('shashin/Uma\ Musume.webp');
    background-size: cover;
    background-position: center;

    header {
        width: 100%;
        height: 100vh;
        display: grid;
        place-items: center;

        .container {
            width: 80%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;

            h2,
            h3 {
                color: white;
                text-transform: uppercase;
                cursor: default;
            }

            .content {
                width: 100%;
                height: 70%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                overflow-x: scroll;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;

                .card {
                    width: 220px;
                    height: 300px;
                    background-color: rgba(0, 0, 0, 0.7);
                    background-blend-mode: darken;
                    display: flex;
                    flex: 0 0 auto;
                    margin: 0 12px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    border-radius: 20px;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .card-body {
                        width: 0;
                        height: 0;
                        background-color: rgba(0, 0, 0, 0.7);
                        position: absolute;
                        bottom: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        row-gap: 5px;
                        transition: height 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                            width 0.5s ease 0.5s;

                        span {
                            background-color: cyan;
                            box-shadow: 0 0 10px cyan;
                            width: 40px;
                            height: 5px;
                            position: absolute;
                            top: -20px;
                            left: 50%;
                            transform: translateY(-50%) rotate(35deg);
                            transition: all 0.5s ease;
                        }

                        span::before {
                            content: '';
                            background-color: cyan;
                            box-shadow: 0 0 10px cyan;
                            width: 40px;
                            height: 5px;
                            position: absolute;
                            top: 17px;
                            left: -60%;
                            transform: rotate(-70deg);
                            transition: all 0.5s ease;
                        }

                        h4,
                        p {
                            color: white;
                            text-transform: capitalize;
                            text-align: center;
                            cursor: default;
                            opacity: 0;
                            transition: opacity 0.5s ease;
                        }

                        p {
                            font-size: 0.8rem;
                        }
                    }
                }

                .active .card-body {
                    height: 100px;
                    width: 100%;
                }

                .active .card-body h4,
                .active .card-body p {
                    opacity: 1;
                    transition-delay: 0.5s;
                }

                .active .card-body span {
                    transform: translateY(-50%) rotate(-35deg);
                }

                .active .card-body span::before {
                    top: -17px;
                    left: -25px;
                    transform: rotate(70deg);
                }
            }
        }
    }
}

footer {
    background-color: cyan;
    width: 100%;
    min-height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        img {
            width: 55px;
            height: 55px;
            object-fit: cover;
            border-radius: 50%;
        }

        p {
            width: 100%;
            text-align: center;
            color: #0C001F;
            cursor: default;
        }
    }

    .social {
        width: 50%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        list-style: none;
        position: relative;
        top: 0;
        left: 0;
        padding: 0;

        .icon {
            position: relative;
            background: cyan;
            box-shadow: 5px 5px 15px #000000;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            flex-direction: column;
            cursor: pointer;

            .desc {
                position: absolute;
                top: 0;
                font-size: 0.8rem;
                padding: 5px;
                border-radius: 5px;
                background-color: #1530b3;
                box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
                opacity: 0;
                pointer-events: none;
                transition: all 0.3s cubic-bezier(0.1, -0.1, 0.5, 1.5);
            }

            a .fa-instagram {
                color: yellow;
                font-size: 1.5rem;
            }

            a .fa-n {
                color: red;
                font-size: 1.3rem;
            }

            a .fa-spotify {
                color: #1DB954;
                font-size: 1.5rem;
            }

            .link:hover {
                position: absolute;
                top: 28%;
            }
        }

        .icon:hover .desc {
            top: -100%;
            opacity: 1;
            background-color: #3d3d3d;
            visibility: visible;
            pointer-events: auto;
        }

        .icon:hover .desc,
        .icon:hover .desc::before {
            color: white;
        }

        .icon i {
            font-size: 1.2rem;
        }
    }
}

@media screen and (max-width: 768px) {
    body {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('shashin/Uma\ Musume\ 2.webp');
    }

    footer .left p {
        font-size: 0.8rem;
    }
}