/* ============================================================================
   OVERDREAM — Wedding Tools | wt-motion.css
   Lapisan animasi mikro untuk tombol CTA. Tidak mengubah desain dasar:
   tanpa perubahan layout, palet, tipografi, ukuran, radius, atau bayangan statis.
   Semua gerak memakai transform / opacity / pseudo-element.

   Target (selektor nyata di properti):
     .btn, .btn-primary, .btn-copper      -> app.overdream.id/trial/, /thank-you/
     .wtw-go                              -> wizard trial (di-inject wt-trial-wizard.js)
     .cta, .hero-cta, a[data-wt-open]     -> weddingtools.online/ dan /bride/

   Pasang: <link rel="stylesheet" href="/assets/wt-motion.css">
   Opsional: <script src="/assets/wt-motion.js" defer></script>  (untuk ripple + sheen idle)
   Tanpa JS: hover sheen + tekan + focus tetap bekerja; idle sheen mati (aman & hemat).
   ========================================================================== */

:root{
  --wt-ease: cubic-bezier(.22,.61,.36,1);
  --wt-copper: #C89F7E;
  --wt-offwhite: #F6F6F6;
  --wt-lift: -1px;
}

/* --- 1. Target set -------------------------------------------------------- */
/* Selektor sengaja ganda (.btn.btn / .wtw-go.wtw-go = spesifisitas 0,2,0).
   Alasan: wt-trial-wizard.js menyuntik <style> ke document.head SAAT RUNTIME,
   jadi aturannya berada SETELAH stylesheet ini. Dengan spesifisitas 0,1,0 biasa,
   '.wtw-go{transition:background .2s,color .2s}' milik wizard akan menimpa
   transisi kita dan transform jadi berkedip tanpa easing. */
.btn.btn,
.wtw-go.wtw-go,
.cta.cta,
.hero-cta.hero-cta,
a[data-wt-open][data-wt-open]{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 260ms var(--wt-ease),
    box-shadow 320ms var(--wt-ease),
    background-color 240ms var(--wt-ease),
    color 240ms var(--wt-ease);
}

/* --- 2. Lapisan sheen copper --------------------------------------------- */
.btn::after,
.wtw-go::after,
.cta::after,
.hero-cta::after,
a[data-wt-open]::after{
  content: "";
  position: absolute;
  inset: -2px -40%;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transform: translate3d(-120%, 0, 0);
  background: linear-gradient(104deg,
    rgba(200, 159, 126, 0)    38%,
    rgba(200, 159, 126, .18)  45%,
    rgba(246, 246, 246, .16)  50%,
    rgba(200, 159, 126, .18)  55%,
    rgba(200, 159, 126, 0)    62%);
}

/* Idle: satu lintasan tipis tiap ~6 detik. Diberi kelas oleh JS pada SATU
   tombol yang sedang terlihat saja (lihat wt-motion.js). */
@media (prefers-reduced-motion: no-preference){
  .wt-sheen-on::after{
    animation: wt-sheen-idle 6s var(--wt-ease) infinite;
  }
}

@keyframes wt-sheen-idle{
  0%   { transform: translate3d(-120%, 0, 0); opacity: 0; }
  1%   { opacity: 1; }
  13%  { transform: translate3d(120%, 0, 0);  opacity: 1; }
  15%  { opacity: 0; }
  100% { transform: translate3d(120%, 0, 0);  opacity: 0; }
}

/* --- 3. Hover: naik 1px + sheen lebih cepat + pendaran copper -------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .btn:hover,
  .wtw-go:hover:not([disabled]),
  .cta:hover,
  .hero-cta:hover,
  a[data-wt-open]:hover{
    transform: translate3d(0, var(--wt-lift), 0);
    box-shadow:
      0 6px 18px -8px rgba(200, 159, 126, .55),
      0 0 0 1px rgba(200, 159, 126, .22);
  }

  /* Sheen sekali lintas, lebih cepat dari idle */
  .btn:hover::after,
  .wtw-go:hover:not([disabled])::after,
  .cta:hover::after,
  .hero-cta:hover::after,
  a[data-wt-open]:hover::after{
    animation: wt-sheen-hover 720ms var(--wt-ease);
  }
}

@keyframes wt-sheen-hover{
  0%   { transform: translate3d(-120%, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(120%, 0, 0);  opacity: 0; }
}

/* --- 4. Active / klik: tekan 1px ----------------------------------------- */
.btn:active,
.wtw-go:active:not([disabled]),
.cta:active,
.hero-cta:active,
a[data-wt-open]:active{
  transform: scale(.99);
  transition-duration: 180ms;
}

@media (prefers-reduced-motion: no-preference){
  .btn:active,
  .wtw-go:active:not([disabled]),
  .cta:active,
  .hero-cta:active,
  a[data-wt-open]:active{
    box-shadow: 0 2px 8px -6px rgba(200, 159, 126, .45);
  }
}

/* --- 5. Ripple copper dari titik klik ------------------------------------ */
/* Span ini disuntik oleh wt-motion.js, bukan oleh HTML halaman. */
.wt-ripple{
  position: absolute;
  left: var(--wt-rx, 50%);
  top: var(--wt-ry, 50%);
  width: var(--wt-rs, 140px);
  height: var(--wt-rs, 140px);
  margin-left: calc(var(--wt-rs, 140px) / -2);
  margin-top: calc(var(--wt-rs, 140px) / -2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: .9;
  transform: scale(0);
  background: radial-gradient(circle,
    rgba(200, 159, 126, .40) 0%,
    rgba(200, 159, 126, .16) 55%,
    rgba(200, 159, 126, 0)   72%);
  animation: wt-ripple 420ms var(--wt-ease) forwards;
}

@keyframes wt-ripple{
  to { transform: scale(2.2); opacity: 0; }
}

/* --- 6. Focus keyboard: cincin copper 2px -------------------------------- */
.btn:focus-visible,
.wtw-go:focus-visible,
.cta:focus-visible,
.hero-cta:focus-visible,
a[data-wt-open]:focus-visible{
  outline: 2px solid var(--wt-copper);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(200, 159, 126, .30);
}

/* Fallback browser lama tanpa :focus-visible — tetap dapat cincin saat fokus
   keyboard, tapi tidak muncul saat klik mouse. */
@supports not selector(:focus-visible){
  .btn:focus,
  .wtw-go:focus,
  .cta:focus,
  .hero-cta:focus,
  a[data-wt-open]:focus{
    outline: 2px solid var(--wt-copper);
    outline-offset: 2px;
  }
}

/* --- 7. prefers-reduced-motion: reduce ----------------------------------- */
/* Semua gerak dimatikan. Yang tersisa hanya transisi warna 120ms. */
@media (prefers-reduced-motion: reduce){
  .btn,
  .wtw-go,
  .cta,
  .hero-cta,
  a[data-wt-open]{
    transition:
      background-color 120ms linear,
      color 120ms linear,
      border-color 120ms linear,
      box-shadow 120ms linear !important;
    transform: none !important;
    animation: none !important;
  }

  .btn::after,
  .wtw-go::after,
  .cta::after,
  .hero-cta::after,
  a[data-wt-open]::after{
    content: none !important;
    animation: none !important;
  }

  .btn:hover,
  .wtw-go:hover,
  .cta:hover,
  .hero-cta:hover,
  a[data-wt-open]:hover,
  .btn:active,
  .wtw-go:active,
  .cta:active,
  .hero-cta:active,
  a[data-wt-open]:active{
    transform: none !important;
    box-shadow: none !important;
  }

  .wt-ripple{
    display: none !important;
    animation: none !important;
  }
}