/* vs-counters.css — 2026 liquid-glass impact counters (homepage only)
 *
 * Loaded ONLY on / (the <link> is injected into site/index.html alone), so the
 * bare .ut-counter selectors below can only ever match the four stat cards in
 * the dark "CREATIVITY WITH IMPACT" row — no page-wide bleed, no body class
 * needed. The theme paints per-counter inline <style> blocks in the body
 * (later in the cascade), so the handful of properties we must win are flagged
 * !important on purpose. Motion + the count-up itself live in vs-counters.js.
 *
 * Look: clean frosted glass only — no coloured backlight (removed by request).
 */

/* ---- the glass pane ------------------------------------------------------ */
.ut-counter-box.ut-counter {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  margin: 10px 12px;
  padding: 30px 18px 26px;
  border-radius: 24px;
  /* frosted fill — a faint top-lit sheet of glass */
  background:
    linear-gradient(158deg, rgba(255,255,255,.09) 0%,
                            rgba(255,255,255,.03) 46%,
                            rgba(255,255,255,.014) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 48px -18px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 0 1px rgba(255,255,255,.02);
  -webkit-backdrop-filter: blur(9px) saturate(135%);
          backdrop-filter: blur(9px) saturate(135%);
  overflow: hidden;            /* clip the sheen to the radius */
  isolation: isolate;
  transition: box-shadow .8s ease, border-color .8s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}

/* a neutral lift once the card lights up — no colour, just clearer glass */
.ut-counter-box.ut-counter.vs-lit {
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 24px 64px -20px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ---- the reveal sheen: a single light wipe across the glass --------------- */
.ut-counter-box.ut-counter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg,
                transparent 32%,
                rgba(255,255,255,.16) 48%,
                rgba(255,255,255,.05) 56%,
                transparent 70%);
  transform: translateX(-130%);
}
.ut-counter-box.ut-counter.vs-lit::after {
  animation: vsSheen 1.5s cubic-bezier(.25,.6,.2,1) .15s 1;
}
@keyframes vsSheen { to { transform: translateX(130%); } }

/* keep the trophy svgs hidden (theme never draws them here) and the
   number/label above the glass */
.ut-counter-box.ut-counter > .ut-vivus-draw { display: none !important; }
.ut-counter-box.ut-counter .ut-counter-content {
  position: relative;
  z-index: 2;
}

/* ---- the number ---------------------------------------------------------- */
.ut-counter-box.ut-counter .ut-count {
  display: inline-block;
  font-size: 68px !important;
  line-height: 1.02;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* cool white, faintly etched — frosted-glass numerals */
  background: linear-gradient(180deg,
                #ffffff 0%, #ffffff 46%, #eef3f7 78%, #dfe7ee 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent !important;
          text-fill-color: transparent;
  color: transparent !important;
  fill: transparent !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.5));
  -webkit-text-shadow: none !important;
          text-shadow: none !important;
  will-change: transform;
}
.ut-counter-box.ut-counter .ut-count .vs-num { white-space: nowrap; }
.ut-counter-box.ut-counter .ut-count .vs-affix {
  font-size: .44em;
  font-weight: 700;
  letter-spacing: 0;
}
.ut-counter-box.ut-counter .ut-count .vs-pre  { margin-right: .04em; }
.ut-counter-box.ut-counter .ut-count .vs-suf  { margin-left: .05em; vertical-align: .14em; }

/* the settle pop when the count lands */
.ut-counter-box.ut-counter .ut-count.vs-pop { animation: vsPop .52s cubic-bezier(.2,.9,.25,1.25); }
@keyframes vsPop {
  0%   { transform: scale(1.06); }
  55%  { transform: scale(.985); }
  100% { transform: scale(1); }
}

/* ---- the label ----------------------------------------------------------- */
.ut-counter-box.ut-counter h3.ut-counter-details {
  margin-top: 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.74) !important;
}
.ut-counter-box.ut-counter h3.ut-counter-details::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto 13px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: .9;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .ut-counter-box.ut-counter { min-height: 150px; margin: 9px; }
  .ut-counter-box.ut-counter .ut-count { font-size: 58px !important; }
}
@media (max-width: 767px) {
  .ut-counter-box.ut-counter {
    min-height: 0;
    margin: 8px auto;
    max-width: 320px;
    padding: 28px 18px 24px;
    -webkit-backdrop-filter: blur(7px) saturate(130%);
            backdrop-filter: blur(7px) saturate(130%);
  }
  .ut-counter-box.ut-counter .ut-count { font-size: 56px !important; }
}

/* ---- reduced motion: show the lit final state, no animation -------------- */
@media (prefers-reduced-motion: reduce) {
  .ut-counter-box.ut-counter,
  .ut-counter-box.ut-counter::after,
  .ut-counter-box.ut-counter .ut-count { animation: none !important; transition: none !important; }
  .ut-counter-box.ut-counter::after { display: none; }
}