/* ==========================================================================
   THE WEDDING WORLD — main.css
   The world behind the cover, the HUD, the fullscreen popup system and the
   toast — none of it painted until the guest taps Enter.
   Split out of the original single wedding.css; rules are unchanged and in
   their original order. Load order is critical → main → animations.
   ========================================================================== */
/* ==========================================================================
   5 · SCREEN 2 — THE INTERACTIVE WORLD
   ========================================================================== */
#world{
  position:absolute;inset:0;z-index:20;
  opacity:0;transform:scale(1.07);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease);
  will-change:transform,opacity;
}
#world.live{opacity:1;transform:none}
#world.back{opacity:.25;transform:scale(1.05)}          /* while a popup is open */
#world.gone{visibility:hidden}

/* --- environment layers (parallax) --- */
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
#lyrBatik{background-image:var(--kawung);background-size:82px 82px;opacity:.05;animation:drift 110s linear infinite}
#lyrGlow{
  background:
    radial-gradient(60% 30% at 50% 6%,rgba(201,169,110,.16),transparent 66%),
    radial-gradient(80% 46% at 50% 104%,rgba(23,74,53,.62),transparent 70%);
}

/* --- the world's horizon: the same senja, now seen from inside the valley.
       The cover looks *at* the mountains; here we stand among them, so the
       sun has climbed, the ridges have dropped and opened out, and a third
       range appears far behind. Same palette, different composition. --- */
#lyrSky{
  /* the same re-grade as the cover, held back: inside the valley the
     interface is what has to stay legible, so the bloom is warmer but
     never as hot as the opening screen's */
  background:
    radial-gradient(96% 34% at 50% 43%,rgba(236,196,134,.40) 0%,rgba(202,146,78,.24) 26%,rgba(132,84,40,.10) 48%,transparent 72%),
    linear-gradient(180deg,#040D08 0%,#06180F 16%,#0A2416 32%,#123021 46%,#1B3720 58%,#0E2214 78%,#050D07 100%);
}
/* The .sc-world scene overrides that stood here have moved to
   critical.css, next to the base .sun / .rdg / .mist rules they correct.
   They are geometry, not decoration, and the world is in the live DOM from
   the first paint — arriving in this file, which is deliberately not
   render-blocking, they landed a second late and moved the sun 110px up
   and 54px wider along with four ridge layers. That was a 0.20 layout
   shift, and it was the entire CLS score. Anything that positions or sizes
   an element the first paint already laid out belongs in critical.css. */
/* soft light shafts through the pendopo */
/* no blend mode here on purpose: a full-screen blended layer forces an extra
   compositing pass every frame on mid-range Android for very little gain */
#lyrRays{opacity:.15}
#lyrRays span{
  position:absolute;top:-16%;width:52px;height:132%;
  background:linear-gradient(180deg,rgba(233,214,172,.5),transparent 72%);
  filter:blur(7px);transform-origin:top center;
}
#lyrRays span:nth-child(1){left:16%;transform:rotate(9deg);animation:ray 13s ease-in-out infinite}
#lyrRays span:nth-child(2){left:52%;transform:rotate(-6deg);animation:ray 17s ease-in-out infinite 2s}
#lyrRays span:nth-child(3){left:80%;transform:rotate(4deg);animation:ray 15s ease-in-out infinite 4s}

/* pendopo architecture (single inline SVG, drawn once) */
#lyrArch{color:var(--gold)}
#lyrArch svg{position:absolute;left:50%;transform:translateX(-50%);width:118%;max-width:none}
#archTop{top:0}
#archBot{bottom:0}

/* hanging jasmine garlands (untaian melati) */
.garland{position:absolute;top:0;width:64px;color:var(--ivory);opacity:.5;transform-origin:top center}
.garland.a{left:6px;animation:sway 9s ease-in-out infinite}
.garland.b{right:6px;animation:sway 11s ease-in-out infinite reverse}

/* candle lights */
.candle{position:absolute;width:26px;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(244,228,190,.85),rgba(201,169,110,.28) 42%,transparent 70%);
  animation:flicker 3.4s ease-in-out infinite}

