/* ============================================================
   UNDANGAN MORR & MEIKY — Rose Quartz & Serenity Garden
   Optimised for low-end phones: minimal GPU layers, no
   backdrop-filter on key paths, CSS variables for theming.
   ============================================================ */

:root {
  --rose:      #F7CAD0;
  --serenity:  #92A8D1;
  --accent:    #E8B4BE;
  --mauve:     #C9A0C0;
  --ink:       #5C3D5A;
  --ink-soft:  #9A7098;
  --paper:     #FFF5F8;
  --card-bg:   rgba(255,244,248,0.93);
  --line:      rgba(92,61,90,.15);
  --serif: "Cormorant Garamond","Times New Roman",serif;
  --sans:  "Karla","Segoe UI",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font:400 1rem/1.65 var(--sans);
  color:var(--ink);
  background:#EDD8E4;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked,html:has(body.locked){overflow:hidden}

/* ── Garden Interior Background (Harmonized Watercolor Theme) ── */
#garden-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../assets/img/interior-bg.jpg") center top / cover no-repeat;
  filter:saturate(1.05);
}

/* Soft light wash in center so interior text is crisp & legible */
#garden-canvas::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 45%,rgba(255,252,254,.72) 0%,rgba(255,250,253,.35) 60%,transparent 100%);
  pointer-events:none;
}

/* Subtle watercolor ground glow */
#garden-canvas::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 65%,rgba(255,245,248,.6) 100%);
  pointer-events:none;
}

/* Parallax layers — only transform: translate, no 3D */
.gd-layer{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  will-change:transform;contain:strict;
}

/* ── Page wrapper ── */
.page{
  max-width:34rem;margin-inline:auto;
  background:transparent;position:relative;overflow:hidden;
}

/* ── Glass-morphism sections (Watercolor Paper Card) ── */
.section-glass{
  background:rgba(255,252,254,0.88);
  border:1.5px solid rgba(247,202,208,.65);
  border-radius:24px;
  padding:36px 24px;
  box-shadow:0 8px 32px rgba(146,168,209,.12), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ── Eyebrow ── */
.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font:600 .66rem/1 var(--sans);
  letter-spacing:.34em;text-transform:uppercase;text-indent:.34em;
  color:var(--ink-soft);
}
.eyebrow::before,.eyebrow::after{
  content:"";width:24px;height:1px;
  background:var(--mauve);opacity:.5;flex:none;
}

