/* =========================================================
   ORS — Preloader

   A line-art cup that fills with coffee while the page loads.
   Pure CSS animation over an inline SVG: a wave-topped shape rises
   inside a clipPath shaped like the cup, so the liquid is clipped to
   the bowl and never spills past the outline.
   ========================================================= */

:root {
  /*
    Charcoal rather than white, so there is no bright flash before the
    dark hero. Set this to #fff for a light preloader.
  */
  --preloader-bg: #151515;
  --preloader-accent: #4b9855;

  --preloader-size: clamp(84px, 12vw, 128px);
  --preloader-fill-duration: 2.6s;
  --preloader-wave-duration: 2.2s;
  --preloader-fade: 0.5s;
}

/* lock scrolling only while the overlay is up */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.ors-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  background-color: var(--preloader-bg);

  transition:
    opacity var(--preloader-fade) ease,
    visibility var(--preloader-fade) ease;
}

.ors-preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.ors-preloader__cup {
  width: var(--preloader-size);
  height: auto;

  color: var(--preloader-accent);

  overflow: visible;
}

/* cup outline + handle */
.ors-preloader__stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the coffee itself */
.ors-preloader__liquid {
  fill: currentColor;

  animation: ors-preloader-wave var(--preloader-wave-duration) linear infinite;
}

/* vertical rise, kept on its own element so it composes with the wave drift */
.ors-preloader__level {
  animation: ors-preloader-fill var(--preloader-fill-duration) ease-in-out infinite;
  will-change: transform;
}

@keyframes ors-preloader-fill {
  0% {
    transform: translateY(46px);
    opacity: 1;
  }

  65% {
    transform: translateY(0);
    opacity: 1;
  }

  85% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* one full wave period, so the loop is seamless */
@keyframes ors-preloader-wave {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(64px);
  }
}

/* screen-reader-only status text */
.ors-preloader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


@media (prefers-reduced-motion: reduce) {

  .ors-preloader__level,
  .ors-preloader__liquid {
    animation: none;
  }

  /* show a settled, half-filled cup instead of a moving one */
  .ors-preloader__level {
    transform: translateY(16px);
  }
}