/* --- interactive objects --- */
#objects{position:absolute;inset:0;z-index:6}
.obj{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate3d(-50%,-50%,0);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:96px;padding:6px 0;                 /* generous touch target */
  will-change:transform;
}
.obj .body{
  position:relative;display:grid;place-items:center;isolation:isolate;
  transition:transform .3s var(--ease),filter .3s var(--ease);
  animation:float var(--dur,7s) ease-in-out infinite var(--del,0s);
}
.obj .art{width:var(--s,58px);height:var(--s,58px);color:var(--gold-lt);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.obj .aura{
  position:absolute;inset:-26%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,110,.3),transparent 66%);
  opacity:.5;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.obj .lbl{
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(247,241,229,.72);white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  transition:color .3s var(--ease)
}
.obj:active .body{transform:scale(1.14) translateZ(0);filter:brightness(1.25)}
.obj:active .aura{opacity:1;transform:scale(1.2)}
.obj:active .lbl{color:var(--gold-hi)}
/* ---- every icon sits in a carved kayon niche (the "java" framing) ----
   One background image, zero extra DOM, and trivially removable.
   The couple portrait is skipped — its frame is already a gunungan arch. */
.obj:not(.hero) .body::after{
  content:'';position:absolute;inset:-20% -12%;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100' fill='none' stroke='%23C9A96E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M40 5c8 18 22 28 26 44 4 15-1 30-11 40-5 5-9 10-10 16H35c-1-6-5-11-10-16-10-10-15-25-11-40 4-16 18-26 26-44z'/><path d='M40 15c6 15 17 24 20 36 3 13-1 25-9 34M40 15c-6 15-17 24-20 36-3 13 1 25 9 34' stroke-width='1' opacity='.6'/><path d='M18 47l-7 3 7 4M62 47l7 3-7 4' stroke-width='1.1'/><path d='M40 0v6' /><circle cx='40' cy='11' r='1.8'/><path d='M15 96h50M11 100h58'/></svg>") center/contain no-repeat;
  opacity:.4;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.obj:active .body::after{opacity:.85}

/* a slow pulse ring so objects read as tappable */
.obj .ping{
  position:absolute;inset:-14%;border-radius:50%;
  border:1px solid rgba(201,169,110,.3);
  animation:ping 4.4s ease-out infinite var(--del,0s);
}

/* the centrepiece portrait */
.obj.hero{width:auto}
.obj.hero .frame{
  position:relative;width:min(38vw,150px);aspect-ratio:3/4;
  border-radius:76px 76px 12px 12px;         /* gunungan-style arch */
  overflow:hidden;border:1px solid rgba(201,169,110,.65);
  background:var(--g-800) var(--kawung) center/48px 48px;
  box-shadow:0 22px 46px -20px #000,0 0 0 5px rgba(4,18,12,.6),0 0 0 6px rgba(201,169,110,.3);
}
.obj.hero .frame img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.obj.hero .frame img.ok{opacity:1}
.obj.hero .frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,18,12,.1) 40%,rgba(4,18,12,.8));
}
.obj.hero .cap{position:absolute;left:0;right:0;bottom:9px;z-index:2;text-align:center}
.obj.hero .cap b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ivory);line-height:1.25}
.obj.hero .cap i{display:block;font-family:var(--script);font-style:normal;font-size:13px;color:var(--gold-lt)}
.obj.hero .halo{
  position:absolute;inset:-16%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(201,169,110,.26),transparent 62%);
  animation:breathe 6.5s ease-in-out infinite;
}

/* ==========================================================================
   5b · GUNUNGAN BACKDROP  (background visuals only)
        One Yogyakarta gunungan is the whole Javanese identity here:
        gold light → kelir screen → gunungan silhouette → kawung texture.
        Everything in this section is inert decoration — pointer-events
        none, no layout impact, static raster, no JavaScript.
   ========================================================================== */
#wyg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the gunungan is tinted through `color` (the leather) + `--tat`
   (--tat drives the tatahan, the perforated carving of the hide) */
.wyg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* the original outline gunungan on the cover is superseded by the large
   carved one below — kept in the markup, retired from the composition */
#cover>.gunungan{display:none}

/* --- the blencong: the oil lamp burning behind the screen --- */
.blencong{
  position:absolute;left:50%;width:150%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(233,214,172,.26) 0%,
    rgba(201,169,110,.13) 24%,
    rgba(18,59,42,.05) 46%,
    transparent 64%);
  animation:blencong 8s ease-in-out infinite;
}

