/*
Theme Name: 12 Artist
Text Domain: twentytwenty
Version: 2.9
Tested up to: 6.8
Requires at least: 4.7
Requires PHP: 5.2.4

/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */

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

        body {
            font-family: 'OSWALD';
            overflow-x: hidden;
            background-color: #1d1d1b;
        }

        .hero-section {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: #1d1d1b;
        }

        .title {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2rem;
            font-weight: bold;
            color: white;
            text-align: center;
            z-index: 10;
            letter-spacing: 2px;
            z-index: 99999999;
        }
        .title img { filter: invert(1); }

        .hero-text {
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #f20aaf;
            text-align: center;
            max-width: 80vw;
            padding: 0 20px;
            z-index: 8;
            font-size: clamp(35px, 3.7vw, 62px);
            line-height: clamp(45px, 4vw, 70px);
            text-align: left;
            font-weight: 400;
            font-family: 'Oswald';
            width: 80vw;
        }

        .hero-text strong {
            font-weight: 400;
        }

        .number {
            position: absolute;
            font-size: 20vw;
            font-weight: 600;
            color: #fff;
            cursor: grab;
            user-select: none;
            transition: all 0.3s ease;
            z-index: 5;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            font-family: 'Oswald', sans-serif;
        }

        .number.falling {
            /* No CSS animation for falling, handled in JS */
        }

        .number:active {
            cursor: grabbing;
        }

        .number:hover {
            transform: scale(1.1);
        }

        /*.number-name {*/
        /*    position: absolute;*/
        /*    top: 100px;*/
        /*    left: 120px;*/
        /*    background: #000;*/
        /*    color: white;*/
        /*    padding: 30px 50px;*/
        /*    border-radius: 0;*/
        /*    font-size: 50px;*/
        /*    font-family: 'Oswald', sans-serif;*/
        /*    font-weight: 400;*/
        /*    white-space: nowrap;*/
        /*    opacity: 0;*/
        /*    transform: scale(0.8);*/
        /*    transition: all 0.3s ease;*/
        /*    pointer-events: none;*/
        /*    z-index: 9999999999;*/
        /*}*/
        .number-name {
            position: absolute;
            top: 100px;
            left: 120px;
            background: #000;
            color: white;
            padding: 8px 10px;
            border-radius: 0;
            font-size: 14px;
            font-family: 'Oswald', sans-serif;
            font-weight: 400;
            white-space: nowrap;
            opacity: 0;
            /*transform: scale(0.8);*/
            transition: all 0.3s ease;
            pointer-events: none;
            z-index: 9999999999;
        }

        .number-name.show {
            opacity: 1 !important; /* Ensure full opacity when shown */
            transform: scale(1);
        }

        .number.spinning {
            animation: spinOnce 1s ease-out;
        }

        @keyframes spinOnce {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .content-section {
            background: #f5f5f5;
            min-height: 100vh;
            padding: 10px;
            position: relative;
        }

        .boxes-container {
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .box {
            aspect-ratio: 1;
            position: relative;
            cursor: pointer;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .box.animate {
            opacity: 1;
            transform: translateY(0);
            animation: slideIn 1s ease-out forwards;
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .box-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .box-front, .box-back {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .box-front {
            background: #dadada;
            color: white;
            z-index: 1;
        }

        .box-back {
            background: #f20aaf;
            color: white;
            padding: 30px;
            overflow: hidden;
            opacity: 0;
            transform: translateY(100%);
            z-index: 2;
            pointer-events: auto; 
            position: relative;
            pointer-events: auto; 
        }

        .boxes-container:not(.noHover) .box:hover .box-back {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto; 
        }
        .noHover .hoverThis .box-back {
            opacity: 1;
            transform: translateY(0);
        }
        
        img.arrowBox {
    z-index: -1;
    position: relative;
}
.box-inner{
    overflow: hidden;
}


        .box-image {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }
        .box-image img { width: 100%; }

        .box-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .box-video video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /*.box-number {*/
        /*    font-size: 10vw;*/
        /*    position: absolute;*/
        /*    font-weight: 700;*/
        /*    line-height: 10vw;*/
        /*    top: -10px;*/
        /*    left: 10px;*/
        /*    font-family: 'Oswald', sans-serif;*/
        /*    margin-bottom: 20px;*/
        /*}*/
        .box-number {
            font-size: 20vw;
            position: absolute;
            font-weight: 700;
            line-height: 20vw;
            top: -3vw;
            left: -1vw;
            font-family: 'Oswald', sans-serif;
            margin-bottom: 20px;
        }

        .box-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            font-family: 'Oswald', sans-serif;
        }

        .box-content {
            position: absolute;
            text-align: left;
            font-size: clamp(25px, 1.6vw + 5px, 40px);
            line-height: clamp(30px, 1.6vw + 7px, 45px);
            padding: 10px;
            top: 20px;
        }

        .box-link {
            position: absolute;
            font-size: 120px;
            font-weight: 900;
            z-index: 9999;
            color: #fff;
            bottom: 10px;
            left: 10px;
            cursor: pointer;
            pointer-events: auto; 
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 80px;
            font-family: 'Oswald', sans-serif;
        }

        @media (max-width: 768px) {
            .title {
                font-size: 1.5rem;
                top: 30px;
                padding: 0 20px;
            }

            .hero-text {
                font-size: 1rem;
                max-width: 90%;
                width: 75vw;
            }

            .number {
                font-size: 15vw;
            }

            .content-section {
                padding: 50px 20px;
            }

            .boxes-container {
                grid-template-columns: 1fr;
                gap: 5px;
            }

            .section-title {
                font-size: 2rem;
                margin-bottom: 50px;
            }

            .box-number {
                font-size: 3rem;
            }

            .box-title {
                font-size: 1.2rem;
            }

            .number-name {
                font-size: 0.7rem;
                padding: 6px 12px;
            }
        }

        .burger {
            font-size: 30px;
            cursor: pointer;
            color: #fff;
            position: absolute;
            top: 45px;
            right: 50px;
        }

        .menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: white;
            transform: translateY(-100%);
            transition: transform 0.4s ease-in-out;
            z-index: 1000;
            padding: 40px;
            overflow-y: scroll;
        }

        .menu.open {
            transform: translateY(0);
        }

        .menu-close {
            font-size: 164px;
            position: absolute;
            top: 20px;
            right: 30px;
            cursor: pointer;
            color: #000;
            font-weight: 100;
            font-family: serif;
        }

        .menu-content {
            /* display: flex; */
            /* justify-content: space-between; */
            /* flex-wrap: wrap; */
            margin-top: 60px;
            width: auto;
            /* max-width: 1400px; */
            margin: auto;
            margin-top: 150px;
            text-align: center;
        }

        .menu-content ul li {
              font-size: clamp(16px, 3vh, 30px);
              line-height: clamp(24px, 5vh, 45px);
            font-family: 'Oswald';
        }
        .menu-content ul li a {
              font-size: clamp(16px, 3vh, 30px);
              line-height: clamp(24px, 5vh, 45px);
            font-family: 'Oswald';
            color: #000;
            text-decoration: none;
        }

        .artists, .nav {
            list-style: none;
            padding: 0; 
        }

        .artists {
            /*display: grid;*/
            /*grid-template-columns: repeat(3, auto);*/
            /*gap: 20px 40px;*/
            /*flex: 1;*/
        }

        .nav {
            /*display: flex;*/
            /*flex-direction: column;*/
            /*justify-content: flex-start;*/
            /*align-items: flex-start;*/
            /*gap: 20px;*/
            /*margin-left: 40px;*/
            margin-top: 50px;
        }

        li.insta {
            width: 80px;
            height: 80px;
            text-align: center;
            width: 100%;
            margin-top: 25px;
        }
        li.insta img {
            width: 80px;
        }
        .title img {
            transition: filter 0.8s ease-in-out;
        }
        .title.menu_opened img {
            filter: invert(0);
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: white;
            transform: translateY(-100%);
            transition: transform 0.4s ease-in-out;
            z-index: 1000;
            padding: 0;
        }

        .modal.open {
            transform: translateY(0);
        }

        .modal-close {
            font-size: 164px;
            position: absolute;
            top: 20px;
            right: 30px;
            cursor: pointer;
            color: #000;
            font-weight: 100;
            font-family: serif;
        }
        .modalLeft {
            float: left;
            width: 70%;
            padding: 0 15%;
        }
        .modalLeft h2 {
            margin-bottom: 20px;
        }
        .modalRight {
            float: left;
            width: 30%;
            text-align: right;
        }
        .modalWrapper {
            margin-top: 180px;
        }
        .box-back img.arrowBox {
            width: 120px;
            cursor: pointer;
        }
        .box-back h3{
            padding-bottom: 10px;
        }
        
        /*about page*/
        
        .about .hero-section {
            background-color: #fff;
        }
        .about .title img {
            filter: none;
        }
        .about .number {
            color: #000;
        }
        .about .hero-text {
            color: #333;
            top: 45%;
        }
        .about .hero-text h3 {
            /*font-size: clamp(18px, 3.7vw, 31px);*/
            /*line-height: clamp(22px, 4vw, 36px);*/
           font-size: clamp(15px, calc(15px + (32 * (100vw - 375px) / 2205)), 47px);
           line-height: clamp(17px, calc(17px + (41 * (100vw - 375px) / 2205)), 58px);
        }
        .about .hero-text p {
            /*font-size: clamp(16px, 3.7vw, 26px);*/
            /*line-height: clamp(19px, 4vw, 29px);*/
            font-size: clamp(12px, calc(12px + (32 * (100vw - 375px) / 2205)), 44px);
            line-height: clamp(14px, calc(14px + (41 * (100vw - 375px) / 2205)), 55px);
        }
        html, body {
            width: 100vw;
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        @media (max-width: 768px) {
            .menu-content {
                margin-top: 100px;
                width: 100%;
            }
            /*.artists {*/
            /*    display: grid;*/
            /*    grid-template-columns: repeat(1, auto);*/
            /*    gap: 20px 40px;*/
            /*    flex: 1;*/
            /*}*/
            .menu-content ul li {
                font-size: 16px;
                line-height: 24px;
            }
            .menu-content ul li a {
                font-size: 16px;
                line-height: 24px;
                font-family: 'Oswald';
                color: #000;
                text-decoration: none;
            }
            .title.menu_opened img{
                max-width: 50vw !important;
            }
            .title img{
                max-width: 50vw !important;
            }
            .menu-close {
                font-size: 65px;
                position: absolute;
                top: 48px;
                right: 30px;
                cursor: pointer;
                color: #000;
                font-weight: 100;
                font-family: serif;
            }
            li.insta img {
                width: 40px;
            }
            .burger {
                font-size: 20px;
                cursor: pointer;
                color: #fff;
                position: absolute;
                top: 25px;
                right: 25px;
            }
    .hero-text {
        line-height: 23px;
        font-size: 18px;
        padding: 0;
        max-width: 100%;
    }
            .number {
                font-size: 22vw;
            }
            .box-content {
                position: absolute;
                text-align: left;
                font-size: 14px;
                line-height: 17px;
                padding: 10px;
                top: 20px;
            }
            .box-back img.arrowBox {
                width: 75px;
                cursor: pointer;
            }
            .box-number {
                font-size: 15rem;
                line-height: 15rem;
                top: -34px;
                left: -12px;
            }
            .modal-close {
                font-size: 75px;
                position: absolute;
                top: 0px;
                right: 10px;
                cursor: pointer;
                color: #000;
                font-weight: 100;
                font-family: serif;
            }
            .modalWrapper {
                margin-top: 50px;
            }
            .modalLeft {
                float: left;
                width: 100%;
                padding: 0 15px;
                font-size: 12px;
                padding-bottom: 10px;
            }
            .modal {
                overflow-y: scroll;
                z-index:999999999;
            }
            .about .hero-text p {
                font-size: 13px;
                line-height: 15px;
            }
            .about .hero-text {
                padding: 0;
            }
            .about .hero-text h3 {
                font-size: 14px;
                line-height: 18px;
                color: #000;
            }
        }