/* ── Typography ── */
.section-title{
  font:500 clamp(1.7rem,6vw,2.2rem)/1.2 "Cinzel",var(--serif);
  letter-spacing:.08em;
  text-align:center;
  margin-top:14px;
  color:#4A2D48;
}
.section-intro{text-align:center;color:var(--ink-soft);font-size:.92rem;max-width:26rem;margin:14px auto 30px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--mauve);border-radius:999px;
  background:transparent;color:var(--ink);
  font:600 .7rem/1 var(--sans);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;
  padding:14px 24px;cursor:pointer;text-decoration:none;
  transition:background .2s,color .2s,transform .1s;
  position:relative;z-index:2;
}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn-solid{
  background:var(--ink);color:var(--paper);border-color:transparent;
  box-shadow:0 4px 16px rgba(92,61,90,.28);
}
.btn-solid:hover{background:#4a3048}
.btn-wide{width:100%}
.btn-mini{padding:9px 14px;font-size:.62rem;letter-spacing:.18em}
.btn:focus-visible,.radio-card:has(input:focus-visible),.stepper button:focus-visible{
  outline:2px solid var(--serenity);outline-offset:3px
}
.link-btn{
  display:inline-block;margin-top:14px;
  background:none;border:0;cursor:pointer;
  font:600 .72rem/1 var(--sans);letter-spacing:.12em;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:var(--ink)}

/* ── Curtain ── */
.curtain{
  position:absolute;top:0;width:52%;height:100%;
  z-index:2;pointer-events:none;overflow:hidden;
  /* transition only on .cover.open — saves paint on idle */
  transition:transform 1.3s cubic-bezier(.77,0,.18,1);
}
.curtain-l{
  left:0;transform-origin:top left;
  background:linear-gradient(160deg, #FFF0F4, #F7CBD5 40%, #F3B9C7 70%, #FCE6EC);
}
.curtain-r{
  right:0;transform-origin:top right;
  background:linear-gradient(200deg, #FFF0F4, #F7CBD5 40%, #F3B9C7 70%, #FCE6EC);
}
/* Fold lines via box-shadow (single composite layer) */
.curtain-l{box-shadow:inset -6px 0 12px rgba(0,0,0,.06),inset 14px 0 0 rgba(255,255,255,.12),inset 32px 0 0 rgba(0,0,0,.04)}
.curtain-r{box-shadow:inset 6px 0 12px rgba(0,0,0,.06),inset -14px 0 0 rgba(255,255,255,.12),inset -32px 0 0 rgba(0,0,0,.04)}
.cover.open .curtain-l{transform:scaleX(0)}
.cover.open .curtain-r{transform:scaleX(0)}

/* Curtain flowers — limit to 4, use opacity animation only */
.curtain-flower{
  position:absolute;
  animation:sway 3.5s ease-in-out infinite alternate;
  will-change:transform;
}
.curtain-l .curtain-flower:nth-child(1){top:10%;left:22%;animation-delay:0s}
.curtain-l .curtain-flower:nth-child(2){top:32%;left:54%;animation-delay:.5s}
.curtain-l .curtain-flower:nth-child(3){top:56%;left:18%;animation-delay:1s}
.curtain-l .curtain-flower:nth-child(4){top:76%;left:48%;animation-delay:.3s}
.curtain-r .curtain-flower:nth-child(1){top:14%;right:22%;animation-delay:.2s}
.curtain-r .curtain-flower:nth-child(2){top:38%;right:54%;animation-delay:.7s}
.curtain-r .curtain-flower:nth-child(3){top:60%;right:18%;animation-delay:1.1s}
.curtain-r .curtain-flower:nth-child(4){top:80%;right:46%;animation-delay:.4s}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* ── Cover (Luxury Watercolor Chandelier & Drapes) ── */
.cover{
  position:fixed;inset:0;z-index:50;
  width:min(100%,34rem);height:100vh;height:100dvh;
  margin:auto;background:#FFF5F8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1),visibility 0s linear .9s;
  overflow:hidden;
}
.cover.open{
  opacity:0;
  transform:scale(1.04);
  visibility:hidden;
  pointer-events:none;
}

.cover-bg{
  position:absolute;inset:0;z-index:0;
  background:url("../assets/img/cover-bg.jpg") center top / cover no-repeat;
  filter:saturate(1.05);
}

/* Subtle soft vignette overlay for crisp text readability in center */
.cover-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 60% at 50% 52%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  pointer-events:none;
}

/* ── Revealed Story Card (Inside the Pavilion behind Curtains) ── */
.cover-story-wrap{
  position:relative;z-index:4;
  width:100%;max-width:28.5rem;
  padding:24px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;
  transform:scale(0.92) translateY(16px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1) 0.5s, transform 1s cubic-bezier(.16,1,.3,1) 0.5s;
  pointer-events:none;
}
.cover.curtains-opened .cover-story-wrap{
  opacity:1;
  transform:scale(1) translateY(0);
  pointer-events:auto;
}

.story-content{
  position:relative;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.98) 0%, rgba(255,248,252,0.96) 60%, rgba(254,242,246,0.95) 100%);
  border:1.5px solid rgba(218,165,32,0.6);
  border-radius:28px;
  padding:36px 22px 28px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 48px rgba(92,61,90,0.2), 0 0 0 1px rgba(247,202,208,0.7) inset, 0 1px 0 rgba(255,255,255,1) inset;
  text-align:center;
  width:100%;
}

/* Vintage Lace Corners */
.lace-corner{
  position:absolute;pointer-events:none;z-index:2;
}
.lace-tl{top:8px;left:8px}
.lace-tr{top:8px;right:8px}
.lace-bl{bottom:8px;left:8px}
.lace-br{bottom:8px;right:8px}

.story-crown-wrap{
  display:flex;justify-content:center;
  margin-bottom:8px;
  animation:crown-glow 3s ease-in-out infinite alternate;
}
@keyframes crown-glow{
  from{filter:drop-shadow(0 2px 4px rgba(180, 195, 215, 0.45));transform:translateY(0)}
  to{filter:drop-shadow(0 4px 10px rgba(200, 215, 235, 0.8));transform:translateY(-2px)}
}

.story-salutation{
  font:italic 400 clamp(1.4rem,5.5vw,1.8rem)/1 "Great Vibes", cursive;
  color:#92A8D1;
  margin-bottom:2px;
  text-shadow:0 1px 4px rgba(146,168,209,0.3);
}

.story-guest-name{
  font:600 clamp(1.2rem,4.6vw,1.5rem)/1.2 "Cinzel", var(--serif);
  color:#4A2D48;
  letter-spacing:.08em;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(218,165,32,0.35);
}

.story-body{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:22px;
}
.story-body p{
  font:500 clamp(.92rem,3.5vw,1.05rem)/1.75 "Cormorant Garamond", var(--serif);
  color:#321630;
  letter-spacing:.02em;
  text-shadow:0 0.5px 0 rgba(255,255,255,0.6);
}

