/* =========================================================
   OQ QUSH (kaptar) · HUMO · SOKIN · GULBARG · SHAM
   ========================================================= */

/* ---------------- Mavzu ranglari ---------------- */
.t-kaptar {
  --bg: #f4f8fc; --bg2: #fcfdff; --ink: #24364b; --muted: #6f8299;
  --accent: #3f6f9f; --accent-2: #8aa36f; --gold: #c9a35a; --card: #ffffffe6;
  --line: #dbe6f1; --intro-bg: #e9f2fa;
  --petal-a: #ffffff; --petal-b: #e3eef8; --petal-c: #f6e7c8;
  --inner: #f7fbff; --inner-edge: #9ab6d3;
}
.t-humo {
  --bg: #08292f; --bg2: #0b3138; --ink: #f4ead2; --muted: #a9b9b2;
  --accent: #e8c26a; --accent-2: #5fd3d0; --gold: #e8c26a; --card: #ffffff0a;
  --line: #e8c26a33; --on-accent: #0b2a30; --intro-bg: #061e24;
  --petal-a: #ffe9a6; --petal-b: #fff6d6; --petal-c: #d9a945;
}
.t-sokin {
  --bg: #f6f4ee; --bg2: #fbfaf6; --ink: #2f3a2e; --muted: #7d8577;
  --accent: #5f7d5b; --accent-2: #a39274; --gold: #b9a27a; --card: #ffffff;
  --line: #e2e2d6; --intro-bg: #f6f4ee;
  --petal-a: #c9d6c3; --petal-b: #ffffff; --petal-c: #e8dfcc;
}
.t-gulbarg {
  --bg: #fdf1f4; --bg2: #fffafb; --ink: #4a2b36; --muted: #9a7884;
  --accent: #d95f86; --accent-2: #b98aa0; --gold: #d9a6b5; --card: #ffffffe6;
  --line: #f6d9e2; --intro-bg: radial-gradient(120% 90% at 50% 30%, #fffafb 0%, #fde8ee 60%, #f9d7e1 100%);
  --petal-a: #ffc4d4; --petal-b: #ffe4ec; --petal-c: #ff9fbf;
}
.t-sham {
  --bg: #f7efe1; --bg2: #fcf7ee; --ink: #3a2c1c; --muted: #8a7a63;
  --accent: #b07a2e; --accent-2: #8a9c84; --gold: #d0a456; --card: #fffaf2;
  --line: #eadcc2; --intro-bg: radial-gradient(120% 90% at 50% 70%, #fff4dc 0%, #f3e4c8 60%, #e6d2ae 100%);
  --petal-a: #ffe3a3; --petal-b: #fff3c9; --petal-c: #ffc76b;
}

