/* ============================================================
   fx-hero.css — lapisan "hidup" untuk hero beranda.
   Dimuat SETELAH style.css. Prinsip koridor "Tenang":
   - hanya transform & opacity yang bergerak,
   - aksen coral hemat, tanpa orbs/glow besar, tanpa gradient norak,
   - semua gerak cepat & jarang; yang infinite dibuat nyaris
     tak terasa.
   Efek di file ini (3):
   1. Underline coral di bawah kata "apa?" yang MENGGAMBAR
      DIRINYA SENDIRI setelah headline selesai muncul, lalu
      sesekali (tiap ~9 dtk) ada kilau redup yang melintas —
      seperti pulpen yang menegaskan ulang.
   2. Search box: saat fokus, ring coral tipis mekar + ikon
      kaca pembesar menyentak kecil (spring), caret coral.
   3. Latar hero: garis hairline horizontal yang melayang
      sangat pelan (loop mulus 26 dtk), nyaris tak terlihat.
   ============================================================ */

/* ---------- 1. underline yang menulis sendiri ---------- */
.hero h1 .w { position: relative; }

.hero h1 .w:last-child::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--acc, #ff7a59) 0%,
    var(--acc, #ff7a59) 52%,
    rgba(255, 255, 255, 0.9) 60%,
    var(--acc, #ff7a59) 68%,
    var(--acc, #ff7a59) 100%
  );
  background-size: 230% 100%;
  background-position: 115% 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation:
    ul-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards,
    ul-sheen 9s ease-in-out 2.6s infinite;
}

@keyframes ul-draw {
  to { transform: scaleX(1); }
}

/* kilau melintas di garis: 72% siklus diam, lalu lewat pelan */
@keyframes ul-sheen {
  0%, 70% { background-position: 115% 0; }
  92%, 100% { background-position: -115% 0; }
}

/* ---------- 2. search: ring mekar + glyph bereaksi ---------- */
.hsearch {
  transition: border-color 0.2s, box-shadow 0.35s ease;
}

.hsearch:focus-within {
  box-shadow: 0 0 0 4px rgba(255, 122, 89, 0.12);
}

.hsearch input {
  caret-color: var(--acc, #ff7a59);
}

.hsearch:focus-within .glyph {
  animation: glyph-nudge 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes glyph-nudge {
  30% { transform: translateY(-50%) translateX(4px) scale(1.14); }
  60% { transform: translateY(-50%) translateX(-1px) scale(0.97); }
}

/* ---------- 3. hairline latar yang melayang pelan ---------- */
.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -12px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 46px,
    rgba(255, 255, 255, 0.032) 46px 47px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  animation: hair-drift 26s linear infinite;
}

/* garis tetap di belakang konten */
.hero > * {
  position: relative;
  z-index: 1;
}

/* 47px = tepat satu periode pola → loop mulus tanpa lompat */
@keyframes hair-drift {
  to { transform: translateY(47px); }
}

/* ---------- hormati yang tidak suka gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero h1 .w:last-child::after,
  .hsearch .glyph {
    animation: none !important;
  }
  .hsearch {
    transition: none !important;
  }
  .hero h1 .w:last-child::after {
    transform: scaleX(1);
  }
  /* pastikan state akhir animasi style.css tetap tercapai */
  .hero h1 .mi,
  .hero .hi,
  .hero .hsearch {
    animation-duration: 0.01ms !important;
  }
}