/* ========================================================================== Site preloader — the three glyphs of the OCC mark bouncing in a wave. Markup: resources/views/layouts/front/loader.blade.php, included by the front header right after . The logo URL arrives as --loader-logo (set inline) so an admin-uploaded logo is honoured. The slicing assumes the three-glyph OCC mark (~1.9:1): background-size 300% shows one glyph per tile, and the tagline strip is the bottom band of the same image. ========================================================================== */ .site-loader { --lw: 240px; position: fixed; inset: 0; /* above .site-intro (99999) so the home-page video reveals under it */ z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0A1628; /* --crystal-base */ transition: opacity .45s ease, visibility .45s ease; /* Failsafe: hide after 6s even if the script never runs, so a blocked or broken script can't leave this overlay covering the site. */ animation: site-loader-failsafe 0s linear 6s forwards; } /* animation: none is load-bearing here. The failsafe above animates opacity and visibility, and a property under a CSS animation's control cannot also be transitioned - with the animation still pending, adding this class has no visible effect and the loader sits there until the failsafe fires at 6s. Dropping the animation hands both properties back to the transition. */ .site-loader.is-hidden { animation: none; opacity: 0; visibility: hidden; } .site-loader__glyphs { display: flex; width: var(--lw); filter: drop-shadow(0 0 18px rgba(127, 231, 255, .35)); } .site-loader__glyphs span { width: calc(var(--lw) / 3); /* the mark is ~1.9:1, and its glyph row is the top ~75% of that */ height: calc(var(--lw) / 1.9 * .75); background-image: var(--loader-logo); background-repeat: no-repeat; background-size: 300% auto; animation: site-loader-bounce .9s cubic-bezier(.45, 0, .55, 1) infinite; } .site-loader__glyphs span:nth-child(1) { background-position-x: 0%; } .site-loader__glyphs span:nth-child(2) { background-position-x: 50%; animation-delay: .15s; } .site-loader__glyphs span:nth-child(3) { background-position-x: 100%; animation-delay: .30s; } .site-loader__tagline { width: var(--lw); height: calc(var(--lw) / 1.9 * .25); background-image: var(--loader-logo); background-repeat: no-repeat; background-size: 100% auto; background-position: 0 100%; opacity: .85; } @keyframes site-loader-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes site-loader-failsafe { to { opacity: 0; visibility: hidden; } } @media (max-width: 480px) { .site-loader { --lw: 180px; } } @media (prefers-reduced-motion: reduce) { .site-loader__glyphs span { animation: none; } }