/* ========================= */
/* RESET */
/* ========================= */
body {
  margin: 0;
  padding: 0;

  background: #000000;
  color: #000;

  font-family: "JetBrains Mono", monospace;
  overflow-x: hidden;
}

/* ========================= */
/* HEADER */
/* ========================= */
#mainHeader {
  position: fixed;
  top: 20px;
  width: 100%;
  z-index: 999;

  display: flex;
  justify-content: center;
}

/* NAV BAR */
nav ul {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 200px;

  list-style: none;
  padding: 15px 40px;
  margin: 0;

  background: transparent;
}

/* NAV LINK */
nav a {
  position: relative;
  display: inline-block;

  color: #fff;
  text-decoration: none;

  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  padding: 6px 12px;
  overflow: hidden;

  transition: color 0.3s ease;
  z-index: 1;
}

/* hover background fill */
nav a::before {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 0%;

  background: #fff;
  z-index: -1;

  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

nav a:hover::before {
  height: 100%;
}

nav a:hover span {
  color: #000;
}


/* ========================= */
/* CATEGORY */
/* ========================= */
.category {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
  height: 120vh;
}

.category-item {
  position: relative;
  width: 250px;
  cursor: pointer;
  isolation: isolate; /* penting agar layering stabil */
  top: 50px;
}

/* ========================= */
/* ICON (FIX UTAMA DI SINI) */
/* ========================= */

/* default icon */
.img-category-default {
  position: relative;
  z-index: 10; 
  width: 100%;
  display: block;
}

/* hover icon */
.img-category-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 11; 
  width: 100%;
  display: block;
  transition: opacity 0.2s ease;
}

.category-item:hover .img-category-hover {
  opacity: 1;
}

/* ========================= */
/* REVEAL BASE (TIDAK DIUBAH) */
/* ========================= */
.img-reveal {
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--size);
  height: auto;

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.5);

  z-index: 1; 
  pointer-events: none;

  will-change: transform, opacity;
}

/* ========================= */
/* SIZE + POSITION (TIDAK DIUBAH) */
/* ========================= */
/* -----------------------------------------3D SIZE--------------------------------------*/
/* R1 */
.r1 {
  --size: 250px;
  --scale: 1;
  --x: -80px;
  --y-in: -100%;
  --rotate: 0deg;
}

/* R2 */
.r2 {
  --size: 160px;
  --scale: 1;
  --x: -20px;
  --y-in: -90%;
  --rotate: 0deg;
}

/* R3 */
.r3 {
  --size: 180px;
  --scale: 1;
  --x: 90px;
  --y-in: -80%;
  --rotate: 0deg;
}
/* -----------------------------------------GRAPHIC DESIN SIZE--------------------------------------*/
/* gp1 */
.gp1 {
  --size: 200px;
  --scale: 1;
  --x: -80px;
  --y-in: -100%;
  --rotate: -30deg;
}

/* gp2 */
.gp2 {
  --size: 220px;
  --scale: 1;
  --x: -20px;
  --y-in: -110%;
  --rotate: 10deg;
}

/* gp3 */
.gp3 {
  --size: 200px;
  --scale: 1;
  --x: 100px;
  --y-in: -130%;
  --rotate: 0deg;
}

/* -----------------------------------------Illustration SIZE--------------------------------------*/
/* ILS1 */
.ils1 {
  --size: 200px;
  --scale: 1;
  --x: -80px;
  --y-in: -135%;
  --rotate: 0deg;
  z-index: 3;

}

/* ILS2 */
.ils2 {
  --size: 220px;
  --scale: 1;
  --x: 50px;
  --y-in: -180%;
  --rotate: 0deg;
  z-index: 1;
}

/* ILS3 */
.ils3 {
  --size: 250px;
  --scale: 1;
  --x: 150px;
  --y-in: -120%;
  --rotate: -10deg;
  z-index: 0;
}


/* -----------------------------------------Brand Design SIZE--------------------------------------*/
/* BD1 */
.bd1 {
  --size: 200px;
  --scale: 1;
  --x: -80px;
  --y-in: -135%;
  --rotate: 0deg;
  z-index: 1;

}

/* BD2 */
.bd2 {
  --size: 180px;
  --scale: 1;
  --x: 20px;
  --y-in: -140%;
  --rotate: 0deg;
  z-index: 2;
}

