/* ── Esra Kerajinan — Minimal Custom CSS ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* GSAP initial hidden states */
.gs-up { opacity: 0; transform: translateY(30px); }
.gs-scale { opacity: 0; transform: scale(0.92); }

/* Text gradient */
.text-gradient {
  background: linear-gradient(90deg, #7a5c3a, #a67c52 42%, #c4934a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Masonry gallery */
.masonry-gallery {
  column-count: 2; column-gap: 12px;
}
@media (min-width: 640px) { .masonry-gallery { column-count: 3; column-gap: 14px; } }
@media (min-width: 1024px) { .masonry-gallery { column-count: 4; column-gap: 16px; } }
.masonry-gallery .masonry-item {
  break-inside: avoid; margin-bottom: 12px; display: inline-block; width: 100%;
}
@media (min-width: 640px) { .masonry-gallery .masonry-item { margin-bottom: 14px; } }
@media (min-width: 1024px) { .masonry-gallery .masonry-item { margin-bottom: 16px; } }

/* Three.js canvas */
#three-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* Language toggle */
.lang-btn {
  cursor: pointer; transition: all .2s ease;
}
.lang-btn.active {
  background: #a67c52; color: #fff; border-color: #a67c52;
}