/* =========================================================================
   ALLWIN PRELOADER  (self-contained; delete this file + js/preloader.js +
   the #preloader block + the "ALLWIN PRELOADER" lines in <head> to remove it)

   A blank white screen on which the logo is drawn live, stroke by stroke.
   The inline script in <head> adds .preloading to <html>; js/preloader.js
   removes it the moment the preloader starts to lift, which releases the page.
   ========================================================================= */

/* ---- 1. Lock scrolling while the preloader is up ---- */
html.preloading,
html.preloading body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.preloading {
  scrollbar-gutter: stable; /* no sideways jump when the scrollbar returns */
}

/* ---- 2. Hold the homepage's own entrance animations until the preloader lifts ----
   site-script.js adds .in-view to the hero elements straight away. While
   .preloading is on we pin them to their hidden state, so the instant the class
   is removed they animate in with their existing durations, delays and stagger. */
@media (prefers-reduced-motion: no-preference) {
  html.preloading .reveal,
  html.preloading .reveal.in-view {
    opacity: 0 !important;
    transform: translateY(44px) !important;
  }
  html.preloading .reveal.reveal-down,
  html.preloading .reveal.reveal-down.in-view {
    transform: translateY(-44px) !important;
  }
  html.preloading .hero-looking-for-progress::after {
    animation-play-state: paused;
  }
}

/* ---- 3. The overlay: a blank white screen ---- */
#preloader {
  --k: 0.33;            /* DRAWING SPEED: every time below is x --k (lower = faster). ~14.8 x 0.33 = ~4.9s */
  --pl-hold: 0.45s;     /* pause on the finished logo */
  --pl-exit: 0.7s;      /* lift away to reveal the homepage */
  --pl-w: clamp(250px, 27vw, 420px);
  --pl-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  background: #fff;
  transition:
    opacity var(--pl-exit) var(--pl-ease),
    transform var(--pl-exit) var(--pl-ease),
    visibility 0s linear var(--pl-exit);
}
html.preloading #preloader {
  display: grid;
}
#preloader.pl-leaving {
  opacity: 0;
  transform: scale(1.04);
  visibility: hidden;
  pointer-events: none;
}

/* ---- 4. Logo stage: exact aspect ratio of the artwork, so nothing is cropped or stretched ---- */
.pl-stage {
  width: min(var(--pl-w), calc(72vh * 0.964));
  aspect-ratio: 1231 / 1277;
}
.pl-logo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- 5. The drawing ----
   The logo is 39 separately traced elements, drawn one after another like a pen moving over paper,
   in this order: (1) blue base and curves from the bottom up, (2) the blue and cyan figures, then
   the circular shapes and the red star, (3) the red swoosh, (4) "ACS", then the lettering letter by
   letter. The order lives in the markup (each element's --d start time). Per element:

     .pl-s   the pen: a thin outline running along the element's real contour, in the element's
             own colour, drawn with stroke-dasharray / stroke-dashoffset.
     .pl-w   the colour: a wide stroke painted with the logo artwork (pattern #plArt), clipped to
             the element's outline, whose dashoffset is animated too - so the true colours are laid
             down along the contour just behind the pen. Nothing fades or zooms in.

   Timings are set per element in the markup (--d start, --t pen time, --f/--ft colour start/time,
   --o when the pen line is rubbed out), all multiplied by --k. The clean, pixel-exact logo (.pl-done)
   is only placed after the last stroke has finished. */
.pl-s {
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
}
.pl-w {
  stroke: url(#plArt);
  stroke-linecap: butt;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
}
.pl-done {
  opacity: 0;
}
#preloader.pl-go .pl-el .pl-s {
  animation:
    plDraw   calc(var(--t) * var(--k))  cubic-bezier(0.4, 0.05, 0.3, 1) calc(var(--d) * var(--k)) both,
    plPenOut calc(0.2s * var(--k) * 2)  ease                           calc(var(--o) * var(--k)) both;
}
#preloader.pl-go .pl-el .pl-w {
  animation: plDraw calc(var(--ft) * var(--k)) cubic-bezier(0.3, 0.1, 0.4, 1) calc(var(--f) * var(--k)) both;
}
#preloader.pl-go .pl-done {
  animation: plDone 0.01s linear calc(var(--d) * var(--k)) both;
}
@keyframes plDraw   { to { stroke-dashoffset: 0; } }
@keyframes plPenOut { to { stroke-opacity: 0; } }
@keyframes plDone   { to { opacity: 1; } }

/* ---- 6. Mobile: a touch quicker ---- */
@media (max-width: 767px) {
  #preloader {
    --k: 0.29;
    --pl-hold: 0.35s;
    --pl-exit: 0.55s;
    --pl-w: min(70vw, 340px);
  }
}

/* ---- 7. Reduced motion: the head script never adds .preloading, so nothing shows.
        Belt-and-braces in case the class is added another way. ---- */
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
  html.preloading { overflow: auto; scrollbar-gutter: auto; }
}