/* tpl-sagara.css — LAPISAN 5 ("sagara").
   Karakter: pesisir. Gelombang berlapis sebagai pemisah, foto bulat penuh, bayangan
   lembut seperti air, angka hitung mundur diberi garis gelombang tipis di bawahnya,
   dan kartu yang mengapung tanpa bingkai keras.

   Prinsip yang dijaga:
   - Gelombang digambar sendiri sebagai SVG (lihat ORN_WAVE di src/ssr.mjs), bukan
     motif atau ilustrasi milik siapa pun.
   - Ruang lega: bagian dipisah jarak besar, bukan garis. */

.inv.tpl-sagara{background:var(--background)}
.inv.tpl-sagara .orn--wave{color:var(--accent);width:100%;max-width:min(100%,48rem);margin:0 auto;display:block}
.inv.tpl-sagara .eyebrow{color:var(--accent);letter-spacing:.26em}

/* cover: lapisan air di bawah, nama dipisah baris */
.inv.tpl-sagara .cover__inner{
  border-radius:calc(var(--radius) + 8px);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow);
  padding:2.4rem 1.5rem;
  max-width:32rem;
}
.inv.tpl-sagara .cover__names{font-weight:500;letter-spacing:.02em}
.inv.tpl-sagara .cover__line{display:block}
.inv.tpl-sagara .cover__amp{display:block;font-size:1.5rem;color:var(--accent);margin:.15rem 0}
.inv.tpl-sagara .cover__date{letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:var(--muted)}

/* pemisah bagian: gelombang, bukan garis lurus */
.inv.tpl-sagara .sec{padding-block:clamp(2.4rem,7vw,4.5rem)}
.inv.tpl-sagara .sec--quote,
.inv.tpl-sagara .sec--countdown{
  background:color-mix(in srgb,var(--secondary) 55%,var(--background));
  border-radius:calc(var(--radius) + 6px);
  margin-inline:auto;max-width:min(66rem,calc(100% - 1.6rem));
}

/* foto: bulat penuh — bahasa visual paling khas lapisan ini */
.inv.tpl-sagara .hero__photo,
.inv.tpl-sagara .couple__photo{
  border-radius:50%;
  aspect-ratio:1/1;
  object-fit:cover;
  box-shadow:0 14px 40px color-mix(in srgb,var(--primary) 22%,transparent);
  border:6px solid var(--surface);
}
.inv.tpl-sagara .couple__photo--empty{border-radius:50%;aspect-ratio:1/1;border:1px dashed var(--line)}
.inv.tpl-sagara .couple__amp{color:var(--accent)}

/* acara: kartu mengapung, tanpa bingkai */
.inv.tpl-sagara .event{
  border:none;box-shadow:var(--shadow);background:var(--surface);
  border-radius:calc(var(--radius) + 4px);
  border-top:3px solid var(--accent);
}
.inv.tpl-sagara .event__title{color:var(--primary)}

/* hitung mundur: angka diberi gelombang tipis di bawah */
.inv.tpl-sagara .count__unit{
  border:none;background:transparent;box-shadow:none;padding:.4rem .6rem;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:0;
}
.inv.tpl-sagara .count__num{color:var(--primary);font-weight:500}
.inv.tpl-sagara .count__lbl{letter-spacing:.18em;text-transform:uppercase;font-size:.66rem}

/* galeri: sudut membulat, naik saat disentuh */
.inv.tpl-sagara .gallery__item{border-radius:calc(var(--radius) + 4px);overflow:hidden}
.inv.tpl-sagara .gallery__item img{border-radius:inherit}
.inv.tpl-sagara .gallery__item:hover{transform:translateY(-3px)}
.inv.tpl-sagara .lightbox__cap{background:color-mix(in srgb,var(--primary) 88%,transparent)}

