/* =====================================================================
   HANIHO — Brand Animation & UI Primitives
   Token-First, dark-UI first. Nutzbar app-weit ohne Build-Tool.
   Komponenten:
     .haniho-loader          — Pulse-Loader (3 Ringe + Core)
     .haniho-live            — Live-Dot (Feed/Events/Chat)
     .haniho-gradient-text   — Brand-Gradient auf Text
     .haniho-card            — Surface-Card (Dark-first)
   ===================================================================== */

:root {
  --hani-orange: #FF7A00;
  --hani-pink:   #FF2D7A;
  --hani-purple: #8A2BE2;
  --hani-live:   #FF5A3D;   /* für Live-Indikatoren, warmer als Brand-Pink */
  --hani-ink:    #111317;
  --hani-surface:#0E111A;
  --hani-offwhite:#F5F7FB;
}

/* ---------- 1. PULSE LOADER ------------------------------------------- */
.haniho-loader {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.haniho-loader .pulse {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid;
  opacity: 0;
  box-sizing: border-box;
}
.haniho-loader .p1 { border-color: var(--hani-orange); animation: hanihoPulse 2.4s infinite; }
.haniho-loader .p2 { border-color: var(--hani-pink);   animation: hanihoPulse 2.4s infinite 0.6s; }
.haniho-loader .p3 { border-color: var(--hani-purple); animation: hanihoPulse 2.4s infinite 1.2s; }
.haniho-loader .core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hani-orange), var(--hani-pink), var(--hani-purple));
  animation: hanihoCorePulse 1.4s infinite;
}
@keyframes hanihoPulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(4.5); opacity: 0.15; }
  100% { transform: scale(6);   opacity: 0; }
}
@keyframes hanihoCorePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ---------- 2. LIVE DOT ----------------------------------------------- */
.haniho-live {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hani-live);
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
.haniho-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hani-live);
  animation: hanihoLivePulse 1.6s infinite;
}
@keyframes hanihoLivePulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}
/* Optional: größere Variante für Karten/Header */
.haniho-live--lg { width: 14px; height: 14px; }

/* ---------- 3. GRADIENT TEXT ----------------------------------------- */
.haniho-gradient-text {
  background: linear-gradient(135deg, var(--hani-orange), var(--hani-pink), var(--hani-purple));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block; /* background-clip brauchstellenweise besser mit inline-block */
}

/* ---------- 4. CARD UI ----------------------------------------------- */
.haniho-card {
  background: var(--hani-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px;
  color: var(--hani-offwhite);
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.haniho-card:hover,
.haniho-card:focus-within {
  border-color: rgba(255, 255, 255, 0.1);
}
.haniho-card:active { transform: scale(0.998); }

/* Variants */
.haniho-card--live {
  border-color: rgba(255, 90, 61, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 90, 61, 0.08), 0 2px 12px rgba(255, 90, 61, 0.12);
}
.haniho-card--alert {
  border-color: rgba(255, 45, 122, 0.35);
}

/* ---------- Accessibility — reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .haniho-loader .p1,
  .haniho-loader .p2,
  .haniho-loader .p3,
  .haniho-loader .core,
  .haniho-live::after {
    animation: none;
  }
  .haniho-live::after { opacity: 0; }
}