.story-signature{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:22px;
}
.story-signature .sig-name{
  font:600 clamp(1.25rem,4.8vw,1.6rem)/1.1 "Cinzel", var(--serif);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#4A2D48;
}
.story-signature .sig-amp{
  font:400 clamp(1.6rem,6vw,2.1rem)/.8 "Great Vibes", cursive;
  color:#DAA520;
  margin:0 2px;
}

.btn-open-invitation{
  width:100%;
  padding:15px 28px;
  font-size:.74rem;
  letter-spacing:.26em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg, #5C3D5A 0%, #7B4F79 50%, #4A2D48 100%);
  color:#FFF5F8;
  border:1px solid rgba(218,165,32,0.4);
  box-shadow:0 6px 22px rgba(92,61,90,0.35), 0 0 14px rgba(218,165,32,0.25);
  transition:all .3s ease;
}
.btn-open-invitation:hover{
  background:linear-gradient(135deg, #4A2D48 0%, #683E66 50%, #3D223B 100%);
  box-shadow:0 8px 28px rgba(92,61,90,0.45), 0 0 20px rgba(218,165,32,0.4);
  transform:scale(1.02);
}

/* ── Animated Royal Silk Curtains ── */
.cover-curtains{
  position:absolute;inset:0;z-index:6;
  pointer-events:none;
  overflow:hidden;
}

/* Scalloped Valance / Pelmet at the Top */
.royal-valance-top{
  position:absolute;top:0;left:0;right:0;height:65px;
  z-index:7;display:flex;justify-content:space-around;
  pointer-events:none;
  transition:transform 1.3s cubic-bezier(.77,0,.18,1), opacity 1s ease;
}
.valance-swag{
  flex:1;height:100%;
  background:linear-gradient(180deg, #FFF2F5 0%, #FAD7E0 45%, #F4BDCA 80%, #EEA8B8 100%);
  border-bottom-left-radius:50% 70%;
  border-bottom-right-radius:50% 70%;
  box-shadow:0 4px 14px rgba(180, 120, 145, 0.2), inset 0 -2px 0 rgba(226, 232, 240, 0.95), inset 0 -3px 0 rgba(148, 163, 184, 0.6);
  margin:0 -4px;
}
.cover.curtains-opened .royal-valance-top{
  transform:translateY(-100%);
  opacity:0;
}

/* Left & Right Silk Curtains */
.curtain-door{
  position:absolute;top:0;bottom:0;width:56%;
  transition:transform 1.6s cubic-bezier(.77,0,.18,1), opacity 1.3s ease .2s;
  pointer-events:auto;
  box-shadow:0 0 40px rgba(0,0,0,0.25);
  overflow:hidden;
}
.curtain-door-l{
  left:0;
  transform-origin:left center;
  background:linear-gradient(135deg,
    #FFF5F7 0%,
    #FCE4EB 18%,
    #F7CBD5 38%,
    #FDEBF0 55%,
    #F3BAC6 75%,
    #FFF0F4 100%
  );
  border-right:2px solid rgba(255,255,255,0.7);
}
.curtain-door-r{
  right:0;
  transform-origin:right center;
  background:linear-gradient(225deg,
    #FFF5F7 0%,
    #FCE4EB 18%,
    #F7CBD5 38%,
    #FDEBF0 55%,
    #F3BAC6 75%,
    #FFF0F4 100%
  );
  border-left:2px solid rgba(255,255,255,0.7);
}

/* Satin Silk Sheen overlay */
.curtain-silk-sheen{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0.05) 25%,
    rgba(180,120,138,0.1) 50%,
    rgba(255,255,255,0.3) 75%,
    rgba(160,105,122,0.12) 100%
  );
  pointer-events:none;
}

/* Realistic folds texture on curtains */
.curtain-pleats{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0.25) 0px,
    rgba(255,255,255,0) 14px,
    rgba(195,130,148,0.14) 28px,
    rgba(255,255,255,0.18) 42px
  );
  pointer-events:none;
}

