/* ============================================================= NIOHUB – animations.css Jemné, prémiové animace. Vše přes transform/opacity (výkon). Vždy respektuje prefers-reduced-motion i ruční omezení animací (třída .reduce-motion na z panelu přístupnosti). ========================================================== */ /* ------------------------------------------------------------- Klíčové snímky ------------------------------------------------------------- */ @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(39, 210, 154, 0.45); } 70% { box-shadow: 0 0 0 10px rgba(39, 210, 154, 0); } } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes dash-flow { to { stroke-dashoffset: -120; } } @keyframes scroll-bob { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(6px); opacity: 1; } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(220%); } } /* ------------------------------------------------------------- Aplikace animací ------------------------------------------------------------- */ .core-status__dot { animation: pulse-dot 2.6s ease-out infinite; } .hero__chip { animation: float-y 6s ease-in-out infinite; } .hero__chip:nth-child(2) { animation-delay: 0.8s; } .hero__chip:nth-child(3) { animation-delay: 1.6s; } .hero__scroll-line { position: relative; overflow: hidden; } .hero__scroll svg, .hero__scroll .dot { animation: scroll-bob 2s ease-in-out infinite; } .map__line { stroke-dasharray: 4 6; animation: dash-flow 6s linear infinite; } .map__core .map__node-dot { animation: float-y 5s ease-in-out infinite; } /* Sheen efekt na primárním tlačítku */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-120%); pointer-events: none; } .btn--primary:hover::after { animation: sheen 0.9s ease; } /* ------------------------------------------------------------- Reveal on scroll (řízeno IntersectionObserver v JS) Bez JS jsou prvky rovnou viditelné (fallback) – viz .no-js níže. ------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--t-med), transform 0.7s var(--t-med); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } /* Postupné zpoždění pro mřížky */ .js .reveal[data-delay="1"] { transition-delay: 0.08s; } .js .reveal[data-delay="2"] { transition-delay: 0.16s; } .js .reveal[data-delay="3"] { transition-delay: 0.24s; } .js .reveal[data-delay="4"] { transition-delay: 0.32s; } /* ------------------------------------------------------------- Omezení animací ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } } /* Ruční přepínač "Omezit animace" z panelu přístupnosti */ html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.reduce-motion .js .reveal { opacity: 1 !important; transform: none !important; }