/* Effekte (Magic UI, magicui.design - als Vanilla-CSS portiert, die Seite hat kein React/Tailwind):
   Dot Pattern, Blur Fade, Border Beam, Shimmer Button, Aurora Text, Marquee, Magic Card
   (Spotlight), Orbiting Circles, Number Ticker, glaenzende Medaillen.
   Interaktive Teile (Zaehler, Spotlight-Cursor, Einblenden beim Scrollen) in effects.js.
   Farben auf die Rot/Gelb-Palette aus style.css abgestimmt. Klassen-Prefix fx-. */

:root {
  --fx-gold: #ffc72c;
  --fx-orange: #f0541e;
  --fx-dot: rgba(208, 31, 23, 0.22);
  --fx-spot: rgba(255, 199, 44, 0.22);
  --fx-shimmer: #ffe27a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fx-dot: rgba(255, 199, 44, 0.2);
    --fx-spot: rgba(255, 90, 77, 0.16);
    --fx-shimmer: #ffc72c;
  }
}
:root[data-theme="dark"] {
  --fx-dot: rgba(255, 199, 44, 0.2);
  --fx-spot: rgba(255, 90, 77, 0.16);
  --fx-shimmer: #ffc72c;
}

/* ---------- Dot Pattern (Hintergrund von Heroes und Seitenkoepfen) ---------- */
.fx-host { position: relative; isolation: isolate; }
.fx-dots {
  position: absolute;
  inset: 0 -24px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--fx-dot) 1.3px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 85% 35%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 85% at 85% 35%, #000 10%, transparent 72%);
}

/* ---------- Blur Fade ---------- */
/* Hero-Slides: Inhalt blendet beim Wechsel gestaffelt ein */
.fx-js .hero-feature__slide .hero-feature__content > * { opacity: 0; }
.fx-js .hero-feature__slide.is-current .hero-feature__content > * { animation: fx-blur-in 700ms var(--ease) forwards; }
.fx-js .hero-feature__slide.is-current .hero-feature__content > :nth-child(2) { animation-delay: 80ms; }
.fx-js .hero-feature__slide.is-current .hero-feature__content > :nth-child(3) { animation-delay: 160ms; }
.fx-js .hero-feature__slide.is-current .hero-feature__content > :nth-child(4) { animation-delay: 240ms; }
@keyframes fx-blur-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
/* Seitenkoepfe: Blur Fade beim Laden, gestaffelt (ersetzt dort das einfache Einblenden) */
main.wrap > .page-hero, main.wrap > .about-hero, main.wrap > .hero-feature { animation: none; }
.fx-in { animation: fx-blur-in 700ms var(--ease) both; }
.fx-in:nth-child(3) { animation-delay: 60ms; }
.fx-in:nth-child(4) { animation-delay: 120ms; }
.fx-in:nth-child(5) { animation-delay: 180ms; }
.fx-in:nth-child(6) { animation-delay: 240ms; }
.fx-in:nth-child(7) { animation-delay: 300ms; }
/* Blur Fade beim Scrollen - nur wenn JS laeuft, sonst sofort sichtbar */
.fx-js .fx-fade {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition: opacity 700ms ease, filter 700ms ease, transform 700ms var(--ease);
}
.fx-js .fx-fade.is-visible { opacity: 1; filter: none; transform: none; }

