/* =====================================================================
   UTOPIA STORE — Startseiten-Hero: Container „Willkommen Zuhause“
   mit ruhiger, animierter Tag Cloud (gesteuert von assets/tag-cloud.js).

   Die Begriffe stehen fest. Das Skript setzt .is-live (sanftes Einblenden
   beim ersten Erscheinen) und markiert reihum einen Begriff mit .is-lit,
   der kurz aufleuchtet. Ohne JavaScript oder bei „Bewegung reduzieren“
   bleibt die Wolke komplett statisch.

   Farben bewusst nur aus der Seiten-Palette: Weiß, Utopia-Grün (#7ddc8c)
   für die Hauptspiele (.tc-accent) und Orange (#ff8c00) für das Aufleuchten
   und den Hover – wie im Hauptmenü.
   !important ist nötig, weil index.html inline
   `body, h1, h2, h3, p, a, li { color:#fff !important }` setzt.
   ===================================================================== */

/* ---------- Container ---------- */
.hero .hero-copy {
  position: relative;
  padding: 2rem 2rem 1.2rem;
  border-radius: 20px;
  border: 1px solid rgba(125, 220, 140, .22) !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(125, 220, 140, .10), transparent 55%),
    rgba(14, 19, 24, .72) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* feine Leuchtkante oben */
.hero .hero-copy::before {
  content: ''; position: absolute; left: 2rem; right: 2rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 220, 140, .8), transparent);
}

.hero-kicker {
  display: block;
  margin: 0 0 1rem !important;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75) !important;
}
.hero-pulse {
  display: inline-block; vertical-align: 1px; margin-right: .55rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: #7ddc8c; box-shadow: 0 0 0 0 rgba(125, 220, 140, .6);
  animation: hero-pulse 2.4s ease-out infinite;
}
@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(125, 220, 140, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(125, 220, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 220, 140, 0); }
}
.hero .hero-copy h1 { margin-bottom: .8rem; font-size: clamp(38px, 5.6vw, 76px); }
.hero .hero-copy .lead { margin: 0; line-height: 1.6; }

/* ---------- Bereich der Wolke ---------- */
.hero-cloud {
  position: relative;
  margin: 1.6rem -1rem 0;
  padding: 1rem 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hero-cloud::before {                       /* weiches Leuchten hinter der Kugel */
  content: ''; position: absolute; left: 50%; top: 56%;
  width: 70%; aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(125, 220, 140, .12), transparent);
  pointer-events: none;
}
.hero-cloud-label {
  position: relative; margin: 0 0 .2rem !important;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5) !important;
}

/* ---------- Wortwolke (statisch: ohne JS / reduzierte Bewegung) ---------- */
.tag-cloud ul {
  list-style: none; margin: 0 auto; padding: .7rem 0 1.1rem; max-width: 520px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .45rem 1.15rem;
}
.tag-cloud li { margin: 0; padding: 0; }
.tag-cloud a {
  display: inline-block; white-space: nowrap; text-decoration: none;
  line-height: 1.15; padding: .15rem .25rem; border-radius: 8px;
  transition: text-shadow .2s ease, color .2s ease;
}
.tag-cloud a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Größen */
.tag-cloud .tc-xl { font-size: 1.6rem;  font-weight: 800; letter-spacing: .01em; }
.tag-cloud .tc-l  { font-size: 1.28rem; font-weight: 800; }
.tag-cloud .tc-m  { font-size: 1.05rem; font-weight: 700; }
.tag-cloud .tc-s  { font-size: .9rem;   font-weight: 600; }

/* Farben: Weiß abgestuft, Grün als Akzent */
.tag-cloud a              { color: #ffffff !important; }
.tag-cloud a.tc-s         { color: #a9cbb8 !important; }   /* --muted */
.tag-cloud a.tc-accent    { color: #7ddc8c !important; }   /* --neon  */

.tag-cloud a:hover,
.tag-cloud a:focus-visible {
  color: #ff8c00 !important;
  text-shadow: 0 0 12px rgba(255, 140, 0, .6);
}

/* ---------- Animation (vom Skript aktiviert) ---------- */
/* 1) sanftes Einblenden, Wort für Wort */
.tag-cloud.is-live li {
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0ms);
}
.tag-cloud.is-live.is-in li { opacity: 1; transform: none; }

/* 2) Spotlight: alle leicht gedimmt, einer leuchtet */
.tag-cloud.is-live a {
  opacity: .85;
  transition: opacity .9s ease, color .9s ease, text-shadow .9s ease, transform .9s ease;
}
.tag-cloud.is-live li.is-lit a,
.tag-cloud.is-live a:hover,
.tag-cloud.is-live a:focus-visible {
  opacity: 1;
  transform: scale(1.06);
  color: #ff8c00 !important;
  text-shadow: 0 0 12px rgba(255, 140, 0, .6);
}
/* solange die Maus in der Wolke ist, zählt nur das Wort unter der Maus */
.tag-cloud.is-live:hover li.is-lit a:not(:hover) {
  opacity: .85; transform: none; text-shadow: none;
}
.tag-cloud.is-live:hover li.is-lit a.tc-s:not(:hover)      { color: #a9cbb8 !important; }
.tag-cloud.is-live:hover li.is-lit a.tc-accent:not(:hover) { color: #7ddc8c !important; }
.tag-cloud.is-live:hover li.is-lit a:not(.tc-s):not(.tc-accent):not(:hover) { color: #ffffff !important; }

@media (max-width: 980px) {
  .hero .hero-copy { padding: 1.8rem 1.4rem 1.1rem; }
}
@media (max-width: 560px) {
  .hero-kicker { font-size: .66rem; letter-spacing: .1em; }
  .hero-cloud { margin-inline: -.6rem; padding-inline: .6rem; }
  .tag-cloud .tc-xl { font-size: 1.25rem; }
  .tag-cloud .tc-l  { font-size: 1.08rem; }
  .tag-cloud .tc-m  { font-size: .95rem; }
  .tag-cloud .tc-s  { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pulse { animation: none; }
}