/* Custom Vanilla CSS for Organic Editorial aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Manrope:wght@200..800&display=swap');

:root {
  --color-canvas: #F7F4EB;
  --color-forest: #1A362D;
  --color-terracotta: #D35D47;
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--color-canvas);
  color: var(--color-forest);
  position: relative;
  cursor: none; /* Sembunyikan cursor default untuk custom cursor */
}

/* Grain/Noise Texture Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.6;
}

h1, h2, h3, h4, h5, h6, .font-fraunces {
  font-family: 'Fraunces', serif;
}

/* =====================================
   CUSTOM CURSOR
   ===================================== */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

.cursor.is-hovering {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}

/* Kembalikan cursor default untuk elemen interaktif spesifik */
a, button, [role="button"] {
  cursor: none;
}

/* =====================================
   GSAP ANIMATION UTILITIES
   ===================================== */

/* Sembunyikan elemen sebelum GSAP siap untuk mencegah FOUC */
.gsap-reveal,
.gsap-hero-item {
  visibility: hidden;
}

/* =====================================
   PAGE TRANSITION OVERLAY
   ===================================== */

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-forest);
  z-index: 10000;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

/* =====================================
   NAVBAR SCROLL STATE
   ===================================== */

#main-nav {
  transition: padding-top 0.4s ease, padding-bottom 0.4s ease,
              background-color 0.4s ease, box-shadow 0.4s ease;
}

#main-nav.scrolled {
  background-color: rgba(247, 244, 235, 0.97);
  box-shadow: 0 4px 30px rgba(26, 54, 45, 0.08);
}

/* =====================================
   HOVER EFFECTS — TANPA KONFLIK
   ===================================== */

/*
  Perbaikan konflik: hover-zoom-img dan hover-lift tidak boleh
  di-apply ke elemen yang sama. Hover lift hanya untuk wrapper luar,
  hover zoom hanya untuk kontainer gambar.
  Transformasi digabung via custom property untuk menghindari override.
*/

.hover-zoom-img {
  overflow: hidden;
  --img-scale: 1;
}

.hover-zoom-img img {
  transform: scale(var(--img-scale));
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.hover-zoom-img:hover {
  --img-scale: 1.06;
}

/* Card wrapper lift — diapply ke parent card, BUKAN wrapper gambar */
.card-hover {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(26, 54, 45, 0.12);
}

/* Button hover lift yang lebih subtle */
.btn-hover {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(211, 93, 71, 0.25);
}