/* tpl-aksara.css — LAPISAN 4 ("aksara").
   Karakter: undangan adat yang hangat dan khidmat. Bingkai garis ganda, ornamen
   geometris asli (pembatas belah ketupat, siku sudut), warna sogan/emas,
   simetris ketat, dan tepi bertekstur tenun yang dibuat dari gradien CSS —
   bukan motif atau ilustrasi milik siapa pun.

   Prinsip yang dijaga:
   - Ornamen dibuat sebagai SVG/gradien sendiri di kode ini; tidak menyalin
     motif berhak cipta dari mana pun.
   - Simetri dipertahankan di semua lebar: ornamen selalu terpusat. */

.inv.tpl-aksara{background:var(--background)}
.inv.tpl-aksara .orn{color:var(--accent);margin:0 auto 1.2rem}

/* tepi tenun: garis-garis halus bertumpuk, murni gradien */
.inv.tpl-aksara .cover::after,
.inv.tpl-aksara .sec--footer::before{
  content:'';position:absolute;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 55%,transparent) 0 6px,
    transparent 6px 12px);
  opacity:.5;pointer-events:none;
}
.inv.tpl-aksara .cover::after{bottom:0}
.inv.tpl-aksara .sec--footer::before{top:0;position:absolute}
.inv.tpl-aksara .sec--footer{position:relative}

/* cover: bingkai garis ganda */
.inv.tpl-aksara .cover__inner{
  border:1px solid var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  outline-offset:5px;padding:2.4rem 1.5rem;max-width:30rem;
  background:color-mix(in srgb,var(--background) 55%,transparent);
}
.inv.tpl-aksara .cover.has-cover .cover__inner{background:rgba(18,10,6,.5);border-color:#f0dfc0;outline-color:rgba(240,223,192,.5)}
.inv.tpl-aksara .cover__names{letter-spacing:.06em;font-weight:600}
.inv.tpl-aksara .cover__date{letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}
.inv.tpl-aksara .cover__to{letter-spacing:.12em}

/* setiap section utama dibingkai garis rambut + ornamen di atasnya */
.inv.tpl-aksara .sec--hero,
.inv.tpl-aksara .sec--couple,
.inv.tpl-aksara .sec--events,
.inv.tpl-aksara .sec--gallery,
.inv.tpl-aksara .sec--gift,
.inv.tpl-aksara .sec--rsvp,
.inv.tpl-aksara .sec--wishes,
.inv.tpl-aksara .sec--story{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-block:clamp(1.5rem,4vw,3rem);
  max-width:min(66rem,calc(100% - 1.6rem));
}
.inv.tpl-aksara .sec--quote,
.inv.tpl-aksara .sec--countdown{
  background:color-mix(in srgb,var(--secondary) 42%,var(--background));
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);
}
.inv.tpl-aksara .eyebrow{color:var(--accent)}

/* mempelai: bingkai siku di sudut foto */
.inv.tpl-aksara .couple{padding:14px}
.inv.tpl-aksara .couple__photo{
  border-radius:0;box-shadow:none;border:1px solid var(--line);
  padding:8px;background:var(--surface);
}
.inv.tpl-aksara .couple__photo--empty{border:1px solid var(--line)}
.inv.tpl-aksara .couple__amp{color:var(--accent);font-size:2.2rem}
.inv.tpl-aksara .couple__name{letter-spacing:.03em}

.inv.tpl-aksara .hero__photo{
  border-radius:0;box-shadow:none;border:1px solid var(--line);
  padding:10px;background:var(--surface);
}
.inv.tpl-aksara .hero__date{letter-spacing:.28em;text-transform:uppercase;font-size:.8rem}

/* acara: kartu dengan garis ganda */
.inv.tpl-aksara .event{
  border-radius:0;box-shadow:none;border:1px solid var(--line);
  outline:1px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:4px;
  background:var(--surface);padding:1.9rem 1.3rem;
}
.inv.tpl-aksara .event__title{color:var(--primary);letter-spacing:.05em}

.inv.tpl-aksara .count__unit{
  border-radius:0;border-color:var(--line);background:var(--surface);
}
.inv.tpl-aksara .count__num{color:var(--primary)}

.inv.tpl-aksara .gallery__item{border-radius:0;border:1px solid var(--line);padding:5px;background:var(--surface)}
.inv.tpl-aksara .gallery__item img{border-radius:0}
.inv.tpl-aksara .gallery__item:hover{transform:none;filter:brightness(1.05)}

.inv.tpl-aksara .gift{
  border-radius:0;box-shadow:none;border:1px solid var(--line);
  outline:1px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:4px;
}
.inv.tpl-aksara .gift__number{color:var(--text)}

