/* =========================================================
   Ceremony invitation: one layout, six printed-stationery worlds.
   Each [data-design] sets tokens; a few signature details per design.
   ========================================================= */

body{
  --bg:#0d0b08; --bg2:#15110b; --card:rgba(255,255,255,.035);
  --ink:#f3e6c4; --muted:#bfae8a; --accent:#d4af6a; --accent2:#f3e6c4; --accent-ink:#1a1308;
  --line:rgba(212,175,106,.35);
  --display:"Cormorant Garamond", Georgia, serif;
  --names:"Cormorant Garamond", Georgia, serif;
  --body:"Manrope", system-ui, sans-serif;
  --names-style:italic; --names-weight:500; --names-size:clamp(46px, 13vw, 88px); --names-transform:none; --names-spacing:0;
  --h-transform:uppercase; --h-spacing:.28em; --h-size:12px;
  --radius:4px; --frame-radius:999px 999px 18px 18px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
body[data-design="oqgul"]{
  --bg:#f7f3ec; --bg2:#efe8dc; --card:#fffdf9;
  --ink:#2e2a24; --muted:#6f675c; --accent:#6f845c; --accent2:#c9a27e; --accent-ink:#fff;
  --line:rgba(111,132,92,.35);
  --radius:14px; --frame-radius:220px 220px 16px 16px;
  color-scheme:light;
}
body[data-design="suzani"]{
  --bg:#16204a; --bg2:#0f1736; --card:rgba(255,255,255,.05);
  --ink:#f5ecd9; --muted:#b8bfd9; --accent:#e0b04a; --accent2:#c2413a; --accent-ink:#1a1204;
  --line:rgba(224,176,74,.4);
  --display:"Marcellus", Georgia, serif; --names:"Marcellus", Georgia, serif; --body:"Lora", Georgia, serif;
  --names-style:normal; --names-weight:400; --names-size:clamp(40px, 11vw, 76px);
  --radius:8px; --frame-radius:50% 50% 8px 8px / 30% 30% 8px 8px;
}
body[data-design="atirgul"]{
  --bg:#f6e4e1; --bg2:#efd3cf; --card:rgba(255,255,255,.55);
  --ink:#5a2233; --muted:#8d5b66; --accent:#b5566b; --accent2:#d99aa6; --accent-ink:#fff;
  --line:rgba(181,86,107,.3);
  --display:"Lora", Georgia, serif; --names:"Great Vibes", cursive; --body:"Lora", Georgia, serif;
  --names-style:normal; --names-weight:400; --names-size:clamp(58px, 17vw, 112px);
  --h-spacing:.22em;
  --radius:18px; --frame-radius:50%;
  color-scheme:light;
}
body[data-design="zumrad"]{
  --bg:#0f3b2f; --bg2:#082219; --card:rgba(233,216,166,.05);
  --ink:#f1e8cf; --muted:#b9c7b5; --accent:#e9d8a6; --accent2:#c8a95c; --accent-ink:#082219;
  --line:rgba(233,216,166,.35);
  --display:"Cinzel", Georgia, serif; --names:"Cinzel", Georgia, serif; --body:"Lora", Georgia, serif;
  --names-style:normal; --names-weight:500; --names-size:clamp(34px, 9.5vw, 64px); --names-spacing:.06em;
  --radius:2px; --frame-radius:2px;
}
body[data-design="zamonaviy"]{
  --bg:#f4f4f1; --bg2:#e9e9e4; --card:#fff;
  --ink:#111; --muted:#5b5b57; --accent:#111; --accent2:#c8ff4d; --accent-ink:#f4f4f1;
  --line:rgba(17,17,17,.18);
  --display:"Syne", system-ui, sans-serif; --names:"Syne", system-ui, sans-serif; --body:"Manrope", system-ui, sans-serif;
  --names-style:normal; --names-weight:800; --names-size:clamp(44px, 14vw, 104px); --names-transform:uppercase; --names-spacing:-.04em;
  --h-spacing:.16em;
  --radius:0; --frame-radius:0;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; min-height:100%}
body{background:var(--bg); color:var(--ink); font:16px/1.7 var(--body); overflow-x:hidden; -webkit-font-smoothing:antialiased}
body.locked{overflow:hidden; height:100%}
[hidden]{display:none!important}
a{color:inherit}
img{max-width:100%; display:block}

#fx{position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none}
.loading{min-height:100vh; display:grid; place-items:center}
.spinner{width:34px; height:34px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- shared pieces ---------- */
.kicker{margin:0; font:600 var(--h-size)/1.4 var(--body); letter-spacing:var(--h-spacing); text-transform:var(--h-transform); color:var(--accent)}
.names{margin:0; font-family:var(--names); font-style:var(--names-style); font-weight:var(--names-weight); font-size:var(--names-size);
  line-height:.95; letter-spacing:var(--names-spacing); text-transform:var(--names-transform); text-wrap:balance; overflow-wrap:anywhere}
.names .amp{display:block; font-size:.5em; line-height:1.1; color:var(--accent); font-style:italic; margin:.08em 0}
.names.single .amp{display:none}
.ornament{display:flex; align-items:center; justify-content:center; gap:12px; color:var(--accent); margin:0 auto; width:min(260px, 70%)}
.ornament::before,.ornament::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line))}
.ornament::after{transform:scaleX(-1)}
.ornament svg{width:20px; height:20px; flex:none}
.date-line{margin:0; font:500 15px var(--body); letter-spacing:.32em; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- cover ---------- */
.cover{position:fixed; inset:0; z-index:20; display:grid; grid-template-rows:1fr auto; background:var(--bg); overflow:hidden;
  padding:calc(40px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));
  transition:transform 1s var(--ease), opacity .8s ease}