/* ---------------- opening screen: the kelir (stretched screen) -------------
   The lamp and its fan of rays have been retired here: the sun setting
   behind the mountains is the light source now, and two competing glows
   on one screen only muddied both. The cloth texture and the kayon stay. */
.kelir{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
/* woven cloth texture + the dark border every kelir is framed with */
.kelir::before{
  content:'';position:absolute;inset:0;
  /* cross-grain: two hairline gradients at an angle to each other read as
     the grain of tanned hide, where a single set of lines read as woven
     cloth. Gradients only — a texture image here would be a request, and
     this screen is the one that must paint before anything downloads. */
  background:
    repeating-linear-gradient(94deg,rgba(0,0,0,.05) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(180deg,rgba(247,241,229,.022) 0 1px,transparent 1px 4px);
  opacity:.62;
}
/* the vignette is now only a corner shadow: any heavier and it would
   swallow the couple standing at the edges of the landscape */
.kelir::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 82% at 50% 44%,transparent 58%,rgba(4,18,12,.42) 100%);
}
/* jasmine at the foot of the kayon, the way a Javanese backdrop is dressed */
.kelir .mel{color:rgba(6,20,13,.9);--tat:rgba(201,169,110,.5)}
/* the gunungan on the cover: near-black hide, warm carving, and a slow
   reveal — .97 → 1 — that settles before the guest reaches for the button.
   It now stands *on* the horizon between the couple rather than filling
   the screen, so the landscape behind it stays legible. */
.kelir .gnn{color:rgba(3,11,7,.88);--tat:rgba(201,169,110,.42)}
.kelir .wyg{animation:gnnIn 2.6s var(--ease) both .2s}



/* ---------------- wedding world: gold light, then the gunungan ------------ */
/* the light sits furthest back and drifts furthest (7px) */
#lyrWygBack .blencong{
  top:42%;width:145%;
  background:radial-gradient(circle,
    rgba(233,214,172,.20) 0%,
    rgba(201,169,110,.11) 26%,
    rgba(18,59,42,.05) 48%,
    transparent 66%);
}
/* the gunungan itself: dark emerald, transparent enough that the couple
   and every interactive object stay the brightest things on screen */
#lyrWygMid .gnn{color:rgba(7,32,23,.42);--tat:rgba(201,169,110,.17)}
/* The interface lives down the middle of this screen — the portrait, the
   eight objects, the HUD — and the kayon behind it ran the full height,
   putting its densest carving (the gapura and its panelled doors) directly
   under the object field. Faded out from a third of the way down, so the
   crown still frames the world and the lower half belongs to the content.
   One static gradient mask on one layer: no per-frame cost. */
