/* ============================================
silico.ru — главная страница (OpenCart 3 / Prostore)
----------------------------------------------------
Подключается через .ocmod на route=common/home
(см. theme/home.ocmod.xml).
Палитра: тёплая бумага × светло-синий × терракота.
Акцент --accent привязан к --theme-primary-color из
Prostore (выбирается в админке темы). Fallback #c4502d.
Type: Newsreader (serif display) + Manrope (sans)
+ JetBrains Mono (caption / labels).
============================================ */
/* Шрифты с Google CDN. Для prod-деплоя — заменить на локальные .woff2.
Caveat — рукописный кириллический шрифт, используется в .about-title
(описание компании на главной — даёт "хендкрафтовый" тон бренду). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;500;600;700&display=swap');
/* ============================================================
ВАЖНО: все стили этого файла скоупятся через wrapper-класс
.silico-home. Каждый HTML Content на главной обёрнут в
Хиты продаж
...
Та же структура у prostore_product_tabs.twig (вкладки) — на каждый таб
идёт свой .products-featured__title.
!important — у темы Prostore собственные правила на .h2 и
.products-featured__title с длинными селекторами; без важности
проигрываем по специфичности.
--- */
/* Стиль повторяет .about-title em ("большие тиражи"):
- семейство Newsreader (var(--f-display) внутри .silico-home)
- font-style: italic
- терракотовый цвет (var(--accent) внутри .silico-home)
- font-weight: 500
- letter-spacing: -1px, line-height: 1 — как у about-title в целом
ВАЖНО: заголовки товарных модулей рендерятся ВНЕ
,
поэтому CSS-переменные --f-display / --accent / --ink, объявленные на
.silico-home, до них НЕ доходят. Здесь нужны литералы (или Prostore-
переменная --theme-primary-color, которая доступна глобально).
Prostore использует РАЗНЫЕ классы заголовка в зависимости от позиции:
.products-featured__title — в content_top/content_bottom (main area)
template/extension/module/featured.twig, latest.twig, bestseller.twig,
special.twig, featured_product.twig, prostore_product_tabs.twig
.products-aside__title — в column_left/column_right (sidebar)
featured_column.twig, latest_column.twig, bestseller_column.twig,
special_column.twig, prostore_product_tabs_column.twig
.set__title — prostore_set.twig (Простор.Комплекты)
Цепляем всех. */
.products-featured__title,
.products-aside__title,
.set__title,
span.h2.products-featured__title,
span.h2.products-aside__title,
span.h2.set__title {
font-family: "Newsreader", "Times New Roman", Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: clamp(36px, 4vw, 56px) !important;
line-height: 1 !important;
letter-spacing: -1px !important;
color: var(--theme-primary-color, #c4502d) !important;
margin: 0 0 28px !important;
text-transform: none !important;
display: block !important;
}
/* prostore_product_tabs view='tab_grid' / 'tab_slide':
когда поле Title модуля пустое, заголовка .products-featured__title нет —
роль "заголовка" играет одна или несколько кнопок-вкладок в
.products-featured__filter. Реальный DOM на demo:
Стилизуем их под ту же типографику, что и .products-featured__title,
но оставляем cursor: pointer — это всё ещё интерактивные табы.
Если в модуле > 1 таба, неактивные приглушаются opacity. */
.products-featured__filter [data-tabs-btn],
.products-featured__filter button.ui-btn {
font-family: "Newsreader", "Times New Roman", Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: clamp(36px, 4vw, 56px) !important;
line-height: 1 !important;
letter-spacing: -1px !important;
color: var(--theme-primary-color, #c4502d) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 24px 28px 0 !important;
text-transform: none !important;
cursor: pointer;
}
.products-featured__filter [data-tabs-btn]:not(.is-active),
.products-featured__filter button.ui-btn:not(.is-active) {
opacity: 0.45;
}
.products-featured__filter [data-tabs-btn]:hover,
.products-featured__filter button.ui-btn:hover {
opacity: 1;
}
/* ============================================================
КРИТИЧНО: Bootstrap 3.3.5 (входит в Prostore) добавляет clearfix-
псевдоэлементы ::before/::after с display: table к .container,
.container-fluid, .row, .clearfix, .form-horizontal .form-group,
.btn-toolbar, .nav, .navbar, .pager, .panel-body, .modal-header,
.modal-footer и т.п. Когда родитель получает display: grid/flex
(как .container.about-inner, .container.hero-inner, .container.cta-
strip-inner) — эти псевдоэлементы становятся grid/flex-item'ами и
ломают раскладку (текст уезжает в "не ту" колонку, картинка падает
на следующий ряд, flex-контент сжимается к центру). Убираем их в
пределах нашего scope для всех потенциально-проблемных классов.
============================================================ */
.silico-home .container::before,
.silico-home .container::after,
.silico-home .container-fluid::before,
.silico-home .container-fluid::after,
.silico-home .row::before,
.silico-home .row::after,
.silico-home .clearfix::before,
.silico-home .clearfix::after {
display: none !important;
content: none !important;
}
/* ============================================================
SILICO PRODUCTION — 4 spotlight-карточки производственного цикла
(claude design, артефакт в blocks/process_animation/)
============================================================
Где: внутри секции .process > .container, под .section-head.
Что: 4 анимированных карточки в ряд — эскиз → 3D-модель →
мастер-форма (ЧПУ) → тираж (литьё + упаковка).
ГЛАВНЫЙ ПРИЁМ — SPOTLIGHT (последовательная подсветка):
В любой момент времени анимация играет только в ОДНОЙ карточке.
Остальные 3 показывают свой статичный финальный кадр приглушённо
(opacity 0.55, рамка --line, без поднятия).
Активная карточка: тонкая терракотовая рамка, translateY(-4px),
крупный акцентный номер. Подсветка идёт по кругу 01→02→03→04
за 32 секунды (4 окна по 8с: ~6.7с активная + ~1.3с переход).
СИНХРОНИЗАЦИЯ — через CSS animation-delay (без JS).
Каждая карточка получает одинаковую keyframe-анимацию состояния
длительностью 32с (--cycle), но разные ОТРИЦАТЕЛЬНЫЕ задержки --d:
card--1: --d: 0s (стартует прямо сейчас)
card--2: --d: -24s (как будто уже играет с -24с → начнётся через 8с)
card--3: --d: -16s (начнётся через 16с)
card--4: --d: -8s (начнётся через 24с)
Та же --d наследуется во все внутренние сцены через правило
.silico-proc__scene [class]{ animation-delay: var(--d) ... },
чтобы внутренняя анимация сцены стартовала с нуля ровно в момент
её активной фазы.
ПРЕФИКСЫ:
- .silico-proc — корневой контейнер сетки карточек
- .silico-proc__* — BEM-элементы карточки (card/head/num/rule/scene/title/desc/perk)
- .sp-sk-* — внутренние классы сцены 01 (sketch)
- .sp-d3-* — внутренние классы сцены 02 (3D model)
- .sp-cnc-* — внутренние классы сцены 03 (CNC milling)
- .sp-tr-* — внутренние классы сцены 04 (tirage / упаковка)
- @keyframes silico-proc-* — все ключевые кадры (чтобы не конфликтовать
с silico-press-* из блока about и другими)
Скоуп .silico-home .silico-proc — изоляция от темы Prostore и других
модулей (иначе .card/.scene/.title/.grid гарантированно сломаются).
============================================================ */
.silico-home .silico-proc{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:clamp(14px,1.6vw,22px);
/* собственные токены, копия из артефакта; --accent уже определён в общей теме */
--sp-paper:#faf6f1;
--sp-line:#e6dcd4;
--sp-fg:#2a1f1a;
--sp-fg-soft:#6b5a50;
--sp-accent:#c4502d;
--sp-accent-soft:rgba(196,80,45,.12);
--sp-silicone:#c4502d;
--sp-ink-soft:#b8a89a;
--sp-metal:#46443f;
--sp-cardboard:#d4b896;
--sp-cycle:32s; /* общий цикл подсветки 4 карточек */
}
/* адаптив: на средних экранах — 2 колонки 2×2, на узких — стек */
@media (max-width:1099px){
.silico-home .silico-proc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
.silico-home .silico-proc{grid-template-columns:1fr}
}
/* ---------- карточка: контейнер с базовым "приглушённым" состоянием ---------- */
.silico-home .silico-proc__card{
position:relative;
background:var(--sp-paper);
border:1px solid var(--sp-line);
border-radius:14px;
padding:clamp(16px,1.5vw,22px);
display:flex;flex-direction:column;gap:14px;
/* базовое состояние = приглушённое; spotlight выводит карточку из него */
opacity:.55;transform:translateY(0);
will-change:opacity,transform;
animation:silico-proc-card-state var(--sp-cycle) linear var(--d) infinite;
}
/* разные --d для синхронизации очереди подсветки */
.silico-home .silico-proc__card--1{--d:0s}
.silico-home .silico-proc__card--2{--d:-24s}
.silico-home .silico-proc__card--3{--d:-16s}
.silico-home .silico-proc__card--4{--d:-8s}
/* шапка карточки: номер + тонкая черта вправо */
.silico-home .silico-proc__head{
display:flex;align-items:center;gap:12px;
}
.silico-home .silico-proc__num{
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:1.7rem;font-weight:700;
color:var(--sp-fg-soft);line-height:1;opacity:.6;
transform-origin:left center;
animation:silico-proc-num-state var(--sp-cycle) linear var(--d) infinite;
}
.silico-home .silico-proc__rule{flex:1;height:1px;background:var(--sp-line)}
/* квадратная сцена-холст с тонкой рамкой */
.silico-home .silico-proc__scene{
position:relative;width:100%;aspect-ratio:1/1;
background:#ffffff;
border-radius:10px;overflow:hidden;
border:1px solid var(--sp-line);
}
.silico-home .silico-proc__scene svg{display:block;width:100%;height:100%}
/* заголовок шага (serif) */
.silico-home .silico-proc__title{
font-family:ui-serif,Georgia,"Times New Roman",serif;
font-weight:500;
font-size:clamp(1.25rem,1.6vw,1.5rem);
line-height:1.15;letter-spacing:-.01em;
color:var(--sp-fg);margin:0;
}
/* короткое описание (system-ui) */
.silico-home .silico-proc__desc{
font-size:.875rem;line-height:1.5;color:var(--sp-fg-soft);
text-wrap:pretty;margin:0;
}
/* перк-плашка ✓ внизу карточки (mono, фон accent-soft) */
.silico-home .silico-proc__perk{
align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:.7rem;letter-spacing:.02em;
color:var(--sp-accent);background:var(--sp-accent-soft);
padding:.45em .7em;border-radius:999px;
margin-top:auto; /* прижимаем к низу карточки */
}
.silico-home .silico-proc__perk::before{content:"✓";font-weight:700}
/* ================= SPOTLIGHT keyframes =================
Окно активности = 0 ... 20.83% цикла (это ~6.7с из 32с).
С 25% до 95.83% — карточка приглушена.
В 100% — снова активна (для бесшовности и стыка со следующим циклом). */
@keyframes silico-proc-card-state{
0% {opacity:1;border-color:var(--sp-accent);transform:translateY(-4px)}
20.83% {opacity:1;border-color:var(--sp-accent);transform:translateY(-4px)}
25% {opacity:.55;border-color:var(--sp-line);transform:translateY(0)}
95.83% {opacity:.55;border-color:var(--sp-line);transform:translateY(0)}
100% {opacity:1;border-color:var(--sp-accent);transform:translateY(-4px)}
}
@keyframes silico-proc-num-state{
0%,20.83% {opacity:1;color:var(--sp-accent);transform:scale(1.1)}
25%,95.83% {opacity:.6;color:var(--sp-fg-soft);transform:scale(1)}
100% {opacity:1;color:var(--sp-accent);transform:scale(1.1)}
}
/* ================= ОБЩИЙ ПРИНЦИП ВНУТРЕННИХ СЦЕН =================
Базовый стиль элемента сцены = ФИНАЛЬНЫЙ кадр (то, что видно в покое).
Keyframe 0% = пустой/начальный кадр, движение завершается к 20.83% (~6.7с)
и держится до конца цикла. Это позволяет приглушённым карточкам показывать
уже завершённую сцену (что должен делать "статичный финальный кадр").
Длительность всех внутренних анимаций = var(--sp-cycle) c той же var(--d). */
.silico-home .silico-proc__scene [class]{
animation-duration:var(--sp-cycle);
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-delay:var(--d);
}
/* ---------- СЦЕНА 01 · ЭСКИЗ ---------- */
.silico-home .silico-proc .sp-sk-grid{stroke:var(--sp-line);stroke-width:.5}
.silico-home .silico-proc .sp-sk-line{
fill:none;stroke:var(--sp-fg-soft);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:100;stroke-dashoffset:0;
animation-name:silico-proc-sk-draw;
}
@keyframes silico-proc-sk-draw{
0% {stroke-dashoffset:100}
12.5% {stroke-dashoffset:0}
100% {stroke-dashoffset:0}
}
.silico-home .silico-proc .sp-sk-dim{opacity:1;animation-name:silico-proc-sk-dim}
@keyframes silico-proc-sk-dim{
0%,12.5%{opacity:0}
16.67% {opacity:1}
100% {opacity:1}
}
.silico-home .silico-proc .sp-sk-dim line{stroke:var(--sp-ink-soft);stroke-width:.8}
.silico-home .silico-proc .sp-sk-dim text{
fill:var(--sp-fg-soft);font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:5.5px;letter-spacing:.04em;
}
.silico-home .silico-proc .sp-sk-sign{opacity:1;animation-name:silico-proc-sk-sign}
@keyframes silico-proc-sk-sign{
0%,16.67%{opacity:0}
20.83% {opacity:1}
100% {opacity:1}
}
.silico-home .silico-proc .sp-sk-sign text{
fill:var(--sp-fg-soft);font-family:ui-serif,Georgia,serif;
font-style:italic;font-size:6px;
}
/* ---------- СЦЕНА 02 · 3D-МОДЕЛЬ ---------- */
.silico-home .silico-proc .sp-d3-wrap{position:absolute;inset:0;perspective:300px}
/* svg внутри .sp-d3-wrap — без класса, анимация навешивается напрямую */
.silico-home .silico-proc .sp-d3-wrap svg{
transform:rotateY(14deg);
transform-style:preserve-3d;
animation:silico-proc-d3-spin var(--sp-cycle) linear var(--d) infinite;
}
@keyframes silico-proc-d3-spin{
0%,12.5%{transform:rotateY(14deg)}
15.5% {transform:rotateY(34deg)}
18.5% {transform:rotateY(-6deg)}
20.83% {transform:rotateY(14deg)}
100% {transform:rotateY(14deg)}
}
/* wireframe: каждая линия каркаса вычерчивается отдельно через stroke-dashoffset.
Используем универсальный селектор * — анимируются все вложенные path/ellipse. */
.silico-home .silico-proc .sp-d3-wire *{
stroke-dasharray:100;stroke-dashoffset:0;
animation-name:silico-proc-d3-wire;
animation-duration:var(--sp-cycle);
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-delay:var(--d);
}
.silico-home .silico-proc .sp-d3-wire{
fill:none;stroke:var(--sp-fg-soft);stroke-width:1;stroke-linejoin:round;
}
@keyframes silico-proc-d3-wire{
0% {stroke-dashoffset:100}
6.25% {stroke-dashoffset:0}
100% {stroke-dashoffset:0}
}
.silico-home .silico-proc .sp-d3-dot{fill:var(--sp-fg-soft)}
/* объёмная заливка появляется после wireframe */
.silico-home .silico-proc .sp-d3-solid{
fill:rgba(196,80,45,.25);stroke:var(--sp-accent);stroke-width:1;
opacity:1;animation-name:silico-proc-d3-fill;
}
@keyframes silico-proc-d3-fill{
0%,6.25%{opacity:0}
12.5% {opacity:1}
100% {opacity:1}
}
.silico-home .silico-proc .sp-d3-lbl{opacity:1;animation-name:silico-proc-d3-lbl}
@keyframes silico-proc-d3-lbl{
0%,12.5%{opacity:0}
16% {opacity:1}
100% {opacity:1}
}
.silico-home .silico-proc .sp-d3-lbl text{
fill:var(--sp-fg-soft);font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:5px;letter-spacing:.03em;
}
.silico-home .silico-proc .sp-d3-lbl line{stroke:var(--sp-ink-soft);stroke-width:.6}
/* ---------- СЦЕНА 03 · МАСТЕР-ФОРМА (ЧПУ) ---------- */
/* шпиндель: опускается, ходит туда-сюда 3-4 раза, вдавливается в конце, поднимается */
.silico-home .silico-proc .sp-cnc-spindle{
transform:translate(0px,-34px);
animation-name:silico-proc-cnc-spindle;
transform-box:fill-box;
}
@keyframes silico-proc-cnc-spindle{
0% {transform:translate(0px,-34px)}
4.17% {transform:translate(-22px,12px)} /* подъехал к левому краю болванки */
6% {transform:translate(-22px,12px)}
8.5% {transform:translate(22px,12px)} /* проход вправо */
11% {transform:translate(-18px,12px)} /* возврат влево */
13.5% {transform:translate(18px,12px)}
16% {transform:translate(0px,12px)}
17.3% {transform:translate(0px,17px)} /* пресс давит вниз — финальный жест */
18% {transform:translate(0px,12px)}
18.8% {transform:translate(0px,-34px)} /* поднялся обратно вверх */
100% {transform:translate(0px,-34px)}
}
/* тонкая струйка СОЖ из-под фрезы — пульсирующая */
.silico-home .silico-proc .sp-cnc-pour{opacity:0;animation-name:silico-proc-cnc-pour}
@keyframes silico-proc-cnc-pour{
0%,5%{opacity:0}6%{opacity:.6}9%{opacity:.3}10%{opacity:.65}
13%{opacity:.3}14%{opacity:.6}16%{opacity:.35}17%{opacity:0}100%{opacity:0}
}
/* шарик стружки/охлаждения собирается у основания и расплющивается */
.silico-home .silico-proc .sp-cnc-ball{
transform:scale(0);transform-box:fill-box;transform-origin:center bottom;
animation-name:silico-proc-cnc-ball;
}
@keyframes silico-proc-cnc-ball{
0%,9% {transform:scale(0)}
15% {transform:scale(1)}
17% {transform:scale(1.1)}
18.4% {transform:scale(1)}
19.5% {transform:scale(0)}
100% {transform:scale(0)}
}
/* вращение фрезы — быстрый scaleX-флаттер (имитация вращения сбоку) */
.silico-home .silico-proc .sp-cnc-bit{transform-box:fill-box;transform-origin:center}
.silico-home .silico-proc .sp-cnc-bit{
animation:silico-proc-cnc-bit .16s linear 0s infinite;
}
@keyframes silico-proc-cnc-bit{
0%,100%{transform:scaleX(1)}
50% {transform:scaleX(.42)}
}
/* крышка-алюминий: scaleX от 1 к 0 = постепенно открывает негативную полость */
.silico-home .silico-proc .sp-cnc-cover{
fill:url(#sp-cnc-alu);
transform:scaleX(0);
animation-name:silico-proc-cnc-cut;
transform-box:fill-box;transform-origin:right center;
}
@keyframes silico-proc-cnc-cut{
0%,4.17%{transform:scaleX(1)}
16.67% {transform:scaleX(0)}
100% {transform:scaleX(0)}
}
/* стружки: вылетают по очереди от каждого прохода фрезы */
.silico-home .silico-proc .sp-cnc-chip{fill:#c5c0b8;opacity:0}
.silico-home .silico-proc .sp-cnc-chip--1{animation-name:silico-proc-chip-1}
.silico-home .silico-proc .sp-cnc-chip--2{animation-name:silico-proc-chip-2}
.silico-home .silico-proc .sp-cnc-chip--3{animation-name:silico-proc-chip-3}
@keyframes silico-proc-chip-1{
0%,5%{opacity:0;transform:translate(0,0)}
6% {opacity:.9}
9% {opacity:0;transform:translate(-6px,-9px)}
100% {opacity:0}
}
@keyframes silico-proc-chip-2{
0%,9%{opacity:0;transform:translate(0,0)}
10% {opacity:.9}
13% {opacity:0;transform:translate(5px,-10px)}
100% {opacity:0}
}
@keyframes silico-proc-chip-3{
0%,12%{opacity:0;transform:translate(0,0)}
13% {opacity:.9}
16% {opacity:0;transform:translate(-4px,-8px)}
100% {opacity:0}
}
/* ---------- СЦЕНА 04 · ТИРАЖ (литьё + упаковка) ---------- */
/* верхняя полуформа мини-пресса: 4 цикла смыкания за время активной фазы.
Первый цикл — медленный "герой" (показываем заливку), последующие быстрые. */
.silico-home .silico-proc .sp-tr-top{
transform:translateY(-15px);transform-box:fill-box;
animation-name:silico-proc-tr-top;
}
@keyframes silico-proc-tr-top{
0%,2.6%{transform:translateY(-15px)}
4% {transform:translateY(0)} /* close1 — пресс давит */
5% {transform:translateY(0)}
5.9% {transform:translateY(-15px)} /* open1 */
7% {transform:translateY(-15px)}
8% {transform:translateY(0)} /* close2 */
8.7% {transform:translateY(-15px)}
9.6% {transform:translateY(-15px)}
10.4% {transform:translateY(0)} /* close3 */
11.1% {transform:translateY(-15px)}
12.1% {transform:translateY(-15px)}
12.9% {transform:translateY(0)} /* close4 */
13.6% {transform:translateY(-15px)}
100% {transform:translateY(-15px)}
}
/* струя силикона: льётся перед каждым смыканием */
.silico-home .silico-proc .sp-tr-pour{
opacity:0;transform:scaleY(0);
transform-box:fill-box;transform-origin:top center;
animation-name:silico-proc-tr-pour;
}
@keyframes silico-proc-tr-pour{
0% {opacity:0;transform:scaleY(0)}
0.8% {opacity:1;transform:scaleY(1)}
2.8% {opacity:1;transform:scaleY(1)}
3.4% {opacity:0;transform:scaleY(1)}
7% {opacity:0;transform:scaleY(0)}
7.5% {opacity:.9;transform:scaleY(1)} 8.2%{opacity:0}
9.6% {opacity:0;transform:scaleY(0)}
10% {opacity:.9;transform:scaleY(1)} 10.7%{opacity:0}
12.1% {opacity:0;transform:scaleY(0)}
12.5% {opacity:.9;transform:scaleY(1)} 13.2%{opacity:0}
100% {opacity:0}
}
/* шарик силикона собирается под прессом, потом расплющивается смыканием */
.silico-home .silico-proc .sp-tr-ball{
opacity:0;transform:scale(0);
transform-box:fill-box;transform-origin:center bottom;
animation-name:silico-proc-tr-ball;
}
@keyframes silico-proc-tr-ball{
0% {opacity:0;transform:scale(0)}
1% {opacity:1;transform:scale(.35)}
3% {opacity:1;transform:scale(1)} /* шарик набран */
3.6% {opacity:1;transform:scale(1)}
4% {opacity:1;transform:scale(1.12,.45)} /* пресс давит — расплющивает */
5% {opacity:1;transform:scale(1.12,.45)}
5.6% {opacity:0;transform:scale(1.12,.4)} /* превратился в форму */
100% {opacity:0}
}
/* линия стыка форм вспыхивает на момент каждого смыкания */
.silico-home .silico-proc .sp-tr-seam{opacity:0;animation-name:silico-proc-tr-seam}
@keyframes silico-proc-tr-seam{
0%,3.6%{opacity:0}4%{opacity:1}5.2%{opacity:0}
7.6% {opacity:0}8%{opacity:1}8.6%{opacity:0}
10% {opacity:0}10.4%{opacity:1}11%{opacity:0}
12.5% {opacity:0}12.9%{opacity:1}13.5%{opacity:0}
100% {opacity:0}
}
/* готовые корзиночки: формуются слева, влетают по дуге в коробку и собираются стопкой */
.silico-home .silico-proc .sp-tr-cup{transform-box:fill-box;transform-origin:center}
.silico-home .silico-proc .sp-tr-cup--1{animation-name:silico-proc-toss-1;transform:translate(57px,10px)}
.silico-home .silico-proc .sp-tr-cup--2{animation-name:silico-proc-toss-2;transform:translate(57px,7px)}
.silico-home .silico-proc .sp-tr-cup--3{animation-name:silico-proc-toss-3;transform:translate(57px,4px)}
.silico-home .silico-proc .sp-tr-cup--4{animation-name:silico-proc-toss-4;transform:translate(57px,1px)}
@keyframes silico-proc-toss-1{
0%,5%{opacity:0;transform:translate(0,0) scale(.85)}
5.4% {opacity:1;transform:translate(0,0) scale(1)}
6.4% {opacity:1;transform:translate(30px,-15px) rotate(12deg)} /* апогей дуги */
7.6% {opacity:1;transform:translate(57px,10px)} /* в коробку */
100% {opacity:1;transform:translate(57px,10px)}
}
@keyframes silico-proc-toss-2{
0%,8.4%{opacity:0;transform:translate(0,0) scale(.85)}
8.8% {opacity:1;transform:translate(0,0) scale(1)}
9.8% {opacity:1;transform:translate(31px,-14px) rotate(12deg)}
10.8% {opacity:1;transform:translate(57px,7px)}
100% {opacity:1;transform:translate(57px,7px)}
}
@keyframes silico-proc-toss-3{
0%,10.8%{opacity:0;transform:translate(0,0) scale(.85)}
11.2% {opacity:1;transform:translate(0,0) scale(1)}
12.2% {opacity:1;transform:translate(31px,-13px) rotate(12deg)}
13.2% {opacity:1;transform:translate(57px,4px)}
100% {opacity:1;transform:translate(57px,4px)}
}
@keyframes silico-proc-toss-4{
0%,13.2%{opacity:0;transform:translate(0,0) scale(.85)}
13.6% {opacity:1;transform:translate(0,0) scale(1)}
14.6% {opacity:1;transform:translate(32px,-12px) rotate(12deg)}
15.6% {opacity:1;transform:translate(57px,1px)}
100% {opacity:1;transform:translate(57px,1px)}
}
/* клапаны коробки: закрываются ПОСЛЕ загрузки всех 4 форм (scaleX от 0 к 1) */
.silico-home .silico-proc .sp-tr-flap{transform-box:fill-box}
.silico-home .silico-proc .sp-tr-flap--l{
transform:scaleX(1);transform-origin:left center;
animation-name:silico-proc-flap-l;
}
.silico-home .silico-proc .sp-tr-flap--r{
transform:scaleX(1);transform-origin:right center;
animation-name:silico-proc-flap-r;
}
@keyframes silico-proc-flap-l{
0%,16.2%{transform:scaleX(0)}18%{transform:scaleX(1)}100%{transform:scaleX(1)}
}
@keyframes silico-proc-flap-r{
0%,16.2%{transform:scaleX(0)}18%{transform:scaleX(1)}100%{transform:scaleX(1)}
}
/* пломба-печать по шву крышки + наклейка СИЛИКО на боку коробки */
.silico-home .silico-proc .sp-tr-seal{opacity:1;animation-name:silico-proc-tr-seal}
@keyframes silico-proc-tr-seal{0%,18%{opacity:0}19.4%{opacity:1}100%{opacity:1}}
.silico-home .silico-proc .sp-tr-label{opacity:1;animation-name:silico-proc-tr-label}
@keyframes silico-proc-tr-label{0%,18%{opacity:0}19.4%{opacity:1}100%{opacity:1}}
.silico-home .silico-proc .sp-tr-label rect{
fill:#ffffff;stroke:rgba(0,0,0,.12);stroke-width:.5;
}
.silico-home .silico-proc .sp-tr-label text{
fill:var(--sp-accent);
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:4.4px;letter-spacing:.1em;font-weight:700;
}
/* ================= prefers-reduced-motion =================
Пользователи с включённым "ограничить движение" видят все 4 карточки
одновременно в статике — без spotlight, без приглушения. Каждая показывает
свой финальный кадр (что и есть базовое состояние без анимации). */
@media (prefers-reduced-motion: reduce){
.silico-home .silico-proc__card,
.silico-home .silico-proc__num,
.silico-home .silico-proc__scene [class],
.silico-home .silico-proc .sp-d3-wire *,
.silico-home .silico-proc .sp-d3-wrap svg,
.silico-home .silico-proc .sp-cnc-bit{
animation:none !important;
}
/* все карточки равноценны: рамка нейтральная, полностью видны, без поднятия */
.silico-home .silico-proc__card{
opacity:1 !important;
border-color:var(--sp-line) !important;
transform:none !important;
}
.silico-home .silico-proc__num{
opacity:.9 !important;color:var(--sp-fg-soft) !important;transform:none !important;
}
/* служебные элементы, которые в активной фазе мигают/появляются — прячем,
показываем только финальные кадры (готовое изделие в каждой сцене) */
.silico-home .silico-proc .sp-tr-seam{opacity:0 !important}
}
/* ============================================================
STRAIGHT-UP OVERRIDES — гарантируют макет на десктопе.
Дополнительная страховка специфичности 0,2,0 + !important.
Срабатывает при ширине > 768px (стандартный tablet/desktop порог).
============================================================ */
@media (min-width: 769px) {
.silico-home .hero-inner { display: grid !important; grid-template-columns: 1.05fr 1fr !important; gap: 56px !important; align-items: center !important; }
.silico-home .hero-visual { display: grid !important; grid-template-columns: 1.5fr 1fr !important; gap: 16px !important; height: 560px !important; }
.silico-home .features-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
.silico-home .about-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 64px !important; align-items: center !important; }
.silico-home .about-visual { display: flex !important; align-items: flex-start !important; justify-content: center !important; }
.silico-home .stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
/* .process-grid удалён: блок переехал на .silico-proc, у которого свои встроенные брейкпоинты 1099/639. */
.silico-home .cat-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: 1fr 1fr !important; gap: 16px !important; height: 720px !important; }
.silico-home .cat-card-large { grid-row: span 2 !important; }
.silico-home .faq-inner { display: grid !important; grid-template-columns: 1fr 2fr !important; gap: 80px !important; align-items: start !important; }
.silico-home .cta-strip-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 32px !important; flex-direction: row !important; }
.silico-home .section-head { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; gap: 32px !important; }
.silico-home .hero-cta,
.silico-home .hero-meta,
.silico-home .about-cta,
.silico-home .cta-strip-actions { display: flex !important; }
}
/* ============================================================
SILICO PRESS — CSS-анимация литьевого пресса (claude design v4)
============================================================
Где: .about-visual внутри блока silico_home_about (см. html_contents/04-about.html).
Что: квадратная сцена .sp-scene (aspect-ratio 1/1) + шкала из 4 шагов под ней.
Цикл 8 секунд, бесшовный, автозапуск без кнопки.
Под prefers-reduced-motion: reduce — статичный финальный кадр.
ПРИНЦИП МАСШТАБИРОВАНИЯ (читать первым!):
.sp-scene задаёт font-size через container queries (clamp(11px,4.4cqi,22px)).
Все размеры/координаты деталей машины — в em, т.е. кратно font-size контейнера.
Меняется ширина блока → меняется font-size → вся машина масштабируется пропорционально.
ВАЖНО: не переводить внутренние em в px — это сломает респонсивность.
Подписи (.sp-tag) — в % от .sp-scene, т.к. у них собственный мелкий font-size.
Префикс sp- (silico-press) для всех внутренних классов исключает конфликты
с темой Prostore и бутстрапом (.col, .panel, .btns, .step, .led — везде заняты).
Скоуп .silico-home .silico-press — изоляция от остального сайта.
============================================================ */
.silico-home .silico-press{
width:100%;
max-width:520px; /* совпадает с .stage из артефакта */
display:flex;
flex-direction:column;
gap:clamp(14px,2.2vw,22px);
/* собственные токены палитры — копия из артефакта v4,
чтобы анимация не зависела от глобальных --theme-* переменных Prostore */
--sp-bg:#f7f2ee;
--sp-surface:#ffffff;
--sp-line:#e6dcd4;
--sp-fg:#2a1f1a;
--sp-fg-soft:#6b5a50;
--sp-accent:#c4502d;
--sp-accent-soft:rgba(196,80,45,.12);
--sp-silicone:#c4502d;
--sp-m-hi:#615f58; /* металл — блик */
--sp-m-1:#46443f; /* светлый графит */
--sp-m-2:#3a3833; /* основной графит */
--sp-m-3:#2a2825; /* тень графита */
--sp-steel:#82806f; /* холодная сталь — шток, направляющие */
--sp-cavity:#1d1a17; /* цвет полости (внутри пресс-формы) */
--sp-screen:#14120e; /* экран монитора */
--sp-led-off:#574e47; /* погашенный индикатор */
--sp-dur:8s; /* длительность одного цикла — единая ручка темпа */
}
/* ---------- сцена ---------- */
.silico-home .silico-press .sp-scene{
position:relative;width:100%;aspect-ratio:1/1;
container-type:inline-size;
font-size:clamp(11px,4.4cqi,22px); /* юнит-переменная для em внутри сцены */
border:1px solid var(--sp-line);
border-radius:1.1em;
background:radial-gradient(125% 100% at 50% 2%, #fffdfb 0%, var(--sp-bg) 70%);
overflow:hidden;
}
.silico-home .silico-press .sp-scene > *{position:absolute}
/* ---------- объёмные металлические поверхности (общий класс .sp-m) ---------- */
.silico-home .silico-press .sp-m{
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1.5px,transparent 1.5px 4px),
linear-gradient(180deg,var(--sp-m-hi) 0,var(--sp-m-1) 14%,var(--sp-m-2) 55%,var(--sp-m-3) 100%);
border-radius:.32em;
box-shadow:
inset 0 .12em 0 rgba(255,255,255,.14),
inset 0 -.2em .28em rgba(0,0,0,.45),
inset .1em 0 0 rgba(255,255,255,.05),
inset -.12em 0 .12em rgba(0,0,0,.3);
}
/* колонны имеют свою заливку (вертикальный блик по центру) */
.silico-home .silico-press .sp-m.sp-col{
background:linear-gradient(90deg,var(--sp-m-3) 0,var(--sp-steel) 42%,var(--sp-m-hi) 50%,var(--sp-steel) 58%,var(--sp-m-3) 100%);
box-shadow:inset 0 .1em 0 rgba(255,255,255,.18),inset 0 -.1em .1em rgba(0,0,0,.4);
}
/* ---------- контактная тень под станком ---------- */
.silico-home .silico-press .sp-shadow{
left:50%;bottom:.5em;transform:translateX(-50%);
width:17em;height:1.1em;border-radius:50%;
background:radial-gradient(50% 50% at 50% 50%,rgba(40,28,22,.28),transparent 70%);
filter:blur(.15em);z-index:0;
}
/* ---------- станина (корпус-кабинет) с ножками ---------- */
.silico-home .silico-press .sp-cabinet{
left:50%;bottom:1em;transform:translateX(-50%);
width:16em;height:3.3em;z-index:2;
border-radius:.4em .4em .3em .3em;
}
.silico-home .silico-press .sp-cabinet::before{
content:"";position:absolute;inset:.35em;
border:1px solid rgba(0,0,0,.25);border-radius:.28em;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.silico-home .silico-press .sp-feet{
left:50%;bottom:.45em;transform:translateX(-50%);
width:16em;height:.6em;z-index:1;pointer-events:none;
}
.silico-home .silico-press .sp-feet::before,
.silico-home .silico-press .sp-feet::after{
content:"";position:absolute;bottom:0;width:1.7em;height:.6em;
border-radius:0 0 .18em .18em;background:var(--sp-m-3);
}
.silico-home .silico-press .sp-feet::before{left:.7em}
.silico-home .silico-press .sp-feet::after{right:.7em}
/* ---------- пульт управления (монитор + кнопки + индикаторы + шильд) ---------- */
.silico-home .silico-press .sp-panel{
left:50%;bottom:1.45em;transform:translateX(-50%);
width:14.6em;height:2.5em;z-index:3;pointer-events:none;
}
.silico-home .silico-press .sp-panel > *{position:absolute}
/* монитор оператора */
.silico-home .silico-press .sp-monitor{
left:0;bottom:0;width:4.6em;height:2.4em;border-radius:.28em;
background:linear-gradient(180deg,var(--sp-m-1),var(--sp-m-3));
box-shadow:inset 0 .1em 0 rgba(255,255,255,.12),inset 0 -.12em .14em rgba(0,0,0,.5);
padding:.34em;
}
.silico-home .silico-press .sp-screen{
position:absolute;inset:.34em;border-radius:.16em;
background:var(--sp-screen);overflow:hidden;
box-shadow:inset 0 0 .3em rgba(0,0,0,.8);
}
/* скан-линии монитора (имитация ЭЛТ) */
.silico-home .silico-press .sp-scanline{
position:absolute;inset:0;
background:repeating-linear-gradient(0deg,rgba(196,80,45,.07) 0 2px,transparent 2px 4px);
}
.silico-home .silico-press .sp-scr-label{
position:absolute;top:.28em;left:.34em;
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:.42em;letter-spacing:.08em;color:#e0824f;
}
/* эквалайзер на экране — декоративная "активность" */
.silico-home .silico-press .sp-scr-eq{
position:absolute;left:.4em;top:1.05em;
display:flex;align-items:flex-end;gap:.16em;height:1.1em;
}
.silico-home .silico-press .sp-scr-eq i{
display:block;width:.22em;background:#d9763f;border-radius:.06em;
height:.4em;transform-origin:bottom;
}
.silico-home .silico-press .sp-scr-eq i:nth-child(1){animation:silico-press-eq .9s steps(6) infinite}
.silico-home .silico-press .sp-scr-eq i:nth-child(2){animation:silico-press-eq .9s steps(6) infinite .15s}
.silico-home .silico-press .sp-scr-eq i:nth-child(3){animation:silico-press-eq .9s steps(6) infinite .3s}
.silico-home .silico-press .sp-scr-eq i:nth-child(4){animation:silico-press-eq .9s steps(6) infinite .45s}
.silico-home .silico-press .sp-scr-eq i:nth-child(5){animation:silico-press-eq .9s steps(6) infinite .6s}
/* бегущая прогресс-полоска внизу экрана, синхронна с циклом */
.silico-home .silico-press .sp-scr-prog{
position:absolute;left:.4em;right:.4em;bottom:.34em;height:.26em;
border-radius:.1em;background:rgba(255,255,255,.1);overflow:hidden;
}
.silico-home .silico-press .sp-scr-prog::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,#c4502d,#e0824f);
transform:scaleX(0);transform-origin:left;
animation:silico-press-scrprog var(--sp-dur) linear infinite;
}
/* блок кнопок и индикаторов справа на панели */
.silico-home .silico-press .sp-btns{right:0;bottom:.15em;width:7em;height:2.2em}
.silico-home .silico-press .sp-btns > *{position:absolute}
.silico-home .silico-press .sp-leds{top:0;left:.2em;display:flex;gap:.5em}
.silico-home .silico-press .sp-led{
width:.5em;height:.5em;border-radius:50%;background:var(--sp-led-off);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 .08em .08em rgba(255,255,255,.15);
}
/* индикаторы зажигаются по фазам цикла:
led1 — раскрытие (0—18.75%), led2 — заливка+смыкание (18.75—66%), led3 — готово (66—100%) */
.silico-home .silico-press .sp-led--1{animation:silico-press-led1 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-led--2{animation:silico-press-led2 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-led--3{animation:silico-press-led3 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-lbl{
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:.4em;letter-spacing:.06em;color:var(--sp-fg-soft);
text-transform:uppercase;top:.05em;left:2.4em;
}
/* поворотные рукоятки */
.silico-home .silico-press .sp-knob{
width:1.05em;height:1.05em;border-radius:50%;bottom:0;
background:radial-gradient(circle at 38% 32%,var(--sp-m-hi),var(--sp-m-2) 60%,var(--sp-m-3));
box-shadow:inset 0 .08em .06em rgba(255,255,255,.2),inset 0 -.1em .1em rgba(0,0,0,.55);
}
.silico-home .silico-press .sp-knob::after{
content:"";position:absolute;left:50%;top:.16em;
width:.1em;height:.34em;border-radius:.05em;
background:rgba(255,255,255,.45);transform:translateX(-50%);
}
.silico-home .silico-press .sp-knob--1{left:.2em}
.silico-home .silico-press .sp-knob--2{left:1.55em}
.silico-home .silico-press .sp-knob--3{left:2.9em}
/* аварийная кнопка-грибок (терракотовая) */
.silico-home .silico-press .sp-estop{
right:.2em;bottom:-.05em;width:1.5em;height:1.5em;border-radius:50%;
background:radial-gradient(circle at 40% 32%,#e2643f,var(--sp-accent) 55%,#8f3115);
box-shadow:inset 0 .12em .1em rgba(255,255,255,.3),
inset 0 -.16em .16em rgba(0,0,0,.5),
0 0 0 .18em #2a2825;
}
/* шильд "СИЛИКО" над пультом */
.silico-home .silico-press .sp-plate{
left:5em;bottom:2.05em;z-index:3;
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:.46em;letter-spacing:.34em;color:#9b8f86;font-weight:700;
}
/* ---------- рама пресса: колонны-направляющие ---------- */
.silico-home .silico-press .sp-col{bottom:4em;width:.62em;height:13em;z-index:1}
.silico-home .silico-press .sp-col--l{left:calc(50% - .31em);transform:translateX(-5.9em)}
.silico-home .silico-press .sp-col--r{left:calc(50% - .31em);transform:translateX(5.9em)}
/* верхние и нижние "подшипники" колонн */
.silico-home .silico-press .sp-col::before,
.silico-home .silico-press .sp-col::after{
content:"";position:absolute;left:-.2em;
width:1.02em;height:.55em;border-radius:.12em;
background:linear-gradient(180deg,var(--sp-m-1),var(--sp-m-3));
box-shadow:inset 0 .08em 0 rgba(255,255,255,.12);
}
.silico-home .silico-press .sp-col::before{top:.4em}
.silico-home .silico-press .sp-col::after{bottom:-.1em}
/* верхняя траверса + гидроцилиндр */
.silico-home .silico-press .sp-crown{
left:50%;bottom:16.8em;transform:translateX(-50%);
width:13.9em;height:1.55em;z-index:6;
}
.silico-home .silico-press .sp-cyl{
left:50%;bottom:18.25em;transform:translateX(-50%);
width:3em;height:2em;z-index:6;
border-radius:.28em .28em .2em .2em;
}
.silico-home .silico-press .sp-cyl::before{
content:"";position:absolute;inset:.28em .5em auto;
height:.34em;border-radius:.1em;background:rgba(255,255,255,.08);
}
.silico-home .silico-press .sp-cyl::after{
content:"";position:absolute;left:50%;bottom:-.42em;transform:translateX(-50%);
width:1.1em;height:.5em;background:var(--sp-m-3);border-radius:0 0 .14em .14em;
}
/* гидрошланг от цилиндра к корпусу (декоративная дуга) */
.silico-home .silico-press .sp-hose{
left:50%;bottom:5em;width:3.6em;height:13em;
transform:translateX(2.4em);z-index:1;pointer-events:none;
}
.silico-home .silico-press .sp-hose::before{
content:"";position:absolute;inset:0;
border:.18em solid #211f1c;border-top:none;border-left:none;
border-radius:0 1.6em 1.2em 0;opacity:.85;
}
/* шток поршня — масштабируется по scaleY (имитирует выдвижение/возврат) */
.silico-home .silico-press .sp-rod{
left:calc(50% - .34em);bottom:10.2em;width:.68em;height:8em;z-index:3;
background:linear-gradient(90deg,var(--sp-m-3),var(--sp-steel) 48%,#a9a799 52%,var(--sp-steel) 56%,var(--sp-m-3));
box-shadow:inset 0 -.1em .1em rgba(0,0,0,.4);
transform-origin:top center;transform:scaleY(.575);
animation:silico-press-rod var(--sp-dur) linear infinite;
}
/* ---------- нижняя полуформа + полость + содержимое ---------- */
.silico-home .silico-press .sp-die{
left:50%;bottom:4.3em;transform:translateX(-50%);
width:9em;height:2.6em;z-index:4;
background:
radial-gradient(circle at 1em .9em,rgba(0,0,0,.45) .16em,rgba(255,255,255,.14) .2em,transparent .25em),
radial-gradient(circle at calc(100% - 1em) .9em,rgba(0,0,0,.45) .16em,rgba(255,255,255,.14) .2em,transparent .25em),
repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1.5px,transparent 1.5px 4px),
linear-gradient(180deg,var(--sp-m-hi),var(--sp-m-1) 16%,var(--sp-m-2) 60%,var(--sp-m-3));
border-radius:.45em;
box-shadow:inset 0 .12em 0 rgba(255,255,255,.14),inset 0 -.2em .28em rgba(0,0,0,.5);
animation:silico-press-die var(--sp-dur) linear infinite;
}
/* полость формы — куда заливается силикон */
.silico-home .silico-press .sp-cavity{
left:50%;bottom:5.2em;transform:translateX(-50%);
width:6.1em;height:1.4em;z-index:4;
background:var(--sp-cavity);border:1px solid rgba(0,0,0,.45);
border-radius:.3em;overflow:hidden;
box-shadow:inset 0 .18em .3em rgba(0,0,0,.7);
}
/* заполняющийся уровень силикона (height 0→100%) */
.silico-home .silico-press .sp-silicone{
position:absolute;left:0;right:0;bottom:0;height:0;
background:linear-gradient(180deg,#d2603c,var(--sp-silicone));
animation:silico-press-fill var(--sp-dur) linear infinite;
}
.silico-home .silico-press .sp-silicone::after{
content:"";position:absolute;left:0;right:0;top:0;height:.13em;
background:rgba(255,255,255,.28); /* мениск-блик на поверхности силикона */
}
/* пузырьки, всплывающие во время заливки */
.silico-home .silico-press .sp-bubble{
position:absolute;bottom:.2em;width:.3em;height:.3em;border-radius:50%;
background:rgba(255,255,255,.35);opacity:0;
}
.silico-home .silico-press .sp-bubble--1{left:33%;animation:silico-press-bub1 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-bubble--2{left:60%;animation:silico-press-bub2 var(--sp-dur) linear infinite}
/* готовое изделие (SVG силиконовой формы для выпечки) — появляется в фазе 4 */
.silico-home .silico-press .sp-product{
position:absolute;left:0;right:0;bottom:0;height:100%;opacity:0;
animation:silico-press-reveal var(--sp-dur) linear infinite;
}
.silico-home .silico-press .sp-product svg{display:block;width:100%;height:100%}
/* ---------- брызги силикона (5 капель + 2 расходящихся кольца) ---------- */
.silico-home .silico-press .sp-splash{
left:50%;bottom:6.4em;width:0;height:0;z-index:6;
}
.silico-home .silico-press .sp-splash i{
position:absolute;left:0;top:0;width:.32em;height:.32em;border-radius:50%;
background:var(--sp-accent);opacity:0;
box-shadow:0 0 .12em rgba(196,80,45,.5);
}
.silico-home .silico-press .sp-s--1{animation:silico-press-sp1 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-s--2{animation:silico-press-sp2 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-s--3{animation:silico-press-sp3 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-s--4{animation:silico-press-sp4 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-s--5{animation:silico-press-sp5 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-ring{
left:50%;bottom:6.5em;width:1.4em;height:.5em;
border:1.5px solid var(--sp-accent);border-radius:50%;
transform:translateX(-50%) scale(.2);opacity:0;z-index:6;
}
.silico-home .silico-press .sp-ring--1{animation:silico-press-rg1 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-ring--2{animation:silico-press-rg2 var(--sp-dur) linear infinite}
/* ---------- подвижная плита + верхняя полуформа ---------- */
.silico-home .silico-press .sp-head{
left:50%;bottom:6.9em;width:11.6em;height:3.3em;z-index:7;
transform:translateX(-50%) translateY(-3.4em); /* стартовая позиция — поднята */
animation:silico-press-head var(--sp-dur) linear infinite;
}
.silico-home .silico-press .sp-uplate{
position:absolute;left:0;right:0;top:0;height:1em;z-index:2;
}
.silico-home .silico-press .sp-upper{
position:absolute;left:50%;top:1em;transform:translateX(-50%);
width:9em;height:2.3em;transform-origin:50% 100%;
background:
radial-gradient(circle at 1em calc(100% - .8em),rgba(0,0,0,.45) .16em,rgba(255,255,255,.14) .2em,transparent .25em),
radial-gradient(circle at calc(100% - 1em) calc(100% - .8em),rgba(0,0,0,.45) .16em,rgba(255,255,255,.14) .2em,transparent .25em),
repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1.5px,transparent 1.5px 4px),
linear-gradient(180deg,var(--sp-m-3),var(--sp-m-2) 40%,var(--sp-m-1) 84%,var(--sp-m-hi));
border-radius:.45em;
box-shadow:inset 0 .2em .28em rgba(0,0,0,.5),inset 0 -.12em 0 rgba(255,255,255,.12);
animation:silico-press-upper var(--sp-dur) linear infinite;
}
/* ---------- дозатор силикона (корпус + рукав + сопло) ---------- */
.silico-home .silico-press .sp-dunit{
left:calc(50% - 1.3em);bottom:11.4em;transform:translateX(6.5em);
width:2.6em;height:1.45em;z-index:5;
}
.silico-home .silico-press .sp-dunit::before{
content:"";position:absolute;left:-.5em;top:.4em;
width:.6em;height:.6em;border-radius:50%;background:var(--sp-m-3);
}
.silico-home .silico-press .sp-darm{
left:50%;bottom:11.65em;width:6.6em;height:.4em;z-index:5;
border-radius:.2em;background:linear-gradient(180deg,var(--sp-m-1),var(--sp-m-3));
}
.silico-home .silico-press .sp-dtip{
left:calc(50% - .27em);bottom:9.5em;width:.54em;height:2.2em;z-index:5;
border-radius:0 0 .14em .14em;
background:linear-gradient(180deg,var(--sp-m-2),var(--sp-m-3));
}
/* терракотовая капля на кончике сопла во время подачи */
.silico-home .silico-press .sp-dtip::after{
content:"";position:absolute;left:50%;bottom:-.05em;transform:translateX(-50%);
width:.34em;height:.18em;border-radius:0 0 .1em .1em;
background:var(--sp-accent);opacity:0;
animation:silico-press-tip var(--sp-dur) linear infinite;
}
/* ---------- струя силикона (масштабируется по scaleY) ---------- */
.silico-home .silico-press .sp-stream{
left:calc(50% - .2em);bottom:6.6em;width:.4em;height:2.9em;z-index:5;
border-radius:.2em;
background:linear-gradient(180deg,rgba(196,80,45,.3),var(--sp-silicone) 26%);
transform-origin:top center;transform:scaleY(0);
animation:silico-press-pour var(--sp-dur) linear infinite;
}
/* ---------- линия стыка полуформ (видна в фазе смыкания) ---------- */
.silico-home .silico-press .sp-seam{
left:50%;bottom:6.95em;transform:translateX(-50%);
width:9em;height:1.5px;border-radius:2px;
background:var(--sp-accent);opacity:0;z-index:8;
animation:silico-press-seam var(--sp-dur) linear infinite;
}
/* ---------- манометр давления (стрелка отклоняется на смыкании) ---------- */
.silico-home .silico-press .sp-gauge{
left:calc(50% - .9em);bottom:17.4em;transform:translateX(-5.1em);
width:1.8em;height:1.8em;border-radius:50%;z-index:9;
background:var(--sp-surface);
box-shadow:
inset 0 0 0 1.5px var(--sp-m-2),
inset 0 .1em .2em rgba(0,0,0,.25),
0 .05em .1em rgba(0,0,0,.2);
}
/* стрелка манометра — поворачивается по keyframes silico-press-needle */
.silico-home .silico-press .sp-gauge::before{
content:"";position:absolute;inset:50% auto auto 50%;
width:.16em;height:.66em;background:var(--sp-accent);border-radius:.08em;
transform-origin:bottom center;
transform:translate(-50%,-100%) rotate(-38deg);
animation:silico-press-needle var(--sp-dur) linear infinite;
}
/* центральный пятачок манометра */
.silico-home .silico-press .sp-gauge::after{
content:"";position:absolute;left:50%;top:50%;
width:.28em;height:.28em;border-radius:50%;
background:var(--sp-m-2);transform:translate(-50%,-50%);
}
/* ---------- подписи-выноски узлов (Гидроцилиндр / Дозатор / Пресс-форма) ---------- */
.silico-home .silico-press .sp-tag{
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:clamp(7px,2.1cqi,11px);letter-spacing:.06em;
color:var(--sp-fg-soft);text-transform:uppercase;
display:flex;align-items:center;gap:.5em;z-index:9;white-space:nowrap;
}
.silico-home .silico-press .sp-tag-ln{width:2.2em;height:1px;background:var(--sp-line)}
.silico-home .silico-press .sp-tag-dt{
width:.5em;height:.5em;border-radius:50%;
background:var(--sp-accent);flex:none;
}
.silico-home .silico-press .sp-tag--right{flex-direction:row-reverse}
.silico-home .silico-press .sp-tag--cyl{top:14%;left:13%}
.silico-home .silico-press .sp-tag--doser{top:36%;right:2.5%}
.silico-home .silico-press .sp-tag--mold{top:62%;right:2.5%}
/* на узких контейнерах (мобильная адаптация сцены) — подписи скрываются */
@container (max-width:360px){
.silico-home .silico-press .sp-tag{display:none}
}
/* ---------- шкала из 4 шагов под сценой ---------- */
.silico-home .silico-press .sp-steps{
display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;
margin:0;padding:0;list-style:none;
}
.silico-home .silico-press .sp-step{
display:flex;flex-direction:column;gap:.45em;
}
.silico-home .silico-press .sp-step-row{
display:flex;align-items:baseline;gap:.5em;
}
.silico-home .silico-press .sp-step-n{
font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:clamp(.7rem,1.9vw,.82rem);font-weight:700;
color:var(--sp-accent);line-height:1;
}
.silico-home .silico-press .sp-step-t{
font-size:clamp(.62rem,1.7vw,.74rem);color:var(--sp-fg-soft);
opacity:.5;line-height:1.25;text-wrap:balance;
}
.silico-home .silico-press .sp-step-bar{
height:2px;border-radius:2px;background:var(--sp-line);
position:relative;overflow:hidden;
}
.silico-home .silico-press .sp-step-bar::after{
content:"";position:absolute;inset:0;background:var(--sp-accent);
transform:scaleX(0);transform-origin:left;
}
/* подсветка текущего шага и заполнение прогресс-полос синхронны с таймлайном */
.silico-home .silico-press .sp-step:nth-child(1) .sp-step-t{animation:silico-press-st1 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(2) .sp-step-t{animation:silico-press-st2 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(3) .sp-step-t{animation:silico-press-st3 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(4) .sp-step-t{animation:silico-press-st4 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(1) .sp-step-bar::after{animation:silico-press-bar1 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(2) .sp-step-bar::after{animation:silico-press-bar2 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(3) .sp-step-bar::after{animation:silico-press-bar3 var(--sp-dur) linear infinite}
.silico-home .silico-press .sp-step:nth-child(4) .sp-step-bar::after{animation:silico-press-bar4 var(--sp-dur) linear infinite}
/* ================= ТАЙМЛАЙН ЦИКЛА (8 секунд) =================
Один непрерывный цикл из 4 фаз. Проценты — доли от --sp-dur.
01 Раскрытие 0—18.75% (0—1.5s)
02 Заливка 18.75—43.75% (1.5—3.5s)
03 Смыкание 43.75—66% (3.5—5.3s)
04 Изделие 66—100% (5.3—8s)
В 0% и 100% — ключевые позиции совпадают (бесшовность). */
/* подвижная плита: висит вверху → опускается → squash → возврат */
@keyframes silico-press-head{
0%,18.75%{transform:translateX(-50%) translateY(-3.4em)}
43.75%{transform:translateX(-50%) translateY(-3.4em);animation-timing-function:cubic-bezier(.55,0,.75,.25)}
52%{transform:translateX(-50%) translateY(0);animation-timing-function:ease-out}
54%{transform:translateX(-50%) translateY(.26em)}
56%{transform:translateX(-50%) translateY(0)}
66%{transform:translateX(-50%) translateY(0);animation-timing-function:cubic-bezier(.25,.6,.3,1)}
80%{transform:translateX(-50%) translateY(-3.4em)}
100%{transform:translateX(-50%) translateY(-3.4em)}
}
/* шток поршня: scaleY 0.575 (втянут) → 1 (выдвинут) → 0.575 (втянут обратно) */
@keyframes silico-press-rod{
0%,18.75%{transform:scaleY(.575)}
43.75%{transform:scaleY(.575);animation-timing-function:cubic-bezier(.55,0,.75,.25)}
52%{transform:scaleY(1)}
54%{transform:scaleY(1.03)}
56%{transform:scaleY(1)}
66%{transform:scaleY(1);animation-timing-function:cubic-bezier(.25,.6,.3,1)}
80%{transform:scaleY(.575)}
100%{transform:scaleY(.575)}
}
/* верхняя полуформа: squash при ударе о нижнюю */
@keyframes silico-press-upper{
0%,52%{transform:translateX(-50%) scaleY(1)}
54%{transform:translateX(-50%) scaleY(.93)}
56%{transform:translateX(-50%) scaleY(1)}
100%{transform:translateX(-50%) scaleY(1)}
}
/* нижняя полуформа: лёгкая отдача при ударе */
@keyframes silico-press-die{
0%,53%{transform:translateX(-50%) scaleY(1)}
54%{transform:translateX(-50%) scaleY(.97)}
56%{transform:translateX(-50%) scaleY(1)}
100%{transform:translateX(-50%) scaleY(1)}
}
/* заполнение полости силиконом: height 0→100%, потом прячется при появлении изделия */
@keyframes silico-press-fill{
0%,21%{height:0;opacity:1}
22%{height:0;animation-timing-function:cubic-bezier(.35,.5,.25,1)}
40%{height:100%}
64%{height:100%;opacity:1}
66%{height:100%;opacity:0}
100%{height:100%;opacity:0}
}
/* струя силикона: scaleY 0→1 во время заливки, потом прячется */
@keyframes silico-press-pour{
0%,19.5%{transform:scaleY(0);opacity:0}
21%{transform:scaleY(1);opacity:1;animation-timing-function:linear}
38%{transform:scaleY(1);opacity:1}
40%{transform:scaleY(1);opacity:0}
100%{transform:scaleY(0);opacity:0}
}
/* капля на кончике сопла во время подачи */
@keyframes silico-press-tip{
0%,20%{opacity:0}
22%{opacity:1}
38%{opacity:1}
40%{opacity:0}
100%{opacity:0}
}
/* всплывающие пузырьки во время заливки */
@keyframes silico-press-bub1{
0%,24%{opacity:0;transform:translateY(0)}
26%{opacity:.9}
34%{opacity:0;transform:translateY(-1em)}
100%{opacity:0;transform:translateY(-1em)}
}
@keyframes silico-press-bub2{
0%,30%{opacity:0;transform:translateY(0)}
32%{opacity:.8}
39%{opacity:0;transform:translateY(-.9em)}
100%{opacity:0;transform:translateY(-.9em)}
}
/* появление готового изделия с лёгким "выталкиванием" вверх */
@keyframes silico-press-reveal{
0%,64%{opacity:0;transform:translateY(0)}
66%{opacity:1;transform:translateY(0)}
71%{opacity:1;transform:translateY(-.26em)}
75%{opacity:1;transform:translateY(0)}
100%{opacity:1;transform:translateY(0)}
}
/* линия стыка форм — мигает на момент смыкания */
@keyframes silico-press-seam{
0%,52%{opacity:0}
55%{opacity:1}
65%{opacity:1}
69%{opacity:0}
100%{opacity:0}
}
/* стрелка манометра: −38° (покой) → +30° (давление) → −38° (сброс) */
@keyframes silico-press-needle{
0%,50%{transform:translate(-50%,-100%) rotate(-38deg)}
54%{transform:translate(-50%,-100%) rotate(30deg)}
64%{transform:translate(-50%,-100%) rotate(24deg)}
68%{transform:translate(-50%,-100%) rotate(-38deg)}
100%{transform:translate(-50%,-100%) rotate(-38deg)}
}
/* брызги силикона — короткие дуги, чередуются во время заливки */
@keyframes silico-press-sp1{
0%,22%{opacity:0;transform:translate(0,0) scale(.5)}
23%{opacity:1;transform:translate(0,0) scale(1)}
27%{opacity:0;transform:translate(-1.1em,-.9em) scale(.4)}
100%{opacity:0;transform:translate(-1.1em,-.9em) scale(.4)}
}
@keyframes silico-press-sp2{
0%,25%{opacity:0;transform:translate(0,0) scale(.5)}
26%{opacity:1;transform:translate(0,0) scale(1)}
30%{opacity:0;transform:translate(1.2em,-.8em) scale(.4)}
100%{opacity:0;transform:translate(1.2em,-.8em) scale(.4)}
}
@keyframes silico-press-sp3{
0%,29%{opacity:0;transform:translate(0,0) scale(.5)}
30%{opacity:1;transform:translate(0,0) scale(1)}
34%{opacity:0;transform:translate(-1em,-1.1em) scale(.4)}
100%{opacity:0;transform:translate(-1em,-1.1em) scale(.4)}
}
@keyframes silico-press-sp4{
0%,33%{opacity:0;transform:translate(0,0) scale(.5)}
34%{opacity:1;transform:translate(0,0) scale(1)}
38%{opacity:0;transform:translate(1.1em,-1em) scale(.4)}
100%{opacity:0;transform:translate(1.1em,-1em) scale(.4)}
}
@keyframes silico-press-sp5{
0%,36%{opacity:0;transform:translate(0,0) scale(.5)}
37%{opacity:1;transform:translate(0,0) scale(1)}
40%{opacity:0;transform:translate(.2em,-1.2em) scale(.4)}
100%{opacity:0;transform:translate(.2em,-1.2em) scale(.4)}
}
/* расходящиеся кольца от точки попадания струи */
@keyframes silico-press-rg1{
0%,23%{opacity:0;transform:translateX(-50%) scale(.2)}
24%{opacity:.8}
30%{opacity:0;transform:translateX(-50%) scale(1)}
100%{opacity:0;transform:translateX(-50%) scale(1)}
}
@keyframes silico-press-rg2{
0%,31%{opacity:0;transform:translateX(-50%) scale(.2)}
32%{opacity:.8}
38%{opacity:0;transform:translateX(-50%) scale(1)}
100%{opacity:0;transform:translateX(-50%) scale(1)}
}
/* анимации пульта оператора */
@keyframes silico-press-eq{
0%{height:.3em}20%{height:1em}40%{height:.5em}
60%{height:.9em}80%{height:.35em}100%{height:.7em}
}
@keyframes silico-press-scrprog{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
/* индикатор 1 (терракот) горит только в фазе 01 — раскрытие */
@keyframes silico-press-led1{
0%,18.75%{background:#d9763f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 .25em rgba(217,118,63,.7)}
18.76%,100%{background:#574e47;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
}
/* индикатор 2 (терракот) горит в фазах 02+03 — заливка и смыкание */
@keyframes silico-press-led2{
0%,18.75%{background:#574e47}
18.76%,66%{background:#c4502d;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 .28em rgba(196,80,45,.8)}
66.01%,100%{background:#574e47;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
}
/* индикатор 3 (зелёный) горит в фазе 04 — готово */
@keyframes silico-press-led3{
0%,66%{background:#574e47}
66.01%,100%{background:#5b8f5b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 .25em rgba(91,143,91,.75)}
}
/* подсветка текста шагов — точно по границам фаз */
@keyframes silico-press-st1{
0%,18.74%{opacity:1;color:var(--sp-fg)}
18.75%,100%{opacity:.5;color:var(--sp-fg-soft)}
}
@keyframes silico-press-st2{
0%,18.74%{opacity:.5;color:var(--sp-fg-soft)}
18.75%,43.74%{opacity:1;color:var(--sp-fg)}
43.75%,100%{opacity:.5;color:var(--sp-fg-soft)}
}
@keyframes silico-press-st3{
0%,43.74%{opacity:.5;color:var(--sp-fg-soft)}
43.75%,65.99%{opacity:1;color:var(--sp-fg)}
66%,100%{opacity:.5;color:var(--sp-fg-soft)}
}
@keyframes silico-press-st4{
0%,65.99%{opacity:.5;color:var(--sp-fg-soft)}
66%,100%{opacity:1;color:var(--sp-fg)}
}
/* заполнение прогресс-полос: bar1 0—18.75%, bar2 0—43.75%, bar3 0—66%, bar4 0—100% */
@keyframes silico-press-bar1{0%{transform:scaleX(0)}18.75%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes silico-press-bar2{0%,18.75%{transform:scaleX(0)}43.75%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes silico-press-bar3{0%,43.75%{transform:scaleX(0)}66%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes silico-press-bar4{0%,66%{transform:scaleX(0)}100%{transform:scaleX(1)}}
/* ================= prefers-reduced-motion =================
Пользователи с включённым "ограничить движение" видят статичный финальный кадр:
— раскрытая форма с готовым изделием внутри,
— все анимации остановлены, индикатор "готово" подсвечен,
— шкала показывает заполненный 4-й шаг. */
@media (prefers-reduced-motion: reduce){
.silico-home .silico-press *,
.silico-home .silico-press *::before,
.silico-home .silico-press *::after{
animation:none !important;
}
.silico-home .silico-press .sp-head{transform:translateX(-50%) translateY(-3.4em)}
.silico-home .silico-press .sp-rod{transform:scaleY(.575)}
.silico-home .silico-press .sp-silicone{opacity:0;height:0}
.silico-home .silico-press .sp-bubble{opacity:0}
.silico-home .silico-press .sp-product{opacity:1}
.silico-home .silico-press .sp-stream{transform:scaleY(0)}
.silico-home .silico-press .sp-gauge::before{transform:translate(-50%,-100%) rotate(-38deg)}
/* индикатор 3 (зелёный — "готово") показываем подсвеченным */
.silico-home .silico-press .sp-led--3{
background:#5b8f5b;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 .25em rgba(91,143,91,.7);
}
/* шкала: 4-й шаг подсвечен, его прогресс-полоса заполнена */
.silico-home .silico-press .sp-step:nth-child(4) .sp-step-t{opacity:1;color:var(--sp-fg)}
.silico-home .silico-press .sp-step:nth-child(4) .sp-step-bar::after{transform:scaleX(1)}
}