.cover.opened{transform:translateY(-100%); opacity:.4; pointer-events:none}
.cover-bg{position:absolute; inset:-20px; background-size:cover; background-position:center; opacity:0; transform:scale(1.08); animation:kenburns 18s ease-in-out infinite alternate}
.cover.has-photo .cover-bg{opacity:1}
.cover.has-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.75))}
.cover.has-photo{--ink:#fff8ec; --muted:rgba(255,248,236,.78); --line:rgba(255,248,236,.4)}
.cover.has-photo .cover-inner{color:var(--ink)}
@keyframes kenburns{to{transform:scale(1.18) translate(-2%, -1%)}}
.cover-inner{position:relative; z-index:2; align-self:center; justify-self:center; width:min(560px, 100%); text-align:center; display:grid; gap:22px; justify-items:center}
.cover-inner > *{animation:rise 1s var(--ease) both}
.cover-inner > :nth-child(2){animation-delay:.15s} .cover-inner > :nth-child(3){animation-delay:.3s}
.cover-inner > :nth-child(4){animation-delay:.45s} .cover-inner > :nth-child(5){animation-delay:.6s}
.cover-text{margin:0; white-space:pre-line; color:var(--muted); font-style:italic; font-size:17px; max-width:40ch}

.slider{position:relative; z-index:3; justify-self:center; width:min(340px, 100%); height:64px; border-radius:999px; padding:6px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); touch-action:none; user-select:none; -webkit-user-select:none;
  animation:rise 1s .8s var(--ease) both}
.slider-label{position:absolute; inset:0; display:grid; place-items:center; padding-left:40px; font:600 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); pointer-events:none;
  background:linear-gradient(90deg, var(--muted) 0 40%, var(--ink) 50%, var(--muted) 60% 100%) 0 0/300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 2.6s linear infinite}
@keyframes shimmer{from{background-position:100% 0} to{background-position:-50% 0}}
.knob{position:relative; z-index:2; width:52px; height:52px; border-radius:50%; border:0; cursor:grab; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--accent2), var(--accent)); color:var(--accent-ink); box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
  transform:translateX(var(--kx, 0px)); transition:transform .4s var(--ease)}
.slider.dragging .knob{transition:none; cursor:grabbing}
.knob:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.knob svg{width:20px; height:20px}
.knob::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--accent); animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.9); opacity:.9} to{transform:scale(1.35); opacity:0}}

