/* Contoh hero geser (pratinjau threejs saja) — konsep Owner 1 Nov 2026:
   hero menjadi animasi geser kontinu yang menampilkan SEMUA karya di
   BELAKANG logo & judul; teks hero di TENGAH; aset vektor Pinkle tampil
   juga sebagai elemen overlay ngambang di tepi hero.
   Menggantikan .hero-kolase putaran sebelumnya. */

/* Lapisan teks di atas segalanya; lajur geser di atas kanvas three.js */
.hero{ padding:104px 0 112px; }
.hero > .wadah{ z-index:3; }
.hero-geser{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:center; gap:196px;
  padding:24px 0;
  pointer-events:none;
}
/* Tabir pasir: tengah hero lembut terang agar teks selalu terbaca,
   tepi membiarkan kartu-kartu karya tetap terlihat jelas. */
.hero-geser::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 64% 60% at 50% 47%,
    rgba(247,240,225,.95) 0%, rgba(247,240,225,.80) 52%,
    rgba(247,240,225,.45) 78%, rgba(247,240,225,.36) 100%);
}
.geser-baris{ overflow:hidden; }
.geser-lajur{
  display:flex; width:max-content;
  animation:geserKiri 58s linear infinite;
}
.lajur-kanan{ animation:geserKanan 76s linear infinite; }
@keyframes geserKiri{ to{ transform:translateX(-50%); } }
@keyframes geserKanan{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.hero:hover .geser-lajur{ animation-play-state:paused; }

.geser-grup{ display:flex; gap:22px; padding-right:22px; align-items:center; }
.geser-kartu{
  flex:none; height:196px; margin:0; padding:7px; box-sizing:border-box;
  background:var(--kertas); border:1px solid var(--garis);
  border-radius:6px 16px 6px 16px;
  box-shadow:0 16px 32px rgba(59,46,31,.20);
}
.geser-grup .geser-kartu:nth-child(odd){ transform:rotate(-1.6deg); }
.geser-grup .geser-kartu:nth-child(even){ transform:rotate(1.4deg); }
.geser-kartu img{
  display:block; height:100%; width:auto;
  border-radius:3px 10px 3px 10px;
}

/* Overlay ngambang: ikon vektor tunggal Pinkle di tepi hero */
.hero-ngambang{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.ngambang{
  position:absolute; height:auto;
  filter:drop-shadow(0 10px 14px rgba(59,46,31,.25));
  animation:apung 7s ease-in-out infinite alternate;
}
.ng-1{ left:3.2%; top:43%; width:68px; }
.ng-2{ right:3.4%; top:38%; width:60px; animation-delay:-2.5s; }
.ng-3{ left:11%; bottom:5%; width:56px; animation-delay:-4.5s; }
.ng-4{ right:11%; bottom:5%; width:62px; animation-delay:-1.2s; }
@keyframes apung{
  from{ transform:translateY(-9px) rotate(-4deg); }
  to{ transform:translateY(11px) rotate(4deg); }
}

/* Teks hero di tengah + cahaya pasir lembut di belakang judul */
.hero-grid.hero-tengah{ display:block; }
.hero-tengah .hero-teks{
  position:relative; isolation:isolate;
  max-width:780px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.hero-tengah .hero-teks::before{
  content:''; position:absolute; inset:-46px -80px; z-index:-1;
  background:radial-gradient(ellipse at center,
    rgba(250,243,228,.78) 0%, rgba(250,243,228,0) 70%);
}
.hero-tengah .hero-simbol{ margin-inline:auto; }
.hero-tengah .tagline{ justify-content:center; }
.hero-tengah .hero-kalimat{ margin-inline:auto; }
.hero-tengah .hero-aksi{ justify-content:center; }

@media (max-width: 700px){
  .hero{ padding:84px 0 92px; }
  .geser-kartu{ height:124px; padding:5px; }
  .ngambang{ width:44px; }
  .ng-1{ left:3%; top:10%; }
  .ng-2{ right:3%; top:9%; }
  .ng-3{ left:4%; bottom:8%; }
  .ng-4{ right:4%; bottom:10%; }
}

@media (prefers-reduced-motion: reduce){
  .geser-lajur{ animation:none; }
  .ngambang{ animation:none; }
}