/* =========================================================
   Joshua — Full stack, secara harfiah
   ========================================================= */

:root {
    --paper: #e8ecef;
    --paper-deep: #dce1e6;
    --ink: #1b2340;
    --muted: #525c75;

    /* Warna lapisan stack */
    --ct: #ff7eb6;   /* creative tech */
    --fe: #ffc21a;   /* frontend */
    --be: #3346ff;   /* backend */
    --db: #16b98a;   /* database */

    --ct: #F6A6C1;
    --fe: #FFD580;
    --be: #A8B4FF;
    --db: #82DCC0;

    --rule: 2px solid var(--ink);
    --radius: 6px;
    --container: 1200px;

    --font: "Chivo", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --block-fs: clamp(15px, 1.35vw, 20px);
    --block-h: 2.9em;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    font-family: var(--font);
    font-optical-sizing: auto;
    font-size: 1.0625rem;
    line-height: 1.6;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--be);
    outline-offset: 3px;
    border-radius: 2px;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 16px;
}

/* ---------------------------------------------------------
   Navigasi
   --------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: var(--rule);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.wordmark {
    font-size: 1.5rem;
    font-weight: 800;
    font-stretch: 80%;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    font-weight: 500;
}

.nav-links a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.nav-links .nav-cta {
    padding: 8px 16px;
    border: var(--rule);
    border-radius: var(--radius);
    background: var(--fe);
    font-weight: 700;
}

.nav-links .nav-cta:hover {
    text-decoration: none;
    background: var(--ink);
    color: var(--paper);
}

.menu-toggle {
    display: none;
    padding: 6px 14px;
    border: var(--rule);
    border-radius: var(--radius);
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------
   Hero + dunia fisika
   --------------------------------------------------------- */

.hero {
    position: relative;
    min-height: calc(100svh - 70px);
    min-height: max(620px, calc(100svh - 70px));
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 3px solid var(--ink);
}

.hero-inner {
    position: relative;
    z-index: 1;
    padding-block: 64px 80px;
}

.hero-copy {
    max-width: min(38rem, 50%);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    margin-bottom: 28px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--db);
    box-shadow: 0 0 0 2px var(--ink);
}

.hero h1 {
    font-size: clamp(3rem, 6.2vw, 6.4rem);
    font-weight: 800;
    font-stretch: 78%;
    line-height: 0.9;
    letter-spacing: -0.035em;
    margin-bottom: 28px;
}

.lede {
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
    max-width: 34em;
    color: var(--muted);
    margin-bottom: 36px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 22px;
    border: var(--rule);
    border-radius: var(--radius);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:active {
    transform: translateY(2px);
}

.btn-solid {
    background: var(--ink);
    color: var(--paper);
}

.btn-solid:hover {
    background: var(--be);
}

.btn-line:hover {
    background: var(--fe);
}

.play {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 40px;
}

.play[hidden] {
    display: none;
}

.play-hint {
    font-size: 0.95rem;
    color: var(--muted);
}

.play-buttons {
    display: flex;
    gap: 8px;
}

.btn-small {
    padding: 5px 12px;
    border: var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-small:hover {
    background: var(--ink);
    color: var(--paper);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--muted);
}

.legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.swatch {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ink);
    border-radius: 3px;
}

.swatch--ct { background: var(--ct); }
.swatch--fe { background: var(--fe); }
.swatch--be { background: var(--be); }
.swatch--db { background: var(--db); }

/* Dunia fisika: menutupi seluruh hero, balok bisa lewat di atas teks */

.world {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.block {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--block-h);
    font-size: var(--block-fs);
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    will-change: transform;
}

.block.is-grabbed {
    cursor: grabbing;
    z-index: 5;
}

.block-face {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.05em;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--c);
    color: var(--on, var(--ink));
    font-weight: 700;
    white-space: nowrap;
    transform-origin: 50% 100%;
}

.block--ct { --c: var(--ct); }
.block--fe { --c: var(--fe); }
.block--be { --c: var(--be); }
.block--db { --c: var(--db); }

/* Satu momen animasi: balok jatuh dan tersusun saat halaman dibuka */

.world.is-entering .block-face {
    animation: drop 0.62s both;
    animation-delay: var(--delay, 0s);
}

@keyframes drop {
    0% {
        transform: translateY(-110vh);
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    72% {
        transform: translateY(0) scaleY(1);
        animation-timing-function: ease-out;
    }
    84% {
        transform: translateY(0) scale(1.03, 0.9);
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: none;
    }
}

/* ---------------------------------------------------------
   Judul bagian
   --------------------------------------------------------- */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 40px;
    margin-bottom: 56px;
}

.section-head h2,
.about-statement,
.contact h2 {
    font-weight: 800;
    font-stretch: 80%;
    letter-spacing: -0.03em;
    line-height: 0.98;
}

.section-head h2 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
}

.section-head p {
    max-width: 26rem;
    color: var(--muted);
}

/* ---------------------------------------------------------
   Tentang
   --------------------------------------------------------- */

.about {
    padding-block: 120px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
}

