/* Интро-заставка. Логика — js/intro.js. */ .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; /* Фон чуть темнее навы: совпадает с полями видео, поэтому границ кадра не видно. */ background: #050810; cursor: pointer; opacity: 1; transition: opacity 950ms cubic-bezier(0.32, 0.72, 0, 1); } .intro--done { opacity: 0; pointer-events: none; } .intro__video { /* Размер берём от оверлея напрямую (absolute + inset), а не от grid-ячейки: при place-items:center элемент не растягивается, и проценты высоты разрешаются непредсказуемо — кадр съезжал к cover-поведению. */ position: absolute; inset: 0; width: 100vw; height: 100dvh; /* Файл — «кино-кадр» 2560×1080: резкий 1080p по центру, по краям размытое продолжение сцены. Cover заполняет экран целиком БЕЗ видимых полей, а обрезаются только размытые крылья — эмблема не режется никогда. */ object-fit: cover; object-position: 50% 50%; min-width: 100%; min-height: 100%; transform: scale(var(--intro-video-zoom, 1)); transform-origin: 50% 50%; will-change: transform; } /* Портрет и квадрат (телефоны, планшеты вертикально). Кадр 16:9 вписывается по ширине и занимает лишь узкую полосу посередине — эмблема выходит ~30% ширины экрана и теряется. Увеличиваем кадр: боковые поля уходят за край, но эмблема в центре кадра, поэтому обрезка её не задевает. Итог — логотип примерно на 70% ширины экрана при любой ширине устройства (доля постоянна, т.к. в портрете contain всегда вписывает кадр по ширине). */ @media (max-aspect-ratio: 1 / 1) { .intro { overflow: hidden; } } /* Виньетка растворяет границы кадра в фоне — стыков не видно ни на каких пропорциях окна. Лежит над видео, но события мыши пропускает. */ .intro::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at center, transparent 58%, #050810 96%); pointer-events: none; } .intro__hint { position: absolute; z-index: 1; /* поверх виньетки */ bottom: max(env(safe-area-inset-bottom), 1.5rem); left: 50%; translate: -50% 0; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-slate-500); animation: intro-hint 2.4s ease-in-out 1.6s infinite; opacity: 0; } @keyframes intro-hint { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Оверлей показывается только когда скрипт подтвердил, что работает. Оба класса ставит инлайн-скрипт в (App.razor) ДО первой отрисовки: js — иначе без скриптов страница осталась бы за тёмным экраном навсегда, intro-seen — чтобы на повторных заходах оверлей не мигал перед удалением. */ html:not(.js) .intro, html.intro-seen .intro { display: none; } /* Портретные экраны: cover широкого кадра дал бы сильный зум — переходим на contain, ролик ложится широкой полосой по центру, эмблема целиком. */ @media (max-aspect-ratio: 1/1) { .intro__video { width: 100%; height: 100%; object-fit: cover; object-position: center; } } @media (prefers-reduced-motion: reduce) { .intro { display: none; } }