/* gilandhome — hero pour-over ikut scroll. Warna mengikuti palet draf (krem, espresso, karamel). */
:root{--ghs-hdr:68px}

/* Panjang scroll hero: 1 layar penuh + 100vh untuk animasi */
.ghs-hero{height:calc(100svh - var(--ghs-hdr) + 100vh)}
.ghs-hero > div{position:sticky;top:var(--ghs-hdr);height:calc(100svh - var(--ghs-hdr))}

.ghs-slot{border:0 !important;background:transparent !important;overflow:hidden}
.ghs-svg{position:absolute;left:0;right:0;top:44px;bottom:34px;width:100%;height:calc(100% - 78px)}

.ghs-step{position:absolute;left:12px;right:12px;top:6px;display:flex;align-items:center;gap:10px;
  font-size:14px;line-height:1.35;color:#2B1D14;font-weight:600}
.ghs-step-no{flex:none;font-family:'DM Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.06em;
  background:#2B1D14;color:#F6F1E9;padding:4px 8px;border-radius:999px}
.ghs-read{position:absolute;left:12px;right:12px;bottom:4px;display:flex;justify-content:center;gap:14px;
  font-family:'DM Mono',monospace;font-size:12px;color:#6B5C50;letter-spacing:.02em}
.ghs-read span{white-space:nowrap}
.ghs-read .ghs-air,.ghs-read .ghs-time{color:#2B1D14;font-weight:500}
.ghs-hint{position:absolute;right:12px;top:40px;font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#96551C;transition:opacity .3s}

@media (min-width:900px){
  .ghs-step{font-size:16px;left:20px;right:20px;top:14px;justify-content:center}
  .ghs-svg{top:56px;bottom:44px;height:calc(100% - 100px)}
  .ghs-read{font-size:13px;bottom:12px}
  .ghs-hint{right:20px;top:auto;bottom:14px}
}

/* tetesan kopi jatuh terus selama fase menetes */
.ghs-drop{opacity:0}
.ghs-drops.on .ghs-drop{animation:ghs-drip .9s linear infinite}
.ghs-drops.on .ghs-drop:nth-child(2){animation-delay:.3s}
.ghs-drops.on .ghs-drop:nth-child(3){animation-delay:.6s}
@keyframes ghs-drip{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(96px);opacity:1}}

.ghs-wisp{animation:ghs-steam 2.6s ease-in-out infinite}
.ghs-wisp.w2{animation-delay:1.1s}
@keyframes ghs-steam{0%{transform:translateY(6px);opacity:0}40%{opacity:1}100%{transform:translateY(-10px);opacity:0}}

/* Pengguna yang mematikan animasi: hero normal, gambar langsung di kondisi akhir */
@media (prefers-reduced-motion:reduce){
  .ghs-hero{height:auto}
  .ghs-hero > div{position:relative;top:auto;height:auto}
  .ghs-hint{display:none}
  .ghs-wisp{animation:none}
}