/* ===== ДЭВСГЭР — НЭГ бүтэн зураг, marquee стандартаар хажуу тийш гүйнэ ===== 3D мэдрэмж: хананд perspective өгч, дээд ирмэгийг нь бага зэрэг хазайлгаад scale-аар томруулна → хоёр зах нь ойрхон (том), төв нь холдсон мэт харагдана. Тэгш хэмтэй "хонхойлт"-ыг нэг хавтгайд CSS-ээр жинхэнэ геометрээр гаргах боломжгүй тул томруулалт + төв рүүгээ гүнзгийрэх бүрхүүлээр сэтгэгдлийг өгнө. */ #block-welcome .bg-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Дэвсгэрийн шинэчлэлт гадагшаа тархахгүй */ contain: paint; perspective: 1100px; perspective-origin: 50% 45%; } #block-welcome .wall-row { position: absolute; inset: 0; overflow: hidden; /* 2 зах руугаа гарч томроно */ transform: rotateX(7deg) scale(1.22); transform-origin: 50% 50%; } #block-welcome .wall-track { display: flex; width: max-content; height: 100%; animation: wall-scroll var(--dur, 90s) linear infinite; } #block-welcome .wall-track img { height: 100%; width: auto; max-width: none; object-fit: cover; flex-shrink: 0; } @keyframes wall-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { #block-welcome .wall-track { animation: none; } } /* ===== ДЭВСГЭР ВИДЕО (2026-09-21) ===== Эх сурвалж: УЕПГ-ын Олон нийттэй харилцах албаны «PROTECTED NATURE IS OUR FUTURE» бичлэгийн 106–126 сек — текст/тамга ОРООГҮЙ, дүрэмт хувцастай хэсэг. 20 сек · 1280×720 · 30fps · дуугүй · faststart (`/pro/video/welcome-bg.mp4`). ⚠️ Дээрх зургийн ханан (`.wall-*`) нь ХЭРЭГЛЭГДЭХГҮЙ боловч буцаах тохиолдолд хэрэг болох тул CSS/JS-ийг нь устгалгүй үлдээв. */ #block-welcome .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* ⚠️ ГҮЙЦЭТГЭЛ: бичлэг дээр `filter:` БҮҮ тавь — бүтэн дэлгэцийн шүүлтүүр кадр бүрт (30/сек) дахин тооцогдож хуудсыг гацаадаг. Өнгө намжаалтыг дээрх `.bg-overlay` уусмал аль хэдийн хийж байгаа. `translateZ(0)` нь бичлэгийг ӨӨРИЙН давхаргад гаргаж, кадр солигдох бүрд дээрх контентыг дахин зуруулахаас сэргийлнэ. */ transform: translateZ(0); will-change: transform; backface-visibility: hidden; } /* Background overlay: brand deep blue, densest in the centre so the text reads over the video */ #block-welcome .bg-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 62% 72% at center, rgba(var(--pro-brand-deep-rgb), .97) 0%, rgba(var(--pro-brand-deep-rgb), .90) 52%, rgba(var(--pro-brand-deep-rgb), .80) 100%), /* Дээд/доод ирмэг рүү гүнзгийрэх винет — брэнд, доод зурвас хоёулаа тодорно */ linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .22) 38%, rgba(0, 0, 0, .55) 100%); } /* ===== ХУРДАН ХОЛБООСЫН КАРТ ===== */ #block-welcome .feature-item { background-color: rgba(255, 255, 255, .08); border: var(--bs-border-width) solid rgba(255, 255, 255, .14); backdrop-filter: blur(2px); transition: background-color .4s ease-in-out, border-color .4s ease-in-out, transform .4s ease-in-out; } /* ===== ХҮРЭЭГ ТОЙРОХ АЛТЛАГ ТУЯА ===== Картын ирмэгээр алтан гэрэл эргэлдэнэ (цэнхэр хүрээ өөрөө бараг мэдэгддэггүй). Бүтэц: `::before` нь картыг бүтэн хучих ба `mask-composite: exclude`-оор ЗӨВХӨН 1px-ийн ЦАГИРАГ үлдэнэ; дотор нь conic-gradient-ийн өнцөг эргэлдэнэ. ⚠️ Өнцгийг анимэйшнлэхэд `@property` ЗААВАЛ (эс бөгөөс браузер градиентийг интерполяцлахгүй). Дэмжихгүй браузерт зүгээр л ХӨДӨЛГӨӨНГҮЙ алтлаг цагираг үлдэнэ — эвдрэхгүй. Хөдөлгөөн нь зөвхөн ганц элемент дээр тул хуудасны recalc үүсгэхгүй (`inherits: false`). */ @property --pro-ring { syntax: ''; initial-value: 0deg; inherits: false; } #block-welcome .feature-item::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; /* = цагирагийн зузаан */ /* ⭐ ХАРВАСАН ОД: урт нимгэн ЦЭНХЭР сүүл → богино АЛТАН цөм → цагаан оргил. Цөм нь сүүлээсээ ХАМААГҮЙ богино (≈20°) тул «харвасан» мэдрэмж төрнө. */ background-image: conic-gradient(from var(--pro-ring), rgba(var(--bs-secondary-rgb), 0) 0deg, rgba(var(--bs-secondary-rgb), 0) 250deg, rgba(var(--bs-secondary-rgb), .28) 292deg, rgba(var(--bs-secondary-rgb), .80) 332deg, rgba(var(--bs-gold-rgb), 1) 350deg, rgba(255, 255, 255, 1) 357deg, rgba(var(--bs-gold-rgb), 0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; /* Туяа — алтлаг гэрлийн бүрхүүл. ⚠️ ГҮЙЦЭТГЭЛ: өмнө нь 3 давхар `drop-shadow` байсан — 6 карт × 60fps дээр хуудсыг мэдэгдэхүйц гацаадаг байв (ялангуяа дэвсгэр бичлэгтэй хамт). Нэг давхар болгоход харагдац бараг ижил, зардал 3 дахин бага. */ filter: drop-shadow(0 0 6px rgba(var(--bs-gold-rgb), .85)); opacity: 0; transition: opacity .4s ease-in-out; } /* Ring glow only on hover / keyboard focus */ #block-welcome .feature-item:hover::before, #block-welcome .feature-item:focus-within::before { opacity: 1; animation: pro-ring-spin 4s linear infinite; } @keyframes pro-ring-spin { to { --pro-ring: 360deg; } } @media (prefers-reduced-motion: reduce) { #block-welcome .feature-item:hover::before, #block-welcome .feature-item:focus-within::before { animation: none; } } /* Hover — карт ЦАГААН болно (хүрээ хэвээр, шар БИШ). Цагаан дэвсгэр дээр текст/icon уншигдахын тулд брэнд гүн хөх болгоно. */ #block-welcome .feature-item:hover { background-color: #fff; /* Өргөгдөх (lift) биш — ТОМРОХ (scale) */ transform: scale(1.04); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28); } #block-welcome .feature-item .item-title a { color: #fff; } #block-welcome .feature-item:hover .item-title a { color: rgb(var(--pro-brand-deep-rgb)); } /* Flaticon outline PNG, already coloured brand deep blue (#254a9f): white on the dark card, its own colour on the white hover card */ #block-welcome .feature-item .item-image img { filter: brightness(0) invert(1); transition: filter .4s ease-in-out; } #block-welcome .feature-item:hover .item-image img { filter: none; } /* Icon-ыг ороосон anchor нь текстгүй ч underline зурдаг (icon доор жижиг зураас) */ #block-welcome .feature-item .item-media { text-decoration: none; } @media (prefers-reduced-motion: reduce) { #block-welcome .feature-item { transition: none; } #block-welcome .feature-item:hover { transform: none; } } /* ===== СОШИАЛ (доод зурвас) — цагаан, hover дээр алтлаг ===== */ #block-welcome .social-link, #block-welcome .social-link > i { color: #fff; transition: color .4s ease-in-out; } #block-welcome .social-link:hover, #block-welcome .social-link:hover > i { color: var(--bs-gold); } #block-welcome .intro-sub { letter-spacing: .1rem; } /* ===== БРЭНДИЙН НЭР — толгойн бандтай НЭГ хэлээр (serif, tracking) ===== */ #block-welcome .intro-title > h1 { font-family: var(--pro-font-serif); font-size: clamp(1.375rem, 1.6vw + .9rem, 2.125rem); letter-spacing: .04em; line-height: 1.15; } /* Нэрийн доорх богино алтлаг зураас — брэндийн акцент */ #block-welcome .intro-title::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: .875rem auto 0; background-image: linear-gradient(90deg, rgba(var(--bs-gold-rgb), 0) 0%, rgb(var(--bs-gold-rgb)) 50%, rgba(var(--bs-gold-rgb), 0) 100%); } /* ===== ХЭЛ СОЛИХ — баруун дээд буланд (толгойн бандын хэвээр) ===== */ #block-welcome .intro-lang { top: 1.25rem; right: 1.25rem; } @media (min-width: 768px) { #block-welcome .intro-lang { top: 2rem; right: 2rem; } } /* ===== ОРЖ ИРЭХ АНИМЭЙШН ===== Дараалал: ① сүлд+нэр голдоо гарч ирнэ → ② дээшээ байрандаа очно → ③ 6 карт ээлжлэн гарна → ④ доод зурвас. ⚠️ Бүх дүрэм `.intro-ready` дор — JS ажиллаагүй/унтарсан бол контент энгийн байдлаараа ХАРАГДАНА (opacity 0-д гацахгүй). */ /* ① Сүлд — удаан, зөөлөн ZOOM IN (фокус тохирч буй мэт blur → тод). Easing нь expo-out: эхэндээ хурдан, төгсгөлдөө тансаг зөөлөн зогсоно. */ #block-welcome.intro-ready .intro-brand > span { animation: intro-emblem 2s cubic-bezier(.16, 1, .3, 1) both; } /* ② Нэр — сүлдний дараа, үсгийн зай задарснаас хураагдана (тансаг типографийн орц) */ #block-welcome.intro-ready .intro-title > h1 { animation: intro-title 1.4s cubic-bezier(.16, 1, .3, 1) .9s both; } #block-welcome.intro-ready .intro-sub { animation: intro-sub 1.4s cubic-bezier(.16, 1, .3, 1) 1.15s both; } /* ③ Брэнд бүхэлдээ голоос БАЙРАНДАА дээшилнэ (--intro-shift-ийг JS хэмжинэ) */ #block-welcome.intro-ready .intro-brand { animation: intro-lift 1.3s cubic-bezier(.16, 1, .3, 1) 1.75s both; } /* ④ 6 карт — ээлжлэн, ⑤ доод зурвас */ #block-welcome.intro-ready .intro-items > .col-item { animation: intro-item-in .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(2.5s + var(--i, 0) * .12s); } /* ⑤ «Танилцуулга бичлэг» — 6 картын ДАРАА (2.5s + 6×.12s ≈ 3.2s). Анимэйшнд ороогүй байхад бусад нь нуугдмал байх хооронд түрүүлж харагддаг байв. */ #block-welcome.intro-ready .intro-cta { animation: intro-item-in .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: 3.25s; } /* ⑥ доод зурвас */ #block-welcome.intro-ready .intro-foot { animation: intro-item-in .9s ease-out both; animation-delay: 3.55s; } @keyframes intro-emblem { from { opacity: 0; transform: scale(.72); filter: blur(12px); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes intro-title { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: translateY(0); } } @keyframes intro-sub { from { opacity: 0; letter-spacing: .5rem; } to { opacity: 1; letter-spacing: .1rem; } } @keyframes intro-lift { from { transform: translateY(var(--intro-shift, 6rem)); } to { transform: translateY(0); } } @keyframes intro-item-in { from { opacity: 0; transform: translateY(1.5rem) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { #block-welcome.intro-ready .intro-brand, #block-welcome.intro-ready .intro-brand > span, #block-welcome.intro-ready .intro-title > h1, #block-welcome.intro-ready .intro-sub, #block-welcome.intro-ready .intro-items > .col-item, #block-welcome.intro-ready .intro-cta, #block-welcome.intro-ready .intro-foot { animation: none; } } /* ===== Traditional Mongolian script (section lang="mn-Mong"): vertical text, row layout. Elements without script (the phone number) carry lang="zxx" and stay horizontal. ===== */ #block-welcome[lang="mn-Mong"] .intro-title > h1, #block-welcome[lang="mn-Mong"] .item-title:not([lang="zxx"]), #block-welcome[lang="mn-Mong"] .intro-cta .btn > span { font-family: "Noto Sans Mongolian", "Mongolian Baiti", sans-serif; writing-mode: vertical-lr; text-transform: none; letter-spacing: normal; /* Physical margins: in vertical mode margin-inline is top/bottom */ width: fit-content; margin-left: auto; margin-right: auto; text-align: start; } #block-welcome[lang="mn-Mong"] .intro-title > h1 { align-self: center; font-size: clamp(1.125rem, .8vw + .85rem, 1.5rem); line-height: 1.6; } #block-welcome[lang="mn-Mong"] .item-title { height: 9rem; font-size: 1rem; line-height: 1.5; } #block-welcome[lang="mn-Mong"] .intro-cta .btn { flex-direction: column; align-items: center; padding-block: 1rem; } /* Desktop: brand left, cards centre, button right */ @media (min-width: 992px) { #block-welcome[lang="mn-Mong"] .wrapper { flex-direction: row !important; justify-content: center; } #block-welcome[lang="mn-Mong"] .intro-items { flex: 0 1 54rem; width: auto; } }