/* ---------- Border Beam (wandernder Lichtpunkt am Rand) ---------- */
.fx-beam-host { position: relative; }
.fx-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
}
.fx-beam > span {
  position: absolute;
  width: 140px;
  aspect-ratio: 1;
  background: linear-gradient(to left, var(--fx-gold), var(--terracotta), transparent);
  offset-path: rect(0 auto auto 0 round 140px);
  animation: fx-beam 8s linear infinite;
}
@keyframes fx-beam {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* ---------- Shimmer Button (primaerer Button mit kreisendem Lichtstreifen) ---------- */
.fx-shimmer {
  --fx-bg: var(--btn-bg);
  --fx-fg: #fff;
  --fx-speed: 3s;
  --fx-cut: 0.08em;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--fx-bg);
  color: var(--fx-fg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: inset 0 -8px 10px rgba(255, 255, 255, 0.16), 0 6px 16px rgba(208, 31, 23, 0.28);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.fx-shimmer:hover {
  background: var(--fx-bg);
  color: var(--fx-fg);
  box-shadow: inset 0 -6px 10px rgba(255, 255, 255, 0.28), 0 8px 20px rgba(208, 31, 23, 0.36);
  transform: translateY(-1px);
}
.fx-shimmer:active { transform: translateY(1px); }
/* Backdrop: deckt die Mitte ab, sodass nur am Rand ein schmaler Lichtstreifen sichtbar bleibt */
.fx-shimmer::after {
  content: "";
  position: absolute;
  inset: var(--fx-cut);
  z-index: -2;
  border-radius: inherit;
  background: var(--fx-bg);
}
.fx-shimmer__spark { position: absolute; inset: 0; z-index: -3; overflow: visible; filter: blur(2px); container-type: size; }
.fx-shimmer__spark > span { position: absolute; inset: 0; height: 100cqh; aspect-ratio: 1; animation: fx-shimmer-slide var(--fx-speed) ease-in-out infinite alternate; }
.fx-shimmer__spark > span::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 225deg, transparent 0, var(--fx-shimmer) 90deg, transparent 90deg);
  animation: fx-spin var(--fx-speed) infinite linear;
  animation-duration: calc(var(--fx-speed) * 2);
}
.fx-shimmer__label { position: relative; display: inline-flex; align-items: center; gap: 8px; }
@keyframes fx-shimmer-slide { to { transform: translate(calc(100cqw - 100%), 0); } }
@keyframes fx-spin {
  0% { transform: translateZ(0) rotate(0); }
  15%, 35% { transform: translateZ(0) rotate(90deg); }
  65%, 85% { transform: translateZ(0) rotate(270deg); }
  100% { transform: translateZ(0) rotate(360deg); }
}
/* gelber Variante fuer rote/dunkle Flaechen */
.fx-shimmer--yellow { --fx-bg: var(--yellow); --fx-fg: var(--on-yellow); --fx-shimmer: #fff; box-shadow: inset 0 -8px 10px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(255, 199, 44, 0.35); }
.fx-ghost {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--brown);
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.fx-ghost:hover { text-decoration: none; border-color: var(--terracotta); background: var(--cream-dark); transform: translateY(-1px); }

/* ---------- Aurora Text (Verlaufstext mit wandernder Farbe) ---------- */
.fx-aurora {
  display: inline-block;
  background-image: linear-gradient(135deg, #d01f17, #f0541e, #e88a00, #b3120b, #d01f17);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fx-aurora 10s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx-aurora { background-image: linear-gradient(135deg, #ff5a4d, #ff9a3c, #ffc72c, #ff6a4a, #ff5a4d); }
}
:root[data-theme="dark"] .fx-aurora { background-image: linear-gradient(135deg, #ff5a4d, #ff9a3c, #ffc72c, #ff6a4a, #ff5a4d); }
/* auf dem gelben Hero-Band Rot-Orange-Dunkelrot statt Gelb (sonst verschwindet das Gelb im Gelb) */
@keyframes fx-aurora {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Marquee (laufende Kategorie-Leiste) ---------- */
.fx-marquee {
  --gap: 12px;
  --duration: 40s;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.fx-marquee__row { display: flex; flex-shrink: 0; justify-content: space-around; gap: var(--gap); animation: fx-marquee var(--duration) linear infinite; }
.fx-marquee:hover .fx-marquee__row,
.fx-marquee:focus-within .fx-marquee__row { animation-play-state: paused; }
.fx-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--brown);
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease, background-color 200ms ease;
}
.fx-marquee__item .icon { color: var(--terracotta); }
.fx-marquee__item:hover { text-decoration: none; border-color: var(--terracotta); background: var(--yellow); color: var(--on-yellow); transform: translateY(-1px); }
.fx-marquee__item:hover .icon { color: var(--on-yellow); }
@keyframes fx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

/* ---------- Magic Card (Spotlight-Rahmen + Lichtkegel folgen dem Mauszeiger) ---------- */
.fx-spot {
  --mx: -300px;
  --my: -300px;
  position: relative;
  isolation: isolate;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--white) 0 0) padding-box,
    radial-gradient(240px circle at var(--mx) var(--my), var(--terracotta), var(--fx-gold), var(--border) 100%) border-box !important;
}
.fx-spot::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--fx-spot), transparent 100%);
  opacity: 0;
  transition: opacity 300ms ease;
}
.fx-spot:hover::after { opacity: 1; }

