/* Custom Javanese Aesthetic Styles & Smooth Transitions */

/* Clean custom scrollbar for elite experience */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #FAF6F0;
}
::-webkit-scrollbar-thumb {
  background: #8C5E3C;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4A359;
}

/* Background Batik Watermark Pattern */
.batik-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(#D4A359 0.75px, transparent 0.75px), radial-gradient(#5C3E21 0.75px, #FAF6F0 0.75px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

/* Split-door Interactive Gate opening styles */
.opening-gate-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.2s;
}

.gate-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 1.4s cubic-bezier(0.85, 0, 0.15, 1);
}

.gate-left {
  left: 0;
  border-right: 1px solid rgba(212, 163, 89, 0.15);
}

.gate-right {
  right: 0;
  border-left: 1px solid rgba(212, 163, 89, 0.15);
}

/* Animation triggers when opening */
.gate-open-transition .gate-left {
  transform: translateX(-100%);
}

.gate-open-transition .gate-right {
  transform: translateX(100%);
}

.gate-open-transition {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Luxury portrait frames with delicate borders */
.photo-frame-outer {
  position: relative;
  padding: 8px;
  background: linear-gradient(135deg, #D4A359 0%, #8C5E3C 100%);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 15px 35px -10px rgba(92, 62, 33, 0.25);
  max-width: 260px;
  width: 100%;
}

.photo-frame-inner {
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  border: 4px solid #FAF6F0;
  height: 340px;
  width: 100%;
}

/* Canvas floating falling Melati petals container */
.jasmine-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 45;
  overflow: hidden;
}

.jasmine-petal {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fffbf2 55%, #ecdfc4 100%);
  border-radius: 10% 90% 30% 90% / 10% 90% 30% 90%;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,1),
    0 4px 12px rgba(92,62,33,.32);
  opacity: 0;
  animation-name: fallAndFlutter;
  animation-duration: 16s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* A gentle multi-point sway (like a pendulum) reads far more like a leaf
   drifting down than a straight diagonal glide with only start/end points. */
@keyframes fallAndFlutter {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0deg) scale(0.85); opacity: 0; }
  6%   { opacity: 0.8; }
  15%  { transform: translate3d(calc(var(--petal-drift, 30px) * 0.55), 14vh, 0) rotate(35deg) scale(0.95); }
  30%  { transform: translate3d(calc(var(--petal-drift, 30px) * -0.3), 30vh, 0) rotate(95deg) scale(1); }
  45%  { transform: translate3d(calc(var(--petal-drift, 30px) * 0.65), 47vh, 0) rotate(150deg) scale(0.9); }
  60%  { transform: translate3d(calc(var(--petal-drift, 30px) * -0.45), 63vh, 0) rotate(210deg) scale(1); }
  75%  { transform: translate3d(calc(var(--petal-drift, 30px) * 0.8), 80vh, 0) rotate(260deg) scale(0.92); }
  90%  { opacity: 0.7; transform: translate3d(calc(var(--petal-drift, 30px) * 0.4), 97vh, 0) rotate(300deg) scale(1); }
  100% { transform: translate3d(var(--petal-drift, 30px), 112vh, 0) rotate(330deg) scale(0.85); opacity: 0; }
}

/* Rotatable elegant spinning vinyl button */
.music-control-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #5C3E21;
  border: 1px solid #D4A359;
  cursor: pointer;
  z-index: 1000;
  padding: 1px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.music-control-btn:hover {
  transform: scale(1.1);
  background-color: #8C5E3C;
}

.music-spinning {
  animation: spinVinyl 8s linear infinite;
}

