/* ── Performances — mobile first ─────────────────────────────────────── */
.performances {
    background: var(--bg-deep);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}
.performances::before {
    content: '';
    position: absolute;
    bottom: -120px; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 450px;
    background: radial-gradient(ellipse, rgba(176,129,186,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.performances-inner  { max-width: 1200px; margin: 0 auto; }
.performances-header { margin-bottom: 48px; }

.performances-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}

.performance-card {
    background: var(--bg-card);
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.performance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(to right, var(--accent-mauve), var(--accent-mint));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.performance-card:hover::before,
.performance-card:focus-within::before { transform: scaleX(1); }
.performance-card:hover { transform: translateY(-6px); }
.performance-card::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top left, rgba(176,129,186,0.05), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.performance-card:hover::after { opacity: 1; }

.performance-year    { font-size: 10px; font-weight: 700; letter-spacing: 0.28em; color: var(--accent-mint); margin-bottom: 20px; }
.performance-role    { font-family: var(--font-display); font-size: 26px; font-weight: 500; font-style: italic; color: var(--text-primary); margin-bottom: 12px; line-height: 1.2; }
.performance-show    { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.performance-company { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: 0.06em; }

/* ── Desktop ─────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    .performances        { padding: 128px 72px; }
    .performances-header { margin-bottom: 72px; }
    .performances-grid   { grid-template-columns: repeat(3, 1fr); }
    .performance-card    { padding: 44px 38px; }
    .performance-role    { font-size: 30px; }
}