/* Tampilan paket Premium & Eksklusif
   Premium   : foto jadi latar penuh (sampul, pembuka, penutup) + kartu kaca
   Eksklusif : semua Premium + efek 3D (sampul miring mengikuti HP/mouse,
   buka sampul seperti membalik halaman, partikel melayang,
   animasi muncul 3D, galeri putar 3D, video) */

/* PREMIUM: foto sebagai latar */
.tier-photo .inv-cover { background: #111; color: #fff; }
.tier-photo .inv-cover-photo { opacity: 1; transform: scale(1.06); animation: tier-kenburns 22s ease-in-out infinite alternate; }
.tier-photo .inv-cover-photo::after,
.tier-photo .inv-aside-photo::after {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, color-mix(in srgb, var(--accent) 35%, rgba(0, 0, 0, .55)) 100%);
}
.tier-photo .inv-cover .inv-pat, .tier-photo .inv-aside .inv-pat,
.tier-photo .inv-cover .inv-corner, .tier-photo .inv-aside .inv-corner { display: none; }
.tier-photo .inv-cover .inv-frame, .tier-photo .inv-aside .inv-frame { display: block; border-color: rgba(255, 255, 255, .45); outline-color: rgba(255, 255, 255, .22); }
.tier-photo .inv-cover .inv-frame::before, .tier-photo .inv-cover .inv-frame::after { background: #fff; }

/* kartu kaca di tengah sampul */
body.tier-photo .inv-cover-inner {
  max-width: 380px; padding: 34px 24px 28px; gap: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  outline: 0; color: #fff;
}
body.tier-photo .inv-cover-inner::before, body.tier-photo .inv-cover-inner::after { display: none; }
.tier-photo .inv-cover .inv-orn-top { width: min(120px, 40%); }
.tier-photo .inv-cover .inv-orn-top, .tier-photo .inv-aside .inv-orn-top {
  background: none; border: 0; box-shadow: none; padding: 0; aspect-ratio: auto; color: #fff;
}
.tier-photo .inv-cover .inv-label, .tier-photo .inv-aside .inv-label { background: none; color: #fff; clip-path: none; padding: 0; }
.tier-photo .inv-cover .inv-date, .tier-photo .inv-aside .inv-date { border-color: rgba(255, 255, 255, .5); }
.tier-photo .inv-cover .inv-guest { background: rgba(0, 0, 0, .18); margin-top: 8px; }
.tier-photo .inv-cover .inv-open { background: #fff; color: #1b1b1b; border-color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); }

/* panel kiri di laptop */
.tier-photo .inv-aside { background: #111; color: #fff; }
.tier-photo .inv-aside-photo { opacity: 1; animation: tier-kenburns 26s ease-in-out infinite alternate; }

/* pembuka & penutup dengan foto penuh */
.inv-sec > .inv-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0 !important; }
.inv-hero-bg > div { position: absolute; inset: -12% 0; background-size: cover; background-position: center; will-change: transform; }
.inv-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .2) 40%, color-mix(in srgb, var(--accent) 30%, rgba(0, 0, 0, .65)) 100%);
}
.tier-photo .inv-hero { min-height: 100vh; min-height: 100svh; color: #fff; background: #111; }
.tier-photo .inv-hero .inv-corner, .tier-photo .inv-closing .inv-corner { display: none; }
.tier-photo .inv-hero .inv-orn-top { display: none; }
.tier-photo .inv-hero .inv-label { background: none; color: #fff; clip-path: none; padding: 0; }
.tier-photo .inv-hero .inv-title, .tier-photo .inv-hero .inv-label, .tier-photo .inv-hero .inv-date { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.tier-photo .inv-hero .inv-countdown div { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tier-photo .inv-hero .inv-countdown span { color: rgba(255, 255, 255, .8); }
.tier-photo .inv-hero .inv-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .8); }
.tier-photo .inv-closing { color: #fff; background: #111; padding-block: 110px 90px; }
.tier-photo .inv-closing .inv-quote, .tier-photo .inv-closing .inv-salam { color: rgba(255, 255, 255, .9); }
.tier-photo .inv-closing .inv-orn { color: #fff; }
.tier-photo .inv-closing .inv-orn-top { background: none; border: 0; box-shadow: none; }
.tier-photo .inv-closing .inv-label { background: none; color: #fff; clip-path: none; }

/* galeri bergaya majalah */
.tier-premium .inv-gallery-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tier-premium .inv-photo { grid-column: span 3; aspect-ratio: 4 / 5; border-radius: 14px; }
.tier-premium .inv-photo:nth-child(5n+1) { grid-column: span 6; aspect-ratio: 16 / 10; }
.tier-premium .inv-photo:nth-child(5n+4), .tier-premium .inv-photo:nth-child(5n+5) { grid-column: span 3; aspect-ratio: 1; }

/* lencana kecil di ujung undangan */
.tier-premium .inv-footer::before, .tier-eksklusif .inv-footer::before { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; color: var(--accent); }
.tier-premium .inv-footer::before { content: "Premium"; }
.tier-eksklusif .inv-footer::before { content: "Eksklusif"; }

@keyframes tier-kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -2%, 0); } }

/* EKSKLUSIF: efek 3D */
.tier-eksklusif .inv-cover { perspective: 1100px; }
.tier-eksklusif .inv-cover-photo { inset: -6%; transition: transform .25s ease-out; animation: none; transform: scale(1.04) translate3d(var(--px, 0), var(--py, 0), 0); }
body.tier-eksklusif .inv-cover-inner {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
}
body.tier-eksklusif .inv-cover-inner > * { transform: translateZ(40px); }
body.tier-eksklusif .inv-cover-inner > .inv-orn-top { transform: translateZ(80px); }
body.tier-eksklusif .inv-cover-inner > .inv-title { transform: translateZ(70px); }
body.tier-eksklusif .inv-cover-inner > .inv-open { transform: translateZ(60px); }
/* kilau yang ikut bergerak */
.inv-cover-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), rgba(255, 255, 255, .55), transparent 45%);
}
/* buka sampul seperti membalik halaman */
.tier-eksklusif .inv-cover { transform-origin: left center; transition: transform 1.1s cubic-bezier(.6, 0, .2, 1), opacity 1.1s ease; }
.tier-eksklusif .inv-cover.is-leaving { transform: perspective(1600px) rotateY(-105deg); opacity: 0; }

