/* ============================================================ CINEMA — кинематографический скролл-перехват (интро главной) Изолирован под #cinema. Оверлей поверх страницы; после прохода/скипа РЕЛИЗ → снимается перехват, страница скроллится. Палитра/шрифты синхронны сайту (Tenor Sans + Manrope, эспрессо). ============================================================ */ #cinema{ --c-scene:#15120E; --c-ivory:#F1EFEC; --c-dim:#ADA9A2; --c-accent:#CFCCC6; /* нейтральный монохром (тёплое золото убрано) */ --c-serif:"Oswald", "Roboto Condensed", system-ui, sans-serif; --c-sans:"Manrope", system-ui, sans-serif; /* синхр. с сайтом: узкий гротеск */ --c-ease:cubic-bezier(.65,0,.35,1); --c-lb:0px; position:fixed; inset:0; z-index:2000; background:var(--c-scene); height:100vh; height:100dvh; /* dvh: слой = ВИДИМАЯ область (учёт моб. адрес-бара) */ overflow:hidden; color:var(--c-ivory); font-family:var(--c-sans); -webkit-font-smoothing:antialiased; opacity:1; transition:opacity .8s var(--c-ease); display:none; /* показывается только при html.cinema-on (гейт в , без мигания) */ } html.cinema-on #cinema{ display:block; } /* лоадер: пока оба видео не скачались — тёмный экран + спиннер (никаких контент-анимаций до загрузки) */ #cinema .cin-loader{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--c-scene); transition:opacity .55s var(--c-ease); } #cinema .cin-loader--gone{ opacity:0; pointer-events:none; } #cinema .cin-loader__spin{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(243,236,219,.18); border-top-color:var(--c-accent); animation:cin-spin .9s linear infinite; } #cinema .cin-loader__pct{ color:var(--c-dim); font-size:.74rem; letter-spacing:.22em; font-variant-numeric:tabular-nums; } @keyframes cin-spin{ to{ transform:rotate(360deg); } } /* пока интро активно — гасим нативный скролл страницы под ним (класс ставит head-скрипт) */ html.cinema-lock, html.cinema-lock body{ overflow:hidden; height:100vh; height:100dvh; overscroll-behavior:none; } /* релиз: оверлей исчезает и убирается из потока */ #cinema.cinema-done{ opacity:0; pointer-events:none; } /* ---- видео-слой + панорамность (медленный Ken Burns) ---- */ #cinema .cin-bg{ position:absolute; inset:-4%; will-change:transform; /* overscan под пан — без чёрных краёв */ animation:cin-pan 28s ease-out both; } @keyframes cin-pan{ from{ transform:scale(1.03) translate(0,0); } to{ transform:scale(1.1) translate(-1.6%,-1%); } } #cinema .cin-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .7s var(--c-ease); will-change:opacity; } #cinema .cin-vid--2{ opacity:0; } #cinema.is-orbit .cin-vid--1{ opacity:0; } #cinema.is-orbit .cin-vid--2{ opacity:1; } #cinema canvas.cin-xfade{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:2; pointer-events:none; will-change:opacity; } /* ---- грейд: «стеклянный» кинематографичный вид — заметное затемнение + панорама + блик ---- */ #cinema .cin-grade{ position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(rgba(9,8,5,.26), rgba(9,8,5,.26)), /* общий затемнитель ~26% */ linear-gradient(180deg, rgba(6,5,3,.55) 0%, rgba(6,5,3,.06) 38%, rgba(6,5,3,.06) 60%, rgba(6,5,3,.58) 100%), /* ПАНОРАМА: тёмные верх/низ, светлая середина */ linear-gradient(118deg, rgba(214,230,255,.09) 0%, rgba(214,230,255,0) 24%, rgba(214,230,255,0) 68%, rgba(214,230,255,.06) 100%), /* стеклянный блик по диагонали (заметный) */ radial-gradient(145% 130% at 50% 42%, rgba(6,5,3,0) 46%, rgba(6,5,3,.52) 100%), /* виньетка сильнее */ linear-gradient(180deg, rgba(6,5,3,.42) 0%, rgba(6,5,3,0) 24%, rgba(6,5,3,0) 52%, rgba(6,5,3,.72) 100%); } /* низ под текст */ /* чёрных анаморф-полос сверху/снизу НЕТ (убрано по фидбеку) */ /* ---- слои контента ---- */ #cinema .cin-layer{ position:absolute; inset:0; z-index:7; pointer-events:none; } /* HERO */ #cinema .cin-hero{ display:flex; align-items:flex-end; padding:0 clamp(20px,5vw,76px) clamp(72px,14vh,140px); } #cinema .cin-hero__in{ max-width:22ch; } #cinema .cin-eyebrow{ font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; font-weight:600; color:var(--c-accent); } #cinema .cin-hero .cin-h1{ font-family:var(--c-serif); font-weight:300; line-height:1.02; letter-spacing:.04em; text-transform:uppercase; font-size:clamp(2.4rem,7vw,5.4rem); color:var(--c-ivory); margin:.55rem 0 0; text-shadow:0 1px 2px rgba(12,9,6,.92), 0 3px 22px rgba(12,9,6,.72), 0 6px 48px rgba(12,9,6,.5); } #cinema .cin-hero .cin-h1 em{ font-style:normal; color:var(--c-accent); } #cinema .cin-hero p{ margin-top:20px; max-width:44ch; color:var(--c-ivory); font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.6; text-shadow:0 1px 3px rgba(12,9,6,.92), 0 2px 16px rgba(12,9,6,.8); } /* ===== PER-WORD заход (как motion-primitives TextEffect: blur+подъём, стаггер). Слова БЕЗ opacity → текст не залипает невидимым; opacity держит контейнер. ===== */ #cinema .cin-word{ display:inline-block; white-space:pre; transform:translateY(12px); filter:blur(8px); transition:transform .5s var(--c-ease), filter .5s var(--c-ease); } #cinema .cin-word--em{ color:var(--c-accent); } #cinema .cin-block.show .cin-word, #cinema.hero-in .cin-hero__in .cin-word, #cinema .cin-outro.show .cin-word{ transform:none; filter:blur(0); } /* hero стаггер (по строкам + индексу слова) */ #cinema.hero-in .cin-hero__in > *:nth-child(1) .cin-word{ transition-delay:calc(var(--wi)*.03s); } #cinema.hero-in .cin-hero__in > *:nth-child(2) .cin-word{ transition-delay:calc(.14s + var(--wi)*.05s); } #cinema.hero-in .cin-hero__in > *:nth-child(3) .cin-word{ transition-delay:calc(.5s + var(--wi)*.03s); } /* outro стаггер */ #cinema .cin-outro.show .cin-eyebrow .cin-word{ transition-delay:calc(var(--wi)*.03s); } #cinema .cin-outro.show h2 .cin-word{ transition-delay:calc(.1s + var(--wi)*.045s); } /* ТЕКСТ-БЛОКИ — нижняя левая колонка */ #cinema .cin-block{ position:absolute; left:clamp(20px,5vw,76px); bottom:clamp(96px,17vh,168px); width:min(48vw,540px); z-index:7; /* НА поверхности — выше грейда (z2), иначе затемнение перекрывает текст */ opacity:0; transform:translateY(54px); pointer-events:none; /* эффект скролла: заезжает СНИЗУ, уходит ВВЕРХ */ transition:opacity .5s var(--c-ease), transform .55s var(--c-ease); } #cinema .cin-block > *{ position:relative; z-index:1; } /* текст выше скрима */ #cinema .cin-block::before{ content:""; position:absolute; z-index:0; pointer-events:none; /* растушёванный скрим под текстом — читаемо над ярким видео, без жёсткой рамки */ inset:-2rem -42% -3.4rem -13%; background:radial-gradient(135% 132% at 26% 55%, rgba(8,6,3,.40) 0%, rgba(8,6,3,.20) 42%, rgba(8,6,3,0) 74%); } /* лёгкая вуаль — белый текст читаем и без «чёрного фона», тяжёлый скрим убран */ #cinema .cin-block .rule{ width:0; height:2px; background:linear-gradient(90deg,var(--c-accent),transparent); margin-bottom:18px; } #cinema .cin-block .num{ font-family:var(--c-sans); font-weight:700; color:var(--c-dim); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 1px 3px rgba(8,6,3,.95), 0 2px 12px rgba(8,6,3,.85); } #cinema .cin-block h3{ font-family:var(--c-serif); font-weight:300; line-height:1.04; letter-spacing:.02em; text-transform:uppercase; font-size:clamp(1.9rem,4.8vw,3.4rem); margin:.5rem 0 1rem; color:var(--c-ivory); text-shadow:0 1px 2px rgba(8,6,3,.96), 0 2px 7px rgba(8,6,3,.88), 0 5px 30px rgba(8,6,3,.66); } #cinema .cin-block h3 em{ font-style:normal; color:var(--c-accent); } #cinema .cin-block p{ color:var(--c-ivory); font-size:1.05rem; line-height:1.6; max-width:42ch; text-shadow:0 1px 3px rgba(12,9,6,.92), 0 2px 16px rgba(12,9,6,.8); } #cinema .cin-block .specs{ display:flex; gap:clamp(18px,3vw,42px); margin-top:26px; flex-wrap:wrap; } #cinema .cin-block .specs div{ min-width:84px; } #cinema .cin-block .specs b{ display:block; font-family:var(--c-serif); font-weight:400; font-size:1.5rem; color:var(--c-ivory); text-shadow:0 1px 3px rgba(12,9,6,.92), 0 2px 16px rgba(12,9,6,.8); } #cinema .cin-block .specs span{ display:block; margin-top:4px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#D6CDBB; text-shadow:0 1px 3px rgba(12,9,6,.92), 0 2px 12px rgba(12,9,6,.8); } /* reveal блоков: opacity держит КОНТЕЙНЕР; строки заходят PER-WORD (см. .cin-word выше) со стаггером. */ #cinema .cin-block.show{ opacity:1; transform:none; pointer-events:auto; } #cinema .cin-block.show .rule{ width:64px; transition:width .8s var(--c-ease) .02s; } #cinema .cin-block.show .l1 .cin-word{ transition-delay:calc(var(--wi)*.028s); } #cinema .cin-block.show .l2 .cin-word{ transition-delay:calc(.10s + var(--wi)*.04s); } #cinema .cin-block.show .l3 .cin-word{ transition-delay:calc(.26s + var(--wi)*.028s); } /* specs — не разбиты на слова → заход блоком (transform+blur, без opacity) */ #cinema .cin-block .specs{ transform:translateY(22px); filter:blur(6px); transition:transform .5s var(--c-ease), filter .5s var(--c-ease); } #cinema .cin-block.show .specs{ transform:none; filter:blur(0); transition-delay:.24s; } /* уход — весь блок УЛЕТАЕТ ВВЕРХ (как страница листается) + гаснет */ #cinema .cin-block.out{ opacity:0; transform:translateY(-84px); transition-duration:.45s; } #cinema .cin-block.out .cin-word, #cinema .cin-block.out .specs{ transform:none; filter:blur(5px); transition-duration:.4s; transition-delay:0s; } /* OUTRO */ #cinema .cin-outro{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0 clamp(20px,5vw,60px); } #cinema .cin-outro__in{ position:relative; opacity:0; pointer-events:none; transform:translateY(26px); transition:opacity .8s var(--c-ease), transform .8s var(--c-ease); } #cinema .cin-outro__in > *{ position:relative; z-index:1; } /* текст/кнопка НАД скримом */ #cinema .cin-outro__in::before{ content:""; position:absolute; z-index:0; pointer-events:none; /* растушёванный скрим под центр-текстом */ inset:-3rem -14%; background:radial-gradient(58% 64% at 50% 48%, rgba(8,6,3,.8) 0%, rgba(8,6,3,.48) 46%, rgba(8,6,3,0) 78%); } #cinema .cin-outro.show .cin-outro__in{ opacity:1; pointer-events:auto; transform:none; } #cinema .cin-outro .cin-eyebrow{ display:block; text-shadow:0 1px 3px rgba(8,6,3,.9), 0 2px 12px rgba(8,6,3,.75); } #cinema .cin-outro h2{ font-family:var(--c-serif); font-weight:300; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.9rem,5vw,3.4rem); line-height:1.1; max-width:22ch; margin:.5rem auto 0; color:var(--c-ivory); text-shadow:0 1px 2px rgba(8,6,3,.95), 0 2px 8px rgba(8,6,3,.85), 0 5px 30px rgba(8,6,3,.6); } #cinema .cin-outro h2 em{ font-style:normal; color:var(--c-accent); } #cinema .cin-outro .cin-cta{ display:inline-block; margin-top:34px; padding:16px 40px; /* кликабельность гейтит .cin-outro.show .cin-outro__in{pointer-events:auto} */ background:linear-gradient(180deg,#FBF8F2 0%,#EEE8DC 100%); color:#1E1B17; text-decoration:none; border-radius:2px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; transition:background .4s var(--c-ease); } #cinema .cin-outro .cin-cta:hover{ background:#fff; } #cinema .cin-outro .cin-scrolltip{ display:block; margin-top:22px; color:var(--c-dim); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; } /* ---- HUD: рейка сцен + прогресс + подсказка + скип ---- */ #cinema .cin-rail{ position:absolute; right:clamp(18px,4vw,56px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:13px; z-index:8; } #cinema .cin-rail i{ width:2px; height:24px; background:rgba(243,236,219,.22); transition:background .5s, height .5s; } #cinema .cin-rail i.on{ background:var(--c-accent); height:32px; } #cinema .cin-progress{ position:absolute; left:0; top:0; height:2px; width:0; z-index:9; background:linear-gradient(90deg,var(--c-accent),#D8CBB2); transition:width .8s var(--c-ease); } #cinema .cin-hint{ position:absolute; left:50%; bottom:max(24px, env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:8; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--c-dim); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; transition:opacity .6s; } #cinema .cin-hint i{ width:1px; height:28px; background:linear-gradient(var(--c-accent),transparent); animation:cin-cue 2.2s var(--c-ease) infinite; } @keyframes cin-cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } #cinema.is-touched .cin-hint{ opacity:0; } #cinema .cin-skip{ position:absolute; right:clamp(18px,4vw,44px); top:24px; z-index:10; pointer-events:auto; background:rgba(243,236,219,.08); border:1px solid rgba(243,236,219,.28); color:var(--c-ivory); padding:9px 18px; border-radius:2px; font:inherit; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:background .3s, border-color .3s; } #cinema .cin-skip:hover{ background:rgba(243,236,219,.16); border-color:rgba(243,236,219,.5); } #cinema .cin-brand{ position:absolute; left:clamp(18px,4vw,44px); top:22px; z-index:10; font-family:var(--c-serif); letter-spacing:.14em; font-size:1rem; color:var(--c-ivory); } #cinema .cin-brand b{ color:var(--c-accent); } @media(max-width:760px){ #cinema .cin-block{ left:20px; right:20px; width:auto; bottom:calc(clamp(88px,15vh,132px) + env(safe-area-inset-bottom, 0px)); } #cinema .cin-rail{ display:none; } #cinema .cin-hero{ padding-bottom:calc(clamp(88px,16vh,132px) + env(safe-area-inset-bottom, 0px)); } /* мобила: важно качество → отключаем Ken Burns-апскейл (scale+overscan размывали кадр); видео в натуральном масштабе */ #cinema .cin-bg{ inset:0; animation:none; will-change:auto; } /* узкий экран: бренд и «Пропустить» не должны налезать друг на друга */ #cinema .cin-brand{ font-size:.9rem; top:20px; } #cinema .cin-skip{ top:16px; right:16px; padding:8px 13px; font-size:.62rem; letter-spacing:.14em; } }