@font-face {
  font-family: "IntraNet";
  src: url("font/IntraNet/IntraNet.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author Handwriting";
  src: url("font/author_handwriting/Author Handwriting.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  overflow-x: hidden;
}

/* HEADER */
#mainHeader {
  position: fixed;
  top: 28px;
  width: 100%;
  display: flex;
  justify-content: center;
  transition: 0.4s;
  z-index: 100;
}

#mainHeader.hide {
  transform: translateY(-150%);
  opacity: 0;
}

/* NAV */
nav ul {
  display: flex;
  gap: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  color: black;
  font-size: 16px;
  letter-spacing: 1px;
}

/* ABOUT */
.about-page {
  padding-top: 230px;
}

.about-container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 110px;
}

.about-left {
  width: 300px;
}

.about-right {
  width: 520px;
  padding-top: 8px;
}

/* IMAGE */
#imageContainer {
  width: 280px;
  height: 380px;
  overflow: hidden;
  filter: saturate(0);
  transition: 0.5s;
}

#imageContainer:hover {
  filter: saturate(1);
}

#imageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TEXT */
.name {
  font-family: "IntraNet", "League Spartan", sans-serif;
  font-size: 35px;
  line-height: 0.9;
  margin: 0 0 40px 0;
  text-align: center;
  white-space: nowrap;
  width: max-content;
  max-width: none;
}

.about-right.reveal,
.about-tight.reveal,
.description {
  font-family: "Author Handwriting", cursive;
}

.description {
  max-width: 520px;
  margin: 0;
  font-size:30px;
  line-height: 1.45;
  letter-spacing: 0.2px;
}

/* ========================= */
/* SOCIAL (FIX JARAK VISUAL) */
/* ========================= */
.social-media {
  max-width: 900px;
  margin: 130px auto 100px auto;
  padding: 0 40px;
}

.social-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #e5e5e5;
}

/* kiri */
.social-item h1 {
  margin: 0;
  font-size: 26px;
}

/* kanan */
.social-item a,
.social-item a:visited,
.social-item a:hover,
.social-item a:active {
  text-decoration: none;
  color: black;
  font-size: 15px;
}

/* hover clean */
.social-item a {
  position: relative;
}

.social-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 1px;
  background: black;
  transition: 0.3s;
}

.social-item a:hover::after {
  width: 100%;
}

/* SKILL */
.skillsetimg {
  display: block;
  margin: 90px auto;
  max-width: 850px;
  width: 100%;
}

/* ========================= */
/* SCROLL REVEAL */
/* ========================= */
.reveal {
  opacity: 0;
  transform: translateY(80px);
  filter: blur(10px);
  transition: 
    opacity 0.8s ease,
    transform 0.8s ease,
    filter 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ========================= */
/* SCROLL TO TOP */
/* ========================= */
#scrollTopBtn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: black;
  color: white;
  cursor: pointer;

  opacity: 0;
  transform: translateY(20px);
  transition: 0.3s;
}

#scrollTopBtn.show {
  opacity: 1;
  transform: translateY(0);
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */
@media (max-width: 900px) {
  nav ul {
    gap: 50px;
  }

  .about-page {
    padding-top: 160px;
  }

  .about-container {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }

  .about-left,
  .about-right {
    width: 100%;
    max-width: 520px;
  }

  .name {
    font-size: 46px;
    text-align: center;
  }

  #imageContainer {
    width: 260px;
    height: 350px;
    margin: 0 auto;
  }

  .description {
    font-size: 19px;
    text-align: left;
  }

  .social-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ========================= */
/* SIMPLE PAGE TRANSITION */
/* Smooth, single overlay, no stacking */
/* ========================= */
body.page-light {
  --page-enter-bg: #ffffff;
  --page-enter-ink: #000000;
}

body.page-dark {
  --page-enter-bg: #000000;
  --page-enter-ink: #ffffff;
}

.page-enter,
.page-exit {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}

