/* 3D motion taklifnoma sahnasi (assets/motion.js). Sahna — 9:16 quti, 180×320 birlik; --u — bitta birlik.
   Telefonda quti ekranni to'liq egallaydi (yonlari ozgina kesiladi), kompyuterda markazda turadi. */

.stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 20; overflow: hidden; background: var(--sbg, var(--bg)); perspective: 1400px; --H: 100vh; -webkit-tap-highlight-color: transparent; }
@supports (height: 100svh) { .stage { --H: 100svh; height: 100svh; } }
.stage.hero { position: relative; z-index: 1; }
/* Katalog kartasining ichidagi kichik sahna (--H kartaning balandligi, JS beradi) */
.stage.mini { position: absolute; inset: 0; height: auto; z-index: 1; border-radius: inherit; perspective: 900px; animation: mIn .35s; }
.mini .stage-tap, .mini .stage-skip, .mini .stage-end { display: none !important; }
.stage.gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s, visibility .9s; }
.stage.instant, .stage.instant * { transition-duration: 0s !important; transition-delay: 0s !important; }

.box { position: absolute; top: 0; left: 50%; width: calc(var(--H) * 9 / 16); height: var(--H); --u: calc(var(--H) / 320); perspective: calc(var(--u) * 520);
  transform: translateX(-50%) rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -4deg)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.box .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.box svg { display: block; }
.world { position: absolute; inset: 0; transform-style: preserve-3d; }

/* ---------- Boshqaruv ---------- */
.stage-tap { position: absolute; inset: 0; z-index: 8; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--H) * .08); }
.stage-tap span, .stage-skip, .stage-replay { border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--tc, var(--ink)); font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .4); }
.stage-tap span { padding: 14px 24px; animation: tapPulse 2.4s ease-in-out infinite; }
.stage-skip { position: absolute; top: calc(14px + var(--bn, 0px)); right: 14px; z-index: 8; padding: 10px 14px; cursor: pointer; letter-spacing: .12em; display: none; }
.stage-end { position: absolute; left: 0; right: 0; bottom: calc(var(--H) * .03); z-index: 8; display: none; flex-direction: column; align-items: center; gap: 10px; color: var(--tc, var(--ink)); font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.stage-end span { opacity: .7; animation: bob 2s ease-in-out infinite; }
.stage-replay { padding: 9px 14px; cursor: pointer; letter-spacing: .12em; }
.playing .stage-tap { display: none; }
.playing:not(.done) .stage-skip { display: block; }
.done .stage-end { display: flex; animation: mIn 1.2s; }
@keyframes tapPulse { 50% { transform: scale(1.05); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .4), 0 0 0 10px rgba(255, 255, 255, .25); } }
@keyframes mIn { from { opacity: 0; } }

/* ---------- Matn sahnalari ---------- */
.slides { position: absolute; z-index: 3; left: var(--sx, calc(var(--u) * 24)); right: var(--sx, calc(var(--u) * 24)); top: var(--st, calc(var(--u) * 110)); bottom: var(--sb, calc(var(--u) * 36)); display: grid; grid-template-columns: minmax(0, 1fr); pointer-events: none; }
.slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); text-align: center; color: var(--tc); }
.slide > * { max-width: 100%; opacity: 0; transform: translateY(calc(var(--u) * 6)); filter: blur(5px); transition: opacity 1s, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter 1s; }
.slide.on > * { opacity: 1; transform: none; filter: none; }
.slide.on > :nth-child(2) { transition-delay: .4s; }
.slide.on > :nth-child(3) { transition-delay: .8s; }
.slide.on > :nth-child(4) { transition-delay: 1.2s; }
.slide.on > :nth-child(5) { transition-delay: 1.6s; }
.slide.on > :nth-child(6) { transition-delay: 2s; }
.slide.off > * { opacity: 0; transform: translateY(calc(var(--u) * -5)); filter: blur(6px); transition-duration: .8s; transition-delay: 0s; }

