/* ============================================================================ ТМ «Потолочник» — Cinematic Preloader ---------------------------------------------------------------------------- Це СКОМПІЛЬОВАНИЙ файл, який реально вантажить сторінка (у проєкті немає SCSS-пайплайна). Авторське джерело — site/scss/Preloader.scss. Правити варто там і переносити зміни сюди, або редагувати напряму цей файл. Принцип: логотип НЕ перемальовується. Ми беремо справжній images/logo-light.png у трьох ідентичних копіях, кожна обрізана clip-path до своєї зони (трикутний знак / слово ПОТОЛОЧНИК / підпис). Об'єднання трьох зон = цілий логотип піксель-в-піксель. Кожну зону можна відкривати світлом окремо. Усе рухоме — transform / opacity / clip-path (GPU). Жодних layout-властивостей в анімації. Ціль — стабільні 60fps. ============================================================================ */ /* Токени прелоадера. Зони логотипа винесені у змінні — це єдина точка правди для геометрії обрізки, якщо колись зміниться сам файл логотипа. */ :root { --pre-bg: #0a0a0b; /* майже-чорний графіт — тло-плівка */ --pre-graphite: #1a1b1e; /* важкі панелі */ --pre-graphite2: #2b2d31; --pre-yellow: #ffc61a; /* премій-жовтий (акцент/світло) */ --pre-warm: #ffe7a3; /* тепле світло-highlight */ /* Геометрія логотипа 760×234. Зони (inset: top right bottom left): ЗНАК — ліва колонка на всю висоту → right 77% СЛОВО — права частина, верх → left 23%, bottom 26% ПІДПИС — права частина, низ → left 23%, top 74% */ --pre-icon-r: 77%; --pre-word-l: 23%; --pre-word-b: 26%; --pre-sub-l: 23%; --pre-sub-t: 74%; /* Розмір логотипа на сцені прелоадера. */ --pre-logo-w: min(52vw, 560px); } /* ---- Активація без FOUC --------------------------------------------------- Оверлей за замовчуванням ПРИХОВАНИЙ. Клас .tm-pre-on ставить інлайн-скрипт у синхронно, ще до першого малювання, — але лише якщо працює JS. Тож при вимкненому JS прелоадер не існує і сайт одразу доступний (принцип «контент ніколи не залежить від JS, щоб бути видимим»). */ .tm-pre { opacity: 0; visibility: hidden; } html.tm-pre-on .tm-pre { opacity: 1; visibility: visible; } /* Поки прелоадер активний — блокуємо прокрутку сторінки під ним. */ html.tm-pre-lock, html.tm-pre-lock body { overflow: hidden; height: 100%; } .tm-pre { position: fixed; inset: 0; z-index: 99999; background: var(--pre-bg); display: grid; place-items: center; overflow: hidden; /* Плавне зникнення оверлея наприкінці робить GSAP; це резерв. */ will-change: opacity; -webkit-font-smoothing: antialiased; contain: strict; } .tm-pre.is-done { pointer-events: none; } /* ---- Плівкове зерно (canvas малює JS) ------------------------------------ */ .tm-pre__grain { position: absolute; inset: -2%; width: 104%; height: 104%; opacity: .05; mix-blend-mode: screen; pointer-events: none; } /* ---- М'яка віньєтка ------------------------------------------------------- */ .tm-pre__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 46%, transparent 42%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.62) 100%); } /* ---- Тепле амбієнтне світло (ледь дихає) --------------------------------- */ .tm-pre__ambient { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 50%; pointer-events: none; transform: translate(-58%, -50%); background: radial-gradient(closest-side, rgba(255,198,26,.14), rgba(255,198,26,.05) 45%, transparent 72%); filter: blur(4px); opacity: 0; /* GSAP підіймає у Фазі 1 */ will-change: opacity, transform; } /* ---- Сцена --------------------------------------------------------------- */ .tm-pre__stage { position: relative; width: var(--pre-logo-w); aspect-ratio: 760 / 234; display: grid; place-items: center; transform: translateZ(0); will-change: transform; } /* ---- Графітові архітектурні панелі (глибина за логотипом) ----------------- */ .tm-pre__panels { position: absolute; inset: -40% -30%; pointer-events: none; } .tm-pre__panel { position: absolute; background: linear-gradient(135deg, var(--pre-graphite2), var(--pre-graphite) 70%); box-shadow: 0 30px 80px rgba(0,0,0,.55); opacity: 0; /* GSAP керує появою у Фазі 3 */ will-change: transform, opacity; backface-visibility: hidden; } /* Три «шарди»-трикутники різної глибини. Позиції — за знаком, ліворуч. */ .tm-pre__panel--1 { left: -6%; top: 4%; width: 46%; height: 92%; clip-path: polygon(0 0, 100% 22%, 62% 100%, 0 78%); } .tm-pre__panel--2 { left: 2%; top: -8%; width: 34%; height: 116%; clip-path: polygon(0 12%, 100% 0, 78% 100%, 10% 88%); opacity: 0; } .tm-pre__panel--3 { right: 6%; top: 8%; width: 40%; height: 84%; clip-path: polygon(14% 0, 100% 18%, 86% 100%, 0 74%); } /* ---- Логотип (три обрізані копії одного файлу) --------------------------- */ .tm-pre__logo { position: relative; width: 100%; height: 100%; transform-origin: center center; will-change: transform, opacity; } .tm-pre__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; will-change: clip-path, filter, opacity, transform; } /* Стартові (приховані) стани зон — лише коли прелоадер увімкнено. GSAP розкриває clip-path зліва направо. */ html.tm-pre-on .tm-pre__layer--icon { clip-path: inset(0 100% 0 0); } html.tm-pre-on .tm-pre__layer--word { clip-path: inset(0 100% var(--pre-word-b) var(--pre-word-l)); filter: blur(5px); } html.tm-pre-on .tm-pre__layer--sub { clip-path: inset(var(--pre-sub-t) 100% 0 var(--pre-sub-l)); } /* ---- Світлова смуга, що «проявляє» матеріал ------------------------------ */ .tm-pre__light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,231,163,.0) 43%, rgba(255,244,214,.62) 50%, rgba(255,198,26,.0) 57%, transparent 66%); transform: translateX(-60%); will-change: transform, opacity; } .tm-pre__light--icon { clip-path: inset(0 var(--pre-icon-r) 0 0); } .tm-pre__light--word { clip-path: inset(0 0 var(--pre-word-b) var(--pre-word-l)); } /* М'яке жовте світіння під підписом (Фаза 6) — вмикає GSAP. */ .tm-pre__glow { position: absolute; left: var(--pre-sub-l); right: 0; top: var(--pre-sub-t); bottom: 0; pointer-events: none; background: radial-gradient(60% 160% at 50% 50%, rgba(255,198,26,.22), transparent 70%); filter: blur(6px); opacity: 0; will-change: opacity; } /* ---- Доступність / щадний рух -------------------------------------------- Якщо користувач просить менше руху — прелоадер не грає складну хореографію. JS покаже логотип миттєво і швидко прибере оверлей; тут лише страхуємо, щоб зони не лишились обрізаними. */ @media (prefers-reduced-motion: reduce) { html.tm-pre-on .tm-pre__layer--icon, html.tm-pre-on .tm-pre__layer--word, html.tm-pre-on .tm-pre__layer--sub { clip-path: inset(0 0 0 0); filter: none; } .tm-pre__grain { display: none; } }