#lyrWygMid .wyg{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 32%,rgba(0,0,0,.34) 56%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,#000 32%,rgba(0,0,0,.34) 56%,transparent 78%);
}
/* a kawung halo hugging the puppet — texture, never decoration */
#lyrWygMid::before{
  content:'';position:absolute;inset:0;
  background-image:var(--kawung);
  background-size:64px 64px;
  opacity:.03;
  -webkit-mask-image:radial-gradient(58% 44% at 50% 46%,#000,transparent 72%);
  mask-image:radial-gradient(58% 44% at 50% 46%,#000,transparent 72%);
}

/* a puppet is never perfectly still against the lamp — a 3–4px sway,
   composited, no JavaScript, and switched off with reduced motion */
.sway{animation:wygSway 17s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}

/* ==========================================================================
   6 · HUD
   ========================================================================== */
.hud{position:absolute;z-index:80;opacity:0;transform:translateY(-8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hud.live{opacity:1;transform:none}

#hudMono{
  top:calc(14px + var(--safe-t));left:14px;
  display:flex;align-items:center;gap:9px;
  padding:7px 14px 7px 9px;border-radius:999px;
  border:1px solid rgba(201,169,110,.28);background:rgba(8,34,26,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
#hudMono b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--gold-lt);letter-spacing:.02em}
#hudMono span{font-size:7.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,241,229,.45);line-height:1.2}
#hudMono .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}

#hudMusic{
  /* above the popups: music stays reachable on every screen */
  z-index:100;
  top:calc(14px + var(--safe-t));right:14px;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(201,169,110,.3);background:rgba(8,34,26,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--gold-lt);
}
#hudMusic .bars{display:flex;align-items:flex-end;gap:2px;height:14px}
#hudMusic .bars i{width:2px;height:4px;border-radius:1px;background:currentColor;transition:height .3s}
#hudMusic.on{border-color:rgba(201,169,110,.7)}
#hudMusic.on .bars i{animation:eq 1.05s ease-in-out infinite}
#hudMusic.on .bars i:nth-child(2){animation-delay:.16s}
#hudMusic.on .bars i:nth-child(3){animation-delay:.32s}
#hudMusic.on .bars i:nth-child(4){animation-delay:.48s}
#hudMusic .off{position:absolute;left:50%;top:50%;width:22px;height:1.4px;background:currentColor;
  transform:translate(-50%,-50%) rotate(-45deg);opacity:.85;transition:opacity .3s}
#hudMusic.on .off{opacity:0}

#hudExplore{
  left:50%;bottom:calc(16px + var(--safe-b));transform:translateX(-50%) translateY(8px);
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
#hudExplore.live{transform:translateX(-50%)}
#hudExplore .dots{display:flex;gap:5px}
#hudExplore .dots i{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.3;animation:dots 2.4s ease-in-out infinite}
#hudExplore .dots i:nth-child(2){animation-delay:.25s}
#hudExplore .dots i:nth-child(3){animation-delay:.5s}
#hudExplore b{font-size:8.5px;font-weight:400;letter-spacing:.36em;text-transform:uppercase;color:rgba(247,241,229,.45)}

/* first-visit instruction */
#tutorial{
  position:absolute;z-index:82;left:50%;bottom:calc(64px + var(--safe-b));
  transform:translateX(-50%) translateY(10px);
  padding:11px 20px;border-radius:999px;
  border:1px solid rgba(201,169,110,.3);background:rgba(8,34,26,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:10px;letter-spacing:.14em;color:var(--gold-lt);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .7s var(--ease),transform .7s var(--ease);
}
#tutorial.show{opacity:1;transform:translateX(-50%)}

/* ==========================================================================
   7 · FULLSCREEN POPUP SYSTEM
   ========================================================================== */
#popup{
  position:absolute;inset:0;z-index:90;
  display:none;
  background:radial-gradient(112% 72% at 50% 0%,var(--g-800) 0%,var(--g-850) 44%,var(--g-950) 100%);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
#popup.open{display:block}
#popup::before{
  content:'';position:absolute;inset:0;
  background-image:var(--kawung);background-size:78px 78px;opacity:.05;pointer-events:none;
}
#popup::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 40% at 50% -4%,rgba(201,169,110,.16),transparent 62%);
}

#popScroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;        /* no rubber-band into the page behind */
  padding:calc(74px + var(--safe-t)) 22px calc(34px + var(--safe-b));
}
#popScroll::-webkit-scrollbar{width:0}

#popBar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  padding:calc(14px + var(--safe-t)) 14px 12px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,rgba(8,34,26,.92),rgba(8,34,26,0));
  pointer-events:none;
}
#popBar>*{pointer-events:auto}
#popClose{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(201,169,110,.35);background:rgba(4,18,12,.55);color:var(--gold-lt);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .25s var(--ease),background .25s;
}
#popClose:active{transform:scale(.9);background:rgba(201,169,110,.18)}
#popClose svg{width:16px;height:16px}
#popTitle{font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:rgba(247,241,229,.55)}

/* staged entrance of popup content */
.pin{opacity:0;transform:translate3d(0,22px,0)}
#popup.ready .pin{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
#popup.ready .pin.p1{transition-delay:.06s}
#popup.ready .pin.p2{transition-delay:.14s}
#popup.ready .pin.p3{transition-delay:.22s}
#popup.ready .pin.p4{transition-delay:.30s}
#popup.ready .pin.p5{transition-delay:.38s}

/* shared popup furniture */
.pop-head{text-align:center;margin-bottom:22px}
.pop-head h2{font-size:31px;font-weight:300;line-height:1.2;margin-top:8px}
.pop-head h2 em{font-family:var(--script);font-style:normal;color:var(--gold-lt)}
.pop-head p{margin-top:9px;font-size:13px;color:rgba(247,241,229,.6);max-width:31ch;margin-inline:auto}

.panel{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(201,169,110,.22);
  background:linear-gradient(165deg,rgba(23,74,53,.5),rgba(8,34,26,.72));
}
.panel::before{content:'';position:absolute;inset:0;background-image:var(--truntum);background-size:54px 54px;opacity:.05;pointer-events:none}
.panel .pad{position:relative;padding:22px 20px}

