/* ============================================================ DIGI — плавен преход между страници Два режима, автоматично: 1) http://localhost → нативни cross-document View Transitions 2) file:// или стар браузър → JS вариант (transitions.js слага клас .dg-js-nav на и поема прехода ръчно) ============================================================ */ /* ---------- 1) нативно (http, same-origin) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: dg-page-out .24s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: dg-page-in .38s cubic-bezier(.16, 1, .3, 1) both; } @keyframes dg-page-out { to { opacity: 0; transform: scale(.99); } } @keyframes dg-page-in { from { opacity: 0; transform: scale(1.008) translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- 2) JS вариант (file:// и браузъри без View Transitions) ---------- */ html.dg-js-nav { animation: dg-js-in .38s cubic-bezier(.16, 1, .3, 1) both; } html.dg-js-nav.dg-leaving { animation: dg-js-out .24s cubic-bezier(.4, 0, 1, 1) both; } @keyframes dg-js-in { from { opacity: 0; transform: scale(1.008) translateY(8px); } to { opacity: 1; transform: none; } } @keyframes dg-js-out { to { opacity: 0; transform: scale(.99); } } /* ---------- 3) DigiAI орбът: плейсхолдър, докато се зареди ---------- Орбът е WebGL canvas в iframe. Всяко зареждане на страница създава нов WebGL контекст и компилира шейдъри — това дава засичане точно докато тече преходът. Затова transitions.js му дава src чак СЛЕД прехода, а дотогава стои този статичен кръг (орбът е с черен фон, затова е тъмен). */ .th-sphere[data-src]{ background: radial-gradient(circle at 38% 32%, #2b3f7a 0%, #16204a 45%, #05070f 100%); box-shadow: inset 0 0 12px rgba(90, 150, 255, .35); } .th-sphere{ transition: opacity .45s ease; } .th-sphere.dg-orb-loading{ opacity: 0; } /* ---------- достъпност ---------- */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } html.dg-js-nav, html.dg-js-nav.dg-leaving { animation: none; } }