/* ============================================================
   ALIFY — loader.css · global page loader (preloader)
   Full-screen curtain: masked wordmark reveal, % counter,
   progress hairline → letters leave → curtain lifts.
   JS hooks: .is-done (content out), .is-up (curtain lifts),
   .is-over (display:none). No-JS: hidden via <noscript>.
   ============================================================ */

html.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 1300;                       /* above cookie bar, below custom cursor */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 3.6vw, 48px);
  background: #0A0A0C;
  will-change: transform;
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}

.loader::before {                      /* ambient brand glow */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 50% 112%, rgba(12, 220, 42, .13), transparent 62%),
    radial-gradient(42% 34% at 90% -8%, rgba(11, 115, 95, .24), transparent 66%);
}

.loader__frame {                       /* thin editorial rule around the loader */
  position: absolute;
  inset: clamp(10px, 1.4vw, 18px);
  border: 1px solid rgba(247, 247, 245, .07);
  border-radius: 14px;
  pointer-events: none;
}

/* ---- top row ---- */
.loader__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.loader__top span {
  font-family: "Space Grotesk", sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, .5);
}
.loader__top-r {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.loader__top-r::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: loaderBlink 1s steps(2, start) infinite;
}
@keyframes loaderBlink { to { visibility: hidden; } }

/* ---- centre wordmark ---- */
.loader__mid {
  position: relative;
  display: flex;
  justify-content: center;
}
.loader__word {
  display: flex;
  align-items: baseline;
  font-family: "Clash Display", sans-serif;
  font-weight: 600;
  font-size: clamp(4.2rem, 15.5vw, 12.5rem);
  line-height: .92;
  letter-spacing: -.015em;
  color: #F7F7F5;
  user-select: none;
}
.loader__ch {                          /* mask */
  display: inline-block;
  overflow: hidden;
  padding-block: .06em;                 /* keeps descenders inside the mask */
}
.loader__ch-in {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 55ms);
}
.loader.is-booted .loader__ch-in { transform: translateY(0); }

.loader__dot {
  display: inline-block;
  width: .09em; height: .09em;
  margin-left: .04em;
  background: var(--green);
  border-radius: 2px;
  transform: translateY(115%) rotate(0deg);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 55ms);
}
.loader.is-booted .loader__dot { transform: translateY(0) rotate(45deg); }

/* small caption under the word */
.loader__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(-58px, -4vw, -34px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Space Grotesk", sans-serif;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, .42);
  opacity: 0;
  transition: opacity .7s ease .5s;
}
.loader.is-booted .loader__caption { opacity: 1; }

/* ---- bottom row ---- */
.loader__bottom { position: relative; }

.loader__counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1;
  color: #F7F7F5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.loader__counter em {
  font-style: normal;
  font-size: .42em;
  color: var(--green);
  letter-spacing: .1em;
}

.loader__track {
  position: relative;
  height: 2px;
  background: rgba(247, 247, 245, .1);
  border-radius: 2px;
  overflow: hidden;
}
.loader__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--teal), var(--green));
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
}

.loader__meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(14px, 1.8vw, 20px);
}
.loader__meta span {
  font-family: "Space Grotesk", sans-serif;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, .38);
}

/* ============================================================
   EXIT SEQUENCE
   ============================================================ */

/* 1 · content leaves */
.loader.is-done .loader__ch-in {
  transform: translateY(-115%);
  transition-duration: .55s;
  transition-timing-function: cubic-bezier(.55, .06, .35, .19);
}
.loader.is-done .loader__dot {
  transform: translateY(-300%) rotate(225deg);
  transition-duration: .55s;
  transition-timing-function: cubic-bezier(.55, .06, .35, .19);
}
.loader.is-done .loader__top,
.loader.is-done .loader__caption,
.loader.is-done .loader__bottom {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}

/* 2 · curtain lifts */
.loader.is-up {
  transform: translateY(-101%);
  pointer-events: none;
}

/* 3 · fully gone */
.loader.is-over { display: none; }

/* instant path (reduced motion / fast devices) */
.loader.is-instant {
  transition: opacity .3s ease;
}
.loader.is-instant.is-up { transform: none; opacity: 0; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .loader__top-r { display: none; }
  .loader__caption { letter-spacing: .22em; font-size: .6rem; }
  .loader__meta span:last-child { display: none; }
}