.corner{position:absolute;inset:0;pointer-events:none;color:var(--gold);opacity:.5}
.corner svg{position:absolute;width:20px;height:20px}
.corner svg:nth-child(1){top:7px;left:7px}
.corner svg:nth-child(2){top:7px;right:7px;transform:scaleX(-1)}
.corner svg:nth-child(3){bottom:7px;left:7px;transform:scaleY(-1)}
.corner svg:nth-child(4){bottom:7px;right:7px;transform:scale(-1)}

.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 18px;border-radius:12px;
  font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s,border-color .25s;
}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;flex:none}
.btn-gold{background:linear-gradient(115deg,var(--gold-dk),var(--gold) 42%,var(--gold-hi) 58%,var(--gold) 80%);
  color:var(--g-950);box-shadow:0 10px 24px -14px rgba(201,169,110,.9)}
.btn-ghost{border:1px solid rgba(201,169,110,.38);color:var(--gold-lt);background:rgba(4,18,12,.35)}
.btn-ghost:active{background:rgba(201,169,110,.14)}

.field{margin-bottom:12px}
.field label{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(201,169,110,.85);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:13px;border-radius:11px;font-size:15px;
  background:rgba(4,18,12,.55);border:1px solid rgba(201,169,110,.22);
  -webkit-appearance:none;appearance:none;transition:border-color .25s,background .25s;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:rgba(201,169,110,.6);background:rgba(4,18,12,.75)}
.field input::placeholder,.field textarea::placeholder{color:rgba(247,241,229,.28)}

/* ---------- COUPLE ---------- */
.pf{position:relative;width:150px;aspect-ratio:3/4;margin:0 auto 14px;
  border-radius:75px 75px 14px 14px;overflow:hidden;
  border:1px solid rgba(201,169,110,.5);
  background:var(--g-800) var(--kawung) center/44px 44px;
  box-shadow:0 18px 40px -22px #000}
.pf img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.pf img.ok{opacity:1}
/* the source photos are framed differently, so each gets its own crop
   anchor rather than a blind centre-crop that would cut heads off */
.pf img[data-crop="groom"]{object-position:64% 40%}   /* landscape, subject right */
.pf img[data-crop="bride"]{object-position:50% 32%}   /* portrait, subject high  */
.who{text-align:center}
.who h3{font-size:26px;line-height:1.2}
.who .role{font-family:var(--script);font-size:21px;color:var(--gold-lt);margin-top:2px}
.who .par{margin-top:9px;font-size:12.5px;line-height:1.75;color:rgba(247,241,229,.6)}
.who .par b{font-weight:400;color:rgba(247,241,229,.85)}
.amp-xl{font-family:var(--script);font-size:44px;color:var(--gold);text-align:center;line-height:1;margin:18px 0}

/* ---------- DATE ---------- */
.date-hero{text-align:center;padding:26px 18px 20px}
.date-hero .dow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.date-hero .num{font-family:var(--serif);font-weight:300;font-size:88px;line-height:.92;color:var(--ivory);margin:6px 0 2px}
.date-hero .my{font-family:var(--serif);font-size:19px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-lt)}

.cal{margin:18px auto 0;width:min(300px,100%);border-radius:14px;overflow:hidden;
  border:1px solid rgba(201,169,110,.22);background:rgba(4,18,12,.4)}
.cal .m{padding:9px;text-align:center;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--g-950);background:linear-gradient(115deg,var(--gold-dk),var(--gold) 50%,var(--gold-dk))}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:8px}
.cal .g span{aspect-ratio:1;display:grid;place-items:center;font-size:11px;color:rgba(247,241,229,.55);border-radius:6px}
.cal .g span.h{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:rgba(201,169,110,.75)}
.cal .g span.off{opacity:.18}
.cal .g span.day{position:relative;color:var(--g-950);font-weight:500;
  background:linear-gradient(115deg,var(--gold),var(--gold-hi));}
.cal .g span.day::after{content:'';position:absolute;inset:-3px;border-radius:8px;
  border:1px solid var(--gold);animation:ping 2.6s ease-out infinite}

.cal-note{margin-top:12px;text-align:center;font-size:10px;letter-spacing:.1em;
  line-height:1.6;color:rgba(247,241,229,.34)}