/* ---------- Orbiting Circles (Plattform- und Kategorie-Icons kreisen ums Profilbild) ---------- */
.fx-orbit {
  --size: 420px;
  --outer: 188;
  --inner: 124;
  position: relative;
  width: var(--size);
  height: var(--size);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-orbit__paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fx-orbit__path { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.fx-orbit__path--outer { r: calc(var(--outer) * 1px); }
.fx-orbit__path--inner { r: calc(var(--inner) * 1px); stroke-dasharray: 4 6; }
.fx-orbit__photo {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px var(--terracotta), 0 14px 36px rgba(208, 31, 23, 0.3);
  background: var(--cream-dark);
}
.fx-orbit__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.24); }
.fx-orbit__item {
  --radius: var(--outer);
  --duration: 24;
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 6px 14px rgba(208, 31, 23, 0.35);
  animation: fx-orbit calc(var(--duration) * 1s) linear infinite;
}
.fx-orbit__item--inner {
  --radius: var(--inner);
  --duration: 18;
  width: 38px;
  height: 38px;
  background: var(--yellow);
  color: var(--on-yellow);
  box-shadow: 0 6px 14px rgba(255, 199, 44, 0.4);
  animation-direction: reverse;
}
@keyframes fx-orbit {
  0% { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
  100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); }
}

/* ---------- Medaillen der Top 3 (Gold = Senfgelb, mit wanderndem Glanz) ---------- */
.ranking-rank--medal {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #27251f;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(39, 37, 31, 0.18);
}
.ranking-row--top1 .ranking-rank { background: linear-gradient(135deg, #ffe58a, #ffc72c 55%, #e5a000); }
.ranking-row--top2 .ranking-rank { background: linear-gradient(135deg, #f6f6f6, #cfd2d6 55%, #a9afb7); }
.ranking-row--top3 .ranking-rank { background: linear-gradient(135deg, #f5c79d, #d98d54 55%, #b06a34); }
.ranking-rank--medal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: fx-shine 4s ease-in-out infinite;
}
.ranking-row--top2 .ranking-rank--medal::after { animation-delay: 300ms; }
.ranking-row--top3 .ranking-rank--medal::after { animation-delay: 600ms; }
@keyframes fx-shine {
  0%, 60% { background-position: 150% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- Kleine Hover-Effekte ---------- */
.ranking-nav button:hover,
.map-filter:hover,
.social-link:hover,
.category-index__item:hover { transform: translateY(-1px); }
a.ranking-row:hover { transform: translateX(3px); }
.ranking-row:hover .ranking-rank { transform: scale(1.08); }
.ranking-rank { transition: transform 200ms ease; }
/* Aktiver Filter: Verlauf mit Schein */
.ranking-nav button.is-active,
.map-filter.is-active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 -6px 10px rgba(255, 255, 255, 0.18), 0 6px 14px rgba(208, 31, 23, 0.3);
}
/* Balken im Ueber-mich-Dashboard wachsen beim Einblenden von links auf */
.fx-js .reach__demo .reach__bar-fill,
.fx-js .reach__demo .reach__gender-bar > div { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease) 200ms; }
.fx-js .reach__demo.is-visible .reach__bar-fill,
.fx-js .reach__demo.is-visible .reach__gender-bar > div { transform: none; }
/* Bewertungsskala als Farbverlauf */
.fx-scale-bar { height: 10px; border-radius: 999px; margin: 0 0 12px; background: linear-gradient(90deg, #8a8576, var(--fx-gold), var(--terracotta)); }

@media (max-width: 860px) {
  .fx-orbit { order: -1; }
}
@media (max-width: 560px) {
  .fx-orbit { --size: 300px; --outer: 132; --inner: 88; }
  .fx-orbit__photo { width: 140px; height: 140px; }
  .fx-orbit__item { width: 38px; height: 38px; }
  .fx-orbit__item--inner { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-js .hero-feature__slide .hero-feature__content > *,
  .fx-in,
  .fx-js .fx-fade { opacity: 1; filter: none; transform: none; animation: none; transition: none; }
  .fx-orbit__item,
  .ranking-rank--medal::after { animation: none; }
  .fx-orbit__item { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
  .fx-js .reach__demo .reach__bar-fill,
  .fx-js .reach__demo .reach__gender-bar > div { transform: none; transition: none; }
  .fx-beam, .fx-shimmer__spark { display: none; }
  .fx-aurora, .fx-marquee__row { animation: none; }
  .fx-marquee { overflow-x: auto; }
}