/* ============================================================= KirkeTjek — Scroll & reveal animation utilities ------------------------------------------------------------- The markup carries `data-animate=""` attributes. JS (js/scroll-animations.js) adds `.is-visible` when the element enters the viewport. All transitions live here so future tweaks to the "scroll niceness" stay in one place. ============================================================= */ /* Base hidden state — only applied when JS is active (see .js-anim on ) so the page remains fully visible if scripts fail or are disabled. */ .js-anim [data-animate] { opacity: 0; will-change: opacity, transform; transition: opacity var(--kt-dur-slow) var(--kt-ease-out), transform var(--kt-dur-slow) var(--kt-ease-out); } /* ---- Reveal variants (starting transforms) ---- */ .js-anim [data-animate="fade"] { transform: none; } .js-anim [data-animate="fade-up"] { transform: translateY(34px); } .js-anim [data-animate="fade-down"] { transform: translateY(-34px); } .js-anim [data-animate="fade-left"] { transform: translateX(40px); } .js-anim [data-animate="fade-right"]{ transform: translateX(-40px); } .js-anim [data-animate="zoom-in"] { transform: scale(0.92); } .js-anim [data-animate="zoom-out"] { transform: scale(1.06); } /* ---- Settled state ---- */ .js-anim [data-animate].is-visible { opacity: 1; transform: none; } /* ---- Staggering ---- Add data-anim-delay="1".."8" to cascade children into view. */ [data-anim-delay="1"] { transition-delay: 70ms; } [data-anim-delay="2"] { transition-delay: 140ms; } [data-anim-delay="3"] { transition-delay: 210ms; } [data-anim-delay="4"] { transition-delay: 280ms; } [data-anim-delay="5"] { transition-delay: 350ms; } [data-anim-delay="6"] { transition-delay: 420ms; } [data-anim-delay="7"] { transition-delay: 490ms; } [data-anim-delay="8"] { transition-delay: 560ms; } /* ---- Ambient (always-on) animations ---- */ @keyframes kt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes kt-pulse-ring { 0% { transform: scale(0.9); opacity: 0.7; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } } .kt-float { animation: kt-float 6s ease-in-out infinite; } /* ---- Respect user motion preferences ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-anim [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; } .kt-float { animation: none; } }