/* tpl-aurora.css — LAPISAN 2 ("aurora").
   Karakter: undangan malam yang hidup. Kaca buram di atas gradien bergerak,
   sudut sangat membulat, tanpa bingkai kaku. Satu-satunya desain dengan
   navigasi lompat-section yang menempel di tepi layar.

   Prinsip yang dijaga:
   - Semua gerak dimatikan oleh prefers-reduced-motion (lihat bawah).
   - Gradien hidup memakai pseudo-element + transform, bukan animasi layout,
     supaya tidak memicu reflow tiap frame.
   - Kaca (backdrop-filter) selalu punya latar solid di belakangnya supaya
     kontras teks tetap aman kalau backdrop-filter tidak didukung. */

.inv.tpl-aurora{background:var(--background)}
.inv.tpl-aurora::before{
  content:'';position:fixed;inset:-30vmax;z-index:0;pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 18% 12%, color-mix(in srgb,var(--primary) 55%,transparent), transparent 62%),
    radial-gradient(38vmax 38vmax at 84% 26%, color-mix(in srgb,var(--accent) 42%,transparent), transparent 64%),
    radial-gradient(46vmax 46vmax at 62% 92%, color-mix(in srgb,var(--primary) 34%,transparent), transparent 66%);
  animation:auroraDrift 34s linear infinite;
}
@keyframes auroraDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1.02)}
  100%{transform:translate3d(2%,3%,0) scale(1.03)}
}
.inv.tpl-aurora .main,
.inv.tpl-aurora .cover{z-index:1}
/* Wajib `position: relative`: tanpa itu `.main` tidak membentuk lapisan sendiri,
   sehingga gradien latar (position:fixed, z-index:0) justru tercat DI ATAS teks. */
.inv.tpl-aurora .main{position:relative}
.inv.tpl-aurora .cover{z-index:60}

/* cover: kaca, bukan foto penuh */
.inv.tpl-aurora .cover::before{filter:saturate(.6) brightness(.5)}
.inv.tpl-aurora .cover__inner{
  background:color-mix(in srgb,var(--surface) 74%,transparent);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);
  backdrop-filter:blur(18px) saturate(1.2);
  padding:2.6rem 1.6rem;box-shadow:var(--shadow);max-width:30rem;
}
.inv.tpl-aurora .cover.has-cover .cover__inner{background:rgba(8,10,20,.62)}
.inv.tpl-aurora .cover.has-cover .cover__names,
.inv.tpl-aurora .cover.has-cover .cover__date,
.inv.tpl-aurora .cover.has-cover .cover__to,
.inv.tpl-aurora .cover.has-cover .eyebrow{color:#fff}
.inv.tpl-aurora .cover.has-cover .cover__guestname{color:#fff}
.inv.tpl-aurora .cover__names{letter-spacing:.02em;font-weight:700}
.inv.tpl-aurora .amp{color:var(--accent)}
/* bulatan cahaya di dalam cover */
.inv.tpl-aurora .cover__orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;z-index:1;pointer-events:none}
.inv.tpl-aurora .cover__orb--a{width:22rem;height:22rem;top:-6rem;left:-6rem;background:var(--primary)}
.inv.tpl-aurora .cover__orb--b{width:18rem;height:18rem;bottom:-5rem;right:-4rem;background:var(--accent)}

/* section: kartu kaca mengapung, sudut besar */
.inv.tpl-aurora .sec{position:relative;z-index:1}
.inv.tpl-aurora .sec--hero,
.inv.tpl-aurora .sec--couple,
.inv.tpl-aurora .sec--events,
.inv.tpl-aurora .sec--gallery,
.inv.tpl-aurora .sec--gift,
.inv.tpl-aurora .sec--rsvp,
.inv.tpl-aurora .sec--wishes,
.inv.tpl-aurora .sec--story{
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  backdrop-filter:blur(14px);margin-block:1rem;box-shadow:var(--shadow);
  max-width:min(68rem,calc(100% - 2rem));
}
.inv.tpl-aurora .sec--quote,
.inv.tpl-aurora .sec--countdown{
  background:color-mix(in srgb,var(--primary) 14%,var(--surface));
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  margin-block:1rem;backdrop-filter:blur(14px);
  max-width:min(68rem,calc(100% - 2rem));
}
.inv.tpl-aurora .event,
.inv.tpl-aurora .gift,
.inv.tpl-aurora .wish,
.inv.tpl-aurora .count__unit{
  background:color-mix(in srgb,var(--background) 55%,var(--surface));
  border-color:var(--line);border-radius:calc(var(--radius) - 2px);
}
.inv.tpl-aurora .hero__photo,
.inv.tpl-aurora .couple__photo{border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow)}
.inv.tpl-aurora .gallery__item{border-radius:calc(var(--radius) - 4px)}
.inv.tpl-aurora .footer__names,
.inv.tpl-aurora .hero__names,
.inv.tpl-aurora .couple__name,
.inv.tpl-aurora .count__num{color:var(--text)}
.inv.tpl-aurora .event__title,
.inv.tpl-aurora .gift__provider,
.inv.tpl-aurora .wish__name{color:var(--accent)}
.inv.tpl-aurora .btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:var(--on-primary);border:0;font-weight:600;
}
.inv.tpl-aurora .btn--ghost{background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--text)}

