/* Barcha shablonlar uchun umumiy mexanika. Ranglar :root o'zgaruvchilaridan olinadi. */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;overflow-x:hidden;min-height:100vh}
#petals{position:fixed;inset:0;pointer-events:none;z-index:1}

/* Konvert / ochilish */
.cover{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;background:var(--bg2,var(--bg));transition:opacity .9s ease,visibility .9s ease;padding:24px}
.cover.gone{opacity:0;visibility:hidden;pointer-events:none}
.cov-pre{letter-spacing:.42em;text-transform:uppercase;font-size:12px;color:var(--ink-dim);padding-left:.42em}
.cov-hint{letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
/* To'liq ekran konvert + antik mum muhr */
.cov-pre{position:absolute;top:7vh;left:0;right:0;text-align:center;z-index:5}
.cov-hint{position:absolute;bottom:8vh;left:0;right:0;text-align:center;z-index:5}
.envelope{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.env-body{position:absolute;inset:0;border:0;border-radius:0;overflow:hidden;background:
  linear-gradient(45deg,transparent calc(50% - .6px),var(--line) 50%,transparent calc(50% + .6px)),
  linear-gradient(-45deg,transparent calc(50% - .6px),var(--line) 50%,transparent calc(50% + .6px)),
  conic-gradient(from 45deg at 50% 50%,var(--panel) 0 90deg,color-mix(in srgb,var(--panel) 90%,#000) 90deg 180deg,var(--panel) 180deg 270deg,color-mix(in srgb,var(--panel) 90%,#000) 270deg 360deg)}
.env-flap{position:absolute;left:0;right:0;top:0;bottom:50%;background:color-mix(in srgb,var(--panel) 95%,#000);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .85s cubic-bezier(.4,0,.2,1);z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.env-seal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:132px;height:132px;border-radius:48% 52% 51% 49%/50% 49% 51% 50%;display:flex;align-items:center;justify-content:center;font-family:var(--script);font-size:36px;color:color-mix(in srgb,var(--accent) 28%,#000);background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent) 52%,color-mix(in srgb,var(--accent) 52%,#000));box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 2px 7px rgba(255,255,255,.5),inset 0 -7px 15px rgba(0,0,0,.4);text-shadow:0 1px 1px rgba(255,255,255,.35),0 -1px 1px rgba(0,0,0,.3);animation:sealPulse 2.8s ease-in-out infinite}
.env-seal::before{content:"";position:absolute;inset:9px;border-radius:inherit;border:1px solid color-mix(in srgb,var(--accent) 45%,#000);opacity:.5}
@keyframes sealPulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 2px 7px rgba(255,255,255,.5),inset 0 -7px 15px rgba(0,0,0,.4),0 0 0 0 transparent}50%{box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 2px 7px rgba(255,255,255,.5),inset 0 -7px 15px rgba(0,0,0,.4),0 0 30px 8px color-mix(in srgb,var(--accent) 45%,transparent)}}
.envelope.open .env-flap{transform:rotateX(-165deg)}
.envelope.open .env-seal{animation:sealBurst .85s ease forwards}
@keyframes sealBurst{0%{}40%{box-shadow:0 0 70px 26px color-mix(in srgb,var(--accent) 85%,transparent),inset 0 2px 7px rgba(255,255,255,.5)}100%{transform:translate(-50%,-50%) scale(.35);opacity:0}}
body.letterglow .env-seal{color:color-mix(in srgb,var(--accent) 58%,#fff)}
body.letterglow .envelope.open .env-seal{animation:sealBurstL .95s ease forwards}
@keyframes sealBurstL{0%{}45%{color:#fff;text-shadow:0 0 20px #fff,0 0 34px var(--accent),0 0 50px var(--accent)}100%{transform:translate(-50%,-50%) scale(.5);opacity:0}}

/* Kartka */
#card{opacity:0;transition:opacity 1s ease .3s;max-width:620px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
#card.show{opacity:1}
.section{padding:52px 6px;text-align:center;position:relative}
.pre,.lbl{font-weight:400;letter-spacing:.4em;text-transform:uppercase;font-size:12px;color:var(--ink-dim);padding-left:.4em}
.names{margin-top:8px}
.name{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(44px,14vw,82px);line-height:1;color:var(--ink);text-wrap:balance}
.amp{font-family:var(--script);color:var(--accent);display:block;font-size:clamp(38px,10vw,58px);line-height:.6;margin:6px 0}
.lead{font-family:var(--serif);font-size:22px;font-style:italic;color:var(--ink-dim);max-width:34ch;margin:14px auto 0;line-height:1.55}

.count{display:flex;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.count .cell{min-width:72px;padding:16px 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.count .num{font-family:var(--serif);font-weight:600;font-size:36px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.count .u{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-top:8px}

.info{display:grid;gap:16px;margin-top:14px}
.card-i{border:1px solid var(--line);border-radius:16px;padding:24px 20px;background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:7px}
.card-i .ic{color:var(--accent);width:28px;height:28px}
.card-i .k{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.card-i .v{font-family:var(--serif);font-size:25px;color:var(--ink);line-height:1.2}
.card-i .sub{font-size:14px;color:var(--ink-dim)}
.cta{display:inline-flex;align-items:center;gap:9px;margin-top:8px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--bg);text-decoration:none;background:var(--accent);padding:14px 28px;border-radius:40px;transition:transform .25s ease;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.cta:hover{transform:translateY(-2px)}
.cta svg{width:17px;height:17px}

.note{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ink-dim);max-width:40ch;margin:0 auto;line-height:1.6}
.sign{font-family:var(--script);font-size:32px;color:var(--accent);margin-top:20px;line-height:1.2}
.sign-l{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-top:6px}
.foot{padding:40px 0 54px;text-align:center}
.foot .dot{color:var(--accent);font-size:13px;letter-spacing:.3em}
.foot small{display:block;margin-top:12px;color:var(--ink-dim);font-size:11px;letter-spacing:.16em}

.divider{display:block;margin:10px auto 22px;width:160px;height:auto;color:var(--accent)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
/* Kaskad: kartalar va jadval qatorlari ketma-ket chiqadi */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal.in .card-i,.reveal.in .sch-row,.reveal.in .count .cell{animation:fadeUp .6s ease both}
.reveal.in .card-i:nth-child(2),.reveal.in .sch-row:nth-child(2),.reveal.in .count .cell:nth-child(2){animation-delay:.09s}
.reveal.in .card-i:nth-child(3),.reveal.in .sch-row:nth-child(3),.reveal.in .count .cell:nth-child(3){animation-delay:.18s}
.reveal.in .sch-row:nth-child(4),.reveal.in .count .cell:nth-child(4){animation-delay:.27s}
.reveal.in .sch-row:nth-child(5){animation-delay:.36s}
.reveal.in .sch-row:nth-child(6){animation-delay:.45s}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001s!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* Ismlarni bir qatorda ko'rsatish (ba'zi dizaynlar) */
body.inline .names{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
body.inline .name{font-size:clamp(38px,10vw,64px)}
body.inline .amp{margin:0}

/* Marosim tartibi (schedule) */
.schedule{max-width:360px;margin:20px auto 0;display:flex;flex-direction:column}
.sch-row{display:grid;grid-template-columns:76px 18px 1fr;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line);text-align:left}
.sch-row:last-child{border-bottom:0}
.sch-t{font-family:var(--serif);font-size:23px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.sch-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);justify-self:center;box-shadow:0 0 0 4px rgba(180,140,120,.18)}
.sch-l{font-size:15px;color:var(--ink)}

/* Til tugmasi (RU/UZ) */
.lang-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 14px);z-index:57;display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;-webkit-tap-highlight-color:transparent}
.lang-btn span{padding:7px 13px;color:var(--ink-dim);transition:background .2s,color .2s}
.lang-btn span.on{background:var(--accent);color:var(--bg)}

/* Musiqa tugmasi */
.music-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 14px);z-index:57;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s;-webkit-tap-highlight-color:transparent}
.music-btn:active{transform:scale(.92)}
.music-btn svg{width:20px;height:20px}
.music-note{transform-origin:center}
.music-btn.playing .music-note{animation:notePulse 1.6s ease-in-out infinite}
@keyframes notePulse{0%,100%{opacity:.55}50%{opacity:1}}

/* Tap/touch (iOS) */
.env-seal,.envelope,.lock-handle,.lock-track,.cta,.pickmap,.mconfirm{-webkit-tap-highlight-color:transparent}
.lockscreen{touch-action:none}
.lock-track,.lock-handle{touch-action:none}

/* Eski brauzerlar (iOS < 16.2 — color-mix yo'q): muhur/konvert to'liq ko'rinsin */
@supports not (background: color-mix(in srgb, red, blue)) {
  .env-body{background:var(--panel)}
  .env-flap{background:var(--panel);filter:brightness(.93)}
  .env-seal{background:var(--accent);color:#fff}
  .env-seal::before{border-color:rgba(255,255,255,.35)}
  body.letterglow .env-seal{color:#fff}
}

/* ============ PREMIUM umumiy qatlam ============ */
/* Hero bezaklari */
.hero{position:relative;overflow:hidden}
.orn{position:absolute;left:50%;transform:translateX(-50%);color:var(--accent);opacity:.5;z-index:0;pointer-events:none}
.orn-top{top:44px;width:auto;height:auto}
.orn-arch{top:30px;width:min(88%,340px);height:auto;opacity:.45}
.hero>*{position:relative;z-index:1}
.wd{font-family:var(--script);font-size:30px;color:var(--accent);line-height:1;margin-bottom:4px}
.scrolld{margin-top:28px;color:var(--accent);font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.8}
.scrolld .chev{display:block;margin:8px auto 0;width:15px;height:15px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}
.name-load{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===== Har dizaynга alohida ochilish animatsiyasi ===== */
body.anim-zoom .name-load{animation:zoomIn 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes zoomIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

body.anim-pop .name-load{animation:popIn .85s cubic-bezier(.2,1.35,.4,1) both}
@keyframes popIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}

body.anim-sides .name-load{animation:none}
body.anim-sides #kuyov{display:inline-block;animation:fromLeft .9s cubic-bezier(.2,.7,.2,1) both}
body.anim-sides #kelin{display:inline-block;animation:fromRight .9s cubic-bezier(.2,.7,.2,1) .12s both}
@keyframes fromLeft{from{opacity:0;transform:translateX(-42px)}to{opacity:1;transform:none}}
@keyframes fromRight{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:none}}

body.anim-float .name-load{animation:floatIn 1.1s ease both}
@keyframes floatIn{from{opacity:0;transform:translateY(26px) rotate(-2deg)}to{opacity:1;transform:none}}

body.anim-shine .name-load{animation:shineIn 1.2s ease both}
@keyframes shineIn{0%{opacity:0;letter-spacing:.3em;filter:brightness(1.6)}100%{opacity:1;letter-spacing:normal;filter:brightness(1)}}

body.anim-shimmer .name-load{animation:shimmerIn 1.2s ease both}
@keyframes shimmerIn{0%{opacity:0;transform:translateY(12px);filter:brightness(1.7) saturate(1.4)}100%{opacity:1;transform:none;filter:none}}

body.anim-glow #kuyov,body.anim-glow #kelin{animation:glowIn 1.8s ease both}
@keyframes glowIn{0%{opacity:0;text-shadow:0 0 26px var(--accent)}60%{opacity:1;text-shadow:0 0 16px var(--accent)}100%{text-shadow:none}}

body.anim-draw .names::after{content:"";display:block;height:1px;width:0;background:var(--accent);margin:18px auto 0;animation:drawLine 1s ease .5s forwards}
@keyframes drawLine{to{width:130px}}

body.anim-mask .name-load{animation:none}
body.anim-mask #kuyov,body.anim-mask #kelin{display:inline-block;animation:wipe 1s cubic-bezier(.6,0,.2,1) both}
body.anim-mask #kelin{animation-delay:.18s}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@media (prefers-reduced-motion:reduce){.env-seal,.scrolld .chev,.name-load{animation:none}}

/* Surib-ochish (slide to unlock) */
.lockscreen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(120% 90% at 50% 12%,var(--panel),var(--bg2,var(--bg)));padding:28px;text-align:center;transition:opacity .8s ease,transform .8s ease}
.lockscreen.gone{opacity:0;transform:scale(1.06);pointer-events:none;visibility:hidden}
.lock-pre{letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--ink-dim)}
.lock-names{font-family:var(--serif);font-weight:600;font-size:clamp(32px,10vw,54px);color:var(--ink);line-height:1.05}
.lock-date{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:20px;margin-bottom:8px}
.lock-track{position:relative;width:min(84vw,320px);height:60px;border-radius:34px;background:var(--panel);border:1px solid var(--line);overflow:hidden;user-select:none;touch-action:none;box-shadow:inset 0 1px 6px rgba(0,0,0,.12)}
.lock-fill{position:absolute;left:0;top:0;bottom:0;width:56px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 30%,transparent))}
.lock-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);pointer-events:none}
.lock-handle{position:absolute;left:4px;top:4px;width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:grab;box-shadow:0 4px 14px rgba(0,0,0,.28);touch-action:none;z-index:2}
.lock-handle:active{cursor:grabbing}

/* Kalendar */
.calendar{max-width:340px;margin:16px auto 0}
.cal-head{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--accent);margin-bottom:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 2px;text-align:center}
.cal-wd{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);padding-bottom:6px}
.cal-day{font-family:var(--serif);font-size:17px;color:var(--ink);padding:6px 0;border-radius:50%;line-height:1.4}
.cal-sel{background:var(--accent);color:var(--bg);font-weight:600}

/* Manzil: rasm + xarita + tugmalar */
.venue-photo{width:100%;max-width:360px;margin:14px auto 0;border-radius:14px;display:block;border:1px solid var(--line);object-fit:cover;max-height:220px}
.map-embed{width:100%;max-width:360px;margin:14px auto 2px;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/11;background:var(--panel)}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.map-btns .cta{margin-top:0}
.cta.cta-2{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}

/* Kuyov-kelin rasmlari */
.couple-grid{display:grid;gap:12px;max-width:440px;margin:14px auto 0}
.couple-1{grid-template-columns:1fr}
.couple-2,.couple-3{grid-template-columns:1fr 1fr}
.couple-3 .couple-photo:first-child{grid-column:1 / -1}
.couple-photo{width:100%;border-radius:16px;border:1px solid var(--line);object-fit:cover;aspect-ratio:3/4;display:block}
.couple-1 .couple-photo{aspect-ratio:4/5;max-height:72vh}

/* Qur'on oyati */
.ayah{max-width:36ch;margin:0 auto}
.ayah-ar{font-size:27px;line-height:2;color:var(--ink);direction:rtl;font-family:'Amiri',serif}
.ayah-tr{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-dim);margin-top:16px;line-height:1.55}
.ayah-ref{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:12px}