/* ═══════ RunRiva Brand CSS - jedyne źródło prawdy dla marki ═══════
   Tokeny CSS, rozmiary logo, animacje.
   ZERO zależności od tokenów skórek gry (--color-primary itp.)
   Importowane przez: host, participant, configurator
   ═══════════════════════════════════════════════════════════════ */

/* Kolory brand definiowane w tokens.css - tu tylko referencja dla animacji */

/* ─── Rozmiary logo ─── */
.rr-logo-sm { width: 140px; }
.rr-logo-md { width: 200px; }
.rr-logo-lg { width: 320px; }

/* ─── Ikona: koło ─── */
#icon-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: rr-circleIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── Ikona: trójkąt play ─── */
#icon-play {
  animation: rr-fadeUp 0.25s ease both 0.35s;
}

/* ─── Łuki: draw-on + ciągły puls ─── */
#arc1 {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: rr-drawArc 0.45s ease-out both 0.2s, rr-arcPulse1 3s ease-in-out infinite 2.2s;
}
#arc2 {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: rr-drawArc 0.5s ease-out both 0.42s, rr-arcPulse2 3s ease-in-out infinite 2.2s;
}
#arc3 {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: rr-drawArc 0.55s ease-out both 0.65s, rr-arcPulse3 3s ease-in-out infinite 2.2s;
}

/* ─── Litery "Run" (granatowe) ─── */
#letter-R1 { animation: rr-letterIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both 0.45s; }
#letter-u  { animation: rr-letterIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both 0.55s; }
#letter-n  { animation: rr-letterIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both 0.65s; }

/* ─── Litery "Riva" (pomarańczowe) ─── */
#letter-R2 { animation: rr-letterInPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.78s; }
#letter-i  { animation: rr-letterInPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.88s; }
#letter-v  { animation: rr-letterInPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.96s; }
#letter-a  { animation: rr-letterInPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both 1.04s; }

/* ─── ".com" ─── */
#g-dotcom { animation: rr-fadeUp 0.4s ease both 1.2s; }

/* ═══════ Keyframes ═══════ */

@keyframes rr-circleIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes rr-drawArc {
  to { stroke-dashoffset: 0; }
}

@keyframes rr-arcPulse1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes rr-arcPulse2 {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 0.15; }
}
@keyframes rr-arcPulse3 {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.07; }
}

@keyframes rr-letterIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rr-letterInPop {
  from { opacity: 0; transform: translateY(8px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rr-fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}