/* Homepage header — animated particle globe background.
   Replaces the static placeholder image inside .fg__homepage-header__video-wrapper
   (see ContentBlocks/ContentElements/headerhome). Rendered by
   headerhome-globe.js; falls back to the shipped WebP crop below when
   JS/canvas is unavailable.
   Loaded only on the homepage (page.typoscript, uid 1148 condition). */

.fg__homepage-header__video-wrapper.hdr {
  overflow: hidden;
  background: linear-gradient(180deg, rgb(0,0,1) 0%, rgb(83,46,174) 100%);
  contain: paint;
  container-type: inline-size;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
}

/* ── Layer 1 — dot grid. Tiling radial-gradient, one element. ────────────── */
.grid {
  position: absolute; inset: 0; opacity: 0.2;
  background-image: radial-gradient(circle at center,
      rgba(255,255,255,0.40) 0,
      rgba(255,255,255,0.40) 1.05px,
      rgba(255,255,255,0.15) 1.45px,
      transparent 1.95px);
  background-size: 34px 30.74px;
  background-position: 2.5px -14.87px;
}

/* ── Layer 2 — particle globe. ───────────────────────────────────────────── */
.globe { position: absolute; inset: 0; display: block; }

/* No-JS / canvas-unavailable fallback. Removed by JS once the canvas is
   live. Shipped WebP crop, pills baked in for the true no-JS case — the
   real DOM pills below still render whenever JS runs at all (gated on
   .js, not on canvas success).
   Scoped to html:not(.js): with JS present this is only ever visible for
   the brief gap before headerhome-globe.js's boot() finishes, so
   downloading it there just competes for bandwidth with
   land_mask.png/fonts/JS on slow connections — and IS what's visible
   painting in gradually on a throttled connection, not the canvas. True
   no-JS visitors still get it, since .js never lands for them. */
.globe-fallback {
  position: absolute; inset: 0;
}
html:not(.js) .globe-fallback {
  background: url("../Images/headerhome-globe/homepage-header-bg-16.webp") center / cover no-repeat;
}

/* ── Layer 3 — pills. Real DOM text, so it stays present and readable
   (translation, search) even with the decorative layer aria-hidden. ────── */
.pills { position: absolute; inset: 0; container-type: inline-size; }
.pill {
  position: absolute;
  display: grid; place-items: center;
  width:  calc(90px * var(--gs, 1));
  height: calc(35px * var(--gs, 1));
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: calc(19px * var(--gs, 1));
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  border: 0;
  box-shadow: 0 2px 6px -3px rgba(255,255,255,0.12);
  /* Hidden until .js confirms the canvas path is live — the WebP fallback
     has the pills baked in, so painting these on top of it would double
     them up. */
  opacity: 0;
}
.pill::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.34) 55%,
    rgba(255,255,255,0.82) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.motion .pill {
  animation:
    pill-in 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) var(--delay) both,
    pill-wobble 5s ease-in-out calc(var(--delay) + 0.9s) infinite;
}
/* Reduced motion never gets .motion (headerhome-globe.js), so it needs its
   own static reveal — outside that case this used to also match while
   .motion was still pending, showing pills at full opacity for a moment
   before pill-in's `from { opacity: 0 }` (animation-fill-mode: both)
   snapped them back out and re-animated them in, a visible blink. */
@media (prefers-reduced-motion: reduce) {
  .js .pill { opacity: var(--op); }
}
@keyframes pill-in {
  from { opacity: 0;          transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: var(--op);  transform: translate(-50%, -50%); }
}
@keyframes pill-wobble {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  25%  { transform: translate(calc(-50% + 2.3px * var(--gs, 1)), calc(-50% - 5.8px * var(--gs, 1))) rotate(0.8deg); }
  50%  { transform: translate(calc(-50% - 2.7px * var(--gs, 1)), calc(-50% + 2.3px * var(--gs, 1))) rotate(-0.5deg); }
  75%  { transform: translate(calc(-50% + 1.2px * var(--gs, 1)), calc(-50% - 3.8px * var(--gs, 1))) rotate(0.4deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .motion .pill { animation: none; }
}

/* ── Mobil-Pills ────────────────────────────────────────────────────────
   'cover' beschneidet den Globus mobil seitlich; die zehn Standard-Pills
   sitzen auf den aeusseren Flanken und laufen dabei aus dem Bild. Diese
   zwei Ersatz-Pills haengen am Header-Kasten (Prozent), nicht am Globus,
   mit fester Schriftgroesse — Positionen aus templates/frontend.html. */
.pill--fix {
  width: auto; height: auto;
  padding: 5px 12px;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.hdr.is-narrow .pill--ref { display: none; }
.hdr:not(.is-narrow) .pill--fix { display: none; }