.page-enter {
  background: var(--page-enter-bg, #000000);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.78s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.78s ease;
}

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

.page-exit {
  background: var(--page-exit-bg, var(--page-enter-bg, #000000));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.42s ease;
}

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

.page-enter span,
.page-exit span {
  position: absolute;
  inset: -20%;
  opacity: 0.34;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 42%,
      color-mix(in srgb, var(--page-enter-ink, #fff) 18%, transparent) 49%,
      transparent 58%,
      transparent 100%
    );
  transform: translateX(-42%);
}

.page-enter span {
  animation: smoothTransitionSweep 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-exit.active span {
  animation: smoothTransitionSweep 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothTransitionSweep {
  from {
    transform: translateX(-56%);
  }

  to {
    transform: translateX(56%);
  }
}

body.page-loading:not(.page-ready) #mainHeader,
body.page-loading:not(.page-ready) .about-page,
body.page-loading:not(.page-ready) .category,
body.page-loading:not(.page-ready) .contact,
body.page-loading:not(.page-ready) .social-wrapper,
body.page-loading:not(.page-ready) .local-clock {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
}

body.page-loading.page-ready #mainHeader,
body.page-loading.page-ready .about-page,
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 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 0.76s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.76s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.76s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-leaving #mainHeader,
body.page-leaving .about-page,
body.page-leaving .category,
body.page-leaving .contact,
body.page-leaving .social-wrapper,
body.page-leaving .local-clock {
  opacity: 0.72;
  filter: blur(5px);
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}



/* ===================================================== */
/* TARGET-AWARE PAGE TRANSITIONS                         */
/* Single overlay only, unique per page, no stacking      */
/* ===================================================== */
body.page-light {
  --page-enter-bg: #ffffff;
  --page-enter-ink: #000000;
}

body.page-dark {
  --page-enter-bg: #000000;
  --page-enter-ink: #ffffff;
}

.page-enter,
.page-exit {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}

.page-enter {
  background: var(--page-enter-bg, #000000);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.82s ease;
}

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

.page-exit {
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.54s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.54s ease;
}

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

.page-enter span,
.page-exit span {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.page-enter span::before,
.page-enter span::after,
.page-exit span::before,
.page-exit span::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* ABOUT enter/exit: soft ID-card / paper reveal */
body.page-about .page-enter,
.page-exit.to-about {
  background: #fff;
  color: #000;
}

body.page-about .page-enter span,
.page-exit.to-about span {
  background:
    linear-gradient(115deg, transparent 0%, transparent 41%, rgba(0,0,0,0.07) 50%, transparent 61%, transparent 100%);
  animation: aboutPageSweep 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.page-about .page-enter span::before,
.page-exit.to-about span::before {
  width: min(430px, 54vw);
  height: min(270px, 34vh);
  left: 50%;
  top: 50%;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 22px;
  opacity: 0.55;
  transform: translate(-50%, -50%) scale(1);
}

/* WORKS enter/exit: category shutter */
body.page-works .page-enter,
.page-exit.to-works {
  background: #000;
  color: #fff;
}

body.page-works .page-enter span,
.page-exit.to-works span {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 24vw
    );
  animation: worksPageShutter 0.86s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.page-works .page-enter span::before,
.page-exit.to-works span::before {
  inset: -15%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10), transparent 24%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
  animation: worksPageScan 0.92s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* CONTACT enter/exit: signal connection */
body.page-contact .page-enter,
.page-exit.to-contact {
  background: #000;
  color: #fff;
}

body.page-contact .page-enter span,
.page-exit.to-contact span {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.10), transparent 26%),
    linear-gradient(90deg, rgba(255,255,255,0.03), transparent 45%, rgba(255,255,255,0.03));
}

body.page-contact .page-enter span::before,
.page-exit.to-contact span::before {
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,0.68);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: contactPagePulse 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.page-contact .page-enter span::after,
.page-exit.to-contact span::after {
  left: -20%;
  top: 50%;
  width: 140%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: contactPageLine 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* HOME/default target */
.page-exit.to-home,
.page-exit.to-default {
  background: #000;
}

.page-exit.to-home span,
.page-exit.to-default span {
  background:
    linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 60%, transparent 100%);
  transform: translateX(-35%);
  animation: defaultPageSweep 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aboutPageSweep {
  from { transform: translateX(-35%); }
  to { transform: translateX(35%); }
}

@keyframes worksPageShutter {
  0% { opacity: 0; transform: scaleX(0.92); filter: blur(6px); }
  100% { opacity: 1; transform: scaleX(1); filter: blur(0); }
}

@keyframes worksPageScan {
  from { transform: translateX(-36%); }
  to { transform: translateX(36%); }
}

@keyframes contactPagePulse {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@keyframes contactPageLine {
  from { transform: translateX(-28%); }
  to { transform: translateX(28%); }
}

@keyframes defaultPageSweep {
  to { transform: translateX(36%); }
}

body.page-loading:not(.page-ready) #mainHeader,
body.page-loading:not(.page-ready) .about-page,
body.page-loading:not(.page-ready) .category,
body.page-loading:not(.page-ready) .contact,
body.page-loading:not(.page-ready) .social-wrapper,
body.page-loading:not(.page-ready) .local-clock {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
}

body.page-loading.page-ready #mainHeader,
body.page-loading.page-ready .about-page,
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 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 0.84s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.84s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.84s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-leaving #mainHeader,
body.page-leaving .about-page,
body.page-leaving .category,
body.page-leaving .contact,
body.page-leaving .social-wrapper,
body.page-leaving .local-clock {
  opacity: 0.45;
  filter: blur(8px);
  transition:
    opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ========================= */
/* ABOUT NAME ONE LINE PATCH */
/* hanya AL RASSYID di atas foto profile */
.name {
  font-family: "IntraNet", "League Spartan", sans-serif !important;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  .name {
    white-space: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 46px) !important;
  }
}