@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Clash-Display';
    src: url('../fonts/ClashDisplay-Variable.ttf');
}

:root {
    --bodyFont: 'Archivo', sans-serif;
    --headFont: 'Clash-Display';
}

.body-font {
    font-family: var(--bodyFont);
}

.head-font {
    font-family: var(--headFont);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headFont);
}

p {
    font-family: var(--bodyFont);
}

.content-number h5 {
    font-family: var(--bodyFont);
}

html,
body {
    background-color: #000;
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: "Archivo", sans-serif;
}

.overlay {
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    flex: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    overflow: visible;
}

.overlay-bg {
    background-repeat: repeat;
    background-position: left top;
    background-image: url('../pattern-bg.svg');
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 13px auto;
}

.line-bg {
    z-index: 0;
    flex-flow: row;
    flex: none;
    place-content: center;
    align-items: center;
    gap: 400px;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    position: absolute;
    top: 0;
    left: 0%;
    overflow: hidden;
}

.line-bg .oneLine,
.line-bg .twoLine,
.line-bg .threeLine {
    background-color: #161616;
    flex: none;
    width: 1px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.dots {
    background-color: aliceblue;
    height: 4px;
    width: 4px;
    border-radius: 100%;
}

#clock {
    font-family: var(--headFont);
    opacity: 1 !important;
}

.location-name {
    font-family: "Archivo", sans-serif;
    letter-spacing: 1px;
    font-weight: normal;
    text-transform: uppercase;
    opacity: 0.3;
}

header a.btn-header {
    border: 2px solid #fff;
    overflow: hidden;
    position: relative;
}

header a.btn-header span {
    position: relative;
    z-index: 1;
    color: #fff;
}

a.btn-header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: #fff;
    opacity: 0;
    border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -ms-border-radius: 20px 20px 0 0;
    -o-border-radius: 20px 20px 0 0;
}

a.btn-header:hover::before {
    animation: botToTop 0.3s ease-in forwards;
    opacity: 1;
    -webkit-animation: botToTop 0.3s ease-in forwards;
}

a.btn-header:hover span {
    color: #000;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
}

a.btn-header:not(:hover)::before {
    animation: topToBot 0.3s ease-in forwards;
    -webkit-animation: topToBot 0.3s ease-in forwards;
}

@keyframes botToTop {
    from {
        transform: translateY(150px);
        -webkit-transform: translateY(150px);
        -moz-transform: translateY(150px);
        -ms-transform: translateY(150px);
        -o-transform: translateY(150px);
    }

    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}


@keyframes topToBot {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(150px);
        opacity: 0;
        -webkit-transform: translateY(150px);
        -moz-transform: translateY(150px);
        -ms-transform: translateY(150px);
        -o-transform: translateY(150px);
    }
}


.text-bigger h1 {
    font-family: var(--bodyFont);
}

.another-number {
    background-color: #161616;
    color: #fff;
    width: 40px;
    height: 40px;
    margin: auto;
    line-height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    font-family: var(--headFont);
}


#magicPointer {
    z-index: 3;
    width: 20px !important;
    height: 20px !important;
}

.top__to__bottom {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
}

html.is-ready .top__to__bottom {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.separator {
    background-color: #161616;
    flex: none;
    width: 100%;
    height: 1px;
    position: relative;
    overflow: hidden;
}

.split-char .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.split-char.animate .char {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--char-index) * 0.01s);
}

.split-text .word {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.animate.is-inview .word {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--word-index) * 0.5s);
}

.dots-order span {
    display: block;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    opacity: 0.5;
}

.core-value-content:nth-child(1) span:nth-child(1) {
    opacity: 1;
}

.core-value-content:nth-child(2) span:nth-child(1),
.core-value-content:nth-child(2) span:nth-child(2) {
    opacity: 1;
}

.core-value-content:nth-child(3) span:nth-child(1),
.core-value-content:nth-child(3) span:nth-child(2),
.core-value-content:nth-child(3) span:nth-child(3) {
    opacity: 1;
}

.title-and-description h2 {
    font-family: var(--bodyFont);
}

.core-value-content {
    border: 1px solid #252525;
    padding: 40px;
}

.bg-brand {
    background-color: rgb(10, 10, 10);
    border: 1px solid rgb(22, 22, 22);
    padding: 60px 0;
}

.portfolio h2 {
    font-family: var(--headFont);
}

.title-sub h6 {
    color: #808080;
}

.portfolio:nth-child(1) .dots-order span:nth-child(1) {
    opacity: 1;
}

.portfolio:nth-child(2) .dots-order span:nth-child(1),
.portfolio:nth-child(2) .dots-order span:nth-child(2) {
    opacity: 1;
}

