/* ============================================================================= cinematic-v1.css · ?v=cine-1 ЕДИНЫЙ motor + cinematic слой. Заменяет motion-upgrade-v3.css в деплое (v3 не подключается; cinematic владеет всем движением/светом). Грузится ПОСЛЕДНИМ в после main/page/motion + v1(на /,/diagnostic/) + v2. 18 страниц (9 RU + 9 HE), включая /body/ и /prices/. Cinematic Spatial Website: тихая медицинская роскошь + AI Beauty Lab. Ощущение пространства через СВЕТ, ГЛУБИНУ и ПЛАВНОСТЬ — без WebGL/3D/JS. Гарантии безопасности: - НЕТ !important; - decorative-слои: pointer-events:none + низкая opacity + z-index:-1 ПОД контентом, хост получает isolation:isolate → корректный stacking context (не уходит под body); - hover ТОЛЬКО @media (hover:hover) and (pointer:fine); - анимируем только transform/opacity/box-shadow/filter; blur ≤3px, малые элементы; - без particles/dots/glitter/casino glow/moving text/heavy blur/bounce/spring; - никакого motion поверх текста; никакого нового JS; - эффекты не на всех карточках сразу — только сцены и флагманы; - @media (prefers-reduced-motion:reduce) выключает почти всё. ============================================================================= */ /* ----------------------------------------------------------------------------- 0 · CINEMATIC-ТОКЕНЫ (глубина «в пространстве», статичные тени — 0 стоимости) ----------------------------------------------------------------------------- */ :root{ --cine-depth: 0 30px 60px -30px rgba(60,40,10,.34), 0 8px 22px rgba(60,40,10,.07); --cine-depth-soft: 0 22px 46px -26px rgba(60,40,10,.26), 0 6px 16px rgba(60,40,10,.06); } /* ----------------------------------------------------------------------------- A · НАПРАВЛЕННЫЙ СВЕТ СЦЕН (ambient) — только нужные хосты, свой тон на сцену. isolation:isolate → z-index:-1 слой корректно живёт над фоном хоста, под текстом. ----------------------------------------------------------------------------- */ .page-home .hero, .page-diagnostic .diag-card.aiscan, .page-laser .vectus-show, .page-cosmetology .flag-combo-wide, .page-contact .map-card, .page-body .program-panel{ position:relative; isolation:isolate; } .page-home .hero::after, .page-diagnostic .diag-card.aiscan::after, .page-laser .vectus-show::after, .page-cosmetology .flag-combo-wide::after, .page-contact .map-card::after, .page-body .program-panel::after{ content:""; position:absolute; inset:-6%; z-index:-1; pointer-events:none; opacity:.6; animation:cineLight 32s ease-in-out infinite alternate; will-change:transform; /* базовый тёплый премиальный свет (home) */ background: radial-gradient(46% 40% at 26% 22%, rgba(255,238,196,.16), transparent 72%), radial-gradient(38% 44% at 82% 78%, rgba(216,177,94,.13), transparent 74%); } /* AI Beauty Lab — прохладнее (лабораторный тон), но мягко */ .page-diagnostic .diag-card.aiscan::after{ background: radial-gradient(44% 42% at 24% 20%, rgba(210,224,235,.12), transparent 72%), radial-gradient(40% 46% at 80% 80%, rgba(216,177,94,.11), transparent 74%); } /* VECTUS Room — чисто-клиническая нейтраль */ .page-laser .vectus-show::after{ background: radial-gradient(46% 42% at 22% 24%, rgba(232,236,240,.12), transparent 72%), radial-gradient(38% 44% at 82% 76%, rgba(216,177,94,.12), transparent 74%); } /* Sciton Skin Lab — тёплое сияние кожи */ .page-cosmetology .flag-combo-wide::after{ background: radial-gradient(46% 42% at 24% 22%, rgba(255,232,196,.17), transparent 72%), radial-gradient(40% 46% at 80% 80%, rgba(216,177,94,.14), transparent 74%); } /* Contact — спокойная точка записи, ещё деликатнее */ .page-contact .map-card::after{ opacity:.38; } /* Body Sculpt 3×1 — тёплое сияние кожи и тканей (в тон Sciton Skin Lab) */ .page-body .program-panel::after{ background: radial-gradient(46% 42% at 24% 22%, rgba(255,232,196,.17), transparent 72%), radial-gradient(40% 46% at 80% 80%, rgba(216,177,94,.14), transparent 74%); } @keyframes cineLight{ from{ transform:translate3d(-1.4%, 1%, 0) scale(1); } to{ transform:translate3d(1.4%, -1.4%, 0) scale(1.045); } } /* ----------------------------------------------------------------------------- B · SCENE REVEAL — сцены «проявляются» с лёгкой глубиной (translateY + micro scale + blur→0). Поверх существующего триггера .reveal.in, БЕЗ нового JS. Только desktop (на мобильном — без blur/лагов). ----------------------------------------------------------------------------- */ @media (hover:hover) and (pointer:fine){ .has-js .reveal{ transform:translateY(18px) scale(.99); filter:blur(3px); transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1), filter .7s ease; } .has-js .reveal.in{ transform:none; filter:blur(0); } } /* ----------------------------------------------------------------------------- C · ГЛУБИНА ФЛАГМАНОВ (статичная, «в пространстве») + desktop hover glow/lift. Не на всех карточках — только ключевые сцены/флагманы. ----------------------------------------------------------------------------- */ .page-home .feat-card.gold, .page-cosmetology .flag-combo-wide, .page-laser .vectus-show, .page-diagnostic .report, .page-diagnostic .ai-share-card, .page-body .program-panel{ box-shadow:var(--cine-depth); } @media (hover:hover) and (pointer:fine){ .feat-card, .svc-card.feature, .flag-card, .choose-card{ transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; } .feat-card:hover, .svc-card.feature:hover, .flag-card:hover, .choose-card:hover{ transform:translateY(-3px); box-shadow:var(--cine-depth-soft), 0 0 0 1px rgba(197,154,70,.26); border-color:var(--gold-soft); } } /* ----------------------------------------------------------------------------- D · WhatsApp CTA — мягкое дыхание + деликатный тёплый glow (не кислотный). ----------------------------------------------------------------------------- */ @keyframes cineWaBreath{ 0%, 100%{ box-shadow:0 12px 26px rgba(31,171,84,.20); } 50%{ box-shadow:0 14px 30px rgba(31,171,84,.28), 0 0 20px rgba(31,171,84,.13); } } .btn-wa{ animation:cineWaBreath 4.6s ease-in-out infinite; } @media (hover:hover) and (pointer:fine){ .btn-wa{ transition:transform .2s ease, box-shadow .3s ease; } .btn-wa:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(31,171,84,.30), 0 0 24px rgba(31,171,84,.16); } } /* ----------------------------------------------------------------------------- E · /diagnostic/ — ГЛАВНАЯ СЦЕНА. Драматургия: прохладный анализ → тёплая запись. Результат живее и читабельнее, «С чего начать» — визуальный якорь, share-card — мягкая кульминация. Движение НЕ мешает чтению длинного текста. ----------------------------------------------------------------------------- */ /* Результат появляется кинематографично (одноразово). */ .page-diagnostic .report{ animation:cineRiseIn .6s cubic-bezier(.22,.61,.36,1) both; } @keyframes cineRiseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } /* «С чего начать» — якорь: сильнее глубина + тёплое кольцо (без motion поверх текста). */ .page-diagnostic .rep-primary{ box-shadow:0 14px 34px rgba(151,112,52,.12), 0 0 0 1px rgba(197,154,70,.20); } /* Share-card — тёплая кульминация: мягкий premium-пульс тени. */ .page-diagnostic .ai-share-card{ animation:cineShareGlow 5s ease-in-out infinite; } @keyframes cineShareGlow{ 0%, 100%{ box-shadow:var(--cine-depth); } 50%{ box-shadow:0 34px 64px -28px rgba(60,40,10,.40), 0 0 26px rgba(216,177,94,.14); } } /* ----------------------------------------------------------------------------- F · /laser/ — VECTUS Room: точная клиника, живая карточка цены (без логики). ----------------------------------------------------------------------------- */ .page-laser .recommendation, .page-laser .calc-result{ animation:cineRiseIn .5s ease both; } @media (hover:hover) and (pointer:fine){ .page-laser .seg-btn, .page-laser .pkg-card{ transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease; } .page-laser .pkg-card:hover{ transform:translateY(-2px); box-shadow:var(--cine-depth-soft); } } /* ----------------------------------------------------------------------------- G · /cosmetology/ — Sciton Skin Lab: флагманы «живее», без «золота ради золота». ----------------------------------------------------------------------------- */ @media (hover:hover) and (pointer:fine){ .page-cosmetology .sciton{ transition:box-shadow .35s ease; } .page-cosmetology .sciton:hover{ box-shadow:var(--cine-depth-soft), 0 0 0 1px rgba(197,154,70,.22); } } /* ----------------------------------------------------------------------------- H · /injections/ — Doctor Room: ПОЧТИ без motion. Только статичная глубина фото + desktop hover. Медицинское доверие важнее эффектов. Ambient здесь НЕТ. ----------------------------------------------------------------------------- */ .page-injections .doctor, .page-injections .doc-mark--photo, .page-injections .work-tile--photo{ box-shadow:var(--cine-depth-soft); } @media (hover:hover) and (pointer:fine){ .page-injections .doc-mark--photo, .page-injections .work-tile--photo{ transition:transform .4s ease, box-shadow .4s ease; } .page-injections .work-tile--photo:hover{ transform:translateY(-2px); box-shadow:var(--cine-depth); } .page-injections .doc-mark--photo:hover{ box-shadow:var(--cine-depth); } } /* ----------------------------------------------------------------------------- I · /contact/ — спокойная точка записи: деликатный свет (A) + мягкая реакция. ----------------------------------------------------------------------------- */ @media (hover:hover) and (pointer:fine){ .page-contact .map-card{ transition:box-shadow .35s ease; } .page-contact .map-card:hover{ box-shadow:var(--cine-depth-soft); } } /* ----------------------------------------------------------------------------- MOBILE — свет тише/медленнее, hover уже выключен, blur на reveal не применяется. Bottom-bar не затрагиваем. ----------------------------------------------------------------------------- */ @media (max-width:560px){ .page-home .hero::after, .page-diagnostic .diag-card.aiscan::after, .page-laser .vectus-show::after, .page-cosmetology .flag-combo-wide::after, .page-contact .map-card::after, .page-body .program-panel::after{ opacity:.36; animation-duration:44s; } } /* ----------------------------------------------------------------------------- REDUCED MOTION — выключаем почти всё; ничего не остаётся размытым/скрытым. ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .page-home .hero::after, .page-diagnostic .diag-card.aiscan::after, .page-laser .vectus-show::after, .page-cosmetology .flag-combo-wide::after, .page-contact .map-card::after, .page-body .program-panel::after{ animation:none; } .btn-wa{ animation:none; } .page-diagnostic .ai-share-card{ animation:none; } .page-diagnostic .report, .page-laser .recommendation, .page-laser .calc-result{ animation:none; } .has-js .reveal{ transform:none; filter:none; } }