/* ============================================================
   TIER ROW — concept-aligned: edge glow only, no SaaS card chrome
   - No full-perimeter border
   - Single LEFT edge gradient glow (carries tier color identity)
   - Per-tier ambient: S = embers shimmer, X = hatch / dashed
   - All tiers share identical structural geometry — differentiation
     comes from sigil motif (handled in tier-sigils.js) and color
   ============================================================ */

.tier-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-3);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
}

.tier-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* The tier row — TOP edge glow as tier identifier; visible warm-dark fill */
.tier-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  background:
    linear-gradient(180deg,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.18) 0%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.05) 50%,
      oklch(13% 0.025 295 / 0.7) 100%
    );
  /* Full tier-color glow outline — matches reference treatment */
  border: 1px solid oklch(from var(--tier-color, var(--color-amber)) l c h / 0.65);
  box-shadow:
    0 0 12px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.35),
    inset 0 0 0 1px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.18);
}

/* TOP edge stripe removed — the saturated tier-color badge cell now
   carries tier identity. A redundant horizontal stripe across the row
   read as awkward chrome. */

/* Conditional (X) tier — DASHED top edge */
/* X tier hatched ambient overlay */
.tier-section.conditional .tier-row {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.04) 14px 16px
    ),
    linear-gradient(180deg,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.18) 0%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.05) 50%,
      oklch(13% 0.025 295 / 0.7) 100%
    );
}

/* --- Tier Badge (left column) --- */
.tier-badge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  min-width: 140px;
  padding: var(--space-3) var(--space-2);
  position: relative;
  /* Sigil + letter stay inside this column */
  overflow: hidden;
  /* DISTINCT cell — saturated tier-color radial fill, contrasts comp area.
     The vertical seam is now an explicit .tier-row-divider element. */
  background:
    radial-gradient(circle at 50% 50%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.55) 0%,
      oklch(from var(--tier-color, var(--color-amber)) l c h / 0.28) 55%,
      oklch(from var(--tier-color, var(--color-amber)) calc(l - 0.05) c h / 0.12) 100%
    );
}

/* Sigil sits behind the letter — per-tier motif drives identity */
.tier-badge-sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 0;
  color: var(--tier-color, var(--color-amber));
  filter: drop-shadow(0 0 8px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.5));
}

.tier-badge-sigil .tier-sigil-svg {
  width: 100%;
  height: 100%;
}

/* Slow ambient rotation per tier — different speeds for visual variety */
.tier-section.tier-s .tier-badge-sigil .tier-sigil-svg { animation: badge-sigil-rotate 70s linear infinite; }
.tier-section.tier-a .tier-badge-sigil .tier-sigil-svg { animation: badge-sigil-rotate 110s linear infinite reverse; }
.tier-section.tier-b .tier-badge-sigil .tier-sigil-svg { animation: badge-sigil-rotate 90s linear infinite; }
.tier-section.tier-c .tier-badge-sigil .tier-sigil-svg { animation: badge-sigil-rotate 140s linear infinite; }
.tier-section.tier-x .tier-badge-sigil .tier-sigil-svg { animation: badge-sigil-pulse 4s var(--ease-out-quart) infinite; }

@keyframes badge-sigil-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* X tier sigil pulses instead of rotating — "checking conditions" feel */
@keyframes badge-sigil-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.96); }
}

.tier-letter {
  font-family: var(--font-display);
  font-size: 4.75rem;
  line-height: 0.9;
  color: var(--tier-color, var(--color-amber));
  text-shadow:
    0 0 12px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.85),
    0 0 28px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.5),
    0 0 56px oklch(from var(--tier-color, var(--color-amber)) l c h / 0.25);
  user-select: none;
  position: relative;
  z-index: 1;
  letter-spacing: 0;
}

/* --- Comps row (right side) --- */
.tier-comps-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  overflow-x: auto;
  overflow-y: visible;
  min-height: 156px;
  scrollbar-width: thin;
}

/* --- Detail expand wrapper --- */
.tier-detail-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out-quart);
}

.tier-detail-wrapper.expanded {
  grid-template-rows: 1fr;
}

.tier-detail-inner {
  overflow: hidden;
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .tier-badge-col { width: 64px; min-width: 64px; }
  .tier-letter { font-size: 3.2rem; }
  .tier-sublabel { font-size: 0.55rem; letter-spacing: 0.18em; }
  .tier-badge-sigil { width: 100px; height: 100px; }
  .tier-comps-row { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
}