/* ============================================================ 3D-прелоадер: презентація кейсів у просторі Підключається в перед style.css, щоб оверлей перекривав сторінку ще до першого кадру (без спалаху контенту). ============================================================ */ :root { --pl-bg: #f5f5f5; --pl-ink: #000000; --pl-accent: #f85533; } /* Блокування скролу, поки працює прелоадер */ html.pl-active, html.pl-active body { overflow: hidden; height: 100%; overscroll-behavior: none; } /* Головний контент прихований до завершення прелоадера, щоб не було ані спалаху, ані layout shift. visibility (а не display) зберігає розкладку — тому shift неможливий. */ html.pl-active body > *:not(.pl) { visibility: hidden; } /* Момент відкриття: завіса їде вгору, а сайт під нею вже готовий */ html.pl-revealing body > *:not(.pl) { visibility: visible; } /* Прелоадер існує в розмітці, але показується лише коли активний — якщо його вже бачили в цій сесії, він не блимне */ .pl { display: none; position: fixed; inset: 0; z-index: 9999; background-color: var(--pl-bg); overflow: hidden; /* Прелоадер керує власним рухом — GSAP анімує transform */ will-change: transform; } html.pl-active .pl { display: block; } .pl__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ---------- дрібна типографіка: лічильник і назва кейсу ---------- */ .pl__meta { position: absolute; left: 2rem; bottom: 2rem; z-index: 3; display: flex; align-items: baseline; gap: 1rem; color: var(--pl-ink); opacity: 0; pointer-events: none; } .pl__counter { font-family: Jetbrainsmono, ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .pl__counter b { font-weight: 500; } .pl__counter span, .pl__counter i { opacity: 0.4; font-style: normal; } .pl__title { font-family: Inter, Arial, sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.55; overflow: hidden; white-space: nowrap; } /* Тонка лінія-прогрес під метаданими */ .pl__progress { position: absolute; left: 2rem; right: 2rem; bottom: 1.5rem; height: 1px; background-color: rgba(0, 0, 0, 0.1); z-index: 3; opacity: 0; transform-origin: left center; } .pl__progress i { display: block; height: 100%; width: 100%; background-color: var(--pl-ink); transform: scaleX(0); transform-origin: left center; } /* ---------- фінальний логотип ---------- */ .pl__brand { position: absolute; inset: 0; z-index: 4; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 1.5rem; pointer-events: none; opacity: 0; } /* Логотип через CSS-маску: колір керується background-color, тож той самий файл працює і на темній картці, і на світлому фоні */ .pl__logo { width: 5.5rem; height: 5.5rem; background-color: #ffffff; -webkit-mask: url("../images/logo.svg") center / contain no-repeat; mask: url("../images/logo.svg") center / contain no-repeat; opacity: 0; transform: scale(0.94); filter: blur(10px); } .pl__tagline { font-family: Inter, Arial, sans-serif; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.01em; text-align: center; color: #ffffff; max-width: 18rem; opacity: 0; /* mask reveal знизу вгору */ clip-path: inset(0 0 100% 0); } /* ---------- зерно ---------- */ .pl__grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* Делікатна віньєтка — тримає увагу в центрі */ .pl__vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.06) 100%); } /* ---------- CSS-fallback (без WebGL / слабкий пристрій) ---------- */ .pl__fallback { position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: center; perspective: 1400px; } .pl--fallback .pl__fallback { display: flex; } .pl--fallback .pl__canvas { display: none; } /* У fallback бренд-блок лягає на світлий фон */ .pl--fallback .pl__tagline { color: var(--pl-ink); } .pl__fb-stage { position: relative; width: min(46vw, 22rem); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-16deg); } .pl__fb-card { position: absolute; inset: 0; background-color: #e8e8e8; background-size: cover; background-position: center; opacity: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); } @media (max-width: 767px) { .pl__meta { left: 1.25rem; bottom: 1.5rem; gap: 0.75rem; } .pl__progress { left: 1.25rem; right: 1.25rem; bottom: 1.125rem; } .pl__logo { width: 4.5rem; height: 4.5rem; } .pl__title { max-width: 45vw; text-overflow: ellipsis; } } /* ---------- reduced motion: тільки логотип, без 3D ---------- */ @media (prefers-reduced-motion: reduce) { .pl__canvas, .pl__fallback, .pl__meta, .pl__progress, .pl__vignette { display: none !important; } .pl__logo { background-color: var(--pl-ink); filter: none; } .pl__tagline { color: var(--pl-ink); } }