/* tpl-kabut.css — LAPISAN 6 ("kabut").
   Karakter: sunyi, monokrom, hampir tanpa hiasan. Garis rambut sebagai satu-satunya
   pemisah, sudut nyaris siku, tanpa bayangan, dan angka hitung mundur tampil telanjang
   tanpa kotak — tipografi yang mengerjakan seluruh pekerjaan.

   Prinsip yang dijaga:
   - Tidak ada ornamen sama sekali; kalau sesuatu bisa dihapus, dihapus.
   - Kontras tetap tinggi walau warnanya diredam (diuji otomatis di test/template.mjs). */

.inv.tpl-kabut{background:var(--background)}
.inv.tpl-kabut .orn,
.inv.tpl-kabut .orn-corner{display:none}

.inv.tpl-kabut .cover__inner{
  border:none;box-shadow:none;background:transparent;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2.6rem 1rem;max-width:30rem;
}
.inv.tpl-kabut .cover__names{font-weight:400;letter-spacing:.08em;font-size:clamp(1.9rem,6vw,2.6rem)}
.inv.tpl-kabut .cover__date{letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;color:var(--muted)}
.inv.tpl-kabut .cover__to{letter-spacing:.16em;font-size:.76rem}
.inv.tpl-kabut .cover__guestname{font-weight:500;letter-spacing:.06em}
.inv.tpl-kabut .eyebrow{letter-spacing:.34em;text-transform:uppercase;font-size:.68rem;color:var(--muted)}

/* bagian dipisah garis rambut, bukan jarak besar atau kartu */
.inv.tpl-kabut .sec{padding-block:clamp(2rem,6vw,3.6rem);text-align:left}
.inv.tpl-kabut .sec > *{max-width:min(46rem,100%)}
.inv.tpl-kabut .sec--quote,
.inv.tpl-kabut .sec--countdown{background:transparent;border-top:1px solid var(--line)}
.inv.tpl-kabut .sec--footer{border-top:1px solid var(--line)}
.inv.tpl-kabut .rule{background:var(--line);height:1px;width:3rem;margin:1rem 0}

/* mempelai: tanpa bingkai, foto siku dengan garis rambut */
.inv.tpl-kabut .couple__wrap{gap:2rem}
.inv.tpl-kabut .couple__photo{
  border-radius:0;box-shadow:none;border:1px solid var(--line);
  filter:grayscale(1) contrast(1.04);
}
.inv.tpl-kabut .couple__photo--empty{border:1px dashed var(--line)}
.inv.tpl-kabut .couple__amp{color:var(--muted);font-size:1.4rem;font-weight:300}
.inv.tpl-kabut .couple__name{font-weight:400;letter-spacing:.05em}
.inv.tpl-kabut .couple__nick{color:var(--muted)}

.inv.tpl-kabut .hero__photo{border-radius:0;box-shadow:none;border:1px solid var(--line);filter:grayscale(1) contrast(1.04)}
.inv.tpl-kabut .hero__names{font-weight:400;letter-spacing:.06em}
.inv.tpl-kabut .hero__date{letter-spacing:.3em;text-transform:uppercase;font-size:.7rem;color:var(--muted)}

/* acara: baris, bukan kartu — garis pemisah di antara acara */
.inv.tpl-kabut .events{gap:0}
.inv.tpl-kabut .event{
  border:none;box-shadow:none;background:transparent;border-radius:0;
  border-top:1px solid var(--line);padding:1.6rem 0;text-align:left;
}
.inv.tpl-kabut .event:last-child{border-bottom:1px solid var(--line)}
.inv.tpl-kabut .event__title{color:var(--text);letter-spacing:.18em;text-transform:uppercase;font-size:.82rem;font-weight:500}
.inv.tpl-kabut .event__when,.inv.tpl-kabut .event__place,.inv.tpl-kabut .event__addr{color:var(--muted)}

/* hitung mundur: angka telanjang, tanpa kotak — ciri paling khas lapisan ini */
.inv.tpl-kabut .count{gap:1.4rem;justify-content:flex-start}
.inv.tpl-kabut .count__unit{
  border:none;background:transparent;box-shadow:none;border-radius:0;padding:0;
}
.inv.tpl-kabut .count__num{
  font-family:var(--font-heading);font-weight:400;font-size:clamp(2.2rem,9vw,3.4rem);
  color:var(--text);line-height:1;
}
.inv.tpl-kabut .count__lbl{
  letter-spacing:.22em;text-transform:uppercase;font-size:.6rem;color:var(--muted);margin-top:.35rem;
}

/* galeri: kisi rapat tanpa celah, hitam putih sampai disentuh */
.inv.tpl-kabut .gallery__item{border-radius:0;overflow:hidden}
.inv.tpl-kabut .gallery__item img{border-radius:0;filter:grayscale(1)}
.inv.tpl-kabut .gallery__item:hover img{filter:grayscale(0)}
.inv.tpl-kabut .gallery__item:hover{transform:none}
.inv.tpl-kabut .lightbox__cap{background:rgba(0,0,0,.72);letter-spacing:.06em}

