/* ==========================================================================
   HiLife Homepage Preloader — "Above the Clouds"
   Soft sky, drifting fog layers, a few gliding birds; the logo rises out of
   the mist with a counter on each side. Exit: clouds part, then the sky
   lifts away in five staggered columns.

   Performance: clouds are SVG noise rendered once per layer; afterwards only
   transform/opacity animate (GPU-composited). No blur filters animate.
   ========================================================================== */

:root {
  --pl-sky-top: #8ec3e6;
  --pl-sky-mid: #c4e1f3;
  --pl-sky-low: #eef6fb;
  --pl-sky-base: #f7fbfd;

  --pl-ink: #12303d;
  --pl-deep: #004666;
  --pl-blue: #0095da;
  --pl-muted: #4f6b78;

  --pl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pl-ease-lift: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---- Overlay ---- */
.preloader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: transparent;
  color: var(--pl-ink);
}

/* ---- Sky columns (backdrop + exit) ---- */
.preloader-panels {
  position: absolute;
  inset: 0;
  display: flex;
}

.preloader-panels span {
  flex: 1 0 20%;
  margin-right: -1px; /* overlap by 1px so no hairline seams show */
  background: linear-gradient(180deg, var(--pl-sky-top) 0%, var(--pl-sky-mid) 45%, var(--pl-sky-low) 78%, var(--pl-sky-base) 100%);
  transform: translateY(0);
  transition: transform 0.7s var(--pl-ease-lift);
  transition-delay: calc(var(--i, 0) * 45ms);
  will-change: transform;
}

/* ---- Sky layer ---- */
.pl-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* Warm sun glow, upper right — just enough light to feel like morning */
.pl-sun {
  position: absolute;
  top: -22vmax;
  right: -14vmax;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 222, 0.75) 0%, rgba(255, 244, 222, 0.25) 35%, rgba(255, 244, 222, 0) 65%);
}

/* Fog-cloud layers: noise texture, faded at the edges, drifting slowly */
/* Outer box: position + the "clouds part" exit move.
   Inner box: fade-in + slow drift. Kept separate so the two never fight. */
.pl-clouds {
  position: absolute;
  left: -12%;
  width: 124%;
  will-change: transform, opacity;
  transition: transform 0.7s var(--pl-ease-out), opacity 0.5s ease;
}

.pl-clouds-drift {
  width: 100%;
  height: 100%;
  opacity: 0;
  will-change: transform, opacity;
}

.pl-clouds svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Far: high, thin wisps */
.pl-clouds.is-far {
  top: 2%;
  height: 46%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 60%, transparent 100%);
}
.pl-clouds.is-far .pl-clouds-drift {
  animation:
    pl-fade-to-70 1.4s ease 0.1s forwards,
    pl-drift-left 14s linear 0s forwards;
}

/* Mid: soft bank behind the logo line */
.pl-clouds.is-mid {
  top: 36%;
  height: 46%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
}
.pl-clouds.is-mid .pl-clouds-drift {
  animation:
    pl-fade-to-85 1.4s ease 0.2s forwards,
    pl-drift-right 16s linear 0s forwards;
}

/* Near: dense low fog in front of the birds */
.pl-clouds.is-near {
  top: 60%;
  height: 48%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
}
.pl-clouds.is-near .pl-clouds-drift {
  animation:
    pl-fade-to-100 1.2s ease 0s forwards,
    pl-drift-left 11s linear 0s forwards;
}

/* Soft white haze behind the content — keeps the dark logo crisp */
.pl-mist {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px, 130vw);
  height: min(520px, 70vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0) 70%);
}

/* ---- Birds: tiny, sparse, gliding with a slow wing beat ---- */
.pl-birds {
  position: absolute;
  inset: 0;
}

.pl-bird {
  position: absolute;
  top: var(--top, 20%);
  left: 0;
  width: var(--size, 14px);
  will-change: transform;
  animation: pl-fly var(--dur, 10s) linear var(--delay, 0s) infinite;
}

/* Gentle rise and fall while flying */
.pl-bird-bob {
  display: block;
  animation: pl-bob 1.7s ease-in-out infinite alternate;
}

.pl-bird:nth-child(2n) .pl-bird-bob { animation-duration: 2.1s; }

.pl-bird svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Wings pivot at the body: real up/down strokes */
.pl-wing {
  fill: none;
  stroke: #27434f;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
  transform-box: view-box;
  transform-origin: 12px 8px;
  animation: pl-flap-l var(--flap, 0.4s) ease-in-out infinite alternate;
}

.pl-wing-r { animation-name: pl-flap-r; }

.pl-bird-body {
  fill: #27434f;
  opacity: 0.72;
}

/* ---- Content ---- */
.preloader-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px clamp(20px, 5vw, 64px);
  box-sizing: border-box;
  transition: opacity 0.35s ease, transform 0.5s var(--pl-ease-out);
}

/* stat | logo + tagline | stat */
.preloader-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left center right";
  align-items: center;
  column-gap: clamp(36px, 7vw, 110px);
  width: min(1080px, 100%);
}

.preloader-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.preloader-logo-wrap {
  position: relative;
  width: clamp(180px, 22vw, 300px);
  line-height: 0;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(26px) scale(0.94);
  animation: pl-focus 1.1s var(--pl-ease-out) 0.2s forwards;
}