/* Silver braided tieback band on curtains */
.curtain-tieback-gold{
  position:absolute;bottom:25%;
  width:42px;height:12px;
  background:linear-gradient(90deg, #A8B8C8, #FFFFFF 40%, #90A0B2 70%, #E2E8F0 100%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(120, 140, 165, 0.35);
}
.curtain-door-l .curtain-tieback-gold{right:8px}
.curtain-door-r .curtain-tieback-gold{left:8px}

/* When curtains opened - smooth cinematic parting */
.cover.curtains-opened .curtain-door-l{
  transform:translateX(-108%) scaleX(0.38) skewY(-2deg);
  opacity:0;
  pointer-events:none;
}
.cover.curtains-opened .curtain-door-r{
  transform:translateX(108%) scaleX(0.38) skewY(2deg);
  opacity:0;
  pointer-events:none;
}

/* ── Front Royal Baroque Seal / Click to Open ── */
.curtain-front-seal{
  position:absolute;inset:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:opacity 0.75s ease, transform 0.85s cubic-bezier(.16,1,.3,1);
}
.cover.curtains-opened .curtain-front-seal{
  opacity:0;
  transform:scale(0.88) translateY(-30px);
  pointer-events:none;
}

.seal-inner{
  background:radial-gradient(ellipse at 50% 30%, rgba(255,253,250,0.97) 0%, rgba(255,248,252,0.95) 100%);
  border:1.5px solid rgba(218,165,32,0.7);
  border-radius:28px;
  padding:34px 24px 28px;
  max-width:23rem;width:100%;
  text-align:center;
  box-shadow:0 16px 48px rgba(92,61,90,0.22), 0 0 0 1px rgba(247,202,208,0.7) inset, 0 1px 0 rgba(255,255,255,0.95) inset;
  position:relative;
  z-index:10;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s ease, box-shadow .3s ease;
}
.seal-inner:hover{
  transform:scale(1.02);
  box-shadow:0 20px 54px rgba(92,61,90,0.28), 0 0 18px rgba(218,165,32,0.35);
}

.royal-crown-badge{
  display:flex;justify-content:center;
  margin-bottom:6px;
  animation:crown-glow 3s ease-in-out infinite alternate;
}

.baroque-monogram-ring{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle, #FFFDF8 0%, #FDF2F5 70%, #F9DEE5 100%);
  border:1.5px solid #DAA520;
  box-shadow:0 4px 14px rgba(218,165,32,0.25), 0 0 0 3px rgba(247,202,208,0.5);
  margin-bottom:12px;
}
.baroque-monogram-ring .m-letter{
  font:600 1.25rem/1 "Cinzel", var(--serif);
  color:#5C3D5A;
}
.baroque-monogram-ring .m-amp{
  font:400 1.4rem/1 "Great Vibes", cursive;
  color:#DAA520;
}

.seal-intro{
  font:italic 400 clamp(.85rem,3.2vw,1rem)/1.4 var(--serif);
  color:#6B4B69;
  letter-spacing:.06em;
  margin-bottom:4px;
}

.seal-names{
  font:500 clamp(1.8rem,7.5vw,2.4rem)/1.1 "Cinzel", var(--serif);
  letter-spacing:.12em;text-indent:.12em;
  color:#4A2D48;
  text-transform:uppercase;
  margin-bottom:4px;
}
.seal-amp{
  font:400 clamp(2.2rem,8.5vw,2.8rem)/.8 "Great Vibes", cursive;
  color:#DAA520;
  vertical-align:middle;
  margin:0 2px;
}

.seal-date{
  font:600 clamp(.62rem,2.4vw,.72rem)/1.6 var(--sans);
  letter-spacing:.26em;text-transform:uppercase;
  color:#8C628A;
  margin-bottom:16px;
}

.seal-guest-box{
  background:rgba(247,202,208,0.25);
  border:1px dashed rgba(218,165,32,0.55);
  border-radius:14px;
  padding:10px 16px;
  margin-bottom:16px;
  display:flex;flex-direction:column;gap:3px;
}
.seal-guest-label{
  font:600 .56rem/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;
  color:#8C628A;
}
.seal-guest-name{
  font:italic 600 clamp(1.05rem,4vw,1.3rem)/1.3 var(--serif);
  color:#4A2D48;
  overflow-wrap:anywhere;
}

/* ── "Click to Open" Prompt Animation (Clean without expanding ring) ── */
.seal-click-prompt{
  position:relative;
  z-index:12;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;
  padding:8px 16px;
  margin-top:2px;
  background:none;
  border:0;
  outline:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.click-icon{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  background:radial-gradient(circle, #FFFDF8 0%, #FFF5F8 60%, #FEEDF2 100%);
  border:1.5px solid #DAA520;
  box-shadow:0 4px 18px rgba(218, 165, 32, 0.48), 0 0 10px rgba(218, 165, 32, 0.22) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  animation:click-bounce 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes click-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}
.click-text{
  font:600 .62rem/1.2 var(--sans);
  letter-spacing:.24em;
  color:#5C3D5A;
  margin-top:3px;
  text-shadow:0 0 8px rgba(255,255,255,0.9);
  pointer-events:none;
}

/* ── Sparkles (cover only) ── */
.sparkle-layer{position:absolute;inset:0;pointer-events:none !important;overflow:hidden;z-index:1}
.sparkle{
  position:absolute;border-radius:50%;pointer-events:none !important;
  width:var(--ss);height:var(--ss);
  background:radial-gradient(circle,#fff 0%,var(--serenity) 50%,transparent 70%);
  opacity:0;animation:spark var(--sd) ease-in-out var(--sdelay) infinite;
}
@keyframes spark{0%,100%{opacity:0;transform:scale(0)}50%{opacity:.8;transform:scale(1)}}

/* ── Section ── */
.section{padding:60px 22px;position:relative;z-index:10}

/* Royal card header crown flourish */
.royal-card-header{
  display:flex;justify-content:center;
  margin-bottom:8px;
  filter:drop-shadow(0 2px 4px rgba(148, 163, 184, 0.45));
}

/* ── Hero (Full Portrait photo with bottom text overlay matching reference) ── */
.hero{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  padding:0 20px 24px;
  background:url("../assets/img/img-4.jpeg") center 10% / cover no-repeat;
}

/* ── Minimalist Subtle Scroll Down Chevron Indicator ── */
.scroll-down-indicator{
  position:relative;z-index:4;
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.scroll-down-indicator.hidden{
  opacity:0;
  transform:translateY(10px);
}
.scroll-chevron-minimal{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#FFFFFF;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  animation:scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-bounce{
  0%,100%{transform:translateY(0);opacity:0.75}
  50%{transform:translateY(5px);opacity:1}
}

.hero-gradient{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.32) 62%,
    rgba(0,0,0,0.72) 80%,
    rgba(0,0,0,0.92) 100%
  );
}

.hero-text-wrap{
  position:relative;z-index:2;
  width:100%;max-width:28rem;
  margin:0 auto;
  color:#FFFFFF;
  text-shadow:0 2px 10px rgba(0,0,0,0.75);
}

.hero-tagline{
  font:400 clamp(1.7rem,6.5vw,2.3rem)/1 "Great Vibes",cursive;
  color:#F7CAD0;
  margin-bottom:4px;
  letter-spacing:.02em;
}

.hero-names{
  font:500 clamp(1.9rem,8vw,2.7rem)/1.1 "Cinzel",var(--serif);
  letter-spacing:.12em;text-indent:.12em;
  color:#FFFFFF;
  text-transform:uppercase;
  margin:0 0 6px;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
}

.hero-date{
  font:500 clamp(.85rem,3.2vw,1rem)/1.4 "Cormorant Garamond",var(--serif);
  letter-spacing:.15em;
  color:rgba(255,255,255,0.92);
  margin-bottom:12px;
}

.hero-divider{
  width:75%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent);
  margin:0 auto 12px;
}

.hero-quote{
  font:italic 400 clamp(.75rem,2.8vw,.88rem)/1.5 var(--serif);
  color:rgba(255,255,255,0.85);
  max-width:24rem;
  margin:0 auto 16px;
}

/* Hero countdown */
.hero .countdown{
  display:flex;justify-content:center;
  margin-top:10px;
}
.hero .cd{
  min-width:54px;padding:2px 6px;
}
.hero .cd + .cd{
  border-left:1px solid rgba(255,255,255,0.25);
}
.hero .cd-num{
  display:block;
  font:500 1.7rem/1.1 "Cinzel",var(--serif);
  font-variant-numeric:tabular-nums;
  color:#FFFFFF;
}
.hero .cd-label{
  display:block;
  margin-top:3px;
  font:600 .5rem/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
.hero .cd-done{
  margin-top:12px;
  font:italic 500 1.1rem/1.4 var(--serif);
  color:#F7CAD0;
}

/* mempelai */
.couple{text-align:center;margin-top:32px}
.person-name{font:600 1.75rem/1.2 "Cinzel",var(--serif);color:#4A2D48;letter-spacing:.04em}
.person-nick{font:400 1.6rem/1 "Great Vibes",cursive;color:#D48B9B;margin-top:4px}
.person-parents{margin-top:10px;color:var(--ink-soft);font-size:.86rem}
.amp-divider{margin:28px 0;display:flex;align-items:center;gap:14px}
.amp-divider::before,.amp-divider::after{content:"";flex:1;height:1px;background:var(--rose);opacity:.7}
.amp-divider span{font:400 2.2rem/1 "Great Vibes",cursive;color:#92A8D1}

/* card */
.card{
  background:rgba(255,255,255,0.78);
  border:1.5px solid rgba(247,202,208,.6);
  border-radius:20px;
  padding:28px 22px;
  box-shadow:0 6px 22px rgba(92,61,90,.05);
}

/* event */
.event-card{text-align:center}
.event-day{font:600 .64rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--serenity)}
.event-date{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.event-date .d{font:500 3.4rem/1 "Cinzel",var(--serif);color:#4A2D48}
.event-date .my{display:flex;flex-direction:column;gap:2px;text-align:left;font:600 .7rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.event-time{font:italic 500 1.1rem/1 var(--serif);color:var(--ink-soft);margin-top:10px}
.event-rows{margin:24px 0}
.event-row{display:flex;gap:14px;padding:11px 2px;border-top:1px dashed rgba(247,202,208,.7);text-align:left;font-size:.9rem}
.event-row:last-child{border-bottom:1px dashed rgba(247,202,208,.7)}
.row-label{flex:none;width:68px;font:600 .58rem/2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.row-val{flex:1;align-self:center}

/* gallery */
.gallery{display:flex;flex-direction:column;gap:30px;margin-top:30px;align-items:center}
.photo-frame{
  position:relative;width:min(100%,290px);
  background:#FFF8FA;padding:9px 9px 13px;border-radius:3px;
  box-shadow:0 10px 28px rgba(92,61,90,.15);rotate:-1.8deg;
  transition:transform .25s,box-shadow .25s;
}
.photo-frame:hover{transform:scale(1.02) rotate(0deg) !important;box-shadow:0 18px 38px rgba(92,61,90,.22);z-index:2}
.photo-frame.tilt-r{rotate:1.6deg}
.photo-frame::before{content:"";position:absolute;top:-10px;left:50%;width:80px;height:22px;translate:-50% 0;background:rgba(146,168,209,.3);border-radius:2px;rotate:-2deg}
.frame-inner{position:relative;aspect-ratio:4/5;overflow:hidden;background:#F5E8EE;border-radius:2px}
.frame-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-soft);font:italic 500 .92rem var(--serif)}
.photo-cap{text-align:center;padding-top:10px;font:italic 500 .92rem/1 var(--serif);color:var(--ink-soft)}

/* kado */
.bank-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card-bg);border:1px solid rgba(247,202,208,.5);border-radius:16px;padding:18px}
.bank-card+.bank-card{margin-top:12px}
.bank-name{font:600 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--serenity);margin-bottom:6px}
.bank-num{font:500 1.45rem/1 var(--serif);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.bank-holder{margin-top:5px;color:var(--ink-soft);font-size:.78rem}

/* rsvp */
.radio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.radio-card{position:relative;display:block;cursor:pointer;border:1.5px solid rgba(247,202,208,.6);border-radius:14px;background:var(--card-bg);padding:13px 5px 11px;text-align:center;transition:border-color .18s,background .18s}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-title{display:block;font:600 .86rem/1 var(--sans)}
.radio-sub{display:block;margin-top:4px;font-size:.64rem;color:var(--ink-soft)}
.radio-card.selected,.radio-card:has(input:checked){border-color:var(--ink);background:#FFF5F8}
.radio-card.selected .radio-title{color:var(--ink)}

.stepper-row{display:flex;align-items:center;gap:11px;margin-top:13px}
.stepper{display:inline-flex;align-items:stretch;border:1.5px solid rgba(247,202,208,.6);border-radius:999px;background:var(--card-bg);overflow:hidden}
.stepper button{width:42px;border:0;background:transparent;cursor:pointer;font:500 1.2rem/1 var(--serif);color:var(--ink)}
.stepper button:hover{background:rgba(247,202,208,.25)}
.stepper input{width:50px;border:0;background:transparent;text-align:center;border-left:1px solid rgba(247,202,208,.5);border-right:1px solid rgba(247,202,208,.5);font:500 1.2rem/1 var(--serif);color:var(--ink)}
.stepper input:focus{outline:none;background:rgba(247,202,208,.12)}
.stepper-hint{color:var(--ink-soft);font-size:.8rem}

.field{display:block;margin-bottom:22px}
.field-label{display:block;margin-bottom:7px;font:600 .6rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.field-label em{font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.8}
.field input[type=text],.field textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(247,202,208,.6);padding:9px 2px;font:400 .96rem/1.5 var(--sans);color:var(--ink);border-radius:0;resize:vertical;transition:border-color .18s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--serenity)}
.field ::placeholder{color:rgba(154,112,152,.45)}
.form-error{color:#C0556A;font-size:.83rem;margin:-7px 0 16px}
.rsvp-success{text-align:center}
.success-ic{width:44px;color:var(--serenity);margin-bottom:12px}
.success-title{font:500 1.65rem/1.2 var(--serif)}
.success-text{margin:9px 0 18px;color:var(--ink-soft);font-size:.9rem}

/* ── Wishes (scrollable) ── */
.wishes-box{
  height:360px;overflow-y:auto;margin-top:22px;
  border:1.5px solid rgba(247,202,208,.5);border-radius:18px;
  padding:14px;background:rgba(255,248,252,.9);
  scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--rose) transparent;
}
.wishes-box::-webkit-scrollbar{width:4px}
.wishes-box::-webkit-scrollbar-track{background:transparent}
.wishes-box::-webkit-scrollbar-thumb{background:var(--rose);border-radius:99px}
.wish-card{background:rgba(255,255,255,.82);border:1px solid rgba(92,61,90,.08);border-radius:14px;padding:14px 16px;margin-bottom:10px;animation:wish-in .4s ease forwards}
.wish-card:last-child{margin-bottom:0}
@keyframes wish-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wish-header{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.wish-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--rose),var(--serenity));display:flex;align-items:center;justify-content:center;font:600 .82rem/1 var(--sans);color:#fff;text-transform:uppercase}
.wish-name{font:600 .86rem/1.2 var(--sans);color:var(--ink)}
.wish-time{font-size:.68rem;color:var(--ink-soft);margin-top:1px}
.wish-text{font:italic 400 .93rem/1.6 var(--serif);color:var(--ink)}
.wish-badge{margin-left:auto;flex-shrink:0;font-size:.7rem}
.wishes-empty{text-align:center;padding:50px 16px;color:var(--ink-soft);font:italic 500 .95rem/1.6 var(--serif)}

/* ── Footer ── */
.footer{text-align:center;padding-bottom:90px}
.footer-glass{
  padding:36px 24px 32px;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.97) 0%, rgba(255,248,252,0.95) 100%);
  border:1.5px solid rgba(218,165,32,0.55);
  box-shadow:0 16px 48px rgba(92,61,90,0.16), 0 0 0 1px rgba(247,202,208,0.6) inset;
}
.footer-quote{
  font:italic 500 1.12rem/1.7 "Cormorant Garamond", var(--serif);
  color:#381B34;
  max-width:22rem;margin:10px auto 26px;
  text-shadow:0 0.5px 0 rgba(255,255,255,0.8);
}
.footer-sign{
  color:#6B4B69;
  font:600 clamp(.84rem,3.2vw,.94rem)/1.4 var(--sans);
  letter-spacing:.06em;
  margin-bottom:6px;
}
.footer-names{
  font:600 clamp(1.8rem,7.5vw,2.5rem)/1.15 "Cinzel", var(--serif);
  color:#321630;
  letter-spacing:.1em;
  margin:4px 0 18px;
  text-shadow:0 1px 4px rgba(255,255,255,0.8);
}
.footer-amp{
  font:400 clamp(2.1rem,8.5vw,2.9rem)/.8 "Great Vibes", cursive;
  color:#DAA520;
  vertical-align:middle;
  margin:0 2px;
}
.footer-date{
  display:inline-block;
  font:700 .68rem/1.4 var(--sans);
  letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;
  color:#5C3D5A;
  background:rgba(247,202,208,0.35);
  border:1px dashed rgba(218,165,32,0.5);
  border-radius:20px;
  padding:6px 18px;
}

/* ── Music btn & toast ── */
#music-btn{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(247,202,208,.7);
  background:rgba(255,245,248,.92);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;z-index:60;
  box-shadow:0 6px 18px rgba(247,202,208,.4);
}
#music-btn .ic-pause{display:none}
#music-btn.playing .ic-play{display:none}
#music-btn.playing .ic-pause{display:block}
#music-btn.playing{animation:pulse-m 2.6s ease-in-out infinite}
@keyframes pulse-m{0%,100%{box-shadow:0 6px 18px rgba(247,202,208,.38)}50%{box-shadow:0 6px 24px rgba(146,168,209,.5)}}

#toast{
  position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;
  translate:-50% 8px;z-index:100;
  background:var(--ink);color:var(--paper);
  font-size:.76rem;letter-spacing:.07em;
  padding:10px 18px;border-radius:999px;
  opacity:0;pointer-events:none;
  transition:opacity .25s,translate .25s;
  max-width:calc(100vw - 36px);text-align:center;
}
#toast.show{opacity:1;translate:-50% 0}

/* ── 3D floating garden elements (above bg, below content) ── */
#garden-floats{
  position:fixed;inset:0;z-index:5;
  pointer-events:none;overflow:hidden;
  /* NO perspective on the container — each element has its own */
}

