/*
 * tuning-database.co.uk, v4: the homepage's own sheet, over v3's css/front.css (tdb_v4_assets('front')['override']).
 *
 * The hero in gold (23 Oct 2026, behind ?next=1 until Ionut approves it: parts/hero.php adds .ha--gold). His words on
 * the live one: the red dots too loud and all bunched under the headline, the headline still, no colour inside it;
 * "mai curat... mai business luxury gold oriented". So the hero's own tokens turn to gold (the buttons, links, ticks
 * and icons follow without a rule each), the dots go small, crisp and champagne, the map fades where the words are,
 * a warm light sits behind the words, and the second line is gold metal that light runs through as the page opens,
 * then rests. Tokens only. Test: tests/test-v4-hero-gold.php.
 */

.ha--gold {
  --btn-bg: var(--p-gold-3);
  --btn-plate: var(--hero-plate);
  --btn-edge: var(--hero-plate-edge);
  --btn-ink: var(--p-gold-ink);
  --accent-ink: var(--p-gold-2);
  --link: var(--p-gold-2);
  --focus: var(--p-gold-2);
  --ok: var(--p-gold-3);
  --tick: var(--p-gold-3);
  --map-land: var(--p-gold-land);
  --map-pin: var(--hero-pin);
  --headline-sheen: var(--hero-metal);
  background-image: var(--hero-glow);
}

/* The map: no blur (it turned the dots into glowing blobs), and faded where the headline is. */
.ha--gold .ha__map {
  filter: none;
  -webkit-mask-image: var(--hero-map-fade);
  mask-image: var(--hero-map-fade);
}

.ha--gold .ha__pin {
  fill: var(--hero-pin);
  r: 3.5px;
}

/* A thin gold ring goes out of each dot a few times, one country after another, then the map rests. */
.ha--gold .ha__ring {
  fill: none;
  stroke: var(--hero-pin);
  stroke-width: 1.2;
  r: 5px;
  animation: ha-gold-breathe 3.2s var(--ease-out) 4;
}

@keyframes ha-gold-breathe {
  from { opacity: .7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.8); }
}

/* The second line, cast in gold: light runs across it and back as the page opens, then it rests lit. */
.ha--gold .ha__l--accent {
  background: var(--headline-sheen) 100% 0 / 240% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ha-rise 900ms var(--ease-out) 110ms both, ha-gold-light 3.4s ease-in-out 900ms 3 alternate both;
}

@keyframes ha-gold-light {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.ha--gold .ha__btn--fill:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .ha--gold .ha__l--accent,
  .ha--gold .ha__ring {
    animation: none;
  }

  .ha--gold .ha__l--accent {
    background-position: 0 0;
  }
}