@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Scroll reveal triggers */
.scroll-reveal {
  opacity: 0;
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-reveal[data-anim="fade-in-up"] {
  transform: translateY(30px);
}

.scroll-reveal[data-anim="fade-right"] {
  transform: translateX(-30px);
}

.scroll-reveal[data-anim="fade-left"] {
  transform: translateX(30px);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translate(0) scale(1) !important;
}

/* Interactive Timeline Growing Line */
.timeline-line-container {
  border-left: 2px solid rgba(214, 163, 89, 0.2);
}

/* Custom Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(43, 36, 30, 0.97);
  backdrop-filter: blur(8px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.lightbox.active {
  display: flex;
}

/* Toast message visual refinement */
.toast-success {
  background: #FAF6F0;
  border: 1px solid #D4A359;
  color: #5C3E21;
  box-shadow: 0 10px 25px -5px rgba(92, 62, 33, 0.15);
}

/* ===== Refined Javanese luxury layer ===== */
:root { --soga:#5a3c26; --soga-2:#7a5236; --gold:#c9ab74; --ivory:#fbf7ef; --cream:#efe1cd; }
html { scroll-padding-bottom: 90px; }
body { background: var(--ivory); }

.page-rail { position:fixed; top:0; bottom:0; width:18px; z-index:80; pointer-events:none; background-color:var(--soga); background-image:radial-gradient(ellipse at center, transparent 0 20%, #c69a56 21% 23%, transparent 24% 46%, rgba(198,154,86,.5) 47% 49%, transparent 50%); background-size:18px 36px; box-shadow:0 0 18px rgba(43,25,15,.18); }
.page-rail-left { left:0; border-right:1px solid rgba(198,154,86,.65); }
.page-rail-right { right:0; border-left:1px solid rgba(198,154,86,.65); }

.floating-nav { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:900; display:flex; gap:4px; padding:7px; border:1px solid rgba(198,154,86,.6); border-radius:999px; background:rgba(75,46,29,.92); backdrop-filter:blur(16px); box-shadow:0 12px 35px rgba(49,27,15,.3); }
.floating-nav a { width:42px; height:42px; color:#ead2a9; border-radius:50%; display:grid; place-items:center; transition:.35s ease; }
.floating-nav a svg { width:17px; }
.floating-nav a:hover,.floating-nav a.active { color:white; background:linear-gradient(135deg,#c69a56,#8c5e3c); transform:translateY(-4px); }

.hero-jawa { isolation:isolate; background:radial-gradient(circle at 50% 42%,#fff 0 22%,#f9f0e3 55%,#e8d3b5 100%); }
.hero-jawa::before { content:""; position:absolute; inset:24px; border:1px solid rgba(112,72,47,.28); outline:1px solid rgba(198,154,86,.35); outline-offset:-8px; border-radius:180px 180px 18px 18px; z-index:1; }
.hero-jawa::after { content:"✦"; position:absolute; left:50%; top:45px; transform:translateX(-50%); color:var(--gold); font-size:24px; animation:glow 2.8s ease-in-out infinite; z-index:2; }
.gebyok { position:absolute; top:0; bottom:0; width:min(33vw,380px); z-index:1; opacity:.9; background:linear-gradient(90deg,rgba(75,46,29,.98),rgba(112,72,47,.88)), repeating-linear-gradient(45deg,transparent 0 18px,rgba(198,154,86,.22) 19px 21px); box-shadow:inset 0 0 0 6px #432817,inset 0 0 0 8px rgba(198,154,86,.55); animation:gebyokBreath 7s ease-in-out infinite; }
.gebyok::before { content:""; position:absolute; inset:20px; border:1px solid rgba(226,190,126,.5); background-image:radial-gradient(ellipse at center,transparent 0 31%,rgba(198,154,86,.28) 32% 35%,transparent 36%); background-size:66px 90px; }
.gebyok-left { left:0; clip-path:polygon(0 0,100% 0,70% 13%,70% 88%,100% 100%,0 100%); }
.gebyok-right { right:0; transform:scaleX(-1); clip-path:polygon(0 0,100% 0,70% 13%,70% 88%,100% 100%,0 100%); }
.hero-medallion { width:min(78vw,570px); min-height:570px; justify-content:center; border-radius:50%; padding:70px; background:rgba(255,252,246,.8); border:1px solid rgba(198,154,86,.7); outline:1px solid rgba(75,46,29,.18); outline-offset:12px; box-shadow:0 25px 80px rgba(75,46,29,.12),inset 0 0 70px rgba(198,154,86,.08); }
.hero-medallion::before,.hero-medallion::after { content:"❦"; position:absolute; left:50%; transform:translateX(-50%); color:var(--gold); font-size:32px; }
.hero-medallion::before { top:36px; }.hero-medallion::after { bottom:36px; transform:translateX(-50%) rotate(180deg); }

.section-ornament { overflow:hidden; }
.section-ornament::before,.section-ornament::after { content:""; position:absolute; width:150px; height:150px; opacity:.12; pointer-events:none; background:radial-gradient(circle,transparent 20%,var(--gold) 21% 23%,transparent 24% 42%,var(--soga) 43% 45%,transparent 46%); animation:ornamentFloat 8s ease-in-out infinite; }
.section-ornament::before { left:-55px; top:20px; }.section-ornament::after { right:-55px; bottom:20px; animation-delay:-4s; }
.section-kicker { color:var(--gold); text-transform:uppercase; letter-spacing:.22em; font-size:.65rem; margin-bottom:.65rem; }
section h2 { position:relative; text-shadow:0 1px 0 white; }
section h2::after { content:"❀"; display:block; margin:.75rem auto 0; color:var(--gold); font-size:.9rem; }

.photo-frame-outer {
  padding: 14px;
  background: linear-gradient(150deg, #5e3b22, #e8c98a 30%, #b8843c 50%, #e8c98a 70%, #5e3b22);
  border: 1px solid rgba(75,46,29,.45);
  box-shadow:
    0 0 0 4px #fffaf0,
    0 0 0 5px rgba(184,132,60,.65),
    0 26px 55px -18px rgba(75,46,29,.4);
}
.photo-frame-outer::before,.photo-frame-outer::after { content:"❦"; position:absolute; z-index:3; color:#d7ad68; font-size:35px; top:48%; filter: drop-shadow(0 1px 2px rgba(75,46,29,.3)); }
.photo-frame-outer::before { left:-30px; transform:rotate(-90deg); }.photo-frame-outer::after { right:-30px; transform:rotate(90deg); }

/* One small faceted gem marking the arch peak — a single deliberate accent
   instead of the crown+pendant combo that felt cluttered. */
.photo-frame-gem {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 26px; z-index: 4; color: #b8843c; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(75,46,29,.35));
}
.photo-frame-gem svg { width: 100%; height: auto; display: block; }
.photo-frame-inner { border-width:7px; }

.event-stage { background-color:#f2e7d5 !important; background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),radial-gradient(circle at 25% 25%,rgba(198,154,86,.2) 0 2px,transparent 3px); background-size:auto,32px 32px; }
.event-stage .bg-santi,.event-stage .timer-box { box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(198,154,86,.35),0 18px 45px rgba(75,46,29,.12); }
.timer-box { transition:.35s ease; }.timer-box:hover { transform:translateY(-7px) rotate(-1deg); border-color:var(--gold); }

.gallery-item { position:relative; border:6px solid white !important; outline:1px solid rgba(198,154,86,.55); outline-offset:5px; }
.gallery-item::after { content:"Lihat Foto"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; background:rgba(75,46,29,.6); opacity:0; transition:.45s ease; }
.gallery-item:hover::after { opacity:1; }.gallery-item:hover { transform:translateY(-8px) rotate(.5deg); }

form input,form select,form textarea { transition:.3s ease; }
form input:focus,form select:focus,form textarea:focus { box-shadow:0 0 0 4px rgba(198,154,86,.13); transform:translateY(-1px); }

@keyframes glow { 0%,100%{opacity:.45;transform:translateX(-50%) scale(.85) rotate(0)} 50%{opacity:1;transform:translateX(-50%) scale(1.15) rotate(45deg)} }
@keyframes ornamentFloat { 0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(10deg) translateY(12px)} }
@keyframes gebyokBreath { 0%,100%{filter:brightness(.92)} 50%{filter:brightness(1.08)} }

@media (max-width:767px) {
  .page-rail{width:8px}.gebyok{width:26vw;opacity:.58}.hero-jawa::before{inset:14px;border-radius:120px 120px 12px 12px}
  .hero-medallion{min-height:430px;width:82vw;padding:48px 28px}.hero-medallion h1{font-size:2.7rem}.floating-nav{bottom:10px}.floating-nav a{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }

/* ===== Extra richness layer: preloader, ambient motion, compartments ===== */

/* Preloader */
#preloader { transition: opacity .6s ease, visibility .6s ease; }
#preloader.preloader-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mandala svg { animation: spinSlow 3s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Scroll progress bar */
#scroll-progress { transition: width .1s linear; }

/* Simple elegant gate panels: soft cream texture + a delicate gold corner
   flourish on the outer edges only, so it frames the screen without ever
   competing with the text for contrast. */
.gate-corner { position: absolute; width: 44px; height: 44px; pointer-events: none; }
.gate-corner::before, .gate-corner::after { content: ""; position: absolute; background: #c9ab74; }
.gate-corner::before { width: 100%; height: 1.5px; }
.gate-corner::after { width: 1.5px; height: 100%; }
.gate-corner-tl { top: 28px; left: 28px; }
.gate-corner-tl::before, .gate-corner-tl::after { top: 0; left: 0; }
.gate-corner-tr { top: 28px; right: 28px; }
.gate-corner-tr::before { top: 0; right: 0; }
.gate-corner-tr::after { top: 0; right: 0; }
.gate-corner-bl { bottom: 28px; left: 28px; }
.gate-corner-bl::before { bottom: 0; left: 0; }
.gate-corner-bl::after { bottom: 0; left: 0; }
.gate-corner-br { bottom: 28px; right: 28px; }
.gate-corner-br::before { bottom: 0; right: 0; }
.gate-corner-br::after { bottom: 0; right: 0; }

/* Soft glowing ring behind the small gunungan crest badge */
.gunungan-logo { position: relative; }
.gunungan-logo-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(201,171,116,.5);
  animation: crestPulse 3.5s ease-in-out infinite;
}
@keyframes crestPulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.08); opacity: .9; }
}

/* Diagonal parang-inspired texture, used sparingly alongside the kawung dot pattern */
.parang-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(92,62,33,0.35) 0, rgba(92,62,33,0.35) 1px, transparent 1px, transparent 18px);
}

/* Ambient floating gold bokeh particles, reused across sections for constant gentle motion */
.bokeh-field { z-index: 0; }
.bokeh-field-hero { z-index: 2; }
.bokeh-field span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(212,163,89,0.4), rgba(212,163,89,0) 70%);
  filter: blur(1px);
  animation: bokehFloat 15s ease-in-out infinite;
}
.bokeh-field span:nth-child(1) { width: 120px; height: 120px; left: 8%; top: 18%; animation-duration: 16s; }
.bokeh-field span:nth-child(2) { width: 70px; height: 70px; left: 82%; top: 12%; animation-duration: 12s; animation-delay: -3s; }
.bokeh-field span:nth-child(3) { width: 160px; height: 160px; left: 58%; top: 68%; animation-duration: 20s; animation-delay: -6s; }
.bokeh-field span:nth-child(4) { width: 50px; height: 50px; left: 22%; top: 78%; animation-duration: 10s; animation-delay: -2s; }
.bokeh-field span:nth-child(5) { width: 90px; height: 90px; left: 45%; top: 35%; animation-duration: 18s; animation-delay: -9s; }

/* The hero has brown side panels flanking the card — keep the ambient lights
   clear of them instead of using the generic section-wide positions above. */
.bokeh-field-hero span:nth-child(1) { left: 28%; top: 20%; }
.bokeh-field-hero span:nth-child(2) { left: 72%; top: 15%; }
.bokeh-field-hero span:nth-child(3) { left: 50%; top: 65%; }
@keyframes bokehFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .45; }
  50% { transform: translate(24px, -32px) scale(1.15); opacity: .85; }
}

/* Rotating wisdom quote carousel */
.quote-slide { display: none; opacity: 0; transition: opacity .6s ease; }
.quote-slide.active { display: block; opacity: 1; }
.quote-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(212,163,89,.3); transition: all .3s ease; }
.quote-dot.active { background: #D4A359; transform: scale(1.3); }

/* Tilt photo cards with rotating gold ring + shimmer sweep */
.tilt-card { perspective: 1000px; display: inline-block; }
.tilt-card .photo-frame-outer { transition: transform .15s ease-out; will-change: transform; }
.photo-ring { position: absolute; inset: -16px; border: 1.5px dashed rgba(212,163,89,.55); border-radius: 50%; animation: ringRotate 22s linear infinite; pointer-events: none; }
@keyframes ringRotate { to { transform: rotate(360deg); } }
.photo-frame-inner { position: relative; }
.photo-frame-inner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .9s ease; pointer-events: none;
}
.tilt-card:hover .photo-frame-inner::after { transform: translateX(130%); }

/* Footer social buttons */
.footer-social-btn {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,163,89,.5); color: #5C3E21; background: #fff; transition: all .3s ease;
}
.footer-social-btn:hover { background: #5C3E21; color: #fff; transform: translateY(-3px); }

/* Gallery filter tabs */
.gallery-filter-btn {
  font-family: 'Playfair Display', serif; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 1.15rem; border-radius: 999px; border: 1px solid rgba(212,163,89,.35); color: #5C3E21;
  background: #fff; transition: all .3s ease;
}
.gallery-filter-btn.active, .gallery-filter-btn:hover { background: #5C3E21; color: #fff; border-color: #5C3E21; }
.gallery-item.gallery-hidden { display: none; }

/* Gallery carousel */
.gallery-track {
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-padding-left: 0;
  cursor: grab;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.gallery-track.is-dragging .gallery-slide img { pointer-events: none; }
.gallery-slide {
  width: 78%;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .gallery-slide { width: 46%; } }
@media (min-width: 1024px) { .gallery-slide { width: 31.5%; } }

.gallery-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(212,163,89,.4); color: #5C3E21;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(75,46,29,.35);
  transition: all .25s ease; z-index: 5;
}
.gallery-nav-btn:hover { background: #5C3E21; color: #fff; }
.gallery-nav-prev { left: -6px; }
.gallery-nav-next { right: -6px; }
@media (min-width: 768px) { .gallery-nav-prev { left: -20px; } .gallery-nav-next { right: -20px; } }

.gallery-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(212,163,89,.3); border: none; padding: 0;
  transition: all .3s ease; cursor: pointer;
}
.gallery-dot.active { background: #5C3E21; width: 22px; border-radius: 999px; }

/* Wish card entrance animation — referenced by script.js (opacity-0 animate-fade-in)
   but never defined anywhere, so every wish card stayed permanently invisible. */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn .5s ease forwards; }

/* Wishes wall filter tabs */
.wish-filter-btn {
  font-family: 'Playfair Display', serif; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(212,163,89,.35); color: #5C3E21;
  background: #fff; transition: all .3s ease;
}
.wish-filter-btn.active, .wish-filter-btn:hover { background: #5C3E21; color: #fff; border-color: #5C3E21; }

/* Timeline progress bar - functional scroll-driven fill */
.timeline-line-container { position: relative; }
.timeline-progress-bar {
  position: absolute; left: -2px; top: 0; width: 2px; height: 0%;
  background: linear-gradient(to bottom, #D4A359, #8C5E3C);
  transition: height .15s linear; z-index: 1;
}

/* Music control equalizer bars, shown while music is playing */
.music-control-btn { overflow: visible; }
.music-eq { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; align-items: flex-end; height: 8px; }
.music-control-btn.playing .music-eq { display: flex; }
.music-eq span { width: 2px; background: #D4A359; border-radius: 1px; animation: eqBounce 0.8s ease-in-out infinite; }
.music-eq span:nth-child(1) { height: 4px; animation-delay: 0s; }
.music-eq span:nth-child(2) { height: 8px; animation-delay: .2s; }
.music-eq span:nth-child(3) { height: 5px; animation-delay: .4s; }
@keyframes eqBounce { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* Cursor gold sparkle trail */
.cursor-sparkle {
  position: fixed; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #F5DFA5, #D4A359); pointer-events: none; z-index: 9500;
  animation: sparkleFade .7s ease-out forwards;
}
@keyframes sparkleFade {
  0% { opacity: 1; transform: scale(1) translate(0, 0); }
  100% { opacity: 0; transform: scale(.2) translate(0, -14px); }
}

/* Extra gold-toned jasmine petal variant for a richer falling mix — kept
   clearly warmer/richer than the white variant so the two read as two
   distinct colors instead of blurring into one pale blob. */
.jasmine-petal.gold-petal {
  background: radial-gradient(circle at 30% 30%, #FDE4A8 0%, #D4A359 55%, #93611F 100%);
  box-shadow: inset 1px 1px 2px rgba(255,244,214,.7), 0 4px 12px rgba(107,67,26,.5);
}

@media (prefers-reduced-motion: reduce) {
  .bokeh-field span, .photo-ring, .preloader-mandala svg { animation: none !important; }
}

/* Balanced hero composition: a wide pendopo-inspired plaque, not a cramped circle. */
.hero-jawa {
  min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(75,46,29,.05), transparent 24%, transparent 76%, rgba(75,46,29,.05)),
    radial-gradient(ellipse at 50% 45%, #fffdfa 0 24%, #faf3e8 58%, #ead8bd 100%);
}
.hero-jawa::before {
  inset: 34px max(30px, 9vw);
  border-radius: 12px;
  clip-path: polygon(5% 0,95% 0,100% 10%,100% 90%,95% 100%,5% 100%,0 90%,0 10%);
}
.gebyok { width: min(22vw, 310px); opacity: .86; }
.hero-medallion {
  width: min(72vw, 800px);
  min-height: 390px;
  padding: 72px 90px;
  border-radius: 48% 48% 18% 18% / 55% 55% 20% 20%;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(251,245,234,.84));
  box-shadow: 0 26px 70px rgba(75,46,29,.13), inset 0 0 0 9px rgba(255,255,255,.5), inset 0 0 70px rgba(198,154,86,.08);
}
.hero-medallion::before { top: 30px; }
.hero-medallion::after { bottom: 28px; }
.hero-couple-name {
  font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.gate-couple-name {
  font-size: clamp(2.25rem, 5vw, 3.3rem); line-height: 1; white-space: nowrap; letter-spacing: -.025em;
  background: linear-gradient(100deg, #4b2e1d 0%, #a97a45 20%, #f3dca3 45%, #a97a45 65%, #4b2e1d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.bokeh-field-hero { opacity: .42; }

@media (max-width: 767px) {
  .hero-jawa::before { inset: 16px; }
  .gebyok { width: 17vw; opacity: .42; }
  .hero-medallion { width: 86vw; min-height: 350px; padding: 65px 26px; border-radius: 46% 46% 16% 16% / 40% 40% 15% 15%; }
  .hero-couple-name { font-size: clamp(2.15rem, 10vw, 3.25rem); }
  .gate-couple-name { font-size: clamp(2rem, 10vw, 2.8rem); }
  .bokeh-field-hero { opacity: .24; }
}

.mukadimah-motif { width:180px; height:54px; opacity:.85; }
@media (max-width:640px){ .mukadimah-motif{ width:150px; height:45px; } }

/* Ornate Javanese hero — layered like a ceremonial pendopo backdrop. */
.hero-canopy { position:absolute; z-index:8; top:58px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:20px; width:min(66vw,920px); color:#b98a45; }
.hero-canopy svg { width:88px; height:72px; flex:none; stroke:currentColor; stroke-width:1.25; filter:drop-shadow(0 8px 8px rgba(75,46,29,.12)); }
.canopy-line { height:1px; flex:1; background:linear-gradient(90deg,transparent,#c69a56 35%,#6f472b); position:relative; }
.canopy-line:last-child { transform:scaleX(-1); }
.canopy-line::after { content:"◆"; position:absolute; right:-2px; top:50%; transform:translateY(-50%); font-size:7px; }

.hero-vine { position:absolute; z-index:7; top:50%; width:180px; height:430px; transform:translateY(-50%); opacity:.62; }
.hero-vine-left { left:calc(22vw - 45px); }.hero-vine-right { right:calc(22vw - 45px); transform:translateY(-50%) scaleX(-1); }
.hero-vine::before { content:""; position:absolute; inset:10px 70px; border-left:1px solid #b98a45; border-radius:50%; transform:rotate(8deg); }
.hero-vine span { position:absolute; width:58px; height:88px; border:1px solid rgba(185,138,69,.7); border-radius:90% 10% 90% 10%; transform:rotate(-30deg); background:linear-gradient(145deg,rgba(198,154,86,.08),transparent); }
.hero-vine span:nth-child(1){top:45px;left:65px}.hero-vine span:nth-child(2){top:165px;left:28px;transform:scaleX(-1) rotate(-25deg)}.hero-vine span:nth-child(3){top:285px;left:72px}

.hero-medallion { width:min(70vw,860px); min-height:530px; padding:88px 95px 72px; border-radius:48% 48% 22% 22% / 38% 38% 18% 18%; border:1px solid rgba(185,138,69,.72); outline-offset:10px; }
.hero-medallion::before,.hero-medallion::after { content:""; width:78px; height:22px; background:radial-gradient(ellipse at center,transparent 40%,#c69a56 42% 45%,transparent 47%),linear-gradient(90deg,transparent,#c69a56,transparent); background-size:22px 22px,100% 1px; background-repeat:repeat-x,no-repeat; background-position:center; }
.hero-medallion::before{top:44px}.hero-medallion::after{bottom:34px;transform:translateX(-50%) rotate(180deg)}
.hero-monogram {
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px;
  font:600 20px/1 'Cinzel',serif; letter-spacing:.12em; padding-left:.12em; color:#fffaf0;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.4), transparent 45%),
    linear-gradient(145deg,#8c5e3c,#4b2e1d);
  border:3px double #d5ad6b;
  box-shadow:
    0 9px 22px rgba(75,46,29,.3),
    0 0 0 1px rgba(75,46,29,.5),
    0 0 0 8px rgba(198,154,86,.16),
    inset 0 2px 3px rgba(255,255,255,.3);
}
.hero-couple-name {
  text-shadow: none;
  background: linear-gradient(100deg, #4b2e1d 0%, #a97a45 20%, #f3dca3 45%, #a97a45 65%, #4b2e1d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 10px 22px rgba(75,46,29,.18));
}
.hero-blessing { max-width:510px; margin:2px auto 25px; color:rgba(62,50,38,.68); font:italic 15px/1.7 'Playfair Display',serif; }
.hero-event-meta { display:flex; align-items:center; justify-content:center; gap:20px; width:100%; max-width:600px; padding:15px 24px; border-top:1px solid rgba(198,154,86,.35); border-bottom:1px solid rgba(198,154,86,.35); color:#70482f; }
.hero-event-meta div { flex:1; display:flex; align-items:center; justify-content:center; gap:9px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.hero-event-meta svg { width:15px; color:#c69a56; flex:none; }.meta-separator{color:#c69a56;font-size:7px}.hero-scroll-cue{opacity:.78}
.hero-bottom-ornament { position:absolute; z-index:8; bottom:42px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; width:min(54vw,680px); color:rgba(112,72,47,.65); }
.hero-bottom-ornament span { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(198,154,86,.7)); }.hero-bottom-ornament span:last-child{transform:scaleX(-1)}
.hero-bottom-ornament b { font-size:17px; font-weight:400; letter-spacing:.25em; color:#b98a45; }

@media (max-width:767px){
  .hero-canopy{top:38px;width:78vw;gap:10px}.hero-canopy svg{width:62px;height:54px}.hero-vine{display:none}
  .hero-medallion{width:88vw;min-height:470px;padding:72px 25px 62px;border-radius:45% 45% 16% 16% / 28% 28% 12% 12%}
  .hero-monogram{width:55px;height:55px;font-size:17px}.hero-blessing{font-size:13px;max-width:280px;margin-bottom:18px}
  .hero-event-meta{gap:7px;padding:12px 7px}.hero-event-meta div{font-size:8px;letter-spacing:.03em;gap:5px}.meta-separator{display:none}
  .hero-bottom-ornament{bottom:28px;width:70vw}.hero-bottom-ornament b{font-size:14px}
}

/* Polished bottom dock: balanced spacing and isolated from decorative lines. */
.floating-nav {
  bottom: 22px;
  gap: 5px;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid rgba(226,190,126,.72);
  background: linear-gradient(145deg,rgba(91,56,34,.97),rgba(62,37,22,.98));
  box-shadow: 0 14px 32px rgba(45,25,13,.28),0 3px 8px rgba(45,25,13,.18),inset 0 1px 0 rgba(255,255,255,.1);
  isolation: isolate;
}
.floating-nav::before { content:""; position:absolute; inset:4px; z-index:-1; border:1px solid rgba(234,210,169,.12); border-radius:999px; pointer-events:none; }
.floating-nav a { position:relative; width:42px; height:42px; flex:0 0 42px; color:#dcc495; border:1px solid transparent; }
.floating-nav a svg { width:16px; height:16px; stroke-width:1.75; }
.floating-nav a:hover { color:#fffaf1; background:rgba(255,255,255,.08); border-color:rgba(234,210,169,.2); transform:translateY(-2px); }
.floating-nav a.active { color:#fff; background:linear-gradient(145deg,#c79a55,#9a693b); border-color:rgba(255,236,199,.42); box-shadow:0 5px 13px rgba(31,17,9,.25),inset 0 1px 0 rgba(255,255,255,.22); transform:none; }
.floating-nav a::after { content:attr(aria-label); position:absolute; left:50%; bottom:calc(100% + 12px); transform:translate(-50%,5px); padding:5px 8px; border-radius:6px; background:#3f2819; color:#fff8eb; font-size:9px; letter-spacing:.04em; white-space:nowrap; opacity:0; pointer-events:none; transition:.2s ease; }
.floating-nav a:hover::after { opacity:1; transform:translate(-50%,0); }
.hero-bottom-ornament { bottom:105px; }

@media (max-width:767px){
  .floating-nav{bottom:12px;min-height:54px;padding:6px 8px;gap:2px;max-width:calc(100vw - 26px)}
  .floating-nav a{width:39px;height:39px;flex-basis:39px}.floating-nav a svg{width:15px;height:15px}
  .hero-bottom-ornament{bottom:88px}
}