.about-statement {
    font-size: clamp(2.2rem, 4.4vw, 3.9rem);
}

.about-body p {
    max-width: 34em;
    margin-bottom: 1.1em;
}

.facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 36px;
    border-top: var(--rule);
}

.facts div {
    padding: 16px 0;
    border-bottom: var(--rule);
}

.facts div:nth-child(odd) {
    padding-right: 16px;
    border-right: var(--rule);
}

.facts div:nth-child(even) {
    padding-left: 20px;
}

.facts dt {
    font-size: 0.9rem;
    color: var(--muted);
}

.facts dd {
    font-size: 1.6rem;
    font-weight: 800;
    font-stretch: 85%;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   Stack: lapisan seperti penampang tanah
   --------------------------------------------------------- */

.stack {
    padding-top: 120px;
    border-top: var(--rule);
    background: var(--paper-deep);
}

.strata {
    border-bottom: 3px solid var(--ink);
}

.stratum {
    background: var(--c);
    color: var(--on, var(--ink));
    border-top: var(--rule);
}

.stratum--ct { --c: var(--ct); }
.stratum--fe { --c: var(--fe); }
.stratum--be { --c: var(--be); --on: #fff; }
.stratum--db { --c: var(--db); }

.stratum-inner {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
    gap: 16px 40px;
    align-items: center;
    padding-block: 40px;
}

.stratum h3 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    font-stretch: 80%;
    letter-spacing: -0.02em;
    line-height: 1;
}

.stratum p {
    max-width: 28em;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 0.95em;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.chip--ct { background: var(--ct); }
.chip--fe { background: var(--fe); }
.chip--be { background: var(--be); color: #fff; }
.chip--db { background: var(--db); }

/* ---------------------------------------------------------
   Proyek
   --------------------------------------------------------- */

.projects {
    padding-block: 120px;
}

.project-list {
    border-bottom: var(--rule);
}

.project {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 48px;
    align-items: end;
    padding-block: 48px;
    border-top: var(--rule);
}

.mini-stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.mini-stack .chip {
    margin-top: -2px;
    height: 3rem;
    font-size: 1.1rem;
}

/* sedikit miring, seperti disusun tangan */
.mini-stack .chip:nth-child(2) { transform: translateX(6px) rotate(-1.5deg); }
.mini-stack .chip:nth-child(3) { transform: translateX(-4px) rotate(1.2deg); }
.mini-stack .chip:nth-child(4) { transform: translateX(3px) rotate(-2.5deg); }

.project-kind {
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 6px;
}

.project h3 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    font-stretch: 80%;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 14px;
}

.project-text p:last-child {
    max-width: 36em;
}

/* ---------------------------------------------------------
   Kontak
   --------------------------------------------------------- */

.contact {
    background: var(--ink);
    color: var(--paper);
    padding-block: 120px;
}

.contact :focus-visible {
    outline-color: var(--fe);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: end;
}

.contact h2 {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    margin-bottom: 28px;
}

.contact-text p {
    max-width: 34em;
    color: #c3c9d9;
    margin-bottom: 36px;
}

.email {
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    font-weight: 800;
    font-stretch: 85%;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: var(--fe);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
    overflow-wrap: anywhere;
}

.email:hover {
    color: var(--fe);
}

.mini-stack--big .chip {
    height: 3.4rem;
    font-size: 1.25rem;
    border-color: var(--paper);
}

.chip--slot {
    background: transparent;
    color: var(--paper);
    border-style: dashed !important;
    animation: hover-slot 2.4s ease-in-out infinite;
}

@keyframes hover-slot {
    0%, 100% { translate: 0 -6px; }
    50% { translate: 0 -14px; }
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.footer {
    background: var(--ink);
    color: #c3c9d9;
    border-top: 1px solid #3a4466;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-block: 28px;
    font-size: 0.95rem;
}

.footer a:hover {
    color: var(--paper);
}

/* ---------------------------------------------------------
   Responsif
   --------------------------------------------------------- */

@media (max-width: 900px) {
    :root {
        --block-fs: 14px;
    }

    .hero {
        align-items: flex-start;
    }

    .hero-inner {
        padding-block: 48px 380px;
    }

    .hero-copy {
        max-width: none;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .stratum-inner {
        grid-template-columns: 1fr;
    }

    .chips {
        justify-content: flex-start;
    }

    .project {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }

    .mini-stack {
        align-items: flex-start;
    }

    .mini-stack--big {
        align-items: center;
    }
}

@media (max-width: 700px) {
    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 20px;
        background: var(--paper);
        border-bottom: var(--rule);
        display: none;
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links a {
        padding: 12px 0;
        font-size: 1.15rem;
    }

    .nav-links .nav-cta {
        margin-top: 8px;
        text-align: center;
        padding: 12px 16px;
    }

    .about,
    .projects,
    .contact {
        padding-block: 88px;
    }

    .stack {
        padding-top: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .world.is-entering .block-face,
    .chip--slot {
        animation: none;
    }

    .btn {
        transition: none;
    }
}