/* ===========================================================
   TOKENS
=========================================================== */
:root{
  --bg: #F6FAFF;
  --bg-soft: #EAF3FF;
  --ink: #33414F;
  --ink-soft: #64748B;
  --red: #FF8FA8;
  --indigo: #5B9BD8;
  --yellow: #FFCE7A;
  --mint: #A8E8D4;
  --white: #FFFFFF;

  --hero-gradient: linear-gradient(160deg, #F6FAFF 0%, #EAF3FF 45%, #DCEBFC 100%);

  --font-display: "Baloo 2", sans-serif;
  --font-body: "Inter", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --shadow-card: 6px 6px 0 rgba(51,65,79,0.08);
  --shadow-card-hover: 9px 9px 0 rgba(91,155,216,0.22);

  --max-width: 1140px;
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  background: var(--hero-gradient);
  height: 100%;
}

body{
  margin:0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  height: 100%;
  overflow-y: hidden;
}

@media (hover: hover) and (pointer: fine){
  body{ cursor: none; }
  a, button{ cursor: none; }
}

/* ===========================================================
   SCROLL PROGRESS BAR
=========================================================== */
.scroll-progress{
  position: fixed;
  top:0; left:0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  z-index: 999;
  transition: width .1s linear;
}

/* ===========================================================
   CUSTOM CURSOR
=========================================================== */
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  pointer-events: none;
  z-index: 998;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.cursor-dot{
  width: 8px; height:8px;
  background: var(--red);
}
.cursor-ring{
  width: 36px; height:36px;
  border: 2px solid var(--ink);
  opacity: .6;
  transition: width .2s ease, height .2s ease, opacity .2s ease, border-color .2s ease;
}
.cursor-ring.hovering{
  width: 60px; height:60px;
  border-color: var(--red);
  opacity: .9;
}
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

img{ max-width: 100%; display:block; }
a{ text-decoration:none; color:inherit; }
h1,h2,h3{ font-family: var(--font-display); margin:0; }

section{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 100px 32px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .project-card-inner-content{ opacity: 1 !important; transform: none !important; }
  .project-card-sketch{ display: none !important; }
}

/* ===========================================================
   REVEAL (single orchestrated animation on scroll)
=========================================================== */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance: staggered on page load, no scroll trigger needed */
.split-in{
  opacity: 0;
  transform: translateY(28px);
  animation: splitIn .8s cubic-bezier(.22,1,.36,1) forwards;
}
.split-in[data-delay="0"]{ animation-delay: .1s; }
.split-in[data-delay="1"]{ animation-delay: .25s; }
.split-in[data-delay="2"]{ animation-delay: .4s; }
.split-in[data-delay="3"]{ animation-delay: .55s; }
.split-in[data-delay="4"]{ animation-delay: .7s; }
.split-in[data-delay="5"]{ animation-delay: .85s; }
.split-in[data-delay="6"]{ animation-delay: 1s; }

@keyframes splitIn{
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .split-in{ opacity:1; transform:none; animation:none; }
}

/* ===========================================================
   NAVBAR
=========================================================== */
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 20px 32px;
  background: rgba(255,251,242,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}
.logo{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.5rem;
}
.logo .dot{ color: var(--red); }

.nav-links{
  display:flex;
  gap: 28px;
}
.nav-links a{
  font-weight: 500;
  font-size: .95rem;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:3px; width:0;
  background: var(--red);
  border-radius: 3px;
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ color: var(--red); }
.nav-links a{ transition: color .2s ease; }

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 8px;
}
.burger span{
  width: 26px; height: 3px;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 820px){
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--bg);
    flex-direction:column;
    padding: 20px 32px;
    border-bottom: 2px solid var(--ink);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .burger{ display:flex; }
}