/* ---------- invitation body ---------- */
.invite{position:relative; z-index:1}
.s{position:relative; padding:80px 22px; text-align:center}
.s + .s::before{content:""; position:absolute; top:0; left:50%; width:1px; height:44px; background:linear-gradient(var(--line), transparent)}
.s-inner{width:min(560px, 100%); margin:0 auto; display:grid; gap:20px; justify-items:center}
.s h2{margin:0; font:500 clamp(30px, 8vw, 44px)/1.1 var(--display); text-wrap:balance}
body[data-design="zamonaviy"] .s h2{font-weight:800; letter-spacing:-.03em; text-transform:uppercase}
body[data-design="zumrad"] .s h2{letter-spacing:.06em}
.s p{margin:0; max-width:46ch; color:var(--muted)}
.lead{font-size:18px; font-style:italic; white-space:pre-line}
body[data-design="zamonaviy"] .lead{font-style:normal}

.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* hero */
.hero{padding-top:calc(64px + env(safe-area-inset-top,0px))}
.frame{position:relative; width:min(320px, 82vw); aspect-ratio:3/4; border-radius:var(--frame-radius); overflow:hidden; background:var(--bg2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6); outline:1px solid var(--line); outline-offset:8px}
.frame img{width:100%; height:100%; object-fit:cover}
.monogram{position:relative; width:min(240px, 64vw); aspect-ratio:1; display:grid; place-items:center}
.monogram::before{content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed var(--line); animation:spin 40s linear infinite}
.monogram::after{content:""; position:absolute; inset:14px; border-radius:50%; border:1px solid var(--line)}
body[data-design="zamonaviy"] .monogram::before,body[data-design="zamonaviy"] .monogram::after{border-radius:0}
body[data-design="zumrad"] .monogram::after{transform:rotate(45deg); border-radius:0; inset:40px}
.monogram span{font:var(--names-weight) clamp(56px, 16vw, 84px)/1 var(--names); font-style:var(--names-style); color:var(--accent); letter-spacing:.02em}
.when{display:grid; gap:4px; justify-items:center}
.when b{font:500 clamp(22px, 6vw, 28px)/1.2 var(--display); color:var(--ink)}
.when span{font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* about + countdown */
.facts{width:100%; display:grid; gap:14px; margin:0}
.fact{display:grid; gap:2px; padding:18px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line)}
.fact dt{font:600 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
.fact dd{margin:0; font:500 20px/1.35 var(--display); color:var(--ink)}
.countdown{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; width:100%}
.cd{display:grid; gap:2px; padding:16px 4px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line)}
.cd b{font:500 clamp(30px, 9vw, 44px)/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums}
.cd span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.cd.tick b{animation:tick .5s var(--ease)}
@keyframes tick{from{transform:translateY(-6px); opacity:.4}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font:600 13px var(--body); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); transition:transform .25s var(--ease), box-shadow .25s, background .25s}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--accent)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.btn:disabled{opacity:.55; cursor:progress; transform:none}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-line:hover{background:var(--card)}
body[data-design="zamonaviy"] .btn{border-radius:0}
body[data-design="zamonaviy"] .btn:not(.btn-line){background:var(--ink); color:var(--bg)}
body[data-design="zamonaviy"] .btn:not(.btn-line):hover{box-shadow:6px 6px 0 var(--accent2)}
.btn svg{width:18px; height:18px}

/* names inside sections keep their own face (beats `.s h2`) */
.s h2.names{font-family:var(--names); font-style:var(--names-style); font-weight:var(--names-weight); font-size:calc(var(--names-size) * .8);
  line-height:.95; letter-spacing:var(--names-spacing); text-transform:var(--names-transform)}
.s.closing h2.names{font-size:calc(var(--names-size) * .66)}

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; width:100%}
.gallery-grid button{padding:0; border:0; background:var(--bg2); border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; cursor:zoom-in}
.gallery-grid button:nth-child(3n+1){grid-column:span 2; aspect-ratio:4/3}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.gallery-grid button:hover img{transform:scale(1.05)}
.gallery-grid button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lightbox{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.9); border:0; width:100%; height:100%; max-width:none; max-height:none; margin:0}
.lightbox img{max-height:88vh; border-radius:6px}
.lightbox button{position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:22px; cursor:pointer}

