/* Error-cycle block — claude theme. Plain CSS, zero Tailwind utilities
   (avoids tailwind-compiled.css rebuild — CLAUDE.md rule 12).
   Circular layout via CSS rotate+translate composition (no server-side trig,
   works for any --count). Default state is fully visible without JS — JS
   only adds a staggered fade-in replay, never gates initial visibility
   (crawlers/no-JS/reduced-motion always see the full content). */

.error-cycle__wrap { max-width: 64rem; margin: 0 auto; padding: 4rem 1.5rem; }

.error-cycle__header { text-align: center; margin-bottom: 3rem; }

.error-cycle__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #2c0e6f;
}

.error-cycle__title {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: #1a1a2e;
}

.error-cycle__intro {
  margin: 0.75rem auto 0;
  max-width: 40rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4b5563;
}

.error-cycle__ring {
  position: relative;
  width: min(460px, 90vw);
  aspect-ratio: 1;
  margin: 0 auto;
}

.error-cycle__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9rem;
  text-align: center;
}

.error-cycle__center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.5rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 1.25rem;
}

.error-cycle__center-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a2e;
}

/* Circular placement — fixed, never touched by the reveal animation below
   (reveal only toggles opacity, so there's no transform race). */
.error-cycle__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  margin: -75px 0 0 -80px;
  text-align: center;
  transform: rotate(calc(360deg / var(--count) * var(--i))) translateY(-200px) rotate(calc(-360deg / var(--count) * var(--i)));
}

.error-cycle__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  background: #1a1a2e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.error-cycle__icon { display: none; } /* okrąg za ciasny na ikonę + numer; ikona wraca w widoku mobile */

.error-cycle__node-title {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a2e;
}

.error-cycle__node-desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
}

.error-cycle__cta { text-align: center; margin-top: 3rem; }

.error-cycle__cta-link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: #2c0e6f;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* Reveal animation — JS-gated (.error-cycle--active added by error-cycle.js
   only after IntersectionObserver init; without JS this class never exists,
   so the rule above never applies and nodes stay opacity:1). */
.error-cycle--active .error-cycle__node {
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--i) * 90ms);
}
.error-cycle--active.error-cycle--revealed .error-cycle__node { opacity: 1; }

/* Mobile fallback — circle degrades to a vertical stepped list. */
@media (max-width: 767px) {
  .error-cycle__ring { position: static; width: auto; aspect-ratio: auto; }
  .error-cycle__center { position: static; transform: none; margin: 0 0 1.5rem; }
  .error-cycle__node {
    position: static;
    width: auto;
    margin: 0 0 1.5rem;
    padding-left: 1rem;
    text-align: left;
    transform: none !important;
  }
  .error-cycle__node:not(:last-child) {
    border-left: 2px solid #e5e7eb;
    padding-bottom: 1.5rem;
  }
  .error-cycle__icon { display: inline-block; margin-right: 0.4rem; color: #2c0e6f; }
}