/* Base for all floats */
.g3d{position:absolute;will-change:transform}

/* Floating rose — only translate + rotate, no 3D transform */
.g3d-rose{
  animation:rose-float var(--rdur,5s) ease-in-out var(--rdel,0s) infinite alternate;
}
@keyframes rose-float{
  from{transform:translateY(0) rotate(var(--rrot,-5deg))}
  to  {transform:translateY(-14px) rotate(calc(var(--rrot,-5deg) + 10deg))}
}

/* Blossom bob */
.g3d-blossom{
  animation:blossom-bob var(--blosdur,4.5s) ease-in-out var(--blosdel,0s) infinite alternate;
}
@keyframes blossom-bob{
  from{transform:translateY(0) rotate(var(--brot,-5deg)) scale(1)}
  to  {transform:translateY(-10px) rotate(calc(var(--brot,-5deg) + 9deg)) scale(1.06)}
}

/* Butterfly */
.g3d-butterfly{animation:butter var(--bdur,5s) ease-in-out var(--bdel,0s) infinite alternate}
@keyframes butter{
  from{transform:translate(0,0) rotate(-8deg)}
  50% {transform:translate(var(--bx,10px),var(--by,-12px)) rotate(0deg)}
  to  {transform:translate(calc(var(--bx,10px)*2),0) rotate(8deg)}
}