.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.cd div{border:1px solid rgba(201,169,110,.24);border-radius:11px;background:rgba(4,18,12,.42);
  padding:11px 4px 9px;text-align:center}
.cd b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.05;
  color:var(--gold-lt);font-variant-numeric:tabular-nums}
.cd span{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,241,229,.5)}

/* ---------- VENUE ---------- */
.vmedia{position:relative;height:200px;background:var(--g-800) var(--kawung) center/48px 48px;overflow:hidden}
.vmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.vmedia img.ok{opacity:.78}
.vmedia::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,34,26,.95))}
.vmedia .cap{position:absolute;left:20px;right:20px;bottom:14px;z-index:2}
.vmedia .cap h4{font-size:22px}
.vmedia .cap p{font-size:12px;color:rgba(247,241,229,.7)}
.info{display:flex;gap:13px;align-items:flex-start}
.info+.info{margin-top:16px;padding-top:16px;border-top:1px solid rgba(201,169,110,.14)}
.info svg{width:21px;height:21px;color:var(--gold);flex:none;margin-top:3px;opacity:.9}
.info h4{font-size:18px}
.info p{font-size:12.5px;color:rgba(247,241,229,.64);margin-top:2px}

/* ---------- GALLERY ---------- */
#galTrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin:0 -22px;padding:0 22px;gap:14px;
  touch-action:pan-x;overscroll-behavior-x:contain}
#galTrack::-webkit-scrollbar{display:none}
#galTrack figure{flex:0 0 calc(100% - 44px);margin:0;scroll-snap-align:center;
  position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  border:1px solid rgba(201,169,110,.45);background:var(--g-800) var(--kawung) center/48px 48px;
  box-shadow:0 20px 44px -24px #000}
#galTrack figure img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity .8s var(--ease),transform 1s var(--ease)}
#galTrack figure img.ok{opacity:1;transform:none}
#galTrack figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(4,18,12,.88));
  font-family:var(--serif);font-size:15px;color:var(--ivory);text-align:center}
#galThumbs{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:16px}
#galThumbs button{width:42px;height:42px;border-radius:9px;overflow:hidden;
  border:1px solid rgba(201,169,110,.28);opacity:.5;transition:opacity .3s,border-color .3s,transform .3s}
#galThumbs button.on{opacity:1;border-color:var(--gold);transform:translateY(-3px)}
#galThumbs img{width:100%;height:100%;object-fit:cover}
#galCount{text-align:center;margin-top:14px;font-size:10px;letter-spacing:.3em;color:rgba(247,241,229,.5)}

/* immersive single-image viewer (pinch + pan) */
#viewer{position:absolute;inset:0;z-index:120;display:none;background:rgba(3,12,8,.97);touch-action:none}
#viewer.on{display:block}
#viewer img{position:absolute;top:50%;left:50%;max-width:96%;max-height:82%;
  transform:translate(-50%,-50%);transform-origin:center center;will-change:transform}
#viewer .hint{position:absolute;left:0;right:0;bottom:calc(24px + var(--safe-b));text-align:center;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(247,241,229,.35)}
#viewerClose{position:absolute;top:calc(14px + var(--safe-t));right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(201,169,110,.35);background:rgba(4,18,12,.6);color:var(--gold-lt)}
#viewerClose svg{width:16px;height:16px}

/* ---------- WEDDING GIFT ---------- */
/* the padding-right is what keeps the account number clear of the copy
   button parked on top of it; change one and the other has to follow */
.bank{position:relative;border-radius:14px;overflow:hidden;padding:18px 116px 18px 16px;
  border:1px solid rgba(201,169,110,.3);
  background:linear-gradient(135deg,rgba(23,74,53,.72),rgba(4,18,12,.85))}
.bank+.bank{margin-top:12px}
.bank::before{content:'';position:absolute;inset:0;background-image:var(--parang);background-size:52px 52px;opacity:.07}
.bank>*{position:relative}
.bank .brand{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.bank .no{font-family:var(--serif);font-size:25px;letter-spacing:.09em;margin:5px 0 1px;
  font-variant-numeric:tabular-nums;color:var(--ivory)}
.bank .an{font-size:12px;color:rgba(247,241,229,.6)}
.bank .cp{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:10px;
  border:1px solid rgba(201,169,110,.45);background:rgba(4,18,12,.6);
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);
  transition:transform .22s var(--ease),background .22s}
