/* Анімації. Приховані стани діють лише з класом .anim на <html>,
   який ставиться, тільки коли користувач не просив зменшити рух. */

/* --- Hero: лого збирається з частин --- */
.emblem .logo path, .emblem .logo g { transform-box: view-box; transform-origin: 50% 50%; }
.anim .emblem .logo .lg-arc-a { animation: arc-a 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; }
.anim .emblem .logo .lg-arc-b { animation: arc-b 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; }
.anim .emblem .logo .lg-r { animation: rise-in .7s cubic-bezier(.2, .9, .25, 1.15) .75s both; }
.anim .emblem .logo .lg-w { animation: rise-in .7s cubic-bezier(.2, .9, .25, 1.15) .87s both; }
.anim .emblem .logo .lg-studio path { animation: drop-in .45s cubic-bezier(.2, .9, .25, 1.3) both; animation-delay: calc(1.05s + var(--k) * 70ms); }
@keyframes arc-a { from { opacity: 0; transform: rotate(-120deg) scale(.92); } 30% { opacity: 1; } }
@keyframes arc-b { from { opacity: 0; transform: rotate(120deg) scale(.92); } 30% { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18%); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14%); } }

.anim .emblem .orbit-wrap { animation: orbit-in 1.4s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes orbit-in { from { opacity: 0; transform: scale(.86) rotate(-40deg); } }

.emblem { transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.emblem .orbit-wrap { position: absolute; inset: 0; }

/* --- Hero: заголовок піднімається по словах --- */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .w > span { display: inline-block; }
.anim .hero h1 .w > span { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i) * .07s); }
@keyframes rise { from { transform: translateY(105%); } }

.anim .hero .eyebrow,
.anim .hero .lede,
.anim .hero .cta { animation: fade-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.anim .hero .eyebrow { animation-delay: .05s; }
.anim .hero .lede { animation-delay: .55s; }
.anim .hero .cta { animation-delay: .7s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }

/* --- Біжучий рядок платформ --- */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.ticker-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 18px 14px; }
.ticker li { display: flex; align-items: center; gap: 28px; font: 500 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ticker li::after { content: ""; width: 7px; height: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Поява блоків при скролі --- */
.anim .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.anim .reveal.in { opacity: 1; transform: none; }

/* Кроки процесу: лінія прокреслюється зліва направо */
.anim .step { border-top-color: transparent; }
.anim .step::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.anim .step.in::after { transform: scaleX(1); }

/* --- Картки проєктів: 3D-нахил і відблиск за курсором --- */
.case { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .8s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; will-change: transform; }
.case.tilting { transition: transform .12s linear, opacity .8s, box-shadow .4s; }
.case:hover { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 35%, transparent); }
.case .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 45%); }
.case:hover .shot::after { opacity: 1; }
.anim .case.reveal:not(.in) { transform: translateY(28px); }

/* --- Кнопки: заливка "з'їжджає" зі зрізаного кута --- */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translate(101%, -101%); transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
.btn:hover { background: transparent; }
.btn:hover::before { transform: none; }
.btn.primary:hover { background: var(--accent); }
.btn .arr { display: inline-block; transition: transform .3s; }
.btn:hover .arr { transform: translateX(4px); }

/* --- Шапка стискається після скролу --- */
.top .wrap { transition: height .3s; }
.top.compact .wrap { height: 56px; }
.top.compact { box-shadow: 0 8px 30px -20px color-mix(in srgb, var(--ink) 40%, transparent); }

/* --- Цифри: акцентна риска під числом малюється при підрахунку --- */
.stat b { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker ul[aria-hidden] { display: none; }
  .case { transform: none !important; }
}

/* Після появи картка знову слухається нахилу */
.anim .case.reveal.in { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* Діагональ зрізаного кута на контурній кнопці */
.btn:not(.primary)::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--cut); height: var(--cut); pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
@media (max-width: 900px) { .emblem { width: min(100%, 260px); } }