/* ============================================================ AB POWER CABLES — Premium Preloader ------------------------------------------------------------ Luxury, minimal, once-per-session loading veil. Palette: white #FFFFFF · navy #16345D · orange #FF7A1A Only transform / opacity are animated (GPU-composited, 60fps). Visibility is gated by , set synchronously by preloader.js — without it the overlay is display:none, so JS-disabled visitors are never blocked. ============================================================ */ #ab-preloader { display: none; } html[data-preloader="active"] #ab-preloader { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9999; background: #FFFFFF; opacity: 1; transition: opacity .95s cubic-bezier(.4, 0, .2, 1); contain: layout paint; } /* Exit state — the whole veil dissolves, homepage revealed beneath */ html[data-preloader="active"] #ab-preloader.is-leaving { opacity: 0; pointer-events: none; } #ab-preloader.is-leaving .ab-preloader__stage { transform: scale(1.04); transition: transform .95s cubic-bezier(.4, 0, .2, 1); } /* ---- Ambient layer: barely-there navy/orange radial gradients ---- */ .ab-preloader__vignette { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 36%, rgba(22, 52, 93, .045), transparent 65%), radial-gradient(900px 600px at 50% 104%, rgba(255, 122, 26, .05), transparent 60%); opacity: 0; animation: abVeilIn 1.2s ease-out forwards; } /* ---- Stage: centers logo, glow and floor shadow as one unit ---- */ .ab-preloader__stage { position: relative; display: grid; place-items: center; will-change: transform; } /* Soft orange aura breathing behind the mark */ .ab-preloader__glow { position: absolute; width: clamp(220px, 46vw, 360px); height: clamp(220px, 46vw, 360px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 26, .16), rgba(255, 122, 26, .05) 45%, transparent 70%); opacity: 0; animation: abGlow 2.2s ease-in-out .6s forwards; will-change: opacity; } /* Logo: fades in while easing from 90% → 100% scale. overflow:hidden clips the light sweep to the logo's bounds. */ .ab-preloader__logo { position: relative; display: block; overflow: hidden; border-radius: 18px; opacity: 0; transform: scale(.9); animation: abLogoIn 1.4s cubic-bezier(.22, 1, .36, 1) .35s forwards; will-change: transform, opacity; } .ab-preloader__logo img { display: block; height: clamp(72px, 16vw, 132px); width: auto; } /* One elegant pass of light across the logo — white core, warm edge */ .ab-preloader__sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .85) 46%, rgba(255, 122, 26, .30) 54%, transparent 70%); transform: translateX(-130%) skewX(-18deg); animation: abSweep 1.1s cubic-bezier(.65, 0, .35, 1) 1.35s forwards; will-change: transform; } /* Grounding shadow beneath the mark — navy-tinted, widens as logo lands */ .ab-preloader__shadow { position: absolute; bottom: clamp(-40px, -4vw, -26px); width: clamp(110px, 22vw, 170px); height: 20px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(22, 52, 93, .20), transparent 72%); opacity: 0; transform: scaleX(.7); animation: abShadowIn 1.4s cubic-bezier(.22, 1, .36, 1) .5s forwards; will-change: transform, opacity; } /* ---- Keyframes ---- */ @keyframes abVeilIn { to { opacity: 1; } } @keyframes abLogoIn { to { opacity: 1; transform: scale(1); } } @keyframes abSweep { to { transform: translateX(130%) skewX(-18deg); } } @keyframes abShadowIn { to { opacity: 1; transform: scaleX(1); } } @keyframes abGlow { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: .55; } } /* ---- Accessibility: honor reduced-motion preferences ---- Sequence collapses to a simple, brief cross-fade. */ @media (prefers-reduced-motion: reduce) { .ab-preloader__logo, .ab-preloader__shadow { animation: abFadeOnly .5s ease-out forwards; } .ab-preloader__vignette, .ab-preloader__sweep, .ab-preloader__glow { animation: none; opacity: 0; } #ab-preloader.is-leaving .ab-preloader__stage { transform: none; } @keyframes abFadeOnly { to { opacity: 1; transform: none; } } }