.t-cap { font: 500 calc(var(--u) * 6.4) / 1.4 var(--serif); letter-spacing: .26em; text-transform: uppercase; }
.t-big { font: 400 calc(var(--u) * 15) / 1.08 var(--serif); letter-spacing: .07em; text-transform: uppercase; margin: calc(var(--u) * 2) 0; }
.t-script { font-family: var(--script); font-size: calc(var(--u) * min(34, 250 / var(--len))); line-height: 1.15; color: var(--sc, var(--tc)); padding: 0 .35em; }
.t-script.sm { font-size: calc(var(--u) * 21); }
.t-amp { font-family: var(--script); font-size: calc(var(--u) * 18); line-height: .7; color: color-mix(in srgb, var(--sc, var(--tc)) 75%, transparent); }
.t-date { font: 500 calc(var(--u) * 11.5) / 1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.t-date.sm { font-size: calc(var(--u) * 7.5); letter-spacing: .3em; margin-top: calc(var(--u) * 3); }
.t-small { font: 500 calc(var(--u) * 6.6) / 1.5 var(--serif); color: color-mix(in srgb, var(--tc) 85%, transparent); }
.t-msg { font: italic 500 calc(var(--u) * clamp(7.5, 1300 / var(--len), 13)) / 1.45 var(--serif); }
/* Qo'lda yozilayotgandek: niqob chapdan o'ngga ochiladi */
.slide .write { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity .6s, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s, -webkit-mask-position 2.2s ease-in-out, mask-position 2.2s ease-in-out; }
.slide.on .write { -webkit-mask-position: 0 0; mask-position: 0 0; }
.t-cal { display: flex; gap: calc(var(--u) * 3.5); margin: calc(var(--u) * 2) 0; }
.t-cal span { width: calc(var(--u) * 15); height: calc(var(--u) * 15); display: grid; place-items: center; border: 1px solid currentColor; border-radius: calc(var(--u) * 4); font: 500 calc(var(--u) * 7) / 1 var(--serif); opacity: .75; }
.t-cal span.on { opacity: 1; color: #fff; border-color: var(--sc); background: var(--sc); transform: scale(1.18); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) -2px rgba(120, 90, 40, .5); }
.gold, .m-bog .t-script, .m-atlas .t-script:not(.sm), .m-fil .t-script:not(.sm) { background: linear-gradient(100deg, #8f5f27, #e2bf74 35%, #a8742f 55%, #f0d593 75%, #956428); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Zarrachalar ---------- */
.fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; perspective: calc(var(--u) * 400); }
.stage:not(.playing) .fx { display: none; }
.petal { position: absolute; top: calc(var(--u) * -14); left: var(--x); width: calc(var(--u) * var(--s)); height: calc(var(--u) * var(--s) * .72); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, var(--c1), var(--c2)); opacity: 0; animation: petalFall var(--d) linear var(--dl) infinite; }
@keyframes petalFall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate3d(1, .5, .2, 0deg); }
  8%, 88% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(calc(var(--u) * var(--dx)), calc(var(--u) * 350), calc(var(--u) * var(--dz))) rotate3d(1, .5, .2, 960deg); }
}
.spark { position: absolute; left: var(--x); top: var(--y); width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: radial-gradient(#fff, rgba(255, 232, 170, .9) 35%, transparent 70%); opacity: 0; animation: twinkle var(--d) ease-in-out var(--dl) infinite; }
@keyframes twinkle { 50% { opacity: 1; transform: scale(1.6); } }

/* ============ 1. Oq kapalak ============ */
.m-kapalak { --sbg: #efe8dc; --tc: #6e655a; --sc: #7a6750; }
.m-kapalak .paper { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, #faf6ef, #efe7da 75%); }
.m-kapalak .paper::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; filter: blur(4px);
  background: radial-gradient(38% 55% at 18% 100%, rgba(208, 188, 160, .5), transparent 70%), radial-gradient(34% 45% at 58% 100%, rgba(220, 203, 178, .55), transparent 70%), radial-gradient(30% 40% at 92% 96%, rgba(200, 180, 152, .45), transparent 70%); }
.m-kapalak .world { z-index: 2; }
.flap { position: absolute; inset: 0; filter: drop-shadow(0 0 calc(var(--u) * 2.5) rgba(100, 78, 45, .3)); transition: transform 1.8s cubic-bezier(.55, .05, .25, 1), opacity .6s 1.25s, visibility 0s 1.9s; }
.flap > div { position: absolute; inset: 0; background: linear-gradient(160deg, #f7f1e6, #e8dfcf); }
.flap-l { transform-origin: 0 50%; transform: translateZ(1px); } .flap-l > div { clip-path: polygon(0 0, 57% 50%, 0 100%); }
.flap-r { transform-origin: 100% 50%; transform: translateZ(1px); } .flap-r > div { clip-path: polygon(100% 0, 43% 50%, 100% 100%); }
.flap-b { transform-origin: 50% 100%; transform: translateZ(2px); } .flap-b > div { clip-path: polygon(0 100%, 50% 44%, 100% 100%); }
.flap-t { transform-origin: 50% 0; transform: translateZ(3px); } .flap-t > div { clip-path: polygon(0 0, 100% 0, 50% 58%); }
.o1 .flap-l { transform: rotateY(-155deg); opacity: 0; visibility: hidden; }
.o1 .flap-r { transform: rotateY(155deg); opacity: 0; visibility: hidden; }
.o2 .flap-t { transform: rotateX(155deg); opacity: 0; visibility: hidden; }
.o2 .flap-b { transform: rotateX(-155deg); opacity: 0; visibility: hidden; }
.m-kapalak .slides { --st: calc(var(--u) * 106); --sb: calc(var(--u) * 46); }
/* Qopqoqlar uchrashgan joyda fil suyagi rang mum muhr: sekin "nafas oladi", bosilganda ko'tarilib yo'qoladi */
.m-kapalak .kp-seal { position: absolute; z-index: 5; left: 50%; top: 51%; width: calc(var(--u) * 58); height: calc(var(--u) * 58); margin: calc(var(--u) * -29) 0 0 calc(var(--u) * -29); pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(110, 90, 60, .14)); animation: waxBreath 3.2s ease-in-out infinite; transition: transform .7s cubic-bezier(.5, -.3, .5, 1), opacity .5s .15s; }
.m-kapalak .kp-seal svg { width: 100%; height: 100%; overflow: visible; }
.m-kapalak.o1 .kp-seal { animation: none; transform: translateY(calc(var(--u) * -18)) scale(1.35); opacity: 0; }

.bfly-path { position: absolute; z-index: 3; left: calc(var(--u) * 48); top: calc(var(--u) * 30); width: calc(var(--u) * 84); height: calc(var(--u) * 64.7); opacity: 0; visibility: hidden; }
.o3 .bfly-path { visibility: visible; animation: bflyIn 3.2s cubic-bezier(.25, .6, .25, 1) forwards; }
.landed .bfly-path { opacity: 1; animation: bflyHover 6s ease-in-out infinite; }
.bfly { position: absolute; inset: 0; perspective: calc(var(--u) * 260); filter: drop-shadow(calc(var(--u) * 5) calc(var(--u) * 9) calc(var(--u) * 3.5) rgba(80, 60, 30, .3)); }
/* Bitta foto: chap/o'ng yarmi — qanotlar, o'rtadagi ingichka tasma — tana */
.wing, .bfly-body { position: absolute; top: 0; height: 100%; background: url(img/bfly.webp) no-repeat; }
.wing { width: 50%; background-size: 200% 100%; }
.wing.l { right: 50%; background-position: 0 0; transform-origin: 100% 50%; animation: wingL .15s ease-in-out infinite alternate; }
.wing.r { left: 50%; background-position: 100% 0; transform-origin: 0 50%; animation: wingR .15s ease-in-out infinite alternate; }
.landed .wing.r { animation: restR 4s ease-in-out infinite; }
.landed .wing.l { animation: restL 4s ease-in-out infinite; }
.bfly-body { left: 46.4%; width: 7.2%; background-size: 1389% 100%; background-position: 50% 0; }
@keyframes wingR { from { transform: rotateY(-6deg); filter: brightness(1); } to { transform: rotateY(-74deg); filter: brightness(.78); } }
@keyframes wingL { from { transform: rotateY(6deg); filter: brightness(1); } to { transform: rotateY(74deg); filter: brightness(.78); } }
@keyframes restR { 0%, 50%, 100% { transform: rotateY(-10deg); } 60% { transform: rotateY(-60deg); filter: brightness(.82); } 70% { transform: rotateY(-16deg); } 80% { transform: rotateY(-52deg); filter: brightness(.85); } 90% { transform: rotateY(-12deg); } }
@keyframes restL { 0%, 50%, 100% { transform: rotateY(10deg); } 60% { transform: rotateY(60deg); filter: brightness(.82); } 70% { transform: rotateY(16deg); } 80% { transform: rotateY(52deg); filter: brightness(.85); } 90% { transform: rotateY(12deg); } }
@keyframes bflyIn {
  0% { opacity: 0; transform: translate3d(calc(var(--u) * -70), calc(var(--u) * 240), calc(var(--u) * 260)) rotateZ(-40deg) rotateX(50deg); }
  12% { opacity: 1; }
  50% { transform: translate3d(calc(var(--u) * 36), calc(var(--u) * 92), calc(var(--u) * 120)) rotateZ(20deg) rotateX(36deg); }
  80% { transform: translate3d(calc(var(--u) * -6), calc(var(--u) * 14), calc(var(--u) * 30)) rotateZ(-6deg) rotateX(16deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes bflyHover { 50% { transform: translate3d(0, calc(var(--u) * -2.5), calc(var(--u) * 6)) rotateZ(1.5deg) rotateX(8deg); } }

/* ============ 2. Oq ravoq ============ */
.m-ravoq { --sbg: #e8dfda; --tc: #6b625f; --sc: #5d5452; }
.m-ravoq .room { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s; }
.m-ravoq .world { z-index: 2; transform-origin: 50% 62%; transition: transform 2.4s cubic-bezier(.6, 0, .35, 1), opacity .8s; }
.m-ravoq.o2 .world { transform: scale(3.6); }
.m-ravoq.o3 .world { opacity: 0; }
.m-ravoq.o4 .room { opacity: 1; }
.door { position: absolute; top: 35.625%; width: 20%; height: 54.375%; transition: transform 2.1s cubic-bezier(.5, 0, .2, 1); }
.door svg { width: 100%; height: 100%; }
.door-l { left: 30%; transform-origin: 0 50%; }
.door-r { left: 50%; transform-origin: 100% 50%; }
.o1 .door-l { transform: rotateY(108deg); }
.o1 .door-r { transform: rotateY(-108deg); }
.m-ravoq .flash { position: absolute; inset: 0; z-index: 3; background: radial-gradient(60% 50% at 50% 55%, #fffdf8, #f3ebe5); opacity: 0; pointer-events: none; transition: opacity 1s 1.2s; }
.m-ravoq.o2 .flash { opacity: 1; }
.m-ravoq.o4 .flash { opacity: 0; transition: opacity 1.6s; }
.mono { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--u) * 112); text-align: center; font-family: var(--script); font-size: calc(var(--u) * 46); line-height: 1; color: #6b6260; opacity: 0; transform: scale(.9);
  transition: opacity 1.4s, transform 2s cubic-bezier(.2, .7, .2, 1), top 1.6s cubic-bezier(.6, 0, .3, 1), font-size 1.6s cubic-bezier(.6, 0, .3, 1); }
.mono i { font-size: .55em; margin: 0 .08em; opacity: .7; }
.mono small { display: block; margin-top: calc(var(--u) * 12); font: 500 calc(var(--u) * 8.5) / 1 var(--serif); letter-spacing: .3em; transition: opacity .8s; }
.o3 .mono { opacity: 1; transform: none; }
.o4 .mono { top: calc(var(--u) * 66); font-size: calc(var(--u) * 24); }
.o4 .mono small { opacity: 0; }
.m-ravoq .slides { --st: calc(var(--u) * 98); --sb: calc(var(--u) * 48); --sx: calc(var(--u) * 32); }

/* ============ 3. Bog' ravoqlari ============ */
.m-bog { --sbg: #f3e4c6; --tc: #7d5c37; --sc: #b07a3c; }
/* Haqiqiy suratlar (assets/img/garden-*.webp); a — tunnel, b — oq ravoq. Kattalashish markazi — ravoqlar o'rni */
.m-bog .ph { position: absolute; inset: 0; background: no-repeat center / cover; will-change: transform, opacity; transition: filter 1.6s; }
.m-bog .ph-a { background-image: url(img/garden-through.webp); transform-origin: 50% 73%; }
.m-bog .ph-b { background-image: url(img/garden-towards.webp); transform-origin: 50% 56%; opacity: 0; }
.m-bog .sun { position: absolute; inset: 0; background: radial-gradient(70% 34% at 50% 8%, rgba(255, 228, 165, .55), transparent 70%), linear-gradient(180deg, rgba(255, 205, 130, .12), transparent 45%, rgba(255, 220, 170, .14)); pointer-events: none; }
.m-bog.o2 .ph { filter: blur(1.5px) saturate(.9); }
.m-bog .haze { position: absolute; inset: 0; z-index: 2; background: radial-gradient(62% 48% at 50% 50%, rgba(255, 249, 238, .86), rgba(255, 246, 230, .5) 70%, rgba(255, 244, 225, .25)); opacity: 0; transition: opacity 1.6s; }
.m-bog.o2 .haze { opacity: 1; }
.m-bog .slides { --st: calc(var(--u) * 70); --sb: calc(var(--u) * 70); --sx: calc(var(--u) * 30); }
.m-bog .t-cap, .m-bog .t-date, .m-bog .t-small, .m-bog .t-big, .m-bog .t-msg { text-shadow: 0 0 calc(var(--u) * 4) rgba(255, 250, 240, .9); }
.dove { position: absolute; z-index: 3; width: calc(var(--u) * 44); height: calc(var(--u) * 37.3); left: 0; top: 0; opacity: 0; perspective: calc(var(--u) * 140); filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 4) rgba(120, 90, 50, .22)); }
/* Kaptar fotosi uch bo'lakda: tana qimirlamaydi, qanotlar yelkadan 3D da qoqiladi */
.dv-body, .dv-w { position: absolute; inset: 0; background: no-repeat 0 0 / 100% 100%; }
.dv-body { background-image: url(img/dove-body.webp); }
.dv-w.l { background-image: url(img/dove-wl.webp); transform-origin: 35.1% 40%; animation: dvL .36s ease-in-out infinite alternate; }
.dv-w.r { background-image: url(img/dove-wr.webp); transform-origin: 51.4% 36%; animation: dvR .36s ease-in-out infinite alternate; }
@keyframes dvL { from { transform: rotateY(-28deg) rotateZ(4deg); } to { transform: rotateY(62deg) rotateZ(-10deg); filter: brightness(.86); } }
@keyframes dvR { from { transform: rotateY(28deg) rotateZ(-4deg); } to { transform: rotateY(-62deg) rotateZ(10deg); filter: brightness(.86); } }
.o1 .d1 { animation: dfly1 5.5s cubic-bezier(.3, .3, .5, 1) forwards; }
.o1 .d2 { animation: dfly2 6s cubic-bezier(.3, .3, .5, 1) .5s forwards; }
.o1 .d3 { animation: dfly3 5.2s cubic-bezier(.3, .3, .5, 1) 1.2s forwards; }
.o2 .dove { visibility: hidden; }
@keyframes dfly1 { 0% { opacity: 0; transform: translate(calc(var(--u) * 104), calc(var(--u) * 210)) scale(1.6) rotate(8deg); } 8%, 72% { opacity: 1; }
  45% { transform: translate(calc(var(--u) * 74), calc(var(--u) * 130)) scale(.9) rotate(-4deg); } 100% { opacity: 0; transform: translate(calc(var(--u) * 62), calc(var(--u) * 62)) scale(.28) rotate(4deg); } }
@keyframes dfly2 { 0% { opacity: 0; transform: translate(calc(var(--u) * 14), calc(var(--u) * 236)) scale(1.35) scaleX(-1) rotate(-6deg); } 8%, 72% { opacity: 1; }
  45% { transform: translate(calc(var(--u) * 50), calc(var(--u) * 150)) scale(.8) scaleX(-1) rotate(5deg); } 100% { opacity: 0; transform: translate(calc(var(--u) * 92), calc(var(--u) * 72)) scale(.25) scaleX(-1); } }
@keyframes dfly3 { 0% { opacity: 0; transform: translate(calc(var(--u) * 122), calc(var(--u) * 150)) scale(1) rotate(10deg); } 10%, 72% { opacity: 1; }
  45% { transform: translate(calc(var(--u) * 104), calc(var(--u) * 104)) scale(.6); } 100% { opacity: 0; transform: translate(calc(var(--u) * 84), calc(var(--u) * 56)) scale(.2); } }

/* ============ 4. Atlas va oltin ============ */
.m-atlas { --sbg: #ece9e4; --tc: #5f6d40; --sc: #b08a3e; }
/* Haqiqiy atlas surati (assets/img/satin.webp) sekin "nafas oladi", ustidan yaltiroq nur o'tadi */
.m-atlas .satin { position: absolute; inset: -6%; background: url(img/satin.webp) center / cover; animation: satin 16s ease-in-out infinite alternate; }
.m-atlas .satin::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%) 0 0 / 260% 260%; animation: sheen 9s ease-in-out infinite; }
@keyframes satin { to { transform: scale(1.06) translate(-1.5%, 1%); } }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 100%; } }
.gate { position: absolute; z-index: 2; left: calc(var(--u) * 37); top: calc(var(--u) * 80); width: calc(var(--u) * 106); height: calc(var(--u) * 158); transform-style: preserve-3d;
  transform: rotateX(18deg) translateZ(calc(var(--u) * -12)); transition: transform 1.6s cubic-bezier(.3, .6, .2, 1), opacity 1.1s; }
.o1 .gate { transform: none; }
.o3 .gate { transform: scale(1.4); opacity: 0; }
.gate-card { position: absolute; inset: 0; display: grid; place-items: center; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -10) rgba(60, 50, 30, .5); }
.gold-title { position: relative; font-family: var(--script); font-size: calc(var(--u) * 28); line-height: 1.05; text-align: center; padding: 0 .3em; }
.gate-card .gold-title { background: linear-gradient(100deg, #8f5f27, #e2bf74 35%, #a8742f 55%, #f0d593 75%, #956428); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)); }
.gate-p { position: absolute; top: 0; bottom: 0; width: 50%; background: radial-gradient(circle, #ddd6ca 0 calc(var(--u) * .7), transparent calc(var(--u) * .9)) 0 0 / calc(var(--u) * 6) calc(var(--u) * 6), linear-gradient(160deg, #fffefc, #efebe5);
  box-shadow: inset 0 0 0 calc(var(--u) * 3) #fcfbf8, inset 0 0 0 calc(var(--u) * 3.6) #c9a86a, 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -6) rgba(60, 50, 30, .45);
  transition: transform 1.9s cubic-bezier(.5, 0, .2, 1), opacity .7s 1.4s; }
.gate-l { left: 0; transform-origin: 0 50%; transform: translateZ(1px); }
.gate-r { right: 0; transform-origin: 100% 50%; transform: translateZ(1px); }
.o2 .gate-l { transform: rotateY(-160deg); opacity: 0; }
.o2 .gate-r { transform: rotateY(160deg); opacity: 0; }
.gate-seal { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin: calc(var(--u) * -15) 0 0 calc(var(--u) * -15); transform: translateZ(3px);
  transition: transform .8s cubic-bezier(.5, -.4, .5, 1), opacity .6s .2s; }
.o1 .gate-seal { transform: translateZ(calc(var(--u) * 80)) scale(1.4) rotate(-14deg); opacity: 0; }
.m-atlas .frame { position: absolute; z-index: 2; left: calc(var(--u) * 20); top: calc(var(--u) * 36); width: calc(var(--u) * 140); height: calc(var(--u) * 252); opacity: 0; transform: scale(.8) rotateX(10deg);
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -12) rgba(60, 50, 30, .45);
  transition: opacity 1.2s .2s, transform 1.5s cubic-bezier(.2, .7, .2, 1); }
.frame-seal { position: absolute; left: 50%; top: calc(var(--u) * -13); width: calc(var(--u) * 28); height: calc(var(--u) * 28); margin-left: calc(var(--u) * -14); }
.o3 .frame { opacity: 1; transform: none; }
.m-atlas .slides { --st: calc(var(--u) * 58); --sb: calc(var(--u) * 46); --sx: calc(var(--u) * 32); }

/* ============ 5. Fil suyagi ============ */
.m-fil { --sbg: #f1e8da; --tc: #6a4f3c; --sc: #a8834a; }
/* Ichkaridagi manzara: avval yaqin va xira (konvert orqasida), ochilganda kamera orqaga chekinadi */
.m-fil .view { position: absolute; inset: 0; transform: scale(1.34); transform-origin: 50% 44%; filter: blur(2px); transition: transform 4.2s cubic-bezier(.25, .1, .2, 1), filter 2.4s; }
.m-fil.o2 .view { transform: none; filter: none; }
.m-fil .lake { position: absolute; inset: -4%; background: url(img/lake.webp) center 58% / cover; animation: lakeDrift 22s ease-in-out infinite alternate; }
@keyframes lakeDrift { to { transform: scale(1.05) translateX(-1.5%); } }
.m-fil .sun { position: absolute; inset: 0; background: radial-gradient(46% 16% at 50% 50%, rgba(255, 248, 232, .95), rgba(255, 242, 220, .35) 60%, transparent), linear-gradient(180deg, rgba(252, 240, 222, .5), transparent 40%); animation: sunGlow 7s ease-in-out infinite alternate; }
@keyframes sunGlow { to { opacity: .75; } }
/* Haqiqiy oqqushlar (img/swans.webp): suvda sekin chayqaladi, pastda aksi */
.m-fil .swans { position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 222); width: calc(var(--u) * 90); height: calc(var(--u) * 47.3); animation: swanBob 5s ease-in-out infinite; }
.m-fil .sw { position: absolute; inset: 0; background: url(img/swans.webp) 0 0 / 100% 100%; -webkit-mask-image: linear-gradient(#000 72%, transparent 98%); mask-image: linear-gradient(#000 72%, transparent 98%); }
.m-fil .sw.ref { top: 82%; bottom: -82%; transform: scaleY(-.8); transform-origin: 50% 0; opacity: .28; filter: blur(1.2px); -webkit-mask-image: linear-gradient(transparent 30%, #000 95%); mask-image: linear-gradient(transparent 30%, #000 95%); }
@keyframes swanBob { 50% { transform: translate(calc(var(--u) * .8), calc(var(--u) * -1.2)) rotate(-.6deg); } }
.m-fil .mist { position: absolute; left: 0; right: 0; top: calc(var(--u) * 244); height: calc(var(--u) * 48); background: linear-gradient(rgba(248, 241, 230, 0), rgba(248, 241, 230, .6)); }
.m-fil .mist::before { content: ''; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 4), rgba(255, 255, 255, .7) calc(var(--u) * 4.3), transparent calc(var(--u) * 4.8)) 0 0 / 100% calc(var(--u) * 9);
  -webkit-mask-image: radial-gradient(50% 40% at 50% 20%, #000, transparent); mask-image: radial-gradient(50% 40% at 50% 20%, #000, transparent); animation: ripple 4s linear infinite; }
@keyframes ripple { to { background-position: 0 calc(var(--u) * 9); } }
/* Haqiqiy pionlar (img/peony-*.webp) ravoq burchaklarida: ochilgandan keyin gullab chiqadi */
.m-fil .pe { position: absolute; background: no-repeat center / contain; filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 2.5) calc(var(--u) * 2.5) rgba(90, 60, 45, .3)); opacity: 0; transform: scale(.6) rotate(var(--r)); transition: opacity 1s, transform 1.8s cubic-bezier(.2, .9, .3, 1.15); }
.m-fil .pe1 { --r: 10deg; left: calc(var(--u) * -8); top: calc(var(--u) * 234); width: calc(var(--u) * 70); height: calc(var(--u) * 76); background-image: url(img/peony-blush.webp); transform-origin: 30% 80%; }
.m-fil .pe2 { --r: -8deg; left: calc(var(--u) * 116); top: calc(var(--u) * 240); width: calc(var(--u) * 68); height: calc(var(--u) * 66); background-image: url(img/peony-pink.webp); transform-origin: 70% 80%; transition-delay: .2s; }
.m-fil .pe3 { --r: -30deg; left: calc(var(--u) * 126); top: calc(var(--u) * 48); width: calc(var(--u) * 40); height: calc(var(--u) * 44); background-image: url(img/peony-blush.webp); transform-origin: 80% 20%; transition-delay: .4s; }
.m-fil .pe4 { --r: 24deg; left: calc(var(--u) * 12); top: calc(var(--u) * 52); width: calc(var(--u) * 38); height: calc(var(--u) * 37); background-image: url(img/peony-pink.webp); transform-origin: 20% 20%; transition-delay: .55s; }
.m-fil.o2 .pe { opacity: 1; transform: rotate(var(--r)); }
.m-fil.done .pe1, .m-fil.done .pe2 { animation: peSway 6s ease-in-out infinite alternate; }
@keyframes peSway { to { transform: rotate(calc(var(--r) + 3deg)) scale(1.02); } }

/* Konvert: to'rt uchburchak qopqoq markazda uchrashadi (X), bo'rtma gulli krem qog'oz */
.m-fil .env { position: absolute; inset: 0; z-index: 5; transform-style: preserve-3d; pointer-events: none; }
.iv-flap { position: absolute; inset: 0; filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(110, 85, 55, .32)); transition: transform 2s cubic-bezier(.55, .05, .25, 1), opacity .7s 1.3s, visibility 0s 2s; }
.iv-flap > div { position: absolute; inset: 0; background: linear-gradient(165deg, #f8f2e8, #ece2d3); }
.iv-l { transform-origin: 0 50%; } .iv-l > div { clip-path: polygon(0 0, 50.5% 50%, 0 100%); background: linear-gradient(90deg, #efe6d8, #f6efe4); }
.iv-r { transform-origin: 100% 50%; } .iv-r > div { clip-path: polygon(100% 0, 49.5% 50%, 100% 100%); background: linear-gradient(270deg, #ece2d3, #f5eee2); }
.iv-b { transform-origin: 50% 100%; transform: translateZ(1px); } .iv-b > div { clip-path: polygon(0 100%, 50% 49.5%, 100% 100%); background: linear-gradient(0deg, #f6efe4, #ebe1d1); }
.iv-t { transform-origin: 50% 0; transform: translateZ(2px); } .iv-t > div { clip-path: polygon(0 0, 100% 0, 50% 50.5%); }
.m-fil.o2 .iv-t { transform: rotateX(165deg); opacity: 0; visibility: hidden; }
.m-fil.o2 .iv-b { transform: rotateX(-165deg); opacity: 0; visibility: hidden; }
.m-fil.o2 .iv-l { transform: rotateY(-165deg); opacity: 0; visibility: hidden; transition-delay: .25s, 1.5s, 2.2s; }
.m-fil.o2 .iv-r { transform: rotateY(165deg); opacity: 0; visibility: hidden; transition-delay: .25s, 1.5s, 2.2s; }

/* Mum muhr: tinch turganda sekin "nafas oladi", bosilganda yonadi va ikkiga bo'linib tushadi */
.m-fil .wax { position: absolute; z-index: 6; left: 50%; top: 50%; width: calc(var(--u) * 66); height: calc(var(--u) * 66); margin: calc(var(--u) * -33) 0 0 calc(var(--u) * -33); pointer-events: none; animation: waxBreath 3.2s ease-in-out infinite; transition: filter .9s; }
.m-fil .wax svg { width: 100%; height: 100%; overflow: visible; }
.wax-h { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(.5, -.2, .6, 1), opacity .8s .3s; }
.wax-h.l { clip-path: polygon(0 0, 51% 0, 47% 22%, 54% 40%, 46% 58%, 53% 76%, 48% 100%, 0 100%); }
.wax-h.r { clip-path: polygon(51% 0, 100% 0, 100% 100%, 48% 100%, 53% 76%, 46% 58%, 54% 40%, 47% 22%); }
@keyframes waxBreath { 50% { transform: scale(1.025); } }
.m-fil.o1 .wax { filter: brightness(1.18) drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 214, 150, .95)); }
.m-fil.o2 .wax { animation: none; }
.m-fil.o2 .wax-h.l { transform: translate(calc(var(--u) * -16), calc(var(--u) * 40)) rotate(-38deg); opacity: 0; }
.m-fil.o2 .wax-h.r { transform: translate(calc(var(--u) * 16), calc(var(--u) * 44)) rotate(34deg); opacity: 0; }
.m-fil .glow { position: absolute; z-index: 5; left: 50%; top: 50%; width: calc(var(--u) * 120); height: calc(var(--u) * 120); margin: calc(var(--u) * -60) 0 0 calc(var(--u) * -60); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 222, 1), rgba(255, 220, 160, .55) 45%, transparent); opacity: 0; transform: scale(.4); transition: opacity .9s, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.m-fil.o1 .glow { opacity: .95; transform: scale(1); }
.m-fil.o2 .glow { opacity: 0; transform: scale(5); transition: opacity 2s .3s, transform 2.4s; }
.m-fil .slides { --st: calc(var(--u) * 78); --sb: calc(var(--u) * 104); --sx: calc(var(--u) * 41); }
/* Ravoq ichi torroq: qo'lyozma ismlar shunga moslab kichikroq */
.m-fil .t-script { font-size: calc(var(--u) * min(27, 180 / var(--len))); }
.m-fil .t-script.sm { font-size: calc(var(--u) * 16); }
.m-fil .t-cap { letter-spacing: .2em; }
.m-fil .t-cap, .m-fil .t-date, .m-fil .t-small, .m-fil .t-big, .m-fil .t-msg { text-shadow: 0 0 calc(var(--u) * 4) rgba(255, 250, 242, .95); }

/* ============ Umumiy 3D konvert (qolgan shablonlar) ============ */
.m-konvert { --sbg: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--bg) 80%, #fff), var(--bg)); --tc: var(--ink); }
.kv { position: absolute; left: calc(var(--u) * 15); top: calc(var(--u) * 150); width: calc(var(--u) * 150); height: calc(var(--u) * 105); perspective: calc(var(--u) * 500);
  transform: rotateX(16deg); transition: transform 1.4s cubic-bezier(.3, .6, .2, 1); }
.o1 .kv { transform: none; }
.kv-env { position: absolute; inset: 0; transition: transform 1.3s cubic-bezier(.5, 0, .5, 1), opacity 1s .2s; }
.kv-envb { z-index: 0; perspective: calc(var(--u) * 500); }
.kv-envf { z-index: 2; }
.kv-back { position: absolute; inset: 0; border-radius: calc(var(--u) * 2); background: color-mix(in srgb, var(--bg) 76%, var(--ink)); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * -10) rgba(0, 0, 0, .45); }
.kv-flap { position: absolute; left: 0; right: 0; top: 0; height: 52%; transform-origin: 50% 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, var(--ink)), color-mix(in srgb, var(--bg) 70%, var(--ink)));
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 1.2s cubic-bezier(.5, 0, .3, 1); }
.kv-front { position: absolute; inset: 0; border-radius: calc(var(--u) * 2); background: linear-gradient(165deg, color-mix(in srgb, var(--bg) 90%, var(--ink)), color-mix(in srgb, var(--bg) 82%, var(--ink)));
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.kv-seal { position: absolute; left: 50%; top: 52%; width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin: calc(var(--u) * -15) 0 0 calc(var(--u) * -15); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .18);
  font-family: var(--script); font-size: calc(var(--u) * 17); color: #fff; transition: transform .7s cubic-bezier(.5, -.4, .5, 1), opacity .5s .15s; }
.kv-in { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: calc(var(--u) * -200); overflow: hidden; }
.kv-card { position: absolute; left: calc(var(--u) * 31); width: calc(var(--u) * 88); top: calc(var(--u) * 270); border-radius: calc(var(--u) * 3); overflow: hidden; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -8) rgba(0, 0, 0, .4);
  transition: transform 1.6s cubic-bezier(.3, .6, .2, 1); }
.o1 .kv-seal { transform: translateY(calc(var(--u) * -20)) scale(1.3); opacity: 0; }
.o1 .kv-flap { transform: rotateX(180deg); }
.o2 .kv-card { transform: translateY(calc(var(--u) * -210)); }
.o3 .kv-in { z-index: 3; overflow: visible; }
.o3 .kv-card { transform: translateY(calc(var(--u) * -126)) scale(1.35); }
.o3 .kv-env { transform: translateY(calc(var(--u) * 190)); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .petal, .spark, .wing, .stage-tap span, .m-atlas .satin, .m-fil .lake, .m-fil .swans, .m-fil .wax, .m-kapalak .kp-seal { animation: none !important; }
}