.bank .cp:active{transform:translateY(-50%) scale(.92);background:rgba(201,169,110,.2)}
.bank .cp svg{width:12px;height:12px}

/* ---------- SUGENG RAWUH · KELUARGA · AYAT ---------- */
.wel-open{font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--ivory)}
/* the illuminated capital a Javanese letter would open with */
.wel-open .drop{
  float:left;margin:4px 10px 0 0;
  font-family:var(--serif);font-size:46px;line-height:.82;color:var(--gold);
}
.wel-p{margin-top:14px;font-size:13.5px;line-height:1.85;color:rgba(247,241,229,.66)}
.sign{margin-top:20px;text-align:right;font-family:var(--script);font-size:26px;color:var(--gold-lt)}
.sign small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(247,241,229,.42);margin-top:2px}

.fam{display:grid;gap:12px;margin-top:16px}
.fam-card{
  position:relative;padding:20px 18px;border-radius:14px;text-align:center;overflow:hidden;
  border:1px solid rgba(201,169,110,.24);
  background:linear-gradient(150deg,rgba(23,74,53,.5),rgba(4,18,12,.72));
}
.fam-card::before{content:'';position:absolute;inset:0;background-image:var(--truntum);
  background-size:44px 44px;opacity:.07}
.fam-card>*{position:relative}
.fam-role{font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.fam-name{margin-top:9px;font-size:20px;line-height:1.35;color:var(--ivory)}
.fam-of{margin-top:8px;font-size:11.5px;letter-spacing:.06em;color:rgba(247,241,229,.55)}
.fam-of b{font-weight:400;color:var(--gold-lt)}

.verse .arabic{
  margin-top:16px;font-size:21px;line-height:2.15;text-align:center;color:var(--gold-lt);
  font-family:'Traditional Arabic','Scheherazade New',Georgia,serif;
}
.verse .translit{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:13.5px;
  line-height:1.8;text-align:center;color:rgba(247,241,229,.5)}
.verse .translation{margin-top:14px;font-size:13px;line-height:1.85;text-align:center;
  color:rgba(247,241,229,.68)}

/* ---------- MATUR NUWUN ---------- */
.close-mark{text-align:center;margin-top:26px}
.close-mark .mono{margin:0 auto 16px}
.close-mark .love{font-family:var(--script);font-size:27px;color:var(--gold-lt)}
.close-mark .final-names{margin-top:8px;font-family:var(--serif);font-weight:300;
  font-size:27px;line-height:1.3;color:var(--ivory)}
.close-mark .final-names .amp{display:block;font-family:var(--script);font-size:.7em;color:var(--gold)}

/* the couple's own handles, where they gave one */
.who .ig{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:11.5px;letter-spacing:.1em;color:var(--gold-lt);opacity:.85}
.who .ig svg{width:14px;height:14px}

/* ---------- WISHES ---------- */
.envelope{width:132px;height:96px;margin:0 auto 18px;position:relative;perspective:600px}
.envelope svg{width:100%;height:100%;color:var(--gold-lt)}
.envelope .flap{transform-origin:50% 26%;transform:rotateX(180deg);transition:transform .9s var(--ease-io)}
.envelope.sealed .flap{transform:rotateX(0deg)}
.envelope .seal{opacity:0;transform:scale(.3);transform-origin:center;transition:opacity .4s .8s,transform .5s cubic-bezier(.34,1.4,.5,1) .8s}
.envelope.sealed .seal{opacity:1;transform:scale(1)}
/* the card the guest lands on once they have replied — it stands in place
   of the form, so it is boxed and self-contained rather than a banner */
#wishSent{display:none;text-align:center;padding:20px 16px 18px;
  border-radius:14px;border:1px solid rgba(201,169,110,.3);
  background:linear-gradient(150deg,rgba(23,74,53,.42),rgba(4,18,12,.6))}
#wishSent.on{display:block}
#wishUpdate{margin-top:4px}
/* who the invitation was addressed to, above the form */
.meta-line{text-align:center;font-size:10.5px;letter-spacing:.16em;
  color:rgba(247,241,229,.45);margin-bottom:16px}
.meta-line b{font-weight:400;color:var(--gold-lt)}

/* the button says what it is doing while the wish is in flight */
.btn.busy{opacity:.6;pointer-events:none}