/* A single soft light sweep, masked to the logo's own shape */
.preloader-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.95) 48%, transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-mask: var(--pl-logo) center / contain no-repeat;
  mask: var(--pl-logo) center / contain no-repeat;
  animation: pl-sheen 1s ease-in-out 1.25s forwards;
  pointer-events: none;
}

.preloader-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Tagline — revealed letter by letter (split into spans by preloader.js).
   Hidden until split, so the raw text never flashes before the cascade. */
.preloader-title {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  max-width: 34ch;
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--pl-muted);
  opacity: 0;
}

.preloader-title.chars-ready {
  opacity: 1;
}

/* Words stay whole, so long ACF text still wraps between words on mobile */
.preloader-title .pl-word {
  display: inline-block;
  white-space: nowrap;
}

.preloader-title .pl-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em);
  animation: pl-char-in 0.55s var(--pl-ease-out) var(--d, 0s) forwards;
}

/* Counters: number centred, label below */
.preloader-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(16px);
  animation: pl-focus 0.8s var(--pl-ease-out) 0.6s forwards;
}

.preloader-stat-left  { grid-area: left;  justify-self: end; }
.preloader-stat-right { grid-area: right; justify-self: start; }

.preloader-stat-number {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pl-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "+" / "K+" part — smaller, raised, brand blue */
.preloader-stat-suffix {
  display: inline-block;
  margin-left: 0.04em;
  font-size: 0.5em;
  line-height: 1;
  vertical-align: top;
  color: var(--pl-blue);
}

.preloader-stat-label {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  color: var(--pl-muted);
  white-space: nowrap;
}

/* ---- Exit: clouds part, content floats up, then the sky lifts ---- */
.preloader-overlay.preloader-clouds-part .pl-clouds.is-near { transform: translate3d(-18%, 4%, 0) scale(1.15); opacity: 0; }
.preloader-overlay.preloader-clouds-part .pl-clouds.is-mid  { transform: translate3d(16%, 0, 0) scale(1.1); opacity: 0; }
.preloader-overlay.preloader-clouds-part .pl-clouds.is-far  { opacity: 0; }
.preloader-overlay.preloader-clouds-part .pl-birds          { opacity: 0; transition: opacity 0.4s ease; }

.preloader-content.preloader-content-out {
  opacity: 0;
  transform: translateY(-16px);
}

.preloader-overlay.preloader-rise-out .pl-sky {
  opacity: 0;
}

.preloader-overlay.preloader-rise-out .preloader-panels span {
  transform: translateY(-100%);
}

body.preloader-active {
  overflow: hidden;
}

/* ---- Keyframes (transform/opacity only) ---- */
@keyframes pl-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Out of focus → sharp, while rising (logo, counters) */
@keyframes pl-focus {
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes pl-char-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pl-sheen {
  to { background-position: -30% 0; }
}

@keyframes pl-fade-to-70  { to { opacity: 0.7; } }
@keyframes pl-fade-to-85  { to { opacity: 0.85; } }
@keyframes pl-fade-to-100 { to { opacity: 1; } }

@keyframes pl-drift-left  { to { transform: translate3d(-6%, 0, 0); } }
@keyframes pl-drift-right { to { transform: translate3d(5%, 0, 0); } }

@keyframes pl-fly {
  from { transform: translate3d(-6vw, 0, 0); }
  to   { transform: translate3d(106vw, -4vh, 0); }
}

@keyframes pl-flap-l {
  from { transform: rotate(-26deg); }
  to   { transform: rotate(30deg); }
}

@keyframes pl-flap-r {
  from { transform: rotate(26deg); }
  to   { transform: rotate(-30deg); }
}

@keyframes pl-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .preloader-stage { column-gap: clamp(28px, 5vw, 56px); }
}

/* ---- Mobile: logo on top, counters side by side below ---- */
@media (max-width: 640px) {
  .preloader-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "left   right";
    row-gap: 34px;
    column-gap: 0;
  }

  .preloader-stat-left,
  .preloader-stat-right { justify-self: center; }

  .preloader-stat-number { font-size: clamp(34px, 11vw, 46px); }
  .preloader-stat-label  { font-size: 13px; }

  /* lighter on phones: two birds */
  .pl-bird:nth-child(n+3) { display: none; }
}

/* ---- Short screens (landscape phones) ---- */
@media (max-height: 480px) {
  .preloader-logo-wrap { width: 160px; }
  .preloader-title { display: none; }
}

/* ---- Reduced motion: still sky, quick fade ---- */
@media (prefers-reduced-motion: reduce) {
  .preloader-title .pl-char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pl-clouds-drift,
  .preloader-logo-wrap,
  .preloader-title,
  .preloader-stat {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: 0.01em !important;
  }

  .pl-clouds.is-far .pl-clouds-drift { opacity: 0.7 !important; }
  .pl-clouds.is-mid .pl-clouds-drift { opacity: 0.85 !important; }
  .pl-birds { display: none !important; }
  .preloader-logo-wrap,
  .preloader-stat { filter: none !important; }
  .preloader-logo-wrap::after { display: none !important; }

  .preloader-panels span { transition: none !important; }

  .preloader-overlay.preloader-rise-out {
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .preloader-overlay.preloader-rise-out .preloader-panels span {
    transform: none;
  }
}