/* ========================================================================== gecko.css — символ бренда Геометрия живёт в SVG (assets/img/gecko.svg и шаблон в assets/js/gecko.js), здесь только цвет, свечение, размеры и точки вращения для анимации 3-го этапа. ========================================================================== */ @layer base { .gecko { display: block; width: 100%; height: auto; color: var(--lume); filter: var(--glow-gecko); overflow: visible; } .gecko-body { fill: currentColor; } /* Размерные пресеты */ .gecko--xs { width: 24px; } .gecko--sm { width: 40px; } .gecko--md { width: clamp(120px, 14vw, 186px); } /* -------------------------------------------------------------------------- Точки вращения. Внешние группы (.leg-*, .tail) держат исходный transform-атрибут — их трогать нельзя. Анимируются внутренние *__pivot: у лап начало координат уже в суставе (0 0), у хвоста — основание в координатах viewBox. -------------------------------------------------------------------------- */ .gecko__leg-pivot { transform-box: fill-box; transform-origin: 0 50%; transition: transform var(--t-slow); } .gecko__tail-pivot { transform-box: view-box; transform-origin: 150px 252px; transition: transform var(--t-slow); } /* Приглушённый вариант — для фоновых/декоративных вхождений */ .gecko--quiet { color: rgb(var(--lume-rgb) / 0.5); filter: drop-shadow(0 0 14px rgb(var(--lume-rgb) / 0.22)); } } /* /@layer base */ /* ========================================================================== СЦЕНА АНИМАЦИИ (слой stage) #gecko-stage — пустой контейнер на всю высоту окна, первый элемент . На 3-м этапе в него отрисуется бегущий гекон; сейчас он ничего не показывает. Почему без z-index: слои каскада (@layer) решают только споры о значениях свойств, но не порядок покраски. Порядок здесь держится на другом — сцена и контент оба позиционированы, значит рисуются в порядке DOM, а сцена в DOM первая. Поэтому любой контент перекрывает её сам, и назначать карточкам z-index вручную не нужно. ========================================================================== */ @layer stage { #gecko-stage { position: fixed; inset: 0; pointer-events: none; overflow: hidden; } /* Ровно то, что удерживает контент над сценой. Шапка, подвал и .skip-link позиционированы своими правилами, здесь остаётся основной поток. */ main { position: relative; } } /* /@layer stage */