/* ============================================================
   ACFICK — Page loader
   A screen in the visitor's theme (white, or dark in dark mode) with the
   ACFICK arch mark in brushed silver while the page loads, a band of
   light sweeping across it, then a fade out.
   Used by the home page and the customer portal; js/loader.js removes it.
   ============================================================ */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e1011;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    /* Failsafe: if loader.js never runs, the screen still clears itself. */
    animation: page-loader-failsafe 0.45s ease 10s forwards;
}

.page-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The mark is a block of silver gradient cut to the logo's shape by a mask,
   so the sweep is the gradient sliding across inside it. */
.page-loader__mark {
    width: min(84px, 22vw);
    aspect-ratio: 646 / 459;
    background: linear-gradient(110deg,
        #7d838a 0%, #a9afb5 22%, #d5d9dd 38%,
        #ffffff 50%,
        #d5d9dd 62%, #a9afb5 78%, #7d838a 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='13 107 646 459'%3E%3Cpath fill-rule='evenodd' d='M23.4 564.0C19.4 562.2 16.1 558.5 14.9 554.4C13.6 549.9 13.7 507.3 15.0 486.4C17.8 441.8 27.4 399.1 44.0 356.9C49.4 343.4 63.1 315.4 70.7 302.5C120.0 218.5 195.2 155.7 287.9 121.3C301.3 116.3 332.3 107.4 336.4 107.4C343.2 107.4 372.6 116.3 394.9 125.1C474.2 156.4 542.1 210.9 588.7 280.7C620.5 328.3 642.4 382.5 652.3 438.4C657.3 466.3 658.4 479.7 658.4 511.9C658.4 545.2 658.3 545.7 651.7 550.8C646.8 554.6 641.4 555.1 636.0 552.2C627.5 547.8 627.4 547.4 627.8 522.6C628.5 474.5 622.3 432.9 608.0 389.4C574.3 287.2 496.4 202.1 398.1 160.0C370.4 148.1 340.6 138.8 333.7 139.9C331.6 140.2 323.3 142.5 315.2 145.0C220.8 174.3 142.9 237.1 94.4 322.9C78.3 351.5 66.5 380.8 57.9 413.9C49.9 444.8 46.3 471.0 45.3 507.1C44.7 526.4 44.8 529.7 46.0 529.3C46.8 529.0 55.6 526.6 65.5 523.9L83.6 519.1L84.2 500.0C86.6 424.3 112.1 355.2 159.8 295.4C169.6 283.2 193.8 258.4 205.9 248.2C231.6 226.7 260.2 208.8 290.0 195.6C305.9 188.5 332.1 179.4 336.4 179.5C340.5 179.5 365.6 188.0 380.4 194.4C469.5 232.7 540.0 308.9 571.0 400.4C583.2 436.4 587.8 463.9 588.6 504.9C589.2 535.5 588.8 537.8 582.8 542.7C576.4 547.8 575.1 547.6 535.1 536.1C496.6 525.0 494.6 524.1 492.1 517.6C491.6 516.1 490.6 507.2 490.0 497.7C484.3 407.7 434.1 331.1 354.8 291.4C336.7 282.4 336.4 282.4 319.4 290.9C295.5 302.7 277.0 315.7 257.7 334.3C212.3 378.1 186.2 435.7 183.0 498.9C182.6 507.8 181.8 515.0 181.0 516.4C175.5 527.0 163.9 529.2 156.1 521.1C151.4 516.2 150.9 513.2 152.0 496.1C153.5 472.6 156.1 455.9 161.5 436.9C174.9 389.7 198.5 349.6 233.4 314.9C253.4 294.9 272.0 281.0 296.4 267.6C309.6 260.4 330.0 251.4 335.0 250.7C339.5 250.1 350.4 254.3 369.5 264.0C457.5 308.5 516.2 398.0 521.2 495.3L521.4 499.7L539.8 505.0L558.2 510.3L557.6 495.6C555.3 444.6 538.5 390.9 510.7 346.4C496.6 323.7 482.3 306.0 462.8 286.9C443.1 267.6 423.3 252.4 400.4 239.2C379.9 227.3 344.7 212.4 337.1 212.4C330.2 212.4 307.1 221.2 286.9 231.5C202.6 274.4 141.2 354.9 121.6 448.1C117.1 469.5 115.7 482.5 115.3 509.8C114.9 537.7 114.6 539.4 109.2 543.2C106.2 545.4 33.5 565.5 29.1 565.4C27.6 565.4 25.1 564.8 23.4 564.0ZM234.3 521.0L230.8 517.5L231.2 476.2C231.6 430.5 231.6 430.1 238.5 415.5C242.9 406.2 249.1 397.5 256.6 390.3C259.8 387.2 276.8 373.8 294.4 360.4C312.0 347.1 327.4 335.3 328.6 334.2C331.3 331.8 337.9 330.8 340.9 332.4C345.8 335.1 410.8 385.1 416.8 390.8C428.0 401.7 436.2 416.2 440.0 431.7C441.7 439.2 441.9 443.6 441.9 478.8L441.9 517.6L438.5 521.0C435.7 523.9 434.4 524.4 430.7 524.4C425.4 524.4 428.7 526.6 387.9 497.0C355.1 473.3 348.6 467.8 341.4 458.2C339.0 455.0 336.8 452.4 336.4 452.4C336.1 452.4 333.9 455.0 331.6 458.2C324.8 467.3 317.4 473.4 285.0 496.9C244.3 526.4 247.4 524.4 242.2 524.4C238.4 524.4 237.2 523.9 234.3 521.0ZM279.5 471.2C305.1 452.6 312.5 445.7 317.6 435.3C323.4 423.7 324.0 419.2 323.7 392.5L323.4 368.5L300.4 386.0C274.9 405.3 265.9 414.0 261.2 423.6C255.5 435.1 254.7 439.7 254.2 465.2C253.9 481.3 254.0 488.4 254.8 488.4C255.4 488.4 266.5 480.7 279.5 471.2ZM417.9 465.3C417.9 439.5 417.2 434.9 411.4 423.3C406.3 413.3 398.4 405.7 372.4 386.0L349.4 368.6L349.2 392.7C348.9 419.5 349.5 423.6 355.2 435.4C360.1 445.3 368.8 453.5 393.9 471.9C406.3 480.9 416.8 488.3 417.2 488.4C417.6 488.4 417.9 478.0 417.9 465.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='13 107 646 459'%3E%3Cpath fill-rule='evenodd' d='M23.4 564.0C19.4 562.2 16.1 558.5 14.9 554.4C13.6 549.9 13.7 507.3 15.0 486.4C17.8 441.8 27.4 399.1 44.0 356.9C49.4 343.4 63.1 315.4 70.7 302.5C120.0 218.5 195.2 155.7 287.9 121.3C301.3 116.3 332.3 107.4 336.4 107.4C343.2 107.4 372.6 116.3 394.9 125.1C474.2 156.4 542.1 210.9 588.7 280.7C620.5 328.3 642.4 382.5 652.3 438.4C657.3 466.3 658.4 479.7 658.4 511.9C658.4 545.2 658.3 545.7 651.7 550.8C646.8 554.6 641.4 555.1 636.0 552.2C627.5 547.8 627.4 547.4 627.8 522.6C628.5 474.5 622.3 432.9 608.0 389.4C574.3 287.2 496.4 202.1 398.1 160.0C370.4 148.1 340.6 138.8 333.7 139.9C331.6 140.2 323.3 142.5 315.2 145.0C220.8 174.3 142.9 237.1 94.4 322.9C78.3 351.5 66.5 380.8 57.9 413.9C49.9 444.8 46.3 471.0 45.3 507.1C44.7 526.4 44.8 529.7 46.0 529.3C46.8 529.0 55.6 526.6 65.5 523.9L83.6 519.1L84.2 500.0C86.6 424.3 112.1 355.2 159.8 295.4C169.6 283.2 193.8 258.4 205.9 248.2C231.6 226.7 260.2 208.8 290.0 195.6C305.9 188.5 332.1 179.4 336.4 179.5C340.5 179.5 365.6 188.0 380.4 194.4C469.5 232.7 540.0 308.9 571.0 400.4C583.2 436.4 587.8 463.9 588.6 504.9C589.2 535.5 588.8 537.8 582.8 542.7C576.4 547.8 575.1 547.6 535.1 536.1C496.6 525.0 494.6 524.1 492.1 517.6C491.6 516.1 490.6 507.2 490.0 497.7C484.3 407.7 434.1 331.1 354.8 291.4C336.7 282.4 336.4 282.4 319.4 290.9C295.5 302.7 277.0 315.7 257.7 334.3C212.3 378.1 186.2 435.7 183.0 498.9C182.6 507.8 181.8 515.0 181.0 516.4C175.5 527.0 163.9 529.2 156.1 521.1C151.4 516.2 150.9 513.2 152.0 496.1C153.5 472.6 156.1 455.9 161.5 436.9C174.9 389.7 198.5 349.6 233.4 314.9C253.4 294.9 272.0 281.0 296.4 267.6C309.6 260.4 330.0 251.4 335.0 250.7C339.5 250.1 350.4 254.3 369.5 264.0C457.5 308.5 516.2 398.0 521.2 495.3L521.4 499.7L539.8 505.0L558.2 510.3L557.6 495.6C555.3 444.6 538.5 390.9 510.7 346.4C496.6 323.7 482.3 306.0 462.8 286.9C443.1 267.6 423.3 252.4 400.4 239.2C379.9 227.3 344.7 212.4 337.1 212.4C330.2 212.4 307.1 221.2 286.9 231.5C202.6 274.4 141.2 354.9 121.6 448.1C117.1 469.5 115.7 482.5 115.3 509.8C114.9 537.7 114.6 539.4 109.2 543.2C106.2 545.4 33.5 565.5 29.1 565.4C27.6 565.4 25.1 564.8 23.4 564.0ZM234.3 521.0L230.8 517.5L231.2 476.2C231.6 430.5 231.6 430.1 238.5 415.5C242.9 406.2 249.1 397.5 256.6 390.3C259.8 387.2 276.8 373.8 294.4 360.4C312.0 347.1 327.4 335.3 328.6 334.2C331.3 331.8 337.9 330.8 340.9 332.4C345.8 335.1 410.8 385.1 416.8 390.8C428.0 401.7 436.2 416.2 440.0 431.7C441.7 439.2 441.9 443.6 441.9 478.8L441.9 517.6L438.5 521.0C435.7 523.9 434.4 524.4 430.7 524.4C425.4 524.4 428.7 526.6 387.9 497.0C355.1 473.3 348.6 467.8 341.4 458.2C339.0 455.0 336.8 452.4 336.4 452.4C336.1 452.4 333.9 455.0 331.6 458.2C324.8 467.3 317.4 473.4 285.0 496.9C244.3 526.4 247.4 524.4 242.2 524.4C238.4 524.4 237.2 523.9 234.3 521.0ZM279.5 471.2C305.1 452.6 312.5 445.7 317.6 435.3C323.4 423.7 324.0 419.2 323.7 392.5L323.4 368.5L300.4 386.0C274.9 405.3 265.9 414.0 261.2 423.6C255.5 435.1 254.7 439.7 254.2 465.2C253.9 481.3 254.0 488.4 254.8 488.4C255.4 488.4 266.5 480.7 279.5 471.2ZM417.9 465.3C417.9 439.5 417.2 434.9 411.4 423.3C406.3 413.3 398.4 405.7 372.4 386.0L349.4 368.6L349.2 392.7C348.9 419.5 349.5 423.6 355.2 435.4C360.1 445.3 368.8 453.5 393.9 471.9C406.3 480.9 416.8 488.3 417.2 488.4C417.6 488.4 417.9 478.0 417.9 465.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: page-loader-sweep 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes page-loader-sweep {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

@keyframes page-loader-failsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Light mode: a white screen, and a deeper steel so the mark still stands
   out against it (a pale silver would vanish into the white). The class is
   set on <html> by the inline script in <head>, before anything is drawn. */
html.page-loader-light .page-loader {
    background: #ffffff;
}

html.page-loader-light .page-loader__mark {
    background-image: linear-gradient(110deg,
        #5f656b 0%, #848a90 22%, #aab0b5 38%,
        #d6dadd 50%,
        #aab0b5 62%, #848a90 78%, #5f656b 100%);
}

/* The home page hero plays its entrance animation on load. Held until the
   loader starts to fade, or it would play out unseen behind it. */
html.page-loading .hero,
html.page-loading .hero::before,
html.page-loading .hero::after,
html.page-loading .hero *,
html.page-loading .hero *::after {
    animation-play-state: paused !important;
}

/* Never print it (the quotation page is printed). */
@media print {
    .page-loader { display: none; }
}

/* Visitors who turn animations off get the still silver mark. */
@media (prefers-reduced-motion: reduce) {
    .page-loader__mark {
        animation: none;
        background-position: 50% 0;
    }
}