/* forms */
.form{width:100%; display:grid; gap:12px; text-align:left}
.opt{position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius); cursor:pointer;
  background:var(--card); border:1px solid var(--line); transition:border-color .25s, background .25s}
.opt:hover{border-color:var(--accent)}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt .mark{flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:all .25s}
.opt .mark::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent-ink); transform:scale(0); transition:transform .25s var(--ease)}
.opt:has(input:checked){border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--card))}
.opt:has(input:checked) .mark{background:var(--accent); border-color:var(--accent)}
.opt:has(input:checked) .mark::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.opt span{font-weight:600; color:var(--ink)}
.field{display:grid; gap:6px; font:600 11px var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea{width:100%; font:400 16px var(--body); letter-spacing:0; text-transform:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.form .btn{width:100%; margin-top:4px}
.form-msg{margin:0; min-height:1.4em; font-size:14px; text-align:center}
.form-msg.err{color:#e0576b}
.thanks{display:grid; gap:10px; justify-items:center; padding:26px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); width:100%; animation:rise .6s var(--ease) both}
.thanks b{font:500 26px var(--display); color:var(--ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* wishes */
.wish-list{width:100%; display:grid; gap:10px; text-align:left}
.wish{padding:16px 18px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); animation:rise .5s var(--ease) both}
.wish header{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.wish b{color:var(--ink)}
.wish time{font-size:12px; color:var(--muted)}
.wish p{margin:6px 0 0; color:var(--muted); max-width:none; overflow-wrap:anywhere; white-space:pre-line}
.empty{font-style:italic}

/* share + footer */
.share-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.views{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.foot{padding:40px 22px calc(48px + env(safe-area-inset-bottom,0px)); text-align:center; border-top:1px solid var(--line); display:grid; gap:12px; justify-items:center}
.foot p{margin:0; color:var(--muted); font-size:14px}
.foot a.brand{font:600 13px var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); text-decoration:none}

/* demo bar */
.demobar{position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:40; width:min(560px, calc(100% - 24px));
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 18px; border-radius:999px;
  background:rgba(20,16,26,.82); color:#fff; border:1px solid rgba(255,255,255,.15); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font:600 14px system-ui, sans-serif}
.demobar a{color:#fff; text-decoration:none; white-space:nowrap}
.demobar .cta{padding:10px 16px; border-radius:999px; background:#ff4f7b}
.demobar span{font-weight:400; font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:480px){ .demobar span{display:none} }

/* ---------- design signatures ---------- */
/* Suzani: embroidered medallion pattern on cover and section breaks */
body[data-design="suzani"] .cover:not(.has-photo),body[data-design="suzani"] .about{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 45%, var(--bg) 35%, transparent 75%),
    radial-gradient(circle at 50% 50%, transparent 26px, rgba(224,176,74,.10) 27px, rgba(224,176,74,.10) 28px, transparent 29px),
    radial-gradient(circle at 50% 50%, rgba(194,65,58,.16) 0 5px, transparent 6px),
    conic-gradient(from 45deg at 50% 50%, transparent 0 22%, rgba(58,166,160,.07) 22% 28%, transparent 28% 47%, rgba(58,166,160,.07) 47% 53%, transparent 53% 72%, rgba(58,166,160,.07) 72% 78%, transparent 78% 97%, rgba(58,166,160,.07) 97%);
  background-size:100% 100%, 92px 92px, 92px 92px, 92px 92px}
body[data-design="suzani"] .fact,body[data-design="suzani"] .cd{background:rgba(15,23,54,.85)}
/* Oq gul: soft botanical corners */
body[data-design="oqgul"] .cover::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 0 0, rgba(111,132,92,.18), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(201,162,126,.2), transparent 70%)}
/* Zumrad: double art-deco border */
body[data-design="zumrad"] .cover:not(.has-photo)::before{content:""; position:absolute; inset:16px; border:1px solid var(--line); outline:1px solid var(--line); outline-offset:-8px; pointer-events:none}
/* Zamonaviy: lime marker under the ampersand */
body[data-design="zamonaviy"] .names .amp{font-style:normal; color:var(--ink); background:linear-gradient(transparent 55%, var(--accent2) 55% 90%, transparent 90%); justify-self:center; width:max-content; margin-inline:auto; padding:0 .1em}
/* Oltin: gold foil on names */
body[data-design="oltin"] .names span{background:linear-gradient(100deg, #b8893e, #f6e2a8 40%, #c89b4c 60%, #f3e6c4) 0 0/200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:foil 6s linear infinite}
body[data-design="oltin"] .cover.has-photo .names span{background:none; color:var(--ink)}
@keyframes foil{to{background-position:200% 0}}

/* embedded (catalog thumbnails) */
.embedded .slider{pointer-events:none}

@keyframes rise{from{opacity:0; transform:translateY(20px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  #fx{display:none}
}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

/* keep the demo bar clear of the slide-to-open control */
body.locked .demobar{top:calc(12px + env(safe-area-inset-top,0px)); bottom:auto}

/* =========================================================
   New designs (own artwork: SVG rosette, leaf sprigs, CSS envelope)
   ========================================================= */
body[data-design="qirollik"]{
  --bg:#07122e; --bg2:#0b1a44; --card:rgba(255,255,255,.045);
  --ink:#f3e6c4; --muted:#aab4d4; --accent:#d9b26a; --accent2:#f1dca4; --accent-ink:#0b1433;
  --line:rgba(217,178,106,.35);
  --display:"Cormorant Garamond", Georgia, serif; --names:"Great Vibes", cursive; --body:"Manrope", system-ui, sans-serif;
  --names-style:normal; --names-weight:400; --names-size:clamp(54px, 15vw, 96px);
  --radius:14px; --frame-radius:50% 50% 14px 14px;
  --cover-card-bg:linear-gradient(165deg, #133489, #0b1f5c 55%, #081640);
  background:radial-gradient(120% 60% at 50% 0, #122a6e, transparent 65%), var(--bg);
}
body[data-design="eshik"]{
  --bg:#050b24; --bg2:#0b1538; --card:rgba(255,255,255,.04);
  --ink:#f1dfb0; --muted:#b3ab91; --accent:#c9a45c; --accent2:#f1dfb0; --accent-ink:#0a0f24;
  --line:rgba(201,164,92,.38);
  --display:"Cormorant Garamond", Georgia, serif; --names:"Cormorant Garamond", Georgia, serif; --body:"Manrope", system-ui, sans-serif;
  --names-style:italic; --names-weight:500; --names-size:clamp(46px, 13vw, 84px);
  --radius:6px; --frame-radius:999px 999px 6px 6px;
  background:radial-gradient(100% 60% at 50% 30%, #0e1d52, transparent 70%), var(--bg);
}
body[data-design="shisha"]{
  --bg:#f7e3e3; --bg2:#f1d2d5; --card:rgba(255,255,255,.55);
  --ink:#6e2436; --muted:#9a5a68; --accent:#b5485f; --accent2:#e59aab; --accent-ink:#fff;
  --line:rgba(181,72,95,.28);
  --display:"Cormorant Garamond", Georgia, serif; --names:"Great Vibes", cursive; --body:"Manrope", system-ui, sans-serif;
  --names-style:normal; --names-weight:400; --names-size:clamp(56px, 16vw, 100px);
  --radius:20px; --frame-radius:50%;
  --cover-card-bg:rgba(255,255,255,.52);
  color-scheme:light;
  background:
    radial-gradient(40% 30% at 15% 20%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(35% 28% at 85% 70%, rgba(229,154,171,.45), transparent 70%),
    radial-gradient(30% 25% at 70% 10%, rgba(255,214,222,.9), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body[data-design="konvert"]{
  --bg:#efe6dc; --bg2:#e6d8ca; --card:#fbf6ef;
  --ink:#4a2a22; --muted:#7d6558; --accent:#9b2c3f; --accent2:#c8a27a; --accent-ink:#fff;
  --line:rgba(155,44,63,.25);
  --display:"Lora", Georgia, serif; --names:"Great Vibes", cursive; --body:"Lora", Georgia, serif;
  --names-style:normal; --names-weight:400; --names-size:clamp(56px, 16vw, 100px);
  --h-spacing:.22em;
  --radius:10px; --frame-radius:8px;
  --env:#e3cdb8; --env-flap:#d8bea4; --env-dark:#c9ab90;
  color-scheme:light;
}
body[data-design="baxmal"]{
  --bg:#3a0b14; --bg2:#2a060d; --card:rgba(255,255,255,.045);
  --ink:#f6e5c6; --muted:#d3aca2; --accent:#e2c27a; --accent2:#f6e5c6; --accent-ink:#2a060d;
  --line:rgba(226,194,122,.35);
  --display:"Playfair Display", Georgia, serif; --names:"Playfair Display", Georgia, serif; --body:"Manrope", system-ui, sans-serif;
  --names-style:italic; --names-weight:500; --names-size:clamp(46px, 13vw, 86px);
  --radius:4px; --frame-radius:999px 999px 4px 4px;
  background:radial-gradient(90% 60% at 30% 10%, #6d1426, transparent 60%), radial-gradient(80% 60% at 90% 90%, #52101d, transparent 60%), var(--bg);
}
body[data-design="bahor"]{
  --bg:#f3f6ef; --bg2:#e7eee0; --card:#ffffff;
  --ink:#23321f; --muted:#5d6b58; --accent:#4f7a4a; --accent2:#9dbb8f; --accent-ink:#fff;
  --line:rgba(79,122,74,.28);
  --display:"Cormorant Garamond", Georgia, serif; --names:"Cormorant Garamond", Georgia, serif; --body:"Manrope", system-ui, sans-serif;
  --names-style:italic; --names-weight:500; --names-size:clamp(48px, 14vw, 88px);
  --radius:16px; --frame-radius:200px 200px 16px 16px;
  --cover-card-bg:#ffffff;
  color-scheme:light;
}
/* covers are opaque and carry the same atmosphere as the page behind them */
body[data-design="qirollik"] .cover:not(.has-photo){background:radial-gradient(120% 60% at 50% 0, #122a6e, transparent 65%), var(--bg)}
body[data-design="eshik"] .cover{background:radial-gradient(100% 60% at 50% 30%, #0e1d52, transparent 70%), var(--bg)}
body[data-design="baxmal"] .cover:not(.has-photo){background:radial-gradient(90% 60% at 30% 10%, #6d1426, transparent 60%), radial-gradient(80% 60% at 90% 90%, #52101d, transparent 60%), var(--bg)}
body[data-design="shisha"] .cover:not(.has-photo){background:
  radial-gradient(40% 30% at 15% 20%, rgba(255,255,255,.9), transparent 70%),
  radial-gradient(35% 28% at 85% 70%, rgba(229,154,171,.45), transparent 70%),
  radial-gradient(30% 25% at 70% 10%, rgba(255,214,222,.9), transparent 70%), var(--bg)}
body[data-design="bahor"] .cover:not(.has-photo){background:radial-gradient(60% 40% at 0 0, rgba(157,187,143,.35), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(157,187,143,.3), transparent 70%), var(--bg)}

/* ---------- shared: title on covers ---------- */
.cover-title{margin:0; font:500 clamp(34px, 9.5vw, 48px)/1 var(--display); color:var(--ink); letter-spacing:.01em}
.cover-cardstyle.opened,.cover-doors.opened,.cover-envelope.opened{transform:none; opacity:0}

/* ---------- card cover ---------- */
.cover-cardstyle{display:grid; place-items:center; grid-template-rows:1fr}
.cover-card{position:relative; z-index:2; width:min(360px, 100%); padding:40px 24px 30px; text-align:center; display:grid; gap:12px; justify-items:center;
  border-radius:22px; background:var(--cover-card-bg, var(--card)); border:1px solid var(--line); overflow:hidden;
  box-shadow:0 40px 90px -36px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  animation:cardIn 1s var(--ease) both; transition:transform .5s var(--ease), opacity .45s ease}
@keyframes cardIn{from{opacity:0; transform:translateY(34px) scale(.95)}}
.cover-cardstyle.opening .cover-card{transform:translateY(-24px) scale(1.05); opacity:0}
.cover-card .names{font-size:calc(var(--names-size) * .6); margin-block:2px}
.cover-card .date-line{letter-spacing:.2em}
.cover-card .open-btn{margin-top:8px}
.cover-card > :not(.sprig){position:relative; z-index:1}
.medal{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; color:var(--accent-ink);
  background:linear-gradient(145deg, var(--accent2), var(--accent)); box-shadow:0 10px 24px -8px var(--accent); animation:beat 2.4s ease-in-out infinite}
.medal svg{width:26px; height:26px}
@keyframes beat{0%,100%{transform:scale(1)} 12%{transform:scale(1.1)} 24%{transform:scale(.98)} 36%{transform:scale(1.06)}}
.sprig{position:absolute; width:170px; color:var(--accent); opacity:.5; pointer-events:none}
.sprig.tl{top:-14px; left:-18px; transform:scaleY(-1)}
.sprig.br{bottom:-14px; right:-18px; transform:scaleX(-1)}
body[data-design="qirollik"] .sprig{opacity:.3}
body[data-design="bahor"] .sprig{opacity:.62}

/* ---------- doors cover ---------- */
.cover-doors{display:block; padding:0; perspective:1800px; overflow:hidden}
.door{position:absolute; top:0; bottom:0; width:50%; overflow:hidden; z-index:1;
  background:linear-gradient(180deg, var(--bg2), var(--bg)); transition:transform 1.3s cubic-bezier(.65,0,.25,1), opacity 1.3s ease; backface-visibility:hidden}
.door::after{content:""; position:absolute; inset:14px; border:1px solid var(--line); pointer-events:none}
.door-l{left:0; transform-origin:left center}
.door-l::after{right:0; border-right:0}
.door-r{right:0; transform-origin:right center}
.door-r::after{left:0; border-left:0}
.door-art{position:absolute; top:50%; width:min(128vw, 760px); aspect-ratio:1; color:var(--accent); opacity:.6}
.door-l .door-art{right:0; transform:translate(50%, -50%)}
.door-r .door-art{left:0; transform:translate(-50%, -50%)}
.rosette{display:block; width:100%; height:100%; animation:spin 160s linear infinite}
.door-r .rosette{animation-direction:reverse}
.door-center{position:absolute; inset:0; z-index:3; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; padding:24px;
  transition:opacity .45s ease, transform .6s var(--ease)}
.door-center::before{content:""; position:absolute; left:0; right:0; top:50%; height:min(360px, 60vh); transform:translateY(-50%); z-index:-1;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 88%, transparent) 18% 82%, transparent);
  border-block:1px solid var(--line)}
.door-center > *{animation:rise 1s var(--ease) both}
.door-center > :nth-child(2){animation-delay:.12s} .door-center > :nth-child(3){animation-delay:.24s} .door-center > :nth-child(4){animation-delay:.36s} .door-center > :nth-child(5){animation-delay:.5s}
.door-center .names{font-size:calc(var(--names-size) * .62)}
.cover-doors.opening .door-center{opacity:0; transform:scale(.96)}
.cover-doors.opening .door-l{transform:rotateY(-108deg)}
.cover-doors.opening .door-r{transform:rotateY(108deg)}

/* ---------- envelope cover ---------- */
.cover-envelope{display:grid; place-content:center; justify-items:center; gap:18px; grid-template-rows:none;
  background:radial-gradient(70% 50% at 50% 40%, #f7efe6, transparent 70%), var(--bg)}
.env-kicker{animation:rise 1s var(--ease) both}
.envelope{--w:min(340px, 86vw); position:relative; width:var(--w); height:calc(var(--w) * .68); margin-top:calc(var(--w) * .42); perspective:900px; animation:rise 1s .15s var(--ease) both}
.env-back{position:absolute; inset:0; background:var(--env-dark, var(--bg2)); border-radius:8px; box-shadow:0 30px 60px -30px rgba(60,30,20,.55)}
.letter{position:absolute; left:6%; right:6%; top:5%; height:90%; z-index:1; background:var(--card); border-radius:6px; padding:16px; text-align:center;
  display:grid; align-content:center; justify-items:center; gap:6px; box-shadow:0 -6px 20px rgba(60,30,20,.08);
  transition:transform 1s .55s var(--ease)}
.letter .cover-title{font-size:clamp(22px, 6vw, 28px)}
.letter .names{font-size:calc(var(--names-size) * .42)}
.letter .date-line{font-size:12px}
.env-front{position:absolute; inset:0; z-index:2; border-radius:8px;
  background:linear-gradient(160deg, var(--env, var(--bg2)), color-mix(in srgb, var(--env, var(--bg2)) 88%, #000));
  clip-path:polygon(0 0, 50% 64%, 100% 0, 100% 100%, 0 100%)}
.env-flap{position:absolute; left:0; right:0; top:0; height:64%; z-index:3; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, var(--env-flap, var(--bg2)), color-mix(in srgb, var(--env-flap, var(--bg2)) 90%, #000));
  clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:top center;
  transition:transform .75s var(--ease), z-index 0s .38s}
.seal{position:absolute; z-index:4; left:50%; top:64%; width:66px; height:66px; margin:-33px 0 0 -33px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#f7e6d0; font:400 28px/1 var(--names);
  background:radial-gradient(circle at 35% 30%, #c8506a, var(--accent) 58%, #5e1523);
  box-shadow:0 8px 16px rgba(60,20,20,.35), inset 0 0 0 5px rgba(255,255,255,.1), inset 0 0 0 7px rgba(0,0,0,.08);
  transition:transform .3s var(--ease), opacity .3s; animation:sealPulse 2.2s ease-in-out infinite}
.seal:hover{transform:scale(1.06)}
.seal:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
@keyframes sealPulse{50%{box-shadow:0 8px 26px rgba(155,44,63,.55), inset 0 0 0 5px rgba(255,255,255,.1), inset 0 0 0 7px rgba(0,0,0,.08)}}
.env-hint{margin:0; font:600 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); animation:rise 1s .4s var(--ease) both}
.cover-envelope.opening .seal{opacity:0; transform:scale(.5); animation:none}
.cover-envelope.opening .env-flap{transform:rotateX(180deg); z-index:0}
.cover-envelope.opening .letter{transform:translateY(-74%)}
.cover-envelope.opening .env-hint{opacity:0}

/* ---------- verse, story, gift ---------- */
.verse{margin:0; max-width:34ch; font:italic 500 clamp(21px, 5.6vw, 27px)/1.5 var(--display); color:var(--ink); text-wrap:balance}
.verse p{margin:0; color:inherit; max-width:none}
.verse cite{display:block; margin-top:14px; font:600 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-style:normal}
.story-text{max-width:42ch}

.gift-card{position:relative; overflow:hidden; width:min(340px, 100%); aspect-ratio:1.586; border-radius:18px; padding:20px 22px; text-align:left;
  display:grid; align-content:space-between; color:#fff8ea;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #000), color-mix(in srgb, var(--accent) 42%, #000));
  box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.gift-card::after{content:""; position:absolute; inset:-40%; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); animation:cardShine 5s ease-in-out infinite}
@keyframes cardShine{0%,60%{transform:translateX(-40%)} 100%{transform:translateX(40%)}}
.gc-top{display:flex; justify-content:space-between; align-items:center; font:600 12px var(--body); letter-spacing:.2em; text-transform:uppercase; opacity:.9}
.gc-top svg{width:24px; height:24px}
.gc-num{font:500 clamp(19px, 5.8vw, 24px) "JetBrains Mono", ui-monospace, Consolas, monospace; letter-spacing:.06em; font-variant-numeric:tabular-nums}
.gc-name{font:600 12px var(--body); letter-spacing:.16em; text-transform:uppercase; opacity:.85}
body[data-design="zamonaviy"] .gift-card{background:#111; border-radius:0}

/* ---------- background music ---------- */
.music-btn{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:30; width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--accent); border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.music-btn svg{width:22px; height:22px}
.music-btn[aria-pressed="true"] svg{animation:spin 6s linear infinite}
.music-btn[aria-pressed="false"]::after{content:""; position:absolute; width:26px; height:2px; background:currentColor; transform:rotate(-45deg); border-radius:2px}
.music-btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}