/* JS intro tour (js/intro.js): the camera zooms into each service while the orbit turns, then pulls back and the text
   settles. html.js is set by an inline script in <head>; without it the CSS-only intro in hero.css runs instead. */
.js .stage { animation: none; will-change: transform; }
.hero.touring .spin { animation: none; transform: rotate(var(--rot, 0deg)); }
.hero.touring .node-in { animation: none; transform: rotate(calc(-1 * var(--rot, 0deg))); }
/* the caption names the focused service, so its own small label steps aside */
.hero.touring .node span { transition: transform .3s ease; }
.hero.touring .node.focus span { transform: scale(0); }

/* the orbit draws in at once, because the camera starts on it */
.js .ring.track { animation-delay: 0s; }
.js .ring.radar { animation-delay: .1s, 0s; }
.js .ring.outer { animation-delay: .2s, 0s; }
.js .ring.sweep { animation-delay: .6s, 0s; }
.js .core { animation-delay: .1s; }
.js .node i { animation-delay: calc(.15s + var(--k, 0) * .05s); }
.js .node span { animation-delay: calc(.35s + var(--k, 0) * .05s); }
.js .spoke { animation-delay: .5s; }

/* text waits for the tour, then settles from the moment .settle is added */
@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.settle) .fade, .js .hero:not(.settle) h1 .line > span, .js .hero:not(.settle) .markets { animation: none; opacity: 0; }
}
.js .hero.settle { --t0: .05s; }

/* captions, progress and skip */
.tour { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero.toured .tour { display: none; }
.tour-cap {
  position: absolute; width: min(620px, 92vw); transform: translateX(-50%); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.tour-cap.in { animation: cap-in .45s ease-out both; }
.tour-n { font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--gold); }
.tour-cap b { font: 600 clamp(36px, 5.2vw, 64px)/1.02 'Oswald', sans-serif; text-transform: uppercase; color: var(--text); text-shadow: 0 6px 34px rgba(0, 0, 0, .7); }
.tour-d { font-size: clamp(16px, 1.6vw, 20px); color: var(--soft); text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.tour-dots { display: flex; gap: 6px; margin-top: 8px; }
.tour-dots i { width: 26px; height: 3px; border-radius: 2px; background: rgba(245, 241, 232, .25); }
.tour-dots i.on { background: var(--gold); }
.tour-skip {
  display: none; position: absolute; z-index: 5; right: 20px; top: calc(var(--vh, 100%) - 76px);
  align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(224, 182, 70, .4); background: rgba(20, 23, 22, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text); font: 700 12px/1 'Public Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.tour-skip:hover { border-color: var(--gold); color: var(--gold); }
.hero.touring .tour-skip { display: flex; }
@keyframes cap-in { from { opacity: 0; transform: translate(-50%, 14px); filter: blur(6px); } to { opacity: 1; transform: translateX(-50%); } }
/* phones: caption above the focused icon, neighbours as icons only until the pull-back */
.tour-cap.above { transform: translate(-50%, -100%); }
.tour-cap.above.in { animation-name: cap-in-up; }
@keyframes cap-in-up { from { opacity: 0; transform: translate(-50%, calc(-100% + 14px)); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, -100%); } }
@media (max-width: 700px) { .hero.touring .node span { transform: scale(0); } }
@media (max-width: 480px) { .tour-dots i { width: 18px; } }