/* hadiah & ucapan */
.inv.tpl-sagara .gift{border:none;box-shadow:var(--shadow);border-radius:calc(var(--radius) + 4px);background:var(--surface)}
.inv.tpl-sagara .gift__number{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.inv.tpl-sagara .wish{border:none;box-shadow:0 6px 20px color-mix(in srgb,var(--primary) 10%,transparent);border-radius:calc(var(--radius) + 2px);background:var(--surface)}
.inv.tpl-sagara .wish__name{color:var(--primary)}

.inv.tpl-sagara .btn{border-radius:999px}
.inv.tpl-sagara .btn--ghost{border-color:var(--accent);color:var(--primary)}
.inv.tpl-sagara .sec--footer::before{content:'';display:block;height:0}
.inv.tpl-sagara .footer__names{letter-spacing:.03em}
.inv.tpl-sagara .music__toggle{border-radius:999px}

@media (min-width:900px){
  .inv.tpl-sagara .sec--hero{grid-template-columns:1.1fr .9fr;align-items:center;text-align:left}
  .inv.tpl-sagara .hero__photo{max-width:26rem;margin-inline:0}
  .inv.tpl-sagara .cover__names{font-size:clamp(2.2rem,5vw,3.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .inv.tpl-sagara .gallery__item:hover{transform:none}
}

/* ---------- gerak ----------
   Pesisir: gerak datang dari air, bukan dari antarmuka. Gelombang pembatas mengalir
   pelan ke samping, isi section naik seperti pasang (26px, jeda 80ms dari invitation.js),
   dan foto bulat mengambang naik-turun. Tidak ada denyar atau pantulan. */
.inv.tpl-sagara .orn--wave{animation:sagaraAlir 11s ease-in-out infinite alternate}
@keyframes sagaraAlir{
  0%{transform:translateX(-2.5%) scaleX(1.02)}
  100%{transform:translateX(2.5%) scaleX(1.02)}
}
.inv.tpl-sagara .cover__inner{animation:sagaraPasang 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes sagaraPasang{
  from{opacity:0;transform:translateY(30px) scale(.985)}
  to{opacity:1;transform:none}
}
.inv.tpl-sagara .couple__photo,
.inv.tpl-sagara .hero__photo{animation:sagaraApung 7s ease-in-out infinite alternate}
.inv.tpl-sagara .couple__photo:nth-of-type(1){animation-delay:-2s}
@keyframes sagaraApung{
  from{transform:translateY(0)}
  to{transform:translateY(-9px)}
}

@media (prefers-reduced-motion:reduce){
    .inv.tpl-sagara .orn--wave,
    .inv.tpl-sagara .cover__inner,
    .inv.tpl-sagara .couple__photo,
    .inv.tpl-sagara .hero__photo{animation:none}
  }

/* ---------- scroll-driven gradient & silhouette ----------
   Ocean depth gradient: surface to deep blue transition on scroll (--sagara-depth 0-1).
   Wave crests / distant horizon ships emerge (--sagara-horizon-opacity 0-1). */
@media (prefers-reduced-motion: no-preference) {
  .inv.tpl-sagara::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      /* Ocean depth layers */
      linear-gradient(180deg,
        color-mix(in oklab, var(--primary) calc(5% + var(--sagara-depth, 0) * 8%), transparent) 0%,
        color-mix(in oklab, var(--primary) calc(15% + var(--sagara-depth, 0) * 20%), var(--accent) calc(5% + var(--sagara-depth, 0) * 10%)) 40%,
        color-mix(in oklab, var(--primary) calc(25% + var(--sagara-depth, 0) * 30%), var(--accent) calc(3% + var(--sagara-depth, 0) * 5%)) 70%,
        color-mix(in oklab, var(--primary) calc(35% + var(--sagara-depth, 0) * 40%), var(--foreground) calc(2% + var(--sagara-depth, 0) * 3%)) 100%);
    opacity: var(--sagara-depth, 0);
    transition: opacity 1s ease-out;
  }

  .inv.tpl-sagara .sec::after {
    content: "";
    position: absolute;
    inset: -30% -15%;
    pointer-events: none;
    z-index: -1;
    background-image:
      /* Wave crests */
      radial-gradient(ellipse 60px 8px at 10% 25%, currentColor, transparent),
      radial-gradient(ellipse 50px 6px at 40% 30%, currentColor, transparent),
      radial-gradient(ellipse 70px 10px at 75% 20%, currentColor, transparent),
      radial-gradient(ellipse 45px 5px at 20% 55%, currentColor, transparent),
      radial-gradient(ellipse 55px 7px at 60% 60%, currentColor, transparent),
      radial-gradient(ellipse 40px 5px at 85% 50%, currentColor, transparent),
      radial-gradient(ellipse 65px 9px at 30% 80%, currentColor, transparent),
      radial-gradient(ellipse 50px 6px at 70% 75%, currentColor, transparent),
      /* Distant ships on horizon */
      linear-gradient(180deg, currentColor 0 15%, transparent 15%),
      linear-gradient(178deg, currentColor 0 12%, transparent 12%),
      linear-gradient(182deg, currentColor 0 10%, transparent 10%);
    color: color-mix(in oklab, var(--foreground) 15%, var(--primary) 20%);
    opacity: var(--sagara-horizon-opacity, 0);
    mask-image: linear-gradient(180deg, transparent 30%, black 50%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 30%, black 50%, black 100%);
  }
}