/* navigasi lompat: muncul setelah undangan dibuka, menempel di bawah */
.inv.tpl-aurora .jump{
  position:fixed;left:50%;bottom:.7rem;transform:translateX(-50%);z-index:55;
  display:flex;gap:.15rem;max-width:min(96vw,42rem);overflow-x:auto;
  padding:.35rem;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(14px);box-shadow:var(--shadow);
  scrollbar-width:none;-ms-overflow-style:none;
}
.inv.tpl-aurora .jump::-webkit-scrollbar{display:none}
.inv.tpl-aurora .jump__item{
  flex:0 0 auto;padding:.42rem .7rem;border-radius:999px;font-size:.76rem;
  color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.inv.tpl-aurora .jump__item:hover{color:var(--text)}
.inv.tpl-aurora .jump__item.is-on{background:var(--primary);color:var(--on-primary);font-weight:600}
/* beri ruang supaya navigasi tidak menutupi isi terakhir */
.inv.tpl-aurora .sec--footer{padding-bottom:5.5rem}
.inv.tpl-aurora .music{bottom:4.6rem}

@media (max-width:420px){
  .inv.tpl-aurora .jump__item{padding:.4rem .55rem;font-size:.72rem}
}

/* ---------- gerak ----------
   Lapisan ini yang paling hidup: cahaya latar mengalir (sudah ada), bulatan cahaya
   bernapas bergantian, kaca cover masuk sambil mempertajam, dan tombol utama
   berdenyut pelan. Semua hanya transform/opacity/filter — tidak memicu reflow. */
.inv.tpl-aurora .cover__orb{animation:auroraNapas 9s ease-in-out infinite alternate}
.inv.tpl-aurora .cover__orb--b{animation-duration:12s;animation-delay:-3s}
@keyframes auroraNapas{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.42}
  100%{transform:translate3d(4%,-5%,0) scale(1.18);opacity:.62}
}
.inv.tpl-aurora .cover__inner{animation:auroraKaca .95s cubic-bezier(.2,.8,.2,1) both}
@keyframes auroraKaca{
  from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.inv.tpl-aurora .btn--primary{animation:auroraDenyut 3.6s ease-in-out infinite}
@keyframes auroraDenyut{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}
  50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 0%,transparent)}
}
/* Gerak dimatikan total: gradien diam, kaca tetap terbaca. */
@media (prefers-reduced-motion:reduce){
  .inv.tpl-aurora::before{animation:none}
  .inv.tpl-aurora .cover__orb,
  .inv.tpl-aurora .cover__inner,
  .inv.tpl-aurora .btn--primary{animation:none}
}

/* ---------- scroll-driven gradient & silhouette ----------
   Polar aurora deepening: scroll intensifies aurora colors (--aurora-depth 0-1).
   Mountain/pine silhouettes emerge from mist (--aurora-silhouette-opacity 0-1). */
@media (prefers-reduced-motion: no-preference) {
  .inv.tpl-aurora::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      radial-gradient(ellipse 90% 60% at 20% 10%,
        color-mix(in oklab, var(--primary) calc(25% + var(--aurora-depth, 0) * 30%), transparent), transparent 65%),
      radial-gradient(ellipse 80% 50% at 80% 20%,
        color-mix(in oklab, var(--accent) calc(20% + var(--aurora-depth, 0) * 25%), transparent), transparent 60%),
      radial-gradient(ellipse 100% 70% at 50% 90%,
        color-mix(in oklab, var(--primary) calc(18% + var(--aurora-depth, 0) * 22%), transparent), transparent 70%);
    filter: blur(50px) saturate(1.2);
    opacity: var(--aurora-depth, 0);
    transition: opacity 0.8s ease-out;
  }

  .inv.tpl-aurora .sec::after {
    content: "";
    position: absolute;
    inset: -30% -15%;
    pointer-events: none;
    z-index: -1;
    background-image:
      /* Mountain range */
      linear-gradient(180deg, transparent 60%, currentColor 60%, currentColor 100%),
      linear-gradient(165deg, transparent 65%, currentColor 65%, currentColor 100%),
      linear-gradient(195deg, transparent 65%, currentColor 65%, currentColor 100%),
      linear-gradient(150deg, transparent 70%, currentColor 70%, currentColor 100%),
      linear-gradient(210deg, transparent 70%, currentColor 70%, currentColor 100%),
      /* Pine trees */
      radial-gradient(ellipse 8% 40% at 10% 85%, currentColor, transparent),
      radial-gradient(ellipse 6% 35% at 90% 80%, currentColor, transparent),
      radial-gradient(ellipse 7% 38% at 30% 90%, currentColor, transparent),
      radial-gradient(ellipse 5% 30% at 70% 88%, currentColor, transparent);
    color: color-mix(in oklab, var(--foreground) 12%, transparent);
    opacity: var(--aurora-silhouette-opacity, 0);
    filter: blur(2px);
    mask-image: linear-gradient(180deg, transparent 30%, black 50%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 30%, black 50%, black 100%);
  }
}