/* hadiah & ucapan: tanpa kartu, hanya garis pemisah */
.inv.tpl-kabut .gift{
  border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:none;border-radius:0;background:transparent;text-align:left;
}
.inv.tpl-kabut .gift__number{font-variant-numeric:tabular-nums;letter-spacing:.14em;font-weight:500}
.inv.tpl-kabut .gift__kind,.inv.tpl-kabut .gift__provider,.inv.tpl-kabut .gift__holder{color:var(--muted)}
.inv.tpl-kabut .wish{
  border:none;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  box-shadow:none;padding:1.1rem 0;
}
.inv.tpl-kabut .wish__name{color:var(--text);letter-spacing:.06em}
.inv.tpl-kabut .wish__meta{color:var(--muted);letter-spacing:.1em;font-size:.68rem;text-transform:uppercase}

.inv.tpl-kabut .btn{border-radius:0;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem}
.inv.tpl-kabut .btn--primary{background:var(--primary);color:var(--on-primary)}
.inv.tpl-kabut .btn--ghost{border-color:var(--line);color:var(--text)}
.inv.tpl-kabut .music__toggle{border-radius:0}

@media (min-width:900px){
  .inv.tpl-kabut .sec{text-align:left}
  .inv.tpl-kabut .sec--hero{grid-template-columns:1fr 1fr;align-items:center;text-align:left}
  .inv.tpl-kabut .hero__photo{margin-inline:0}
  .inv.tpl-kabut .couple__wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .inv.tpl-kabut .gallery__item img{filter:none}
}

/* ---------- gerak ----------
   Paling sedikit dari keenam lapisan, dan memang begitu maunya: tidak ada yang
   mengambang, berdenyut, atau diperbesar. Yang bergerak hanya dua hal — garis rambut
   yang tergores dari kiri (sesuai tata letak rata-kiri), dan teks yang naik 8px
   (paling kecil dari semua lapisan, dari invitation.js). Tanpa blur, tanpa skala. */
.inv.tpl-kabut .rule,
.inv.tpl-kabut .sec--quote,
.inv.tpl-kabut .sec--countdown,
.inv.tpl-kabut .event,
.inv.tpl-kabut .gift,
.inv.tpl-kabut .wish{transform-origin:0 50%}
.inv.tpl-kabut .rule{animation:kabutGores .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes kabutGores{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
.inv.tpl-kabut .cover__inner{animation:kabutMasuk .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes kabutMasuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.inv.tpl-kabut .sec__head,
.inv.tpl-kabut .eyebrow{animation:kabutMasuk .7s cubic-bezier(.2,.8,.2,1) both}

@media (prefers-reduced-motion:reduce){
    .inv.tpl-kabut .rule,
    .inv.tpl-kabut .cover__inner,
    .inv.tpl-kabut .sec__head,
    .inv.tpl-kabut .eyebrow{animation:none}
  }

/* ---------- scroll-driven gradient & silhouette ----------
   Fog density gradient: scroll clears/reveals fog layers (--kabut-clear 0-1).
   Bare tree branches / power lines emerging from fog (--kabut-branches-opacity 0-1). */
@media (prefers-reduced-motion: no-preference) {
  .inv.tpl-kabut::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      /* Fog layers that clear on scroll */
      linear-gradient(180deg,
        color-mix(in oklab, var(--foreground) calc(12% * (1 - var(--kabut-clear, 0))), transparent) 0%,
        color-mix(in oklab, var(--foreground) calc(6% * (1 - var(--kabut-clear, 0))), transparent) 40%,
        color-mix(in oklab, var(--foreground) calc(3% * (1 - var(--kabut-clear, 0))), transparent) 70%,
        transparent 100%);
    opacity: calc(1 - var(--kabut-clear, 0) * 0.7);
    transition: opacity 1s ease-out;
  }

  .inv.tpl-kabut .sec::after {
    content: "";
    position: absolute;
    inset: -40% -20%;
    pointer-events: none;
    z-index: -1;
    background-image:
      /* Bare tree branches */
      linear-gradient(110deg, currentColor 1px, transparent 1px),
      linear-gradient(70deg, currentColor 1px, transparent 1px),
      linear-gradient(120deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(60deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(130deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(50deg, currentColor 0.5px, transparent 0.5px),
      /* Power lines */
      linear-gradient(180deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(175deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(185deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(170deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(190deg, currentColor 0.5px, transparent 0.5px);
    color: color-mix(in oklab, var(--foreground) 25%, transparent);
    opacity: var(--kabut-branches-opacity, 0);
    mask-image: linear-gradient(180deg, transparent 20%, black 40%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 20%, black 40%, black 100%);
  }
}