/* ========================================================= UCH O'LCHAM — hajm, chuqurlik va sahna qatlami NIMA UCHUN BU FAYL BOR Saytning ohangi o'zgarmaydi: u hamon hujjat, sud blankasi va tipografik to'r. Bu yerga "yumshoq SaaS" bezaklari (shishasimon karta, rangli dog', pulsli pill) QAYTMAYDI. Qo'shilgani — FAZO: elementlar endi tekis emas, ular kameradan turli uzoqlikda turadi. Perspektiva hujjat metaforasini buzmaydi, aksincha kuchaytiradi — varaqa haqiqatan varaqday egiladi. TARTIB: 11 raqami — 10-hujjat dan keyin, 20-mobil dan oldin. Mobil fayl baribir oxirgi bo'lib ustidan yozadi. TUZOQ (butun loyihada bir xil): clamp/calc ichida + va - atrofida BO'SH JOY shart. 01-tokens.css izohiga qarang. ========================================================= */ /* ========================================================= 1. SAHNA — peshtoq ortidagi WebGL tuvali Tuval peshtoqning ICHIDA, mazmundan pastda turadi. alpha:true bilan chiziladi, ya'ni fon rangini CSS beradi (--tasma-togq) va sahna faqat jez chiziqlarni qo'shadi. Shu sabab tuval mavzuga bog'liq emas: peshtoq har doim to'q. UCH HIMOYA: 1. Skript yuklanmasa — tuval bo'sh, peshtoq oldingidek. 2. WebGL yo'q bo'lsa — .sahna umuman ko'rinmaydi. 3. reduced-motion — sahna ishga tushmaydi (JS'da ham, shu faylning oxirida ham). ========================================================= */ .sahna{ /* fixed — sahifaning ORTIDA turadi va u bilan birga aylanmaydi. Aynan shu narsa sahnani birinchi ekran bezagidan sahifaning fazosiga aylantiradi: tasmalar uning ustidan sirg'alib o'tadi, kamera esa aylantirish ulushiga qarab orqaga suriladi. z-index:0 va mazmun z-index:1 — pastdagi "QATLAMLAR" blokiga qarang. */ position:fixed;inset:0;z-index:0; pointer-events:none; /* QATLAM DARHOL BO'YALADI, TUVAL EMAS. Peshtoq va boshqa oynalarning foni olib tashlangan, ya'ni ularning ortida turadigan yagona narsa — shu qatlam. Agar u tuval bilan birga so'nib tursa, sahifa ochilgan lahzada peshtoq orqasidan sahifaning pergament foni ko'rinib, to'q ekran kutilgan joyda oq yonib ketardi. Shuning uchun navy shu yerda, doimiy. So'nadigan narsa — faqat tuvalning o'zi: yarim chizilgan birinchi kadr ko'rinmasin. */ background:var(--law-navy-950); } .sahna canvas{ display:block;width:100%;height:100%; opacity:0; transition:opacity 1.1s var(--ease); } .sahna--tayyor canvas{opacity:1} /* ========================================================= QATLAMLAR — qaysi tasma qog'oz, qaysi biri oyna Sahna butun ekranni egallaydi va sahifaning ORTIDA turadi. Ko'rinish esa tasmaning FONI hal qiladi: yorug' tasma (pergament/oq/suyak) — foni to'la, ya'ni sahnani butunlay to'sadi. Bu QOG'OZ. to'q tasma / peshtoq / futer — foni olib tashlanadi yoki shaffoflashadi. Bu OYNA. Shu sabab sahifa aylantirilganda odam qog'oz va arxiv orasida navbat bilan o'tadi, kamera esa uzluksiz orqaga suriladi. Ilgari to'q tasmalar shunchaki "boshqa rangdagi bo'lim" edi va yorug' sahifa o'rtasidagi to'q bo'lim tasodifan qolib ketgandek ko'rinardi. Endi ular bir joyning ko'rinib turgan qismi. MAZMUN SAHNA USTIDA TURISHI SHART. .tasma da position:relative bor (02-qobiq.css), lekin z-index yo'q edi — usiz z-index:0 bilan tuval bir xil qatlamda qoladi va DOM tartibi hal qiladi. Aniq yozamiz. ========================================================= */ html.harakat-3d .tasma, html.harakat-3d .peshtoq, html.harakat-3d .futer, html.harakat-3d main{position:relative;z-index:1} /* Peshtoq — TO'LIQ oyna. Foni butunlay olib tashlanadi, navy ohangni pastdagi parda beradi. Bu sahifadagi yagona joy bo'lib, sahna to'liq kuchida ko'rinadi. */ html.harakat-3d .peshtoq{background:transparent} /* To'q tasma va futer — YARIM oyna. Ular ikkinchi darajali, shuning uchun arxiv u yerda faqat sezilib turadi. Fon butunlay olib tashlanmaydi: 01-tokens.css dagi --tasma-togq qiymati o'lchab tanlangan (qorong'i mavzuda qo'shni tasmalardan farqi 1.53) va uni yo'qotish o'sha hisobni buzardi. O'rniga fon shaffoflashadi — tasma hamon o'sha navy, faqat ichida chuqurlik ko'rinadi. */ html.harakat-3d .tasma--togq{ background:color-mix(in srgb, var(--tasma-togq) 84%, transparent); } html.harakat-3d .futer{ background:color-mix(in srgb, var(--law-navy-950) 86%, transparent); } /* color-mix() ni tanimaydigan brauzer uchun — fon o'z holicha, to'la qoladi va sahna o'sha tasmalarda ko'rinmaydi. Sayt buzilmaydi, faqat effekt kamroq bo'ladi. @supports shart: usiz eski brauzerda e'lon tashlanib, .tasma--togq umuman fonsiz qolishi mumkin. */ @supports not (background: color-mix(in srgb, red 50%, transparent)){ html.harakat-3d .tasma--togq{background:var(--tasma-togq)} html.harakat-3d .futer{background:var(--law-navy-950)} } /* PANEL O'Z FONINI OLADI. 03-panel.css da panel ataylab shaffof: u peshtoqdan YUQORIDA, oqim ichida turadi va ortida sahifaning pergament foni bo'ladi. Aynan shuning uchun paneldagi matn TO'Q rangda yozilgan. Sahna qatlami butun ekranni egallaydi, ya'ni u panelning ham ortiga tushadi va o'sha pergament fonni yopib qo'yadi. Natijada to'q matn to'q fon ustida qolib, brend nomi deyarli o'qilmaydigan bo'lgan edi. Yechim: panel fonni ochiq aytadi. Ko'rinishi o'zgarmaydi — pergament qanday bo'lsa shunday qoladi, faqat endi u sahnaga bog'liq emas. Yopishgan holat KEYIN qayta e'lon qilinadi: bu fayl 03-panel.css dan keyin yuklanadi va aks holda blur'li ustki qatlamni ustidan yozib yuborardi. */ html.harakat-3d .panel{background:var(--srf-canvas)} html.harakat-3d .panel.yopishgan{background:var(--srf-overlay)} /* PARDA — matn ustidagi o'qish kafolati. Sahna chapdan o'ngga qarab siyraklashadi: sarlavha turgan chap yarmida parda deyarli quyuq, o'ngda esa chiziqlar ko'rinadi. Bu badiiy tanlov emas, kontrast talabi — sarlavha AA dan past tushmasligi kerak. Ikkinchi qatlam — yumshoq vinyetka: chetlar biroz quyuqroq, markaz ochiq. U tuvalning tekis to'rtburchak qirrasini yo'qotadi va sahna oynadan qaralayotgandek bo'ladi. DIQQAT: parda endi FIXED qatlamda, ya'ni u sahifa bo'ylab birga ketadi. Shuning uchun bu yerda "pastki tasmaga o'tishni yumshatadigan" gorizontal chiziq YO'Q — u peshtoq uchun to'g'ri kelardi-yu, sahifaning o'rtasida ekranning pastini sababsiz qoraytirib turardi. */ .sahna::after{ content:"";position:absolute;inset:0; background: linear-gradient(100deg, rgba(7,15,28,.92) 0%, rgba(7,15,28,.72) 32%, rgba(7,15,28,.30) 62%, rgba(7,15,28,.16) 100%), radial-gradient(120% 100% at 50% 50%, rgba(7,15,28,0) 40%, rgba(7,15,28,.55) 100%); pointer-events:none; } /* PARDA TELEFONDA BOSHQACHA YO'NALADI. Yuqoridagi parda CHAPDAN o'ngga quyuqlashadi, chunki keng ekranda matn chapda, varaqa o'ngda turadi. Telefonda peshtoq bir ustunga aylanadi: matn ham, varaqa ham BUTUN kenglikni egallaydi. Chapdan o'ngga qorayadigan parda u yerda hech kimni himoya qilmaydi — sarlavhaning o'ng yarmi ochiq sahna ustida qolib ketadi. Shuning uchun telefonda parda TEPADAN pastga yo'naladi: sarlavha turgan yuqori qism quyuq, o'rtasi ochiqroq (sahna shu yerda ko'rinadi), pastki qirrasi yana quyuq — keyingi tasmaga o'tish uchun. */ @media (max-width:860px){ .sahna::after{ background:linear-gradient(180deg, rgba(7,15,28,.90) 0%, rgba(7,15,28,.58) 40%, rgba(7,15,28,.62) 72%, rgba(7,15,28,.88) 100%); } } /* ========================================================= 1a. LENIS — silliq aylantirish yoqilganda 02-qobiq.css da `html{scroll-behavior:smooth}` turadi. Lenis ham aylantiradi — ikkalasi bir vaqtda ishlasa sahifa langar havolasida sakraydi va oxirida noto'g'ri joyda to'xtaydi. Shu sabab Lenis muvaffaqiyatli ishga tushganda html ga .lenis-bor sinfi qo'yiladi (07-harakat.js) va tizim aylantirishi o'chiriladi. Lenis ishga tushmasa sinf ham qo'yilmaydi va eski xatti-harakat to'liq saqlanadi. ========================================================= */ html.lenis-bor{scroll-behavior:auto} /* ========================================================= 2. PESHTOQ — kamera va chuqurlik perspective KONTEYNERDA turadi, bolalarda emas: shunda chap ustun va o'ng varaqa BIR kameradan ko'rinadi. Har biriga alohida berilsa ikkalasi ikki xil yo'qolish nuqtasiga qarab egiladi va sahifa "sinadi". perspective-origin o'ngroqda: asosiy hajmli jism — varaqa, kamera unga qaraydi. ========================================================= */ .peshtoq .peshtoq-tor{ perspective:1500px; perspective-origin:64% 42%; } .peshtoq-matn{transform-style:preserve-3d} /* --------------------------------------------------------- VARAQA — qatlamlarga bo'lingan jism Varaqa endi bitta tekis to'rtburchak emas: sarlavha satri, qatorlar va natija ro'yxati bir-birining USTIDA, turli balandlikda turadi. Burilganda ular bir-biridan siljiydi va qog'oz qalinlik oladi. Qiymatlar ataylab kichik (8..24px). Katta olinsa varaqa "portlab" ketadi va hujjat emas, o'yinchoqqa o'xshaydi. --------------------------------------------------------- */ .peshtoq-korgazma{ transform-style:preserve-3d; /* Burchakni JS yozadi (07-harakat.js). CSS o'zi hech narsa qilmaydi — JS bo'lmasa 0deg qolib, varaqa tekis turadi. */ --qiya-x:0deg; --qiya-y:0deg; } .hujjat{ position:relative; transform-style:preserve-3d; transform:rotateX(var(--qiya-x)) rotateY(var(--qiya-y)); /* Soya ikki qavat: yaqin yumshoq + uzoq quyuq. Bitta soya "stiker" bo'lib ko'rinadi, ikkitasi jismga o'xshaydi. */ box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.42); will-change:transform; } /* VARAQA SAHNA USTIDA TURADI, ICHIDA EMAS 04-peshtoq.css da varaqaning foni rgba(7,15,28,.46) — ya'ni yarim shaffof. Tekis fon ustida bu to'g'ri edi: karta peshtoqdan biroz to'qroq bo'lib ajralib turardi. Sahna qo'shilgach bu buzildi: ortidan o'tayotgan varaqalar va giperkub qirralari kartaning ICHIDAN ko'rinib, matn ustida chiziqlar bo'lib yotardi. Karta esa bu ekrandagi eng muhim jism — u ortidagi hamma narsani TO'SISHI kerak. :has() — sahna haqiqatan chizilayotganini bilishning yagona toza yo'li (.sahna--tayyor sinfini JS birinchi kadrdan keyin qo'yadi). Eski brauzer :has() ni tanimasa qoida butunlay tashlanadi va karta o'zining asl .46 foni bilan qoladi — u yerda sahna ham chizilmagan bo'ladi, ya'ni to'sadigan narsa yo'q. TANLAGICH `body` DAN BOSHLANADI, `.peshtoq` DAN EMAS. Sahna peshtoq ichidan chiqarilgach `.peshtoq:has(.sahna--tayyor)` hech qachon mos kelmay qoldi va karta jimgina o'zining yarim shaffof foniga qaytdi — varaqalar uning ichidan ko'rinib turdi. Xato konsolda ko'rinmaydi, faqat ekranda. */ body:has(.sahna--tayyor) .hujjat{ background:rgba(7,15,28,.86); } .hujjat-bosh{transform:translateZ(22px)} .hujjat-qator{transform:translateZ(12px)} .hujjat-qator--natija{transform:translateZ(16px)} .natija-raqam{display:inline-block;transform:translateZ(8px)} /* Chapdagi jez hoshiya — varaqaning "tikilgan qirrasi". U korpusdan oldinga chiqadi, shunda burilganda haqiqiy qalinlik ko'rinadi. DIQQAT: 04-peshtoq.css da .hujjat ga border-left qo'yilgan. Bu element uni ALMASHTIRMAYDI, ustiga qo'shiladi — chunki border tekis qoladi, bu esa oldinga chiqadi. Ikkalasi bir xil rangda, shuning uchun burilmagan holatda farq bilinmaydi. */ .hujjat::before{ content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px; background:var(--law-brass-500); border-radius:2px 0 0 2px; transform:translateZ(24px); } /* ========================================================= 3. BO'LIMLAR — GSAP ochilishi uchun sahna GSAP .jonli elementlarini rotateX bilan ko'taradi. rotateX ishlashi uchun ULARNING OTASIDA perspective bo'lishi shart, aks holda burilish tekis siqilib, "ezilgan" ko'rinadi. Perspective bo'lim darajasida beriladi, sahifa darajasida emas: bitta uzoq yo'qolish nuqtasi butun sahifaga tarqalsa, pastdagi bo'limlar haddan tashqari kuchli buriladi. .harakat-3d sinfini 07-harakat.js GSAP haqiqatan yuklangach qo'yadi. GSAP yuklanmasa bu qoidalarning BIRORTASI qo'llanmaydi va sayt eski, tekis holida ishlayveradi. ========================================================= */ html.harakat-3d .tasma{perspective:1400px;perspective-origin:50% 42%} html.harakat-3d .tasma .ichki > *{transform-style:preserve-3d} /* ========================================================= 4. KARTALAR VA BANDLAR — kursor ostida ko'tariladi Bu "hover effekt" uchun emas, IERARXIYA uchun: qo'l turgan element boshqalardan oldinga chiqadi va qaysi qator faol ekani ikkilanishsiz ko'rinadi. Faqat nozik ko'rsatkichli qurilmada. Sensorli ekranda hover bosgandan keyin "yopishib" qoladi. ========================================================= */ @media (hover:hover) and (pointer:fine){ html.harakat-3d .holatlar{perspective:1000px} html.harakat-3d .holat-guruh{ transform-style:preserve-3d; transition:transform .45s var(--ease), border-color .45s var(--ease); } html.harakat-3d .holat-guruh:hover{ transform:translateZ(22px); border-top-color:var(--accent-hover); } html.harakat-3d .imk-royxat{perspective:900px} html.harakat-3d .imk-band{ transform-style:preserve-3d; transition:transform .45s var(--ease), box-shadow .45s var(--ease); } html.harakat-3d .imk-band:hover{ transform:translateZ(26px) rotateX(2.5deg); box-shadow:0 14px 34px rgba(11,23,41,.16); } html.harakat-3d .qadam:hover{transform:translateZ(30px)} } /* Faol qadam kursorsiz ham oldinga chiqadi: namoyish tsikli (05-namoyish.js) "faol" sinfini navbat bilan ko'chiradi, ya'ni chuqurlik ham navbat bilan ko'chadi. Qadamlar ketma-ketligi shu bilan ko'rinadigan bo'ladi. */ html.harakat-3d .qadamlar{perspective:1200px} html.harakat-3d .qadam{ transform-style:preserve-3d; transition:transform .6s var(--ease); } html.harakat-3d .qadam.faol{transform:translateZ(34px)} html.harakat-3d .qadam.otdi{transform:translateZ(6px)} /* ========================================================= 5. HARAKATNI KAMAYTIRISH Bu blok 08-jonlanish.css dagi qoidani TO'LDIRADI: u animatsiyalarni to'xtatadi, bu esa 3D siljishlarni nolga qaytaradi. Ikkalasi ham kerak — to'xtatilgan transform o'z holicha qotib qolishi mumkin. ========================================================= */ @media (prefers-reduced-motion:reduce){ .sahna{display:none} .hujjat,.hujjat-bosh,.hujjat-qator,.hujjat-qator--natija, .natija-raqam{transform:none} .hujjat::before{transform:none} .peshtoq .peshtoq-tor{perspective:none} html.harakat-3d .tasma{perspective:none} html.harakat-3d .qadam, html.harakat-3d .qadam.faol, html.harakat-3d .qadam.otdi{transform:none} html.harakat-3d .imk-band:hover{transform:none} }