/* tpl-soft.css — LAPISAN BAWAAN ("soft").
   Karakter: simetris, section bertumpuk, tenang. Geraknya paling sedikit dari keenam
   lapisan — hanya masuk pelan tanpa pantulan (lihat blok "gerak" di bawah).
   Aman untuk pasangan yang ingin tampilan klasik bersih.
   Nyaris semua tampilan sudah ada di invitation.css; berkas ini hanya menguatkan
   kesan lembut (sudut membulat, bayangan halus) tanpa mengubah tata letak. */

.inv.tpl-soft .sec--quote{background:color-mix(in srgb,var(--secondary) 30%,var(--background))}
.inv.tpl-soft .cover__names{font-weight:600}
.inv.tpl-soft .hero__names{font-weight:600}
.inv.tpl-soft .event,
.inv.tpl-soft .gift{border-radius:var(--radius)}
.inv.tpl-soft .count__unit{border-radius:calc(var(--radius) - 2px)}
.inv.tpl-soft .cover__inner{padding-top:2.5rem;padding-bottom:2.5rem}
.inv.tpl-soft .couple__amp{margin:0 auto}

/* ---------- gerak ----------
   Paling tenang dari keenam lapisan: masuk pelan, tanpa pantulan, tanpa gerak
   yang berjalan terus-menerus. Gerak saat menggulir ditangani invitation.js
   (lapisan `soft` = 18px/620ms, paling kecil dari semua). */
.inv.tpl-soft .cover__inner > *{animation:softMasuk .85s cubic-bezier(.2,.8,.2,1) both}
.inv.tpl-soft .cover__inner > :nth-child(2){animation-delay:.12s}
.inv.tpl-soft .cover__inner > :nth-child(3){animation-delay:.22s}
.inv.tpl-soft .cover__inner > :nth-child(4){animation-delay:.32s}
.inv.tpl-soft .cover__inner > :nth-child(5){animation-delay:.42s}
@keyframes softMasuk{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- scroll-driven gradient & silhouette ----------
   Warm breath gradient: subtle warm/cool shift on scroll (--soft-breath 0-1).
   Soft organic mist blobs: fade in/out like morning mist (--soft-mist-opacity 0-1).
   Uses ::before on .inv for gradient overlay, ::after on .sec for mist blobs. */
@media (prefers-reduced-motion: no-preference) {
  .inv.tpl-soft::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%,
        color-mix(in oklab, var(--primary) 15%, transparent) calc(var(--soft-breath, 0) * 40%),
        transparent 60%),
      radial-gradient(ellipse 60% 40% at 50% 100%,
        color-mix(in oklab, var(--secondary) 12%, transparent) calc(var(--soft-breath, 0) * 35%),
        transparent 55%);
    opacity: var(--soft-breath, 0);
    transition: opacity 0.6s ease-out;
  }

  .inv.tpl-soft .sec::after {
    content: "";
    position: absolute;
    inset: -20% -10%;
    pointer-events: none;
    z-index: -1;
    background-image:
      radial-gradient(ellipse 30% 20% at 15% 30%, currentColor, transparent),
      radial-gradient(ellipse 25% 18% at 85% 70%, currentColor, transparent),
      radial-gradient(ellipse 20% 15% at 50% 50%, currentColor, transparent);
    color: color-mix(in oklab, var(--foreground) 8%, transparent);
    opacity: var(--soft-mist-opacity, 0);
    animation: softMistDrift 20s linear infinite;
  }

  @keyframes softMistDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-2%, 3%) scale(1.05); }
  }
}