/* assets/css/microfx.css
   Lightweight micro-interactions:
   - Scribble underline draws when element enters viewport
   - Button hover glow follows cursor
*/

/* ===== Scribble underline ===== */
.fx-scribble-target{
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.fx-scribble-text{
  position: relative;
  z-index: 1;
}

.fx-scribble-svg{
  position: absolute;
  left: 0;
  bottom: -0.22em;
  width: 100%;
  height: 0.7em;
  z-index: 0;
  pointer-events: none;
}

.fx-scribble-path{
  fill: none;
  stroke: var(--color-primary, #ff6a00);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* ✅ bikin warna lebih kalem */
  opacity: 0.55;

  /* animated by changing stroke-dashoffset in JS */
  transition: stroke-dashoffset 1.05s cubic-bezier(.2,.9,.2,1);
  will-change: stroke-dashoffset;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .fx-scribble-path{ transition: none; }
}

/* ===== Button hover glow (cursor-aware) ===== */
.btn-fx{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-fx::before{
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;

  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.34),
    rgba(255,255,255,0) 55%
  );

  transform: scale(.7);
  opacity: 0;
  transition: opacity .2s ease, transform .35s cubic-bezier(.2,.9,.2,1);
}

.btn-fx:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(11, 29, 57, .12);
}

.btn-fx:hover::before{
  opacity: 1;
  transform: scale(1.05);
}

@media (hover: none){
  .btn-fx::before{ display:none; }
  .btn-fx:hover{ transform:none; box-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  .btn-fx, .btn-fx::before{ transition:none; }
}