/* ==================================================
   HERO SECTION (MOBILE FIRST)
================================================== */
body {
  background-color: #0f1a1a; /* dark neutral */
}
.hero {
  height: 100svh;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  padding: 90px 24px;
}

/* BACKGROUND LAYER */
.hero-bg {
  position: fixed;
  inset: 0;

  background-image: url("../asset/image/bg-1.jpg");
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;

  z-index: -1;
  opacity: 1;

  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}
/* KEN BURNS */
@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.04);
  }
}

.hero-overlay {
  position: fixed;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(10, 20, 20, 0.55),
    rgba(10, 20, 20, 0.65)
  );

  z-index: -2;
  pointer-events: none;
}


/* BACKGROUND LAYER (STABIL MOBILE) */
.hero::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image: var(--hero-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 140%;

  z-index: -1;
  opacity: 0;

  transition: opacity 1.4s ease-in-out;
  will-change: transform, opacity;
}

@keyframes kb-in {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

@keyframes kb-out {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@keyframes kb-pan {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.08) translate(-2%, -1%); }
}



/* FADE OUT SAAT GANTI FOTO */
.hero.fade-out .hero-bg {
  opacity: 0;
}

/* CONTENT */
.hero-inner {
  max-width: 1280px;
  margin: auto;
  padding-left: 8px;
}

.hero-content {
  max-width: 100%;
}

.hero-content h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white-soft);
  margin-bottom: 22px;
  letter-spacing: -0.5px;
  text-align: left;
}

.hero-content p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-soft);
  font-family: "Poppins", serif;
}

@keyframes kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-2%, -2%);
  }
}