/* ILS3 */
.bd3 {
  --size: 350px;
  --scale: 1;
  --x: 130px;
  --y-in: -100%;
  --rotate: 0deg;
  z-index: 0;
}
/* ========================= */
/* ANIMASI MASUK */
/* ========================= */
@keyframes revealIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform:
      translate(
        calc(-50% + var(--x, 0px)),
        var(--y-in, -150%)
      )
      scale(var(--scale, 1))
      rotate(var(--rotate, 0deg));
  }
}

/* ========================= */
/* ANIMASI KELUAR */
/* ========================= */
@keyframes revealOut {
  0% {
    opacity: 1;
    transform:
      translate(
        calc(-50% + var(--x, 0px)),
        var(--y-in, -150%)
      )
      scale(var(--scale, 1))
      rotate(var(--rotate, 0deg));
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5)  rotate(0deg);
  }
}

/* ========================= */
/* TRIGGER 3D hover*/
/* ========================= */
.category-item.three-d:hover .img-reveal {
  animation: revealIn 0.85s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.category-item.three-d:not(:hover) .img-reveal {
  animation: revealOut 0.5s ease forwards;
}

/* ========================= */
/* TRIGGER graphic hover */
/* ========================= */
.category-item.graphic-d:hover .img-reveal {
  animation: revealIn 0.85s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.category-item.graphic-d:not(:hover) .img-reveal {
  animation: revealOut 0.5s ease forwards;
}

/* ========================= */
/* TRIGGER Illustration hover */
/* ========================= */
.category-item.illustration:hover .img-reveal {
  animation: revealIn 0.85s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.category-item.illustration:not(:hover) .img-reveal {
  animation: revealOut 0.5s ease forwards;
}

/* ========================= */
/* TRIGGER Illustration hover */
/* ========================= */
.category-item.brand-d:hover .img-reveal {
  animation: revealIn 0.85s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.category-item.brand-d:not(:hover) .img-reveal {
  animation: revealOut 0.5s ease forwards;
}


/* ========================= */
/* PAGE ENTER - LIQUID SCAN SMOOTH */
/* ========================= */
.page-enter {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;

  opacity: 1;
  visibility: visible;

  --enter-bg: #000;
  --enter-ink: #fff;

  transition:
    opacity 0.86s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.86s ease;
}

body.page-light .page-enter {
  --enter-bg: #fff;
  --enter-ink: #000;
}

body.page-dark .page-enter {
  --enter-bg: #000;
  --enter-ink: #fff;
}

.page-enter.hide {
  opacity: 0;
  visibility: hidden;
}

.pe-backdrop {
  position: absolute;
  inset: 0;
  background: var(--enter-bg);
  opacity: 1;
}

.pe-vignette {
  position: absolute;
  inset: -12%;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.16) 0%,
      transparent 34%),
    radial-gradient(circle at 50% 50%,
      transparent 0%,
      rgba(0,0,0,0.18) 70%,
      rgba(0,0,0,0.5) 100%);

  opacity: 0.75;
  mix-blend-mode: difference;
  transform: scale(1);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-enter.hide .pe-vignette {
  opacity: 0;
  transform: scale(1.08);
}

.pe-scan {
  position: absolute;
  top: -25%;
  left: -55%;

  width: 42%;
  height: 150%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 35%,
    rgba(255,255,255,0.46) 50%,
    rgba(255,255,255,0.12) 65%,
    transparent 100%
  );

  opacity: 0.9;
  filter: blur(2px);
  mix-blend-mode: difference;
  transform: translateX(-10vw) skewX(-14deg);

  transition:
    transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease;
}

.page-enter.hide .pe-scan {
  transform: translateX(205vw) skewX(-14deg);
  opacity: 0;
}

.pe-bars {
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 13px,
      rgba(255,255,255,0.10) 14px,
      transparent 16px
    );

  opacity: 0.46;
  mix-blend-mode: difference;

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-enter.hide .pe-bars {
  opacity: 0;
  transform: scaleY(1.04);
}

/* isi halaman muncul dengan lembut */
body.page-loading #mainHeader,
body.page-loading .category,
body.page-loading .contact,
body.page-loading .social-wrapper,
body.page-loading .local-clock,
body.page-loading .about-page {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(16px) scale(0.992);
}

body.page-loading.page-ready #mainHeader,
body.page-loading.page-ready .category,
body.page-loading.page-ready .contact,
body.page-loading.page-ready .social-wrapper,
body.page-loading.page-ready .local-clock,
body.page-loading.page-ready .about-page {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);

  transition:
    opacity 0.86s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.86s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.86s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================= */
/* WORKS CATEGORY INTRO */
/* fly from far behind */
/* ========================= */
.category {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.category-item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

/* sebelum animasi masuk */
body:not(.works-intro-ready) .category-item {
  opacity: 0;
  pointer-events: none;

  transform:
    translate3d(0, 120px, -900px)
    rotateX(24deg)
    scale(0.35);

  filter: blur(24px);
}

/* saat animasi masuk berjalan */
body.works-intro-ready:not(.works-intro-finished) .category-item {
  pointer-events: none;
  animation: worksCategoryFlyIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* urutan animasi:
   1) 3D Design + Brand Design bersamaan
   2) Graphic Design
   3) Illustration
*/
body.works-intro-ready:not(.works-intro-finished) .category-item.three-d {
  animation-delay: 0.10s;
}

body.works-intro-ready:not(.works-intro-finished) .category-item.brand-d {
  animation-delay: 0.10s;
}

body.works-intro-ready:not(.works-intro-finished) .category-item.graphic-d {
  animation-delay: 0.22s;
}

body.works-intro-ready:not(.works-intro-finished) .category-item.illustration {
  animation-delay: 0.22s;
}

/* setelah animasi selesai, hover normal kembali */
body.works-intro-finished .category-item {
  opacity: 1;
  filter: blur(0);
  animation: none;
  pointer-events: auto;

  transform:
    translate3d(0, 0, 0)
    rotateX(0deg)
    scale(1);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.works-intro-finished .category-item:hover {
  transform:
    translate3d(0, -6px, 0)
    rotateX(0deg)
    scale(1.03);
}

@keyframes worksCategoryFlyIn {
  0% {
    opacity: 0;
    filter: blur(24px);

    transform:
      translate3d(0, 120px, -900px)
      rotateX(24deg)
      scale(0.35);
  }

  52% {
    opacity: 1;
    filter: blur(8px);

    transform:
      translate3d(0, -18px, 80px)
      rotateX(-4deg)
      scale(1.08);
  }

  78% {
    filter: blur(2px);

    transform:
      translate3d(0, 6px, 20px)
      rotateX(1deg)
      scale(0.98);
  }

  100% {
    opacity: 1;
    filter: blur(0);

    transform:
      translate3d(0, 0, 0)
      rotateX(0deg)
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.works-intro-ready) .category-item,
  body.works-intro-ready:not(.works-intro-finished) .category-item,
  body.works-intro-finished .category-item {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    pointer-events: auto;
  }
}

/* ========================= */
/* WORKS FIXED PAGE / NO SCROLL */
/* halaman works dibuat pakem satu layar */
/* ========================= */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body {
  position: relative;
}

.category {
  height: 100vh !important;
  min-height: 100vh;
  max-height: 100vh;

  box-sizing: border-box;
  padding: 72px 40px 34px;

  overflow: visible;
}

/* menjaga overlay transisi tetap tidak membuat halaman scroll */
.page-enter {
  overflow: hidden;
}

/* responsive agar tetap muat di layar kecil/pendek */
@media (max-width: 1200px) {
  nav ul {
    gap: 120px;
  }

  .category {
    gap: 48px;
  }

  .category-item {
    width: 220px;
  }
}

@media (max-width: 980px) {
  nav ul {
    gap: 60px;
  }

  .category {
    gap: 32px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .category-item {
    width: 190px;
  }
}

@media (max-height: 720px) {
  .category {
    padding-top: 62px;
    padding-bottom: 24px;
  }

  .category-item {
    width: 215px;
  }
}

@media (max-height: 620px) {
  .category {
    padding-top: 58px;
    padding-bottom: 18px;
    gap: 42px;

  }

  .category-item {
    width: 185px;
  }
}




/* ========================= */
/* WORKS NORMAL PAGE TRANSITION PATCH */
/* speed dikembalikan normal, efek hover/reveal category tetap aktif */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--page-transition-color, #000);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.52s ease;
}

.page-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

body.is-leaving #mainHeader,
body.is-leaving .category {
  filter: blur(7px);
  opacity: 0.58;
  transition:
    filter 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}