/* ========================================================================= FRONT-PAGE SPLASH A jaw crusher at work: rock feeds in, the swing jaw bites, aggregate piles on the belt. Drawn entirely with filled blocks and transforms so it renders before any image or font has arrived. Only transform and opacity are animated -- both composite on the GPU, so the animation stays smooth while the browser is busy parsing the rest of the page underneath. ========================================================================= */ .kf-splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--kf-black, #0d0d0d); opacity: 1; transition: opacity 620ms ease; } /* Faded out by JS, then removed from the DOM. */ .kf-splash.is-done { opacity: 0; pointer-events: none; } /* Set on while the splash is up, so the page cannot be scrolled behind it and the scrollbar does not flash in and out. */ .kf-splash-active { overflow: hidden; } .kf-splash__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px; } /* ---------- the crusher ---------- */ .kf-splash__rig { position: relative; width: 190px; height: 132px; } /* Jaws. Two plates angled into a V; the right one swings on its top corner, which is where a real jaw crusher pivots. */ .kf-splash__jaw { position: absolute; top: 34px; width: 15px; height: 62px; background: linear-gradient(180deg, #3a3a3a 0%, #262626 100%); border-radius: 3px; } .kf-splash__jaw--fixed { left: 62px; transform: rotate(11deg); } .kf-splash__jaw--swing { right: 62px; transform-origin: 50% 0; animation: kf-splash-bite 620ms ease-in-out infinite; } @keyframes kf-splash-bite { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(-2deg); } } /* Feed. Each rock falls, then vanishes at the moment it reaches the jaws. */ .kf-splash__rock { position: absolute; top: 0; left: 50%; width: 13px; height: 11px; margin-left: -6px; background: var(--kf-gold, #f0a500); border-radius: 3px 6px 4px 7px; opacity: 0; animation: kf-splash-feed 1.86s cubic-bezier(.55, 0, .85, .5) infinite; animation-delay: calc(var(--i) * 620ms); } @keyframes kf-splash-feed { 0% { transform: translateY(-26px) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 33% { transform: translateY(42px) rotate(46deg); opacity: 1; } 38%, 100% { transform: translateY(46px) rotate(46deg); opacity: 0; } } /* Output. Blocks appear left to right, then the run restarts. */ .kf-splash__pile { position: absolute; bottom: 16px; left: 50%; display: flex; align-items: flex-end; gap: 3px; transform: translateX(-50%); } .kf-splash__pile span { width: 11px; background: var(--kf-gold-deep, #c98600); border-radius: 2px; transform: scaleY(0); transform-origin: 50% 100%; animation: kf-splash-stack 3.1s ease-out infinite; animation-delay: calc(var(--i) * 260ms + 420ms); } /* A rough grading curve, so the pile reads as material rather than a bar chart. */ .kf-splash__pile span:nth-child(1) { height: 13px; } .kf-splash__pile span:nth-child(2) { height: 21px; } .kf-splash__pile span:nth-child(3) { height: 27px; } .kf-splash__pile span:nth-child(4) { height: 19px; } .kf-splash__pile span:nth-child(5) { height: 11px; } @keyframes kf-splash-stack { 0%, 8% { transform: scaleY(0); } 26% { transform: scaleY(1); } 88% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } .kf-splash__belt { position: absolute; bottom: 8px; left: 50%; width: 116px; height: 5px; margin-left: -58px; background: #333; border-radius: 3px; } /* ---------- wordmark ---------- */ .kf-splash__word { margin: 0; text-align: center; line-height: 1.25; } .kf-splash__word-main { display: block; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: 0.14em; } .kf-splash__word-sub { display: block; margin-top: 5px; color: var(--kf-gold, #f0a500); font-size: 10.5px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; } /* ---------- progress ---------- */ .kf-splash__bar { display: block; width: 168px; height: 2px; background: #262626; border-radius: 2px; overflow: hidden; } .kf-splash__bar-fill { display: block; width: 100%; height: 100%; background: var(--kf-gold, #f0a500); transform: scaleX(0); transform-origin: 0 50%; animation: kf-splash-fill 2.05s ease-out forwards; } /* Eases toward full but never arrives on its own: JS adds .is-done when the page is genuinely ready, so the bar cannot claim completion early. */ @keyframes kf-splash-fill { 0% { transform: scaleX(0); } 62% { transform: scaleX(0.78); } 100% { transform: scaleX(0.94); } } /* In RTL the machine itself is symmetrical, but the progress bar should fill from the inline start like everything else on the page. */ [dir="rtl"] .kf-splash__bar-fill { transform-origin: 100% 50%; } /* ---------- small screens ---------- */ @media (max-width: 480px) { .kf-splash__rig { width: 164px; height: 118px; } .kf-splash__word-main { font-size: 16px; } .kf-splash__word-sub { font-size: 9.5px; letter-spacing: 0.3em; } .kf-splash__bar { width: 140px; } } /* ---------- reduced motion ---------- Hold a finished, static frame: the splash still appears and still dismisses, but nothing moves. */ @media (prefers-reduced-motion: reduce) { .kf-splash, .kf-splash__jaw--swing, .kf-splash__rock, .kf-splash__pile span, .kf-splash__bar-fill { animation: none; transition: none; } .kf-splash__rock { opacity: 0; } .kf-splash__pile span { transform: scaleY(1); } .kf-splash__bar-fill { transform: scaleX(1); } }