/* The site footer, animated (pairs with atlas-footer.js; on every page through _nav_assets_head/_body). It dresses the
 * footer the older scripts build: the palette's colours, the blocks rising in when it arrives, waves behind it, a Riyadh
 * clock, a way back up with the page progress around it, and an ATLAS | 3M wordmark that fills letter by letter. */
@keyframes atf-pulse { 50% { box-shadow: 0 0 0 10px rgba(var(--xp-c-b), 0); } }
:root { --aui-red: rgb(var(--xp-c-a)); --aui-red-2: rgb(var(--xp-c-a)); --aui-ink: rgb(var(--xp-c-ink)); --aui-muted: rgba(var(--xp-c-ink), .64);
  --aui-line: rgba(var(--xp-c-ink), .1); --aui-line-2: rgba(var(--xp-c-ink), .18); --aui-card: rgba(var(--xp-c-ink), .04); }
html body footer.atlas-footer:not(#aui):not(#xpf) { position: relative !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; isolation: isolate;
  padding: 110px max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)) !important;
  background: radial-gradient(1200px 420px at 50% 0%, rgba(var(--xp-c-a), .16), transparent 70%), linear-gradient(180deg, rgb(var(--xp-c-bg)), rgb(var(--xp-c-bg2))) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) > :not(.xpf-waves):not(.xpf-word) { position: relative; z-index: 1; max-width: 1280px; margin-left: auto !important; margin-right: auto !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-cta { border-color: rgba(var(--xp-c-a), .3) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: radial-gradient(600px 260px at 85% 0%, rgba(var(--xp-c-a), .3), transparent 70%), radial-gradient(500px 240px at 0% 100%, rgba(var(--xp-c-b), .16), transparent 70%), rgba(var(--xp-c-bg), .55) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-cta::after { display: none !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-cta h2, html body footer.atlas-footer:not(#aui):not(#xpf) .footer-column h3, html body footer.atlas-footer:not(#aui):not(#xpf) .footer-contact a[href^="tel:"] { color: rgb(var(--xp-c-ink)) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-button-primary { background: rgb(var(--xp-c-a)) !important; border-color: rgb(var(--xp-c-a)) !important; color: rgb(var(--xp-c-on-a)) !important; box-shadow: 0 14px 34px rgba(var(--xp-c-a), .35) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-button-primary:hover { background: rgb(var(--xp-c-a2)) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-button-secondary { color: rgb(var(--xp-c-ink)) !important; background: rgba(var(--xp-c-ink), .06) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-top, html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-bottom { background: rgba(var(--xp-c-bg), .5) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html body footer.atlas-footer:not(#aui):not(#xpf) .footer-column a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1.5px;
  transition: color .2s, background-size .35s cubic-bezier(.2, .8, .2, 1), transform .2s !important; }
html[dir="ltr"] body footer.atlas-footer:not(#aui):not(#xpf) .footer-column a { background-position: 0 100%; }
html body footer.atlas-footer:not(#aui):not(#xpf) .footer-column a:hover { color: rgb(var(--xp-c-ink)) !important; background-size: 100% 1.5px; }
html body footer.atlas-footer:not(#aui):not(#xpf) .footer-social a { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s, border-color .2s !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .footer-social a:hover { background: rgb(var(--xp-c-a)) !important; border-color: rgb(var(--xp-c-a)) !important; color: rgb(var(--xp-c-on-a)) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .atlas-footer-bottom a:hover { color: rgb(var(--xp-c-ink)) !important; }
html body footer.atlas-footer:not(#aui):not(#xpf) .footer-logos span { background: rgba(var(--xp-c-ink), .2) !important; }
/* the blocks rise in one after another when the footer arrives */
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-rise { opacity: 0; transform: perspective(900px) translateY(80px) rotateX(14deg); transform-origin: 50% 0; filter: blur(8px);
  transition: opacity .8s, transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .9s; transition-delay: calc(var(--i, 0) * 120ms); }
html body footer.atlas-footer:not(#aui):not(#xpf).xpf-in .xpf-rise { opacity: 1; transform: none; filter: none; }
/* inside the blocks: links one after another, icons pop, heading lines draw. Keyframes on translate/scale, so the hover
   transforms the site already has keep working */
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-item, html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-pop { opacity: 0; }
html body footer.atlas-footer:not(#aui):not(#xpf).xpf-in .xpf-item { animation: xpf-up .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 120ms + 350ms + var(--j, 0) * 70ms); }
html body footer.atlas-footer:not(#aui):not(#xpf).xpf-in .xpf-pop { animation: xpf-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(500ms + var(--j, 0) * 70ms); }
@keyframes xpf-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes xpf-pop { from { opacity: 0; scale: .2; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
html body footer.atlas-footer:not(#aui):not(#xpf) .footer-column h3::after { width: 0 !important; transition: width .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }
html body footer.atlas-footer:not(#aui):not(#xpf).xpf-in .footer-column h3::after { width: 28px !important; }
html body footer.atlas-footer:not(#aui):not(#xpf).xpf-prep * { transition: none !important; }
/* Riyadh's time, and the way back up (its ring is how far down the page you are) */
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 6px 0; color: rgba(var(--xp-c-ink), .64); font: 800 13px Inter, Tajawal, sans-serif; letter-spacing: .1em; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-clock i { display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; border-radius: 50%; background: rgb(var(--xp-c-b)); box-shadow: 0 0 0 4px rgba(var(--xp-c-b), .2); animation: atf-pulse 1.6s ease-in-out infinite; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-clock b { color: rgb(var(--xp-c-ink)) !important; font-size: 15px; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-top { position: relative; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: conic-gradient(rgb(var(--xp-c-a)) calc(var(--doc, 0) * 360deg), rgba(var(--xp-c-ink), .14) 0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-top::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgb(var(--xp-c-bg2)); }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-top i { position: relative; color: rgb(var(--xp-c-ink)) !important; font-size: 18px; transition: transform .3s; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-top:hover { transform: translateY(-4px); }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-top:hover i { transform: translateY(-3px); }
/* the wordmark: outlined letters that fill one by one as you arrive, and lift toward the pointer */
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-word { position: relative; z-index: 1; display: flex; justify-content: center; direction: ltr; margin: 26px auto 0; padding-bottom: 14px;
  font: 900 clamp(60px, 16.5vw, 290px)/.86 Inter, sans-serif; letter-spacing: -.045em; white-space: nowrap; user-select: none; pointer-events: none; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-word span { display: inline-block; color: transparent !important; -webkit-text-stroke: 1.5px rgba(var(--xp-c-ink), .22);
  transform: translateY(var(--ly, 0px)) scale(var(--ls, 1)); transform-origin: 50% 100%; transition: color .5s, -webkit-text-stroke-color .5s; will-change: transform; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-word span.lit { color: var(--lc) !important; -webkit-text-stroke-color: transparent; text-shadow: 0 0 40px rgba(var(--xp-c-a), .25); }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-word span.gap { width: .22em; }
/* the | between the names, drawn as a bar as tall as the capitals (the glyph itself rises above them) */
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-word span.bar { width: .075em; height: .66em; margin: 0 .06em; align-self: center; border-radius: .04em; background: rgba(var(--xp-c-ink), .22); transition: background .5s; }
html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-word span.bar.lit { background: var(--lc); }
@media (max-width: 900px) { html body footer.atlas-footer:not(#aui):not(#xpf) { padding-top: 70px !important; } html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-strip { padding-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) {
  html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-rise { opacity: 1; transform: none; filter: none; }
  html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-item, html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-pop { opacity: 1; animation: none !important; }
  html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-waves { display: none; }
  html body footer.atlas-footer:not(#aui):not(#xpf) .xpf-clock i { animation: none; }
}