/* ===========================================================
   HERO
=========================================================== */
/* ===========================================================
   INTRO — full-screen, foto dominan sebelum hero
=========================================================== */
.intro{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--hero-gradient);
  text-align: center;
  padding: 40px 24px;
}
.intro-bg-text{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-display);
  font-size: min(30vw, 340px);
  font-weight: 700;
  color: var(--ink);
  opacity: .04;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.intro-photo-frame{
  position: relative;
  z-index: 1;
  width: min(64vw, 320px);
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--ink);
  box-shadow: 0 24px 60px rgba(51,65,79,.22);
}
.intro-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-photo-shine{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 45%);
  pointer-events: none;
}
.intro-caption{
  position: relative;
  z-index: 1;
  margin-top: 28px;
}
.intro-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  color: var(--red);
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.intro-name{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 700;
  color: var(--ink);
}
.intro-scroll-hint{
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--ink-soft);
  z-index: 1;
}
.intro-scroll-hint .scroll-line{
  width: 26px;
  height: 1px;
  background: var(--ink-soft);
  animation: scrollHintPulse 1.8s ease-in-out infinite;
}
@keyframes scrollHintPulse{
  0%, 100%{ width: 26px; opacity: .5; }
  50%{ width: 42px; opacity: 1; }
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items:center;
  padding-top: 70px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position: absolute;
  inset: -10% -10% 0 -10%;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.7) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(168,232,212,0.35) 0%, transparent 50%),
    radial-gradient(circle at 90% 10%, rgba(255,206,122,0.25) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.hero-bg-text{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-display);
  font-size: min(22vw, 280px);
  font-weight: 700;
  color: var(--ink);
  opacity: .035;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero-text{ position: relative; z-index: 1; }

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight:600;
  color: var(--red);
  margin: 0 0 18px;
  font-size: .95rem;
}
.pulse-dot{
  width: 8px; height:8px;
  border-radius: 50%;
  background: var(--red);
  position: relative;
  flex-shrink:0;
}
.pulse-dot::after{
  content:"";
  position:absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform: scale(.6); opacity: 1; }
  100%{ transform: scale(1.8); opacity: 0; }
}

.hero-title{
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-title .line{ display:block; }
.hero-title .highlight{
  color: var(--indigo);
}
.hero-tagline{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 18px 0 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--indigo) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--indigo) 22%, transparent);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--indigo);
}
.hero-desc{
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 22px 0 34px;
}

.hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  border: 2px solid var(--ink);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .3s ease, color .3s ease;
  position: relative;
  overflow: hidden;
}
.btn span{ position:relative; z-index:1; }
.btn-primary{
  background: linear-gradient(135deg, var(--red) 0%, #FFA5B8 50%, var(--yellow) 100%);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, var(--indigo), var(--mint));
  transform: translateY(101%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.btn-primary:hover::before{ transform: translateY(0); }
.btn-outline{
  background: transparent;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--bg);
}
.btn:hover{
  transform: translate(-3px,-3px);
  box-shadow: 7px 7px 0 var(--ink);
}
.btn:active{
  transform: translate(0,0);
  box-shadow: 2px 2px 0 var(--ink);
}

.hero-scroll-hint{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 48px;
  font-size: .82rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.scroll-line{
  width: 32px; height: 1px;
  background: var(--ink-soft);
  position: relative;
  overflow: hidden;
}
.scroll-line::after{
  content:"";
  position:absolute;
  left:-100%; top:0;
  width: 100%; height:100%;
  background: var(--red);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  50%{ left: 100%; }
  100%{ left: 100%; }
}

.hero-photo-wrap{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  perspective: 1000px;
}
.hero-photo-wrap .photo-frame{
  animation: heroPhotoFloat 5.5s ease-in-out infinite;
}
@keyframes heroPhotoFloat{
  0%,100%{ transform: translateY(0) rotate(-4deg); }
  50%{ transform: translateY(-10px) rotate(-4deg); }
}
.photo-frame{
  width: min(360px, 80vw);
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 4px solid var(--ink);
  transform: rotate(-4deg);
  background: var(--bg-soft);
  position: relative;
  z-index: 2;
  transition: transform .1s ease-out;
  transform-style: preserve-3d;
  box-shadow: 10px 14px 0 rgba(31,41,51,0.1);
}
.hero-photo{
  width:100%; height:100%;
  object-fit: cover;
}
.photo-shine{
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events:none;
}
.photo-frame:hover .photo-shine{
  animation: shineSweep 1s ease forwards;
}
.photo-shine.auto-shine{
  animation: shineSweep 1.1s ease forwards;
  animation-delay: 1s;
}
@keyframes shineSweep{
  to{ transform: translateX(100%); }
}

.blob{
  position:absolute;
  border-radius: 50%;
  z-index: 1;
  animation: blobFloat 7s ease-in-out infinite;
}
.blob-1{
  width: 220px; height: 220px;
  background: linear-gradient(135deg, var(--yellow), #FFE1A8);
  top: -30px; right: 10px;
  filter: blur(2px);
}
.blob-2{
  width: 160px; height: 160px;
  background: linear-gradient(135deg, var(--indigo), var(--mint));
  bottom: -20px; left: 0;
  opacity: .85;
  animation-delay: -3s;
}
@keyframes blobFloat{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(10px,-14px); }
}

.sticker-torii{
  position:absolute;
  font-size: 2.6rem;
  bottom: 20px;
  right: -10px;
  z-index: 3;
  transform: rotate(8deg);
  animation: stickerWiggle 4s ease-in-out infinite;
}
@keyframes stickerWiggle{
  0%,100%{ transform: rotate(8deg); }
  50%{ transform: rotate(-4deg) translateY(-4px); }
}

.badge-float{
  position: absolute;
  top: 12%;
  left: -14px;
  z-index: 3;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 4px 4px 0 var(--ink);
  animation: badgeFloat 5s ease-in-out infinite;
}
.badge-emoji{ font-size: 1.1rem; }
@keyframes badgeFloat{
  0%,100%{ transform: translateY(0) rotate(-3deg); }
  50%{ transform: translateY(-8px) rotate(2deg); }
}

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; padding-top: 40px; }
  .hero-photo-wrap{ order:-1; }
  .hero-bg-text{ font-size: 26vw; }
  .badge-float{ top: -14px; left: 6px; font-size: .75rem; padding: 8px 14px 8px 10px; }
}

/* ===========================================================
   SECTION HEADING
=========================================================== */
.section-heading{
  margin-bottom: 48px;
  text-align: left;
  max-width: 62ch;
}
.eyebrow-tag{
  display:inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--red);
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.eyebrow-light{
  background: transparent;
  color: var(--yellow);
  border-color: rgba(255,255,255,.4);
  box-shadow: none;
}
.section-heading h2{
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  position: relative;
  display: block;
  font-weight: 700;
}
.section-heading p{
  color: var(--ink-soft);
  margin-top: 18px;
}

/* ===========================================================
   ABOUT
=========================================================== */
.about{ background: linear-gradient(160deg, var(--bg-soft) 0%, #DCEBFC 100%); max-width:100%; }
.about > *{ max-width: var(--max-width); margin:0 auto; }
.about-grid{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 56px;
  align-items:center;
}
[lang="ja"]{
  font-family: "Zen Maru Gothic", "Baloo 2", sans-serif;
}
.about-text p[lang="ja"]{
  line-height: 1.9;
  color: var(--ink-soft);
}
.about-text p + p{
  margin-top: 16px;
}
.about-photo{ position: relative; }
.about-photo img{
  border-radius: var(--radius-lg);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-card);
}
.about-photo-tag{
  position:absolute;
  bottom: -16px;
  right: -16px;
  background: linear-gradient(135deg, var(--yellow), #FFE1A8);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--ink);
}

/* Tilt effect (JS sets --rx/--ry via mousemove) */
.tilt-card{
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .15s ease-out;
}
.about-facts{
  display:flex;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.fact{ display:flex; flex-direction:column; }
.fact-number{
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight:700;
  color: var(--red);
  display: inline-block;
}
.fact-label{
  font-size: .85rem;
  color: var(--ink-soft);
}

@media (max-width: 820px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   EXPERIENCE — TIMELINE
=========================================================== */
.timeline{
  position: relative;
  padding-left: 40px;
  border-left: 3px dashed var(--indigo);
}
.timeline-item{
  display:flex;
  gap: 20px;
  margin-bottom: 48px;
  position: relative;
}
.timeline-item::before{
  content:"";
  position:absolute;
  left: -50px;
  top: 6px;
  width: 16px; height:16px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.timeline-item:hover::before{
  transform: scale(1.3);
  background: var(--red);
}
.timeline-logo{
  transition: transform .3s ease;
}
.timeline-item:hover .timeline-logo{
  transform: rotate(-6deg) scale(1.05);
}
.timeline-logo{
  flex-shrink:0;
  width: 56px; height:56px;
  border-radius: var(--radius-sm);
  overflow:hidden;
  border: 2px solid var(--ink);
  background: var(--white);
}
.timeline-logo img{ width:100%; height:100%; object-fit:contain; }
.timeline-date{
  font-size: .85rem;
  color: var(--red);
  font-weight:600;
}
.timeline-content h3{ margin: 4px 0 2px; font-size:1.15rem; }
.timeline-org{ color: var(--ink-soft); font-weight:600; margin: 0 0 8px; }

/* ===========================================================
   PROJECTS
=========================================================== */
.project-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.project-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.project-card-sketch{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
  overflow: visible;
}
.project-card-sketch rect{
  fill:none;
  stroke: var(--ink);
  stroke-width:3;
  vector-effect: non-scaling-stroke;
}
.project-card-inner-content{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.project-card.is-sketched .project-card-inner-content{
  opacity: 1;
  transform: translateY(0);
}
.project-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.project-thumb{
  aspect-ratio: 16/10;
  background: var(--bg-soft);
  overflow:hidden;
  position: relative;
}
.project-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.project-card:hover .project-thumb img{ transform: scale(1.08); }
.project-number{
  position:absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.project-body{ padding: 22px; }
.project-body h3{ font-size: 1.2rem; margin-bottom: 8px; }
.project-body p{ color: var(--ink-soft); font-size: .95rem; }
.project-tags{ display:flex; gap:8px; flex-wrap:wrap; margin: 14px 0; }
.project-tags span{
  font-size: .75rem;
  font-weight:600;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1.5px solid var(--ink);
}
.project-link{
  font-weight:600;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project-link .arrow{
  display:inline-block;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.project-link:hover .arrow{ transform: translateX(5px); }

@media (max-width: 720px){
  .project-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   CERTIFICATES — pita berjalan otomatis (marquee), tap kartu untuk flip detail
=========================================================== */
.cert-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cert-track{
  display: flex;
  gap: 20px;
  width: max-content;
  animation: certMarquee 22s linear infinite;
}
.cert-track.is-paused{
  animation-play-state: paused;
}
@keyframes certMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); } /* kartu diduplikasi 2x, jadi setengah track = satu putaran penuh */
}
@media (prefers-reduced-motion: reduce){
  .cert-track{ animation: none; }
}

.cert-card{
  perspective: 1200px;
  flex: 0 0 260px;
  width: 260px;
}
@media (max-width: 520px){
  .cert-card{ flex-basis: 200px; width: 200px; }
}
.cert-card-inner{
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.cert-card.is-flipped .cert-card-inner{
  transform: rotateY(180deg);
}
.cert-face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.cert-front{
  background: var(--white);
  padding: 12px;
  display:flex;
  flex-direction:column;
}
.cert-front img{
  width:100%;
  flex: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  pointer-events:none;
  -webkit-user-drag: none;
}
.cert-flip-hint{
  display:block;
  text-align:center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
}
.cert-back{
  background: linear-gradient(135deg, var(--indigo), var(--mint));
  transform: rotateY(180deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 20px;
  gap: 8px;
}
.cert-back-title{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin:0;
}
.cert-back-desc{
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  opacity: .8;
  margin:0;
}
@media (prefers-reduced-motion: reduce){
  .cert-card-inner{ transition: none; }
}

/* ===========================================================
   GALLERY — masonry-ish grid
=========================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-item{
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 3px solid var(--ink);
  aspect-ratio: 1/1;
}
.gallery-item img,
.gallery-item video{
  width:100%; height:100%; object-fit:cover;
  transition: transform .3s ease;
}
.gallery-item:hover img,
.gallery-item:hover video{ transform: scale(1.08); }

/* Rotasi acak "polaroid" per kartu — dipisah dari transform reveal di bawah */
.gallery-item:nth-child(3n+1){ --tilt: -1.5deg; }
.gallery-item:nth-child(3n+2){ --tilt: 1.5deg; }
.gallery-item:nth-child(3n+3){ --tilt: -1deg; }

/* Reveal masuk satu-satu (staggered), foto seolah "dijatuhkan" ke tempatnya */
.gallery-reveal{
  --tilt: 0deg;
  opacity: 0;
  transform: translateY(36px) scale(.9) rotate(0deg);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
.gallery-reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--tilt));
}
.gallery-reveal.is-visible:hover{
  transform: translateY(-4px) scale(1) rotate(var(--tilt));
}

@media (max-width: 720px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   CONTACT
=========================================================== */
.contact-box{
  background: linear-gradient(135deg, var(--indigo) 0%, #6FA8D8 60%, var(--mint) 130%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 72px 40px;
  text-align:center;
  position: relative;
  overflow: hidden;
}
.contact-deco{
  position:absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: min(14vw, 130px);
  font-weight: 700;
  color: var(--white);
  opacity: .06;
  white-space: nowrap;
  pointer-events:none;
}
.section-heading.reveal .eyebrow-tag,
.contact-box .eyebrow-tag{ position: relative; z-index: 1; }
.contact-box h2{
  font-size: clamp(1.6rem,2.8vw,2.2rem);
  line-height: 1.35;
  margin-bottom: 32px;
  max-width: 22ch;
  margin-left:auto; margin-right:auto;
  position: relative; z-index: 1;
  font-weight: 700;
}
.contact-links{
  display:flex;
  justify-content:center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.contact-pill{
  background: var(--white);
  color: var(--ink);
  font-weight:600;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.contact-pill:hover{
  transform: translateY(-4px);
  box-shadow: 4px 4px 0 var(--yellow);
}

/* ===========================================================
   FOOTER
=========================================================== */
.footer{
  text-align:center;
  padding: 24px;
  color: var(--ink-soft);
  font-size: .85rem;
}
.contact .footer{
  margin-top: 32px;
  padding: 16px 24px 8px;
  color: rgba(255,255,255,.65);
  font-size: .78rem;
}

/* ===========================================================
   PRELOADER — よこそ typing effect
=========================================================== */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hero-gradient);
  transition: opacity .8s ease, visibility .8s ease;
  overflow: hidden;
}
#preloader.preloader-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.preloader-jp{
  font-family: "Zen Maru Gothic", var(--font-display);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .12em;
  min-height: 1.3em;
  display: inline-block;
}
.preloader-jp .char{
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px) scale(.85);
  animation: preloader-char-in .55s cubic-bezier(.22,1,.36,1) forwards;
  background: linear-gradient(180deg, var(--char-color-a), var(--char-color-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px color-mix(in srgb, var(--char-color-a) 35%, transparent);
}
.preloader-jp .char:nth-child(1){ --char-color-a: var(--red); --char-color-b: #FF6F91; }
.preloader-jp .char:nth-child(2){ --char-color-a: var(--yellow); --char-color-b: #FFB347; }
.preloader-jp .char:nth-child(3){ --char-color-a: var(--mint); --char-color-b: #5FD1AE; }
.preloader-jp .char:nth-child(4){ --char-color-a: var(--indigo); --char-color-b: #3E7FC1; }
@keyframes preloader-char-in{
  to{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
.preloader-glow{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.preloader-glow::before,
.preloader-glow::after{
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  animation: preloader-float 6s ease-in-out infinite alternate;
}
.preloader-glow::before{
  top: -12vmax;
  left: -10vmax;
  background: radial-gradient(circle, var(--red), transparent 70%);
}
.preloader-glow::after{
  bottom: -14vmax;
  right: -10vmax;
  background: radial-gradient(circle, var(--indigo), transparent 70%);
  animation-delay: 1.5s;
}
@keyframes preloader-float{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(3vmax,-2vmax) scale(1.08); }
}
.preloader-romaji{
  font-family: var(--font-body);
  font-size: clamp(.72rem, 2vw, .88rem);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .8s ease .4s;
}
.preloader-romaji.is-visible{
  opacity: .75;
}
body.preloader-active{
  overflow: hidden;
}

/* ===========================================================
   GALLERY VIDEO — interaktif (overlay, progress, zoom)
=========================================================== */
.gallery-item{
  position: relative;
  cursor: pointer;
}
.gallery-play-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%);
  opacity: 0;
  transition: opacity .25s ease;
}
.gallery-play-overlay svg{
  width: 44px;
  height: 44px;
  color: var(--white);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transform: scale(.85);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover .gallery-play-overlay,
.gallery-item:active .gallery-play-overlay{
  opacity: 1;
}
.gallery-item:hover .gallery-play-overlay svg,
.gallery-item:active .gallery-play-overlay svg{
  transform: scale(1);
}
.gallery-item:hover .gallery-video{
  transform: scale(1.08);
}
.gallery-progress{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
  z-index: 2;
}
.gallery-progress-bar{
  height: 100%;
  width: 0%;
  background: var(--white);
  border-radius: 999px;
}

/* ===========================================================
   VIDEO LIGHTBOX — fullscreen, swipe/nav antar video
=========================================================== */
.video-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.video-lightbox.is-open{
  display: flex;
}
.video-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 28, .92);
  backdrop-filter: blur(6px);
}
.video-lightbox-stage{
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-video{
  width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close,
.lightbox-nav{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: var(--white);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{
  background: rgba(255,255,255,.24);
  transform: scale(1.06);
}
.lightbox-close svg,
.lightbox-nav svg{ width: 20px; height: 20px; }
.lightbox-close{
  top: -52px;
  right: 0;
}
.lightbox-prev{ left: -56px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: -56px; top: 50%; transform: translateY(-50%); }
.lightbox-dots{
  display: flex;
  gap: 8px;
}
.lightbox-dots .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background .2s ease, transform .2s ease;
}
.lightbox-dots .dot.is-active{
  background: var(--white);
  transform: scale(1.2);
}

@media (max-width: 640px){
  .lightbox-prev{ left: 4px; }
  .lightbox-next{ right: 4px; }
  .lightbox-close{ top: -46px; }
}

/* ===========================================================
   REVEAL VARIANTS — transisi unik per section
=========================================================== */
.about .reveal{
  transform: translateX(-28px);
}
.about .reveal.is-visible{
  transform: translateX(0);
}

.experience .timeline-item.reveal{
  transform: translateX(28px);
}
.experience .timeline-item.reveal.is-visible{
  transform: translateX(0);
}

.projects .project-card.reveal{
  transform: scale(.92);
}
.projects .project-card.reveal.is-visible{
  transform: scale(1);
}

.gallery .gallery-reveal{
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: clip-path .7s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.gallery .gallery-reveal.is-visible{
  clip-path: inset(0 0 0% 0);
}

.contact .reveal{
  transform: translateY(16px) scale(.97);
}
.contact .reveal.is-visible{
  transform: translateY(0) scale(1);
}

/* ===========================================================
   PARALLAX HALUS — foto & blob bergerak beda kecepatan
=========================================================== */
.hero-photo-wrap,
.intro-photo-frame,
.about-photo{
  will-change: transform;
}

/* ===========================================================
   SWIPE CONTAINER — full-screen slide per section
=========================================================== */
.swipe-container{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100svh;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.swipe-slide{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.intro.swipe-slide{
  padding-top: 70px;
}
.hero.swipe-slide,
.about.swipe-slide,
.experience.swipe-slide,
.projects.swipe-slide,
.certificates.swipe-slide,
.gallery.swipe-slide{
  padding-top: 90px;
  padding-bottom: 40px;
}
footer.swipe-slide{
  align-items: center;
  text-align: center;
}

.swipe-dots{
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.swipe-dots .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  transition: background .2s ease, transform .2s ease, height .2s ease;
  cursor: pointer;
}
.swipe-dots .dot.is-active{
  background: var(--indigo);
  height: 22px;
  border-radius: 999px;
}

.swipe-hint{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  color: var(--white);
  font-size: .78rem;
  opacity: .9;
  transition: opacity .4s ease;
  pointer-events: none;
}
.swipe-hint.is-hidden{
  opacity: 0;
}
.swipe-hint-icon{
  width: 14px;
  height: 14px;
  border: 2px solid var(--white);
  border-left: none;
  border-bottom: none;
  transform: rotate(135deg);
  display: inline-block;
  animation: swipeHintBounce 1.4s ease-in-out infinite;
}
@keyframes swipeHintBounce{
  0%, 100%{ transform: rotate(135deg) translate(0,0); }
  50%{ transform: rotate(135deg) translate(-3px,3px); }
}

@media (prefers-reduced-motion: reduce){
  .swipe-container{ scroll-snap-type: none; }
  .swipe-slide{ scroll-snap-align: none; min-height: auto; }
}