/* =================== Umumiy animatsiyalar =================== */
.dove-wing { transform-box: fill-box; transform-origin: 50% 100%; animation: doveFlap .42s ease-in-out infinite alternate; }
@keyframes doveFlap { from { transform: scaleY(1); } to { transform: scaleY(.2); } }
.scene .dove-fly { animation: doveDrift var(--t, 16s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes doveDrift {
  0% { transform: translate(-120px, 40px); opacity: 0; } 8% { opacity: 1; }
  50% { transform: translate(120px, -20px); } 92% { opacity: 1; } 100% { transform: translate(360px, -80px); opacity: 0; }
}
.scene .beat { transform-box: fill-box; transform-origin: center; animation: heartbeat 1.8s ease-in-out infinite; }
.scene .bokeh circle { animation: twinkle 4s ease-in-out infinite; animation-delay: var(--d); }
.cflame { animation: flame 1.1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.cglow { animation: flicker 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.scene .humo-rays { animation: spin 90s linear infinite; }
.scene .humo-big { transform-box: fill-box; transform-origin: 50% 60%; animation: humoFloat 5s ease-in-out infinite; }
@keyframes humoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.scene .draw path { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); }
body:not(.locked) .scene .draw path { animation: draw 2.4s ease forwards; animation-delay: var(--dl, .4s); }

/* =================== KIRISH: KAPTARLAR =================== */
.intro-doves { display: grid; cursor: pointer; background: #dcebf8; }
.intro-doves::before { display: none; }
.dv-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv-title { margin: 0 0 18px; font: 600 clamp(36px, 10.5vw, 48px)/1.05 "Cormorant Garamond", serif; color: #2f5f8f; animation: fadeDown 1.1s ease both .35s; }
.dv-stage { position: relative; width: min(84vw, 340px); margin: 0 auto; animation: giftIn 1.2s cubic-bezier(.2,.9,.25,1.2) both .5s; }
.dv-stage svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 16px 20px #3f6f9f33); }
.dv-dove { transition: transform 1.8s cubic-bezier(.5,0,.6,1), opacity 1.2s ease .6s; }
.dv-dove .dove-wing { animation-duration: .7s; }
.dv-names { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font: 600 clamp(20px, 6vw, 26px)/1.1 "Cormorant Garamond", serif; color: #24364b; transition: opacity .5s; }
.dv-names i { color: #c9a35a; margin: 0 6px; font-size: .8em; }
.dv-ribbon { transition: transform 1s ease .2s, opacity .8s ease .3s; transform-box: fill-box; transform-origin: center; }
.intro-doves.opening .dv-l { transform: translate(-260px, -420px) rotate(-12deg); opacity: 0; }
.intro-doves.opening .dv-r { transform: translate(260px, -420px) rotate(12deg); opacity: 0; }
.intro-doves.opening .dv-dove .dove-wing { animation-duration: .18s; }
.intro-doves.opening .dv-ribbon { transform: translateY(40px) scale(.9); opacity: 0; }
.intro-doves.opening .dv-names, .intro-doves.opening .dv-title, .intro-doves.opening .intro-hint, .intro-doves.opening .intro-kicker { opacity: 0; transition: .5s; animation: none; }

/* =================== KIRISH: HUMO QANOTLARI =================== */
.intro-wings { display: grid; cursor: pointer; background: radial-gradient(ellipse 80% 60% at 50% 55%, #155f66 0%, #0b3a42 55%, #04161a 100%); }
.intro-wings::before { display: none; }
.wg-rays {
  position: absolute; left: 50%; top: 55%; width: 180vmax; height: 180vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, #f7e2a014 0deg 4deg, transparent 4deg 12deg);
  animation: spin 80s linear infinite; opacity: .7;
}
.wg-title { margin: 0 0 6px; font: 500 clamp(30px, 9vw, 42px)/1.1 "Cormorant Garamond", serif; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff3cf, #e8c26a 55%, #a87b2e); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fadeDown 1.1s ease both .3s; }
.intro-wings .intro-kicker { color: #8fc9c4; }
.wg-bird { width: min(86vw, 360px); margin: 0 auto; animation: giftIn 1.2s cubic-bezier(.2,.9,.25,1.2) both .5s; }
.wg-bird svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 10px 24px #000a); }
.wg-wing { transition: transform 1.3s cubic-bezier(.3,1.4,.4,1); }
.wg-r { transform: rotate(62deg); transform-origin: 14px -6px; }
.wg-l { transform: rotate(-62deg); transform-origin: -14px -6px; }
.intro-wings:not(.opening) .wg-r { animation: wingTwitchR 3.2s ease-in-out infinite 1.6s; }
.intro-wings:not(.opening) .wg-l { animation: wingTwitchL 3.2s ease-in-out infinite 1.6s; }
@keyframes wingTwitchR { 0%, 80%, 100% { transform: rotate(62deg); } 88% { transform: rotate(48deg); } }
@keyframes wingTwitchL { 0%, 80%, 100% { transform: rotate(-62deg); } 88% { transform: rotate(-48deg); } }
.wg-halo { opacity: .4; transition: opacity 1s, transform 1.2s; transform-box: fill-box; transform-origin: center; }
.wg-names { margin-top: 18px; font: 500 22px "Cormorant Garamond", serif; color: #f4ead2; letter-spacing: .06em; animation: fadeUp 1s ease both .9s; }
.wg-names i { color: #e8c26a; }
.wg-hint {
  margin: 22px auto 0; width: max-content; max-width: calc(100% - 32px); padding: 11px 20px; border-radius: 99px;
  border: 1px solid #e8c26a55; background: #04161acc; color: #e8c26a; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  animation: fadeUp 1s ease both 1s, glowPill 2.4s ease-in-out infinite 2s;
}
.intro-wings.opening .wg-r, .intro-wings.opening .wg-l { transform: rotate(0deg); animation: none; }
.intro-wings.opening .wg-halo { opacity: 1; transform: scale(1.8); }
.intro-wings.opening .wg-bird { transform: translateY(-30px) scale(1.12); transition: transform 1.6s ease .9s; animation: none; }
.intro-wings.opening .wg-title, .intro-wings.opening .wg-names, .intro-wings.opening .wg-hint, .intro-wings.opening .intro-kicker { opacity: 0; transition: .6s; animation: none; }

/* =================== KIRISH: MONOGRAMMA =================== */
.intro-mono { cursor: pointer; }
.mono-ring { position: relative; width: min(64vw, 250px); margin: 8px auto 18px; animation: giftIn 1.1s cubic-bezier(.2,.9,.25,1.2) both .4s; }
.mono-ring svg { width: 100%; display: block; overflow: visible; }
.mono-ring circle.mr1, .mono-ring circle.mr2 { fill: none; stroke: var(--accent); stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.2s ease forwards .6s; }
.mono-ring circle.mr1 { stroke-width: 1.4; }
.mono-ring circle.mr2 { stroke-width: .7; opacity: .6; animation-delay: .9s; }
.mono-ring .mr3 { fill: none; stroke: var(--accent-2); stroke-width: 1.4; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.6s ease forwards 1.6s; }
.mono-letters { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: 14%;
  font: 500 clamp(44px, 13vw, 58px)/1 "Cormorant Garamond", serif; color: var(--ink); animation: fadeUp 1s ease both 1s; }
.mono-letters i { font-size: .5em; color: var(--gold); font-style: italic; }
.mono-title { margin: 0; font: 500 italic clamp(26px, 7.5vw, 34px)/1.1 "Cormorant Garamond", serif; color: var(--accent); animation: fadeUp 1s ease both 1.2s; }
.intro-mono .intro-hint { animation: pulse 2s ease-in-out infinite 2.2s, fadeUp 1s ease both 1.6s; }
.intro-mono.opening .mono-ring { transform: scale(1.5); opacity: 0; transition: transform 1.2s cubic-bezier(.6,0,.3,1), opacity 1s ease .2s; animation: none; }
.intro-mono.opening .mono-title, .intro-mono.opening .intro-hint, .intro-mono.opening .intro-kicker { opacity: 0; transform: translateY(-10px); transition: .5s; animation: none; }
.t-sham .intro-mono .intro-kicker { color: var(--accent-2); }
.mono-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mono-petals span {
  position: absolute; left: var(--x); top: -20px; width: 12px; height: 14px; border-radius: 80% 0 80% 0; opacity: 0;
  background: linear-gradient(135deg, #ffd3df, #f78fab); animation: petalFall var(--t) linear var(--d) infinite;
}
@keyframes petalFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(60px, 110svh) rotate(540deg); opacity: 0; } }

/* =================== SAHIFALAR =================== */
/* Oq qush */
.t-kaptar .cover-text, .t-kaptar .final-text { text-shadow: 0 0 22px #ffffffe6, 0 0 3px #fff; }
.t-kaptar .names { color: #24364b; }
.t-kaptar .names .amp { color: #c9a35a; }
.t-kaptar .title, .t-kaptar .final-text h3 { color: #2f5f8f; }
.t-kaptar .countdown div { background: linear-gradient(160deg, #6f9bc8, #3f6f9f); }
.t-kaptar .the-day svg { fill: #6f9bc8; }

/* Humo (qorong'i) */
.t-humo .page { box-shadow: 0 0 80px #000; }
.t-humo .title, .t-humo .final-text h3, .t-humo .names > span:not(.amp) {
  background: linear-gradient(180deg, #fff3cf, #e8c26a 55%, #a87b2e); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.t-humo .names { font-weight: 500; letter-spacing: .04em; }
.t-humo .names .amp { color: #5fd3d0; }
.t-humo .cover-text { margin-top: 10svh; filter: drop-shadow(0 2px 14px #000c); text-shadow: none; }
.t-humo .final-text { margin-top: 12svh; filter: drop-shadow(0 2px 14px #000c); text-shadow: none; }
.t-humo .cover-kicker { color: #8fc9c4; }
.t-humo .cover-date, .t-humo .final-names { color: #e9dfc4; }
.t-humo .scroll-hint, .t-humo .lang, .t-humo .music-btn { background: #061e24cc; color: #e8c26a; box-shadow: none; border: 1px solid #e8c26a33; }
.t-humo .lang button { color: #a9b9b2; }
.t-humo .lang button.active { background: linear-gradient(#f3d98f, #c9a050); }
.t-humo .btn-solid { background: linear-gradient(180deg, #f3d98f, #c9a050); border-color: #c9a050; }
.t-humo .btn-line, .t-humo .pill { color: #e8c26a; border-color: #e8c26a66; }
.t-humo .countdown div { background: #ffffff0a; color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.t-humo .countdown b { color: #e8c26a; }
.t-humo .calendar, .t-humo .place-card, .t-humo .rsvp-done { background: #ffffff08; box-shadow: none; }
.t-humo .the-day svg { fill: #e8c26a; }
.t-humo .the-day i { color: #0b2a30; }
.t-humo .t-ic { background: #0b3138; border-color: #e8c26a55; color: #e8c26a; }
.t-humo .field input, .t-humo .field textarea, .t-humo .choice label, .t-humo .stepper { background: #ffffff0a; color: var(--ink); border-color: #e8c26a33; }
.t-humo .field ::placeholder { color: #7f918b; }
.t-humo .place-card .pin circle { fill: #0b3138; }
.t-humo .map-embed iframe { filter: invert(.9) hue-rotate(160deg) saturate(.6) brightness(.95) contrast(.95); }

/* Sokin */
.t-sokin .names { font-weight: 500; color: #2f3a2e; }
.t-sokin .names .amp { color: #a39274; }
.t-sokin .title, .t-sokin .final-text h3 { font-weight: 500; font-style: italic; color: #5f7d5b; }
.t-sokin .cover-text { margin-top: 20svh; }
.t-sokin .final-text { margin-top: 24svh; }
.t-sokin .countdown div { background: transparent; color: var(--ink); border: 1px solid #c9d3c3; box-shadow: none; }
.t-sokin .countdown b { color: #5f7d5b; font-weight: 500; }
.t-sokin .the-day svg { fill: #8fa58c; }
.t-sokin .calendar, .t-sokin .place-card { box-shadow: none; }

/* Gulbarg */
.t-gulbarg .cover-text, .t-gulbarg .final-text { text-shadow: 0 0 22px #fffafb, 0 0 4px #fff; }
.t-gulbarg .names, .t-gulbarg .final-text h3, .t-gulbarg .title { font-family: "Marck Script", "Great Vibes", "Cormorant Garamond", serif; font-weight: 400; }
.t-gulbarg .names { font-size: clamp(56px, 16vw, 78px); color: #7a3550; line-height: .98; }
.t-gulbarg .names.long { font-size: clamp(42px, 11.5vw, 58px); }
.t-gulbarg .names.xlong { font-size: clamp(32px, 8.6vw, 44px); }
.t-gulbarg .names .amp { color: #f78fab; }
.t-gulbarg .title { font-size: clamp(42px, 12vw, 54px); color: #d95f86; }
.t-gulbarg .final-text h3 { color: #d95f86; font-size: clamp(50px, 14vw, 66px); }
.t-gulbarg .cover-text { margin-top: 20svh; }
.t-gulbarg .countdown div { background: linear-gradient(160deg, #f7a3bd, #d95f86); }

/* Sham */
.t-sham .cover-text, .t-sham .final-text { text-shadow: 0 0 20px #fff6e3, 0 0 4px #fff6e3; }
.t-sham .cover-text { margin-top: 13svh; }
.t-sham .final-text { margin-top: 15svh; }
.t-sham .names { color: #3a2c1c; font-weight: 500; }
.t-sham .names .amp { color: #d0a456; }
.t-sham .title, .t-sham .final-text h3 { color: #b07a2e; font-weight: 500; }
.t-sham .countdown div { background: linear-gradient(160deg, #d9ac5f, #a26d22); }
.t-sham .the-day svg { fill: #d0a456; }

.t-kaptar .names.long, .t-humo .names.long, .t-sokin .names.long, .t-sham .names.long { font-size: clamp(34px, 9.5vw, 46px); }