/* Leaf sway (2D only) */
.g3d-leaf{
  transform-origin:bottom center;
  animation:leaf-sway var(--ldur,3.8s) ease-in-out var(--ldel,0s) infinite alternate;
}
@keyframes leaf-sway{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

/* Orb pulse */
.g3d-orb{
  border-radius:50%;
  animation:orb-pulse var(--odur,3.2s) ease-in-out var(--odel,0s) infinite;
}
@keyframes orb-pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:.85;transform:scale(1.2)}}

/* Grass (2D sway) */
.g3d-grass{
  transform-origin:bottom center;
  animation:grass var(--gdur,2.6s) ease-in-out var(--gdel,0s) infinite alternate;
}
@keyframes grass{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

/* ── Butterfly layer (burst on open) ── */
.butterfly-layer{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.butterfly{position:absolute;right:var(--sx);bottom:var(--sy);width:var(--size);height:calc(var(--size)*.8);opacity:0;animation:fly var(--dur) linear var(--delay) forwards;will-change:transform,opacity}
.butterfly .flyer{animation:bob var(--bob) ease-in-out infinite alternate}
.butterfly .flap {animation:flap var(--flap) ease-in-out infinite alternate}
.butterfly svg  {width:100%;height:100%;display:block}
@keyframes fly{0%{transform:translate(0,0) rotate(var(--rot));opacity:0}8%{opacity:1}82%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.28)}}
@keyframes bob {from{transform:translateY(-6px) rotate(4deg)}to{transform:translateY(6px) rotate(-4deg)}}

