/* ===================================================================== INOVATIVA — Intro splash (po otevření titulky, 1× za relaci) --------------------------------------------------------------------- Samostatná komponenta. Vše s prefixem `ii-` a pod `#inv-intro`, aby nekolidovalo se šablonou Ohio (.grid/.bar/.dot/.status…). HTML vkládá assets/js/inovativa-intro.js. Font Nunito-inv je z inovativa-cookies.css (na titulce načtený); fallback systémový sans. ===================================================================== */ #inv-intro { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(125% 130% at 50% 42%, #16284f 0%, #0c1738 52%, #080d20 100%); font-family: 'Nunito-inv', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ii-accent-soft: #7FA6E6; } #inv-intro *, #inv-intro *::before, #inv-intro *::after { box-sizing: border-box; } #inv-intro.ii-done { animation: ii-splashFade .6s ease forwards; } @keyframes ii-splashFade { to { opacity: 0; visibility: hidden; } } /* OKAMŽITÝ tmavý překryv — zabrání probliknutí webu, než JS postaví splash. Třídu `inv-intro-pending` nastaví inline skript v (běží před vykreslením), intro JS ji po vložení splashe zase sundá. Pod splashem (#inv-intro z-index 99999). */ html.inv-intro-pending::before { content: ""; position: fixed; inset: 0; z-index: 99998; background: radial-gradient(125% 130% at 50% 42%, #16284f 0%, #0c1738 52%, #080d20 100%); } /* letící tečka (sdílený prvek splash → logo) */ #inv-flydot { position: fixed; left: 0; top: 0; border-radius: 50%; z-index: 100000; opacity: 0; pointer-events: none; background: linear-gradient(#2D80C9, #2A479E); will-change: transform; } /* ---------- ambientní vrstvy ---------- */ #inv-intro .ii-layer { position: absolute; inset: 0; pointer-events: none; } #inv-intro .ii-grid { background-image: radial-gradient(rgba(126,166,230,.16) 1.1px, transparent 1.2px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%); opacity: 0; animation: ii-gridIn 1.2s ease .1s forwards, ii-gridDrift 20s linear infinite; } @keyframes ii-gridIn { to { opacity: 1; } } @keyframes ii-gridDrift { from { background-position: 0 0; } to { background-position: 30px 30px; } } #inv-intro .ii-auras { opacity: 0; animation: ii-gridIn 1.4s ease .1s forwards; } #inv-intro .ii-aura { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; } #inv-intro .ii-a1 { width: 520px; height: 520px; left: 32%; top: 26%; background: radial-gradient(circle, #2f5cc0 0%, transparent 70%); animation: ii-drift1 16s ease-in-out infinite; } #inv-intro .ii-a2 { width: 440px; height: 440px; left: 52%; top: 40%; background: radial-gradient(circle, #1f86c8 0%, transparent 70%); animation: ii-drift2 19s ease-in-out infinite; } @keyframes ii-drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,-30px); } } @keyframes ii-drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-46px,28px); } } #inv-intro .ii-particles .ii-p { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #9cc6ff 0%, rgba(156,198,255,0) 70%); opacity: 0; } #inv-intro.ii-play .ii-particles .ii-p { animation: ii-rise var(--pt) linear var(--pd) infinite; } @keyframes ii-rise { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 10% { opacity: .9; } 90% { opacity: .6; } 100% { opacity: 0; transform: translateY(-160px) scale(1); } } /* ---------- centrální lockup ---------- */ #inv-intro .ii-stage { position: relative; display: flex; align-items: center; gap: 30px; z-index: 2; } #inv-intro .ii-sym { width: 140px; height: auto; display: block; overflow: visible; } #inv-intro .ii-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); } #inv-intro .ii-dot { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; } #inv-intro.ii-play .ii-b1 { animation: ii-grow .6s cubic-bezier(.2,.9,.3,1.3) 2.5s forwards; } #inv-intro.ii-play .ii-b2 { animation: ii-grow .6s cubic-bezier(.2,.9,.3,1.3) 2.65s forwards; } #inv-intro.ii-play .ii-b3 { animation: ii-grow .6s cubic-bezier(.2,.9,.3,1.3) 2.8s forwards; } @keyframes ii-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* tečka přilétne ZDOLA a doskočí na 3. sloupec */ #inv-intro.ii-play .ii-dot { animation: ii-riseHop .8s cubic-bezier(.25,.9,.3,1) 3.45s forwards; } @keyframes ii-riseHop { 0% { transform: translateY(42px) scale(.3); opacity: 0; } 35% { opacity: 1; } 52% { transform: translateY(-15px) scale(1.1); } 70% { transform: translateY(0) scale(1); } 84% { transform: translateY(-6px) scale(1.03); } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* ---------- wordmark (sestaví se: „a·i" → inovativa) ---------- */ #inv-intro .ii-wm { position: relative; display: flex; flex-direction: column; } #inv-intro .ii-word { position: relative; display: inline-flex; white-space: nowrap; font-weight: 500; font-size: 104px; line-height: .9; letter-spacing: -.01em; color: #EAF0FF; } #inv-intro .ii-lt { display: inline-block; } #inv-intro .ii-lt-end { display: inline-block; } #inv-intro .ii-lt-end .ii-g { display: inline-block; opacity: 0; transform: translateY(6px) scale(.6); color: var(--ii-accent-soft); } #inv-intro .ii-lt-i { transform: translateX(var(--swap-i, 0)); } #inv-intro .ii-lt-a { transform: translateX(var(--swap-a, 0)); } #inv-intro.ii-play .ii-lt-end .ii-g { animation: ii-popLetter .55s cubic-bezier(.3,1.5,.5,1) .35s forwards, ii-endTint .55s ease 2.1s forwards; } #inv-intro.ii-play .ii-lt-i { animation: ii-unswap 1.0s cubic-bezier(.4,.8,.2,1) 1.25s forwards; } #inv-intro.ii-play .ii-lt-a { animation: ii-unswap 1.0s cubic-bezier(.4,.8,.2,1) 1.25s forwards; } @keyframes ii-popLetter { from { opacity: 0; transform: translateY(6px) scale(.6); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ii-endTint { to { color: #EAF0FF; } } @keyframes ii-unswap { to { transform: translateX(0); } } #inv-intro .ii-lt-mid { display: inline-block; width: 0; overflow: visible; } #inv-intro .ii-lt-mid .ii-g { display: inline-block; opacity: 0; transform: translateY(12px); } #inv-intro.ii-play .ii-lt-mid { animation: ii-expandW .48s cubic-bezier(.2,.85,.25,1) both; animation-delay: var(--d); } #inv-intro.ii-play .ii-lt-mid .ii-g { animation: ii-glyphIn .48s cubic-bezier(.2,.85,.25,1) both; animation-delay: var(--d); } @keyframes ii-expandW { from { width: 0; } to { width: var(--w); } } @keyframes ii-glyphIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } #inv-intro .ii-sheen { position: absolute; inset: -4% -8%; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 38%, rgba(173,209,255,.55) 50%, transparent 62%); transform: translateX(-60%); } #inv-intro .ii-slogan { font-family: 'Space Grotesk', monospace; font-weight: 500; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--ii-accent-soft); margin-top: 14px; margin-left: .35em; opacity: 0; } #inv-intro.ii-play .ii-slogan { animation: ii-slogIn .8s ease 2.9s forwards; } @keyframes ii-slogIn { from { opacity: 0; letter-spacing: .28em; } to { opacity: 1; letter-spacing: .48em; } } /* ---------- status + progress ---------- */ #inv-intro .ii-status { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; } #inv-intro .ii-txt { font-family: 'Space Grotesk', monospace; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #5d6b92; opacity: 0; } #inv-intro.ii-play .ii-txt { animation: ii-slogIn .6s ease .4s forwards; } #inv-intro .ii-bar-track { position: relative; width: 188px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; } #inv-intro .ii-bar-track::after { content: ""; position: absolute; height: 2px; width: 0; left: 0; top: 0; background: linear-gradient(90deg, #3E92DB, #3D5ABF); } #inv-intro.ii-play .ii-bar-track::after { animation: ii-load 4.0s cubic-bezier(.4,.1,.2,1) .3s forwards; } @keyframes ii-load { to { width: 188px; } } @media (prefers-reduced-motion: reduce) { #inv-intro .ii-bar { transform: scaleY(1); } #inv-intro .ii-dot { opacity: 1; } #inv-intro .ii-lt-end { transform: none; } #inv-intro .ii-lt-end .ii-g { opacity: 1; transform: none; color: #EAF0FF; } #inv-intro .ii-lt-mid { width: auto; } #inv-intro .ii-lt-mid .ii-g { opacity: 1; transform: none; } #inv-intro .ii-slogan { opacity: 1; } } @media (max-width: 640px) { #inv-intro .ii-word { font-size: 60px; } #inv-intro .ii-sym { width: 96px; } #inv-intro .ii-stage { gap: 18px; } }