/* Clonify — penyesuaian tampilan per ukuran layar.
 *
 * Berkas terpisah, dimuat setelah stylesheet bawaan. Sengaja tidak menyunting
 * assets/index-964e5b23.css: berkas itu artefak hasil scrape yang sewaktu-waktu bisa
 * diganti utuh, dan memisahkan perbaikan di sini membuatnya gampang ditinjau.
 *
 * Titik hentinya mengikuti yang sudah dipakai stylesheet bawaan: 1024 px dan 640 px.
 */

/* ---------------------------------------------------- ponsel & tablet (<= 1024px) */

@media (max-width: 1024px) {
    /* Jaring pengaman: satu kata panjang pun tidak boleh menembus tepi layar. */
    #final2 button,
    #clientstit,
    .titulos2,
    .titulos3 {
        overflow-wrap: break-word;
    }

    /* "Back To TOP" menempel persis di tepi kanan layar; beri ruang napas. */
    #backtop {
        right: 14px;
    }
}

/* -------------------------------------------------------- loader lintas layar */

#preloader {
    gap: 0;
    padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
    color: #181818;
}

.load-brand {
    width: min(240px, 58vw);
}

.load-brand img {
    display: block;
    width: 100%;
    height: auto;
}

#silenciostart {
    font-size: 0;
}

#silencio {
    font-size: 0;
}

#silenciostart br,
#silenciostart span,
#silencio span {
    display: none;
}

#silenciostart img,
#silencio img {
    display: block;
    width: clamp(112px, 13vw, 188px);
    height: auto;
    object-fit: contain;
}

.load-caption {
    margin-top: 26px;
    font: 10px/1.3 "PT Mono", monospace;
    letter-spacing: .12em;
    text-align: center;
}

.load-track {
    width: min(260px, 68vw);
    height: 2px;
    margin-top: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, .16);
}

#load-progress {
    width: 0;
    height: 100%;
    background: #111;
    transition: width .18s ease-out;
}

.load-meta {
    display: flex;
    width: min(260px, 68vw);
    justify-content: space-between;
    margin-top: 8px;
    font: 9px/1.2 "PT Mono", monospace;
    letter-spacing: .08em;
    opacity: .58;
}

/* ------------------------------------------------------------- ponsel (<= 640px) */

@media (max-width: 640px) {
    /* Tombol penutup memakai 17vw, sedangkan kata terpanjangnya ("TOGETHER!") butuh
       357 px padahal ruang isi tombol cuma 318 px — tanda serunya terpotong di tepi
       kanan. 14.5vw membuatnya muat di semua lebar dalam rentang ini, dan tetap ikut
       menyesuaikan diri karena satuannya relatif terhadap viewport. */
    #final2 button {
        font-size: 14.5vw;
    }
}

/* ------------------------------------------------- hero ponsel & tablet tegak */

@media screen and (max-width: 1024px) and (orientation: portrait) {
    /* Stage 3D mengikuti tinggi layar, tanpa memaksa hero melewati batas layar. */
    #landing {
        margin-top: 0;
        height: 100vh;
        min-height: 620px;
    }

    #middle {
        height: 75vh;
        min-height: 470px;
    }

    #landing h4 {
        top: auto;
        bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
        width: min(80vw, 520px);
        left: 10vw;
        padding: 0 4px;
        font-size: clamp(10px, 2.5vw, 14px);
        line-height: 1.3;
    }

    #movbar {
        bottom: max(0px, env(safe-area-inset-bottom));
    }

    /* Cover masuk di ponsel: teks hero menempel ke scene 3D selama layar
       intro, bukan tertinggal satu viewport di bawah spacer ScrollTrigger. */
    #content.mobile-intro #titmov {
        position: fixed;
        top: max(50px, calc(env(safe-area-inset-top) + 36px));
        z-index: 2;
        pointer-events: none;
    }

    #titmov {
        height: clamp(52px, 16vw, 120px);
    }

    #titmov h1 {
        font-size: clamp(38px, 13vw, 88px);
        line-height: .9;
    }

    #content.mobile-intro #segundo {
        position: fixed;
        top: min(31vh, 270px);
        z-index: 2;
        pointer-events: none;
    }

    #content.mobile-intro #landing h4 {
        position: fixed;
        top: auto;
        bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
        z-index: 2;
        pointer-events: none;
    }

    #content.mobile-intro #ticket {
        display: none !important;
    }

    #ticket {
        display: none !important;
    }
}

/* ---------------------------------------------- tablet/ponsel posisi mendatar */