.inv.tpl-aksara .wish{border-radius:0;border-color:var(--line);background:var(--surface)}
.inv.tpl-aksara .wish__name{color:var(--primary)}

.inv.tpl-aksara .btn{border-radius:0;letter-spacing:.12em}
.inv.tpl-aksara .btn--primary{background:var(--primary);color:var(--on-primary)}
.inv.tpl-aksara .btn--ghost{border-color:var(--accent);color:var(--text)}

.inv.tpl-aksara .footer__names{letter-spacing:.05em}
.inv.tpl-aksara .music{border-radius:0}
.inv.tpl-aksara .music__toggle{border-radius:0}

@media (min-width:900px){
  .inv.tpl-aksara .sec--hero{text-align:center;grid-template-columns:1fr;gap:2rem}
  .inv.tpl-aksara .hero__photo{margin-inline:auto;max-width:24rem}
  .inv.tpl-aksara .couple__wrap{gap:2.5rem}
}

/* ---------- gerak ----------
   Khidmat dan simetris: tidak ada gerak menyamping (semua turun lurus dari atas),
   tidak ada pantulan. Belah ketupat pembatas "terbuka" dari tengah, dan bingkai
   ganda cover menyala pelan seperti tenun yang ditenun. */
.inv.tpl-aksara .cover__inner{animation:aksaraBingkai 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes aksaraBingkai{
  from{opacity:0;transform:translateY(16px) scale(.985);outline-offset:16px}
  to{opacity:1;transform:none;outline-offset:5px}
}
.inv.tpl-aksara .orn{animation:aksaraBuka .95s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 50%}
@keyframes aksaraBuka{
  from{opacity:0;transform:scale(.55)}
  to{opacity:.9;transform:scale(1)}
}
.inv.tpl-aksara .cover::after,
.inv.tpl-aksara .sec--footer::before{animation:aksaraTenun 2.4s ease-in-out infinite alternate}
@keyframes aksaraTenun{from{opacity:.32}to{opacity:.62}}
.inv.tpl-aksara .eyebrow{animation:aksaraBuka .8s cubic-bezier(.2,.8,.2,1) both}

@media (prefers-reduced-motion:reduce){
    .inv.tpl-aksara .cover__inner,
    .inv.tpl-aksara .orn,
    .inv.tpl-aksara .cover::after,
    .inv.tpl-aksara .sec--footer::before,
    .inv.tpl-aksara .eyebrow{animation:none}
  }

/* ---------- scroll-driven gradient & silhouette ----------
   Batik wax-resist crackle: scroll reveals crackle patterns (--aksara-crackle 0-1).
   Traditional aksara script characters floating up (--aksara-script-opacity 0-1). */
@media (prefers-reduced-motion: no-preference) {
  .inv.tpl-aksara::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
      /* Batik crackle network */
      linear-gradient(90deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(180deg, currentColor 0.5px, transparent 0.5px),
      linear-gradient(110deg, currentColor 0.3px, transparent 0.3px),
      linear-gradient(70deg, currentColor 0.3px, transparent 0.3px);
    color: color-mix(in oklab, var(--primary) calc(8% + var(--aksara-crackle, 0) * 12%), transparent);
    background-size: 80px 80px, 80px 80px, 120px 120px, 120px 120px;
    opacity: var(--aksara-crackle, 0);
    transition: opacity 0.7s ease-out;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 70%);
  }

  .inv.tpl-aksara .sec::after {
    content: "";
    position: absolute;
    inset: -40% -20%;
    pointer-events: none;
    z-index: -1;
    background-image:
      /* Aksara Jawa characters - simplified geometric forms */
      radial-gradient(circle 8px at 15% 25%, currentColor, transparent),
      radial-gradient(circle 6px at 18% 25%, currentColor, transparent),
      radial-gradient(circle 7px at 85% 30%, currentColor, transparent),
      radial-gradient(circle 5px at 88% 30%, currentColor, transparent),
      radial-gradient(circle 6px at 50% 55%, currentColor, transparent),
      radial-gradient(circle 4px at 53% 55%, currentColor, transparent),
      radial-gradient(circle 7px at 25% 75%, currentColor, transparent),
      radial-gradient(circle 5px at 28% 75%, currentColor, transparent),
      radial-gradient(circle 6px at 75% 70%, currentColor, transparent),
      radial-gradient(circle 4px at 78% 70%, currentColor, transparent);
    color: color-mix(in oklab, var(--foreground) 15%, transparent);
    opacity: var(--aksara-script-opacity, 0);
    animation: aksaraScriptFloat 25s linear infinite;
  }

  @keyframes aksaraScriptFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-3%) scale(1.02); }
  }
}