.portfolio:nth-child(3) .dots-order span:nth-child(1),
.portfolio:nth-child(3) .dots-order span:nth-child(2),
.portfolio:nth-child(3) .dots-order span:nth-child(3) {
    opacity: 1;
}

.portfolio:nth-child(4) .dots-order span:nth-child(1),
.portfolio:nth-child(4) .dots-order span:nth-child(2),
.portfolio:nth-child(4) .dots-order span:nth-child(3),
.portfolio:nth-child(4) .dots-order span:nth-child(4) {
    opacity: 1;
}

.portfolio:nth-child(5) .dots-order span:nth-child(1),
.portfolio:nth-child(5) .dots-order span:nth-child(2),
.portfolio:nth-child(5) .dots-order span:nth-child(3),
.portfolio:nth-child(5) .dots-order span:nth-child(4),
.portfolio:nth-child(5) .dots-order span:nth-child(5) {
    opacity: 1;
}

.about-author h2 {
    font-family: var(--headFont);
}

.about-author {
    position: relative;
    overflow: hidden;
}

/* --- TEXT --- */
.about-title {
    opacity: 1;
    transform: scale(1);
    transition: transform 1.2s ease, opacity 1.2s ease;
    transform-origin: center;
    will-change: transform, opacity;
}

/* pas gambar mulai muncul, teks "mundur" ke belakang */
.about-title.is-inview {
    opacity: 0.2;
    transform: scale(0.85);
}

/* --- IMAGE --- */
.about-image {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform, opacity;
}

.about-image.is-inview {
    opacity: 1;
    transform: translateY(0);
}

.about-author {
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}

.about-author h2 {
    transform-origin: center;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 1s ease-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.about-author h2[data-state='hidden'] {
    opacity: 0;
    transform: scale(1.2);
}

.about-author img {
    display: block;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 1s ease-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.about-author img[data-state='hidden'] {
    opacity: 0;
    transform: translateY(150px);
}

.introduction-author h5 {
    font-family: var(--bodyFont);
}

#cursor {
    transition: transform 0.1s ease-out, background 0.3s ease, color 0.3s ease;
}

.cursor-active {
    background: white;
    color: black;
    mix-blend-mode: normal;
    transform: scale(1.3);
}

.dots-button {
    display: inline-block;
    cursor: pointer;
}

.dots-wrapper {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    transition: all 0.4s ease;
}

/* posisi awal: membentuk persegi */
.top-left {
    top: 12px;
    left: 12px;
}

.top-right {
    top: 12px;
    right: 12px;
}

.bottom-left {
    bottom: 12px;
    left: 12px;
}

.bottom-right {
    bottom: 12px;
    right: 12px;
}

/* .center-circle {
    position: absolute;
    width: 0;
    height: 0;
    background: white;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
} */

/* efek hover: rotasi wrapper + muncul lingkaran */
.dots-button:hover .dots-wrapper {
    transform: rotate(45deg);
}

/* .dots-button:hover .center-circle {
    width: 30px;
    height: 30px;
    opacity: 1;
} */

body {
    overflow: hidden !important;
    opacity: 0;
    transition: opacity 0.6s ease;
    -webkit-transition: opacity 0.6s ease;
    -moz-transition: opacity 0.6s ease;
    -ms-transition: opacity 0.6s ease;
    -o-transition: opacity 0.6s ease;
}

body.loaded {
    opacity: 1 !important;
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: all;
    background: transparent;
}


.right-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    left: 100%;
    bottom: auto;
    right: auto;
    background: #00000096;
    transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.right-layer.active {
    left: -100%;
}

.right-layer--2 {
    background: #0000006b;
    transition-delay: 0.1s;
}

.right-layer--3 {
    background: #0000003c;
    transition-delay: 0.2s;
}

.field-basic {
    background-color: #0F0F0F;
    color: #fff;
}

::placeholder {
    color: #fff;
    opacity: 0.5;
}

.button-contacts {
    background-color: #fff;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.button-contacts:hover {
    color: #fff;
    background-color: #29292982;
}

.thumb-banner {
    transform: scale(1.2);
}

.additional-information a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: fit-content;
}

.additional-information a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.4s ease;
}

.additional-information a:hover::after {
    width: 100%;
}

/* posisi dasar menu: tersembunyi di bawah layar */
.hamburger-menu {
    background-color: #000;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.5s ease;
    pointer-events: none;
    z-index: 999;
}

/* saat aktif: naik ke atas (muncul) */
.hamburger-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* saat tutup: turun lagi ke bawah */
.hamburger-menu.closing {
    transform: translateY(100%);
    opacity: 0;
}

/* tombol close */
.dots-button-close {
    background-color: #252525;
    padding: 20px;
    border-radius: 100%;
    position: absolute;
    top: 20px;
    cursor: pointer;
}