/* ── Petals ── */
.petal-layer{position:fixed;inset:0;z-index:78;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-30px;left:var(--px);width:var(--ps);opacity:0;animation:petal-fall var(--pd) linear var(--pdelay) infinite;will-change:transform,opacity}
@keyframes petal-fall{
  0%  {transform:translate(0,0) rotate(0deg);opacity:0}
  8%  {opacity:var(--po)}
  90% {opacity:var(--po)}
  100%{transform:translate(var(--drift),105vh) rotate(var(--pspin));opacity:0}
}

/* ── Reveal ── */
.reveal{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s ease}
.reveal.in{opacity:1;translate:0 0}

/* ── Floral decor (section separators) ── */
.floral-row{display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none;overflow:hidden;margin:4px 0}
.floral-row svg{display:block;animation:fr-sway 4.2s ease-in-out infinite alternate}
.floral-row svg:nth-child(even){animation-delay:.5s;animation-direction:alternate-reverse}

@keyframes fr-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg) translateY(-3px)}}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;translate:none;transition:none}
  .cover,.curtain{transition:none}
  .petal,.sparkle,.g3d-rose,.g3d-blossom,.g3d-butterfly,.g3d-leaf,.g3d-orb,.g3d-grass,
  #music-btn.playing,.butterfly,.floral-row svg,.curtain-flower,.cover-names span{animation:none}
  #garden-floats{display:none}
}

/* ── Desktop ── */
@media(min-width:620px){.section{padding:72px 38px}}
@media(min-width:900px){
  .page{border-inline:1px solid rgba(247,202,208,.35);box-shadow:0 0 60px rgba(247,202,208,.22)}
  .cover{border-inline:1px solid rgba(247,202,208,.35)}
  .section{padding:88px 52px}
  .hero{min-height:92vh}
}