/* the guest book: the page grows, so the list itself never scrolls */
.gb-count{text-align:center;font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);opacity:.9;margin-bottom:6px}
.gb-empty{text-align:center;font-size:12.5px;padding:18px 0}
.skel{height:56px;border-radius:10px;margin-top:12px;
  background:linear-gradient(100deg,rgba(201,169,110,.06),rgba(201,169,110,.14),rgba(201,169,110,.06));
  background-size:220% 100%;animation:skel 1.5s ease-in-out infinite}

.wishes{margin-top:6px}
.wish{padding:13px 0;border-top:1px solid rgba(201,169,110,.13);animation:wIn .5s var(--ease) both}
.wish .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wish .hd b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--gold-lt)}
.wish .hd span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,241,229,.32);flex:none}
.wish p{font-size:12.5px;line-height:1.7;color:rgba(247,241,229,.64);margin-top:3px}

/* ==========================================================================
   7b · KONFIRMASI KEHADIRAN (RSVP)
        Built from the furniture this invitation already owns — .panel,
        .field, .btn — so the screen is recognisably the same hand. The
        only new pieces are the two answer cards and the drawn seal.
   ========================================================================== */
.pop-head .flourish{display:block;width:130px;height:auto;margin:12px auto 0;
  color:var(--gold);opacity:.6}

.rsvp-ask{margin-bottom:14px}
.ask-label{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(201,169,110,.85);margin-bottom:8px}

/* two cards rather than a radio pair: on a phone the whole card is the
   target, and the choice stays readable at arm's length */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opt{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:15px 9px 13px;border-radius:12px;text-align:center;
  border:1px solid rgba(201,169,110,.24);background:rgba(4,18,12,.5);
  transition:border-color .28s var(--ease),background .28s var(--ease),transform .2s var(--ease);
}
.opt svg{width:20px;height:20px;color:var(--gold);opacity:.65;transition:opacity .28s,color .28s}
.opt b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ivory);line-height:1.2}
.opt i{font-style:normal;font-size:10px;line-height:1.45;color:rgba(247,241,229,.42)}
.opt:active{transform:scale(.97)}
.opt.on{border-color:rgba(201,169,110,.75);background:rgba(201,169,110,.12)}
.opt.on svg{opacity:1;color:var(--gold-hi)}
.opt.on b{color:var(--gold-hi)}
.opt.on i{color:rgba(247,241,229,.6)}
/* a gold bead marks the chosen answer — colour alone is never the only cue */
.opt.on::after{
  content:'';position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(201,169,110,.9);
}

/* the head count is only asked of the guests who are coming */
#wGuestField[hidden]{display:none}
/* appearance:none took the native caret with it — draw one back */
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
  padding-right:38px;
}
.field select option{background:#08221A;color:var(--ivory)}

/* the ucapan is required now, so its tag is gold and reads as a
   requirement rather than fading away like the "Opsional" it replaced */
.req-tag{margin-left:6px;letter-spacing:.14em;color:rgba(201,169,110,.75)}
.rsvp-note{margin-top:12px;text-align:center;font-size:10px;letter-spacing:.1em;
  line-height:1.6;color:rgba(247,241,229,.34)}

/* ---- the confirmation: a gold seal drawn on, then the answer read back ---- */
/* the confirmation. The envelope above the form is already the success
   moment — it folds shut and takes a gold seal — so this block only has
   to read the answer back. */
#wishSent h3{font-size:21px;margin-bottom:4px;color:var(--gold-lt)}
#wishSent .muted{font-size:12.5px;line-height:1.7;max-width:32ch;margin-inline:auto}
.rsvp-recap{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.rsvp-recap span{
  padding:7px 14px;border-radius:999px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(201,169,110,.3);background:rgba(4,18,12,.4);color:var(--gold-lt);
}

/* ==========================================================================
   8 · TOAST
   ========================================================================== */
#toast{
  position:absolute;z-index:200;left:50%;bottom:calc(74px + var(--safe-b));
  transform:translateX(-50%) translateY(12px);
  padding:11px 20px;border-radius:999px;
  border:1px solid rgba(201,169,110,.4);background:rgba(8,34,26,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
#toast.show{opacity:1;transform:translateX(-50%)}


/* short phones — shrink the world so nothing collides */
@media (max-height:680px){
  .obj{width:84px}
  .obj .art{--s:48px}
  .obj.hero .frame{width:min(34vw,124px)}
  .obj .lbl{font-size:8px}
}