/* ============================================================ ARTVAN GROUP — Preloader «ТРАСУВАННЯ / SETTING-OUT» v1.0 · DeVolaris GROUP Namespace: .avp-* (конфліктів з основними стилями немає) ============================================================ */ .avp { --avp-bg: #0C0C0C; --avp-bg-2: #161616; --avp-red: #E0433B; --avp-line: rgba(255, 255, 255, .10); /* тайминг-сітка сценарію */ --avp-t-axes: .35s; /* осьові лінії */ --avp-t-mark: 1.05s; /* обвід знака */ --avp-d-mark: .20s; --avp-t-flood: .55s; /* діагональна заливка */ --avp-d-flood: 1.15s; --avp-t-exit: .75s; position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vh, 54px); background: var(--avp-bg); background-image: radial-gradient(120% 90% at 50% 45%, var(--avp-bg-2) 0%, var(--avp-bg) 62%); will-change: clip-path, opacity; } /* показуємо лише коли інлайновий скрипт у дозволив (перший захід за сесію); без JS атрибута немає — прелоадер не з'являється зовсім */ html:not([data-avp="1"]) .avp { display: none !important; } /* блокування скролу, поки прелоадер активний */ html.avp-lock, html.avp-lock body { overflow: hidden; } /* ---------- осьові лінії (розмітка на об'єкті) ---------- */ .avp-axes { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); pointer-events: none; } .avp-axes::before, .avp-axes::after { content: ""; position: absolute; background: var(--avp-red); opacity: .18; } .avp-axes::before { /* горизонталь */ left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(0); animation: avpAxisX var(--avp-t-axes) .05s cubic-bezier(.22,.61,.36,1) forwards; } .avp-axes::after { /* вертикаль */ top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(0); animation: avpAxisY var(--avp-t-axes) .12s cubic-bezier(.22,.61,.36,1) forwards; } /* ---------- сцена з логотипом ---------- */ .avp-stage { position: relative; width: min(58vw, 560px); } .avp-logo { display: block; width: 100%; height: auto; overflow: visible; } /* — знак: обвід — */ .avp-mark__line { fill: none; stroke: var(--avp-red); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: avpDraw var(--avp-t-mark) var(--avp-d-mark) cubic-bezier(.62,.02,.34,1) forwards, avpOut .40s 1.32s ease-out forwards; } /* — знак: «лазерна головка», що веде лінію — */ .avp-mark__head { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1.1 98.9; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 5px rgba(224,67,59,.95)) drop-shadow(0 0 18px rgba(224,67,59,.55)); animation: avpHead var(--avp-t-mark) var(--avp-d-mark) cubic-bezier(.62,.02,.34,1) forwards; } /* — знак: заливка, що «вливається» під 45° — */ .avp-mark__fill { fill: var(--avp-red); stroke: none; } .avp-flood { transform: translateY(600px); animation: avpFlood var(--avp-t-flood) var(--avp-d-flood) cubic-bezier(.5,0,.18,1) forwards; } /* — літери: обвід + заливка — */ .avp-glyph__line { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .85; animation: avpDraw .55s var(--d) ease-out forwards, avpOut .30s calc(var(--d) + .58s) linear forwards; } .avp-glyph__fill { fill: #fff; opacity: 0; animation: avpIn .34s calc(var(--d) + .44s) ease-out forwards; } /* — дескриптор BY KUZNIETSOV — */ .avp-tag { fill: #fff; opacity: 0; animation: avpIn .45s 1.82s ease-out forwards; } /* ---------- індикатор ---------- */ .avp-meter { width: min(58vw, 560px); opacity: 0; animation: avpIn .4s .45s ease-out forwards; } .avp-meter__track { position: relative; height: 1px; background: var(--avp-line); overflow: hidden; } .avp-meter__bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--avp-red); transition: width .35s cubic-bezier(.22,.61,.36,1); } .avp-meter__row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; } .avp-meter__label { font-family: "Inter", system-ui, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.34); } .avp-meter__num { font-family: "Bebas Neue", "Inter", sans-serif; font-size: 20px; line-height: 1; letter-spacing: .06em; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; } .avp-meter__num sup { font-size: .5em; margin-left: .18em; color: var(--avp-red); top: -.55em; position: relative; } /* ---------- вихід: діагональне зняття під 45° ---------- */ .avp { clip-path: polygon(-45% 0, 100% 0, 100% 100%, 0 100%); transition: clip-path var(--avp-t-exit) cubic-bezier(.76,0,.24,1); } .avp.is-hiding { clip-path: polygon(100% 0, 100% 0, 145% 100%, 145% 100%); } .avp.is-hiding .avp-stage, .avp.is-hiding .avp-meter { transform: translateY(-14px); opacity: 0; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease-out; } .avp.is-hiding .avp-axes { opacity: 0; transition: opacity .3s ease-out; } .avp.is-gone { display: none; } /* ---------- keyframes ---------- */ @keyframes avpDraw { to { stroke-dashoffset: 0; } } @keyframes avpHead { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes avpFlood { to { transform: translateY(-520px); } } @keyframes avpIn { to { opacity: 1; } } @keyframes avpOut { to { opacity: 0; } } @keyframes avpAxisX { to { transform: scaleX(1); } } @keyframes avpAxisY { to { transform: scaleY(1); } } /* ---------- адаптив ---------- */ @media (max-width: 1100px) { .avp-stage, .avp-meter { width: min(64vw, 500px); } } @media (max-width: 900px) { .avp-stage, .avp-meter { width: min(74vw, 460px); } } /* вертикальний lockup: знак над написом (вмикається класом .avp--stack) */ .avp--stack .avp-stage { width: min(56vw, 300px); } .avp--stack .avp-meter { width: min(72vw, 380px); } .avp--stack .avp-mark__line { stroke-width: 3.4; } .avp--stack .avp-glyph__line { stroke-width: 2.1; } @media (max-width: 480px) { .avp--stack .avp-stage { width: 62vw; } .avp--stack .avp-meter { width: 82vw; } .avp-meter__label { font-size: 9px; letter-spacing: .22em; } .avp-meter__num { font-size: 17px; } } @media (max-width: 400px) { .avp { gap: 30px; } .avp--stack .avp-stage { width: 66vw; } .avp--stack .avp-meter { width: 86vw; } } /* ---------- зменшена анімація ---------- */ @media (prefers-reduced-motion: reduce) { .avp-mark__line, .avp-mark__head, .avp-glyph__line { display: none; } .avp-flood { transform: none; animation: none; } .avp-mark__fill { mask: none; } .avp-glyph__fill, .avp-tag, .avp-meter { opacity: 1; animation: none; } .avp-axes::before { transform: scaleX(1); animation: none; } .avp-axes::after { transform: scaleY(1); animation: none; } .avp { transition: opacity .3s linear; clip-path: none; } .avp.is-hiding { opacity: 0; clip-path: none; } .avp.is-hiding .avp-stage, .avp.is-hiding .avp-meter { transform: none; } }