@media screen and (max-width: 1024px) and (orientation: landscape) {
    :root {
        --p1: clamp(48px, 9vw, 92px);
        --p2: clamp(20px, 3.2vw, 34px);
        --p4: clamp(11px, 1.35vw, 14px);
        --p5: 10px;
    }

    #superiorstart,
    #superior,
    #scroll,
    #aceptar,
    .tit,
    .movno,
    #imginside3,
    #imginside7,
    #imginside8,
    #imginside9,
    #imginside10,
    #imginside11,
    #imginside12,
    #clients h2,
    #ticket,
    #lateral,
    #lateralinner {
        display: none !important;
    }

    #root {
        filter: none;
        z-index: -999;
    }

    #canvasmov {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: -1;
    }

    #content {
        width: 100vw;
        height: auto;
        overflow: hidden;
        position: absolute;
    }

    #landing {
        width: 100vw;
        height: 100vh;
        min-height: 0;
        margin-top: 0;
    }

    #middle {
        height: 100vh;
        justify-content: flex-start;
    }

    #large {
        display: none;
    }

    #largemov {
        display: flex;
        flex-direction: column;
        font-size: var(--p2);
    }

    #titmov {
        display: block;
        position: absolute;
        top: max(32px, calc(env(safe-area-inset-top) + 20px));
        left: 0;
        width: 100vw;
        height: clamp(46px, 10vw, 88px);
        overflow: hidden;
        pointer-events: none;
    }

    #titmov h1 {
        width: 400vw;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50vw);
        animation: mover 15s infinite linear;
        font-size: clamp(38px, 9vw, 88px);
        line-height: .9;
    }

    #segundo {
        width: 100vw;
        height: 8vw;
        position: absolute;
        top: clamp(96px, 15vw, 150px);
    }

    #landing h3 {
        transform: translateY(2vw);
        font-size: var(--p2);
    }

    #landing h4 {
        width: min(72vw, 700px);
        left: 14vw;
        top: auto;
        bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px));
        font-size: var(--p4);
        line-height: 1.3;
    }

    #barcode1 {
        width: 18vw;
        right: 2vw;
        top: 48vh;
    }

    #movbar {
        display: flex;
        position: fixed;
        left: 2vw;
        right: 2vw;
        bottom: max(4px, env(safe-area-inset-bottom));
        width: 96vw;
        height: 34px;
        z-index: 99999;
        flex-direction: row;
        font-size: 10px;
        top: auto;
    }

    #pantalla {
        display: block;
        width: 58vw;
        border-radius: 20px;
        background: var(--color);
        overflow: hidden;
    }

    #infosmov,
    #worksmov {
        display: block;
        height: 32px;
        margin-left: 8px;
        padding: 0 16px;
        border: 1px solid;
        border-radius: 20px;
        background: #fff;
        font: 10px/30px "PT Mono", monospace;
        text-transform: uppercase;
    }

    #infosmov {
        display: none;
    }

    #content.mobile-intro #landing h4 {
        position: fixed;
        top: auto;
        bottom: max(54px, calc(env(safe-area-inset-bottom) + 48px));
        z-index: 2;
        pointer-events: none;
    }
}

/* ---------------------------------------------------- progress model 3D */

/* Drei hanya menerima event progress dari LoadingManager setelah satu berkas
   selesai. Selama GLB pertama diunduh, tampilkan segmen bergerak agar layar
   tetap memberi tanda bahwa proses masih berjalan tanpa mengarang persentase. */
#load-progress.indeterminate {
    width: 28% !important;
    animation: load-progress-travel 1.45s cubic-bezier(.6, 0, .4, 1) infinite;
}

@keyframes load-progress-travel {
    0% { transform: translateX(-110%); }
    50% { transform: translateX(130%); }
    100% { transform: translateX(390%); }
}

/* -------------------------------------------- judul hero ponsel tegak */

@media screen and (max-width: 1024px) and (orientation: portrait) {
    /* Pakai judul statis yang sama dengan desktop; marquis sebelumnya
       menempel di atas viewport dan membuat hierarki hero berbeda. */
    #titmov {
        display: none !important;
    }

    #middle {
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100svh;
        min-height: 0;
        margin: 0;
        justify-content: center;
        padding: max(72px, calc(env(safe-area-inset-top) + 64px)) 4vw
                 max(150px, calc(env(safe-area-inset-bottom) + 138px));
        box-sizing: border-box;
    }

    #middle > .tit {
        display: block !important;
        position: relative;
        width: min(92vw, 720px);
        margin: 0 auto 12px;
        font-size: clamp(42px, 13.5vw, 92px);
        line-height: .86;
        text-align: center;
        overflow-wrap: normal;
    }

    #segundo {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        margin-top: 4px;
        overflow: visible;
    }

    #content.mobile-intro #segundo {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        margin-top: 4px;
    }

    #landing h3 {
        position: relative;
        width: 100%;
        margin: 0;
        transform: none;
        font-size: clamp(17px, 5.3vw, 27px);
        line-height: 1;
        text-align: center;
    }

    #landing h4 {
        position: relative;
        inset: auto;
        width: min(86vw, 540px);
        margin: 14px auto 0;
        font-size: clamp(10px, 2.8vw, 14px);
        line-height: 1.35;
        text-align: center;
    }

    #content.mobile-intro #landing h4 {
        position: relative;
        inset: auto;
        width: min(86vw, 540px);
        margin: 14px auto 0;
        text-align: center;
    }
}