/* lapisan pembuka bergerak bertingkat */
.tier-eksklusif .inv-hero > .reveal { transform-style: preserve-3d; }

/* animasi muncul 3D */
.js-anim .tier-eksklusif .reveal { transform: perspective(900px) rotateX(38deg) translateY(30px); transform-origin: 50% 100%; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js-anim .tier-eksklusif .reveal.is-in { transform: none; }

/* kartu miring saat disentuh / digeser mouse */
.tier-eksklusif .inv-card { transform-style: preserve-3d; will-change: transform; }
.tier-eksklusif .inv-card.is-tilting { transition: transform .12s ease-out; }
.tier-eksklusif .inv-event, .tier-eksklusif .inv-gift { box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .55); }

/* galeri putar 3D (coverflow) */
.tier-eksklusif .inv-coverflow {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; perspective: 900px;
  padding: 24px 20%; margin-inline: -28px; width: calc(100% + 56px); scrollbar-width: none;
}
.tier-eksklusif .inv-coverflow::-webkit-scrollbar { display: none; }
body.tier-eksklusif .inv-coverflow .inv-photo, .js-anim body.tier-eksklusif .inv-coverflow .inv-photo.reveal {
  flex: 0 0 60%; aspect-ratio: 3 / 4; scroll-snap-align: center; border-radius: 16px; position: relative;
  transform: rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transition: transform .12s linear, opacity .8s ease;
  box-shadow: 0 30px 40px -26px rgba(0, 0, 0, .6); margin-inline: -3%;
}
.tier-eksklusif .inv-coverflow .inv-photo:first-child { grid-column: auto; aspect-ratio: 3 / 4; }
.inv-swipe { margin-top: -6px; font-size: .8rem; color: var(--muted); }

/* video */
.inv-video { position: relative; width: min(100%, 320px); margin-inline: auto; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7), 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.inv-video video { width: 100%; max-height: 72vh; display: block; object-fit: cover; aspect-ratio: 9 / 16; }
.inv-video-sound { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; cursor: pointer; backdrop-filter: blur(6px); }
.inv-video-sound.is-on { background: var(--accent); color: var(--accent-ink); }

/* partikel melayang */
.inv-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; }
body.is-open .inv-fx { z-index: 45; opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .tier-photo .inv-cover-photo, .tier-photo .inv-aside-photo { animation: none; }
  .inv-fx { display: none; }
  .tier-eksklusif .inv-cover.is-leaving { transform: none; }
  .js-anim .tier-eksklusif .reveal { transform: none; }
}