/* ============================================================================
   HINT IT — v2 : /home page styles (page-specific, linked per-page)
   Scoped under `.hint-v2`, token-driven. Holds ONLY page-unique styling: the
   counter hero, the live "hints dropped" counter + its last-digit + floating
   bubble animations (ported from the legacy Home.razor inline CSS), and a touch
   of value-card / closing polish. Everything else comes from the shared
   vocabulary (.hero-brand, .section, .card, .grid, .stack, .btn, text roles).
   ============================================================================ */

/* ---- Hero ---- */
/* Brand band (bg/color/padding) comes from shared `.hero-brand` (components.css);
   the hero <section> carries both `hero-brand` and `hm-hero`. Layout-only below. */
.hint-v2 .hm-hero { text-align: center; }
.hint-v2 .hm-hero-inner {
  align-items: center;
  --stack-space: var(--space-6);
}

.hint-v2 .hm-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-on-brand);
  /* layered shadow echoes the legacy hero's stacked deep-purple drop shadow */
  text-shadow: 3px 3px 0 var(--purple-900), 4px 4px 0 var(--purple-900);
  margin: 0;
}

.hint-v2 .hm-counter {
  font-size: var(--text-subhead);
  font-weight: var(--fw-medium);
  color: var(--text-on-brand);
  margin: 0;
}

/* The live counter target. A subtle darker pill sits behind the number; the
   floating bubbles are absolutely positioned against this inline-block. */
.hint-v2 #hintNumber {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  background: var(--purple-900);
  color: var(--text-on-brand);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.hint-v2 .hm-cta { width: 100%; }

/* ---- Counter animations (ported from legacy Home.razor inline CSS) ----
   Raw px geometry below is the original animation tuning (bubble float distance,
   last-digit start scale, bubble size); kept as-is — only colors are tokenized.
   Counter/bubbles are decorative motion → stopped by the reduced-motion reset in
   reset.css (CSS animations). */

/* last digit pops in larger then shrinks to size on each tick */
.hint-v2 .last-digit {
  display: inline-block;       /* so the transform applies */
  transform: scale(1.75);      /* start ~2px larger, then shrink (legacy tuning) */
  animation: hm-shrink-digit 350ms forwards;
}
@keyframes hm-shrink-digit {
  from { transform: scale(1.75); }
  to   { transform: scale(1); }
}

/* a bubble spawned on each tick, floating up off the number and fading out */
.hint-v2 .floating-icon {
  position: absolute;
  top: -10px;                  /* near the top-right of the number (legacy geometry) */
  right: -5px;
  width: 30px;
  pointer-events: none;
  animation: hm-float-up 2s ease-out forwards;
}
@keyframes hm-float-up {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--initial-rotation, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate(0, -80px) rotate(calc(var(--initial-rotation, 0deg) + var(--rotation-change, 0deg)));
  }
}

/* ---- Value cards ---- */
.hint-v2 .hm-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hint-v2 .hm-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-button);
  background: var(--purple-100);
  color: var(--purple-700);
}
.hint-v2 .hm-value-icon .v2-icon { width: 22px; height: 22px; }
.hint-v2 .hm-value-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-subhead);
  color: var(--text-primary);
  margin: 0;
}
.hint-v2 .hm-value-body {
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.hint-v2 .hm-inline-link {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Closing CTA band ---- */
.hint-v2 .hm-closing { background: var(--purple-100); }
.hint-v2 .hm-closing-inner {
  align-items: center;
  --stack-space: var(--space-5);
}