/* ============================================================
   Showcase hub page
   ============================================================ */

.scHubHero { padding-bottom: var(--space-6); }

.scHubGrid { align-items: stretch; }

.scHubCard {
    display: flex; flex-direction: column;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    box-shadow: var(--sc-shadow);
    text-decoration: none;
    transition: transform 260ms var(--sc-ease-spring), box-shadow 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out);
}
.scHubCard:hover, .scHubCard:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--sc-shadow-lg);
    border-color: var(--sc-accent);
}
.scHubCard.scDark { background: var(--sc-dark-surface); border-color: var(--sc-dark-border); }
.scHubCard.scDark:hover { border-color: var(--sc-accent); }

.scHubCardVisual {
    position: relative;
    height: 106px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sc-accent) 7%, var(--sc-surface-2));
    border-bottom: 1px solid var(--sc-border);
    color: var(--sc-accent);
    overflow: hidden;
}
.scHubCard.scDark .scHubCardVisual {
    background: color-mix(in srgb, var(--sc-accent) 14%, var(--sc-dark-bg));
    border-color: var(--sc-dark-border);
}

.scHubCardBody { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }

.scHubCardStatus {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sc-text-faint);
}
.scHubCardStatus.isLive { color: var(--sc-accent); }
.scHubCardStatus.isLive::before { content: '\25CF '; font-size: 8px; vertical-align: middle; }
.scDark .scHubCardStatus { color: var(--sc-dark-text-muted); }

.scHubCardTitle { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--sc-text); margin: 0; }
.scDark .scHubCardTitle { color: var(--sc-dark-text); }

.scHubCardDesc { font-size: 14px; line-height: 1.6; color: var(--sc-text-muted); margin: 0; }
.scDark .scHubCardDesc { color: var(--sc-dark-text-muted); }

.scHubCardCta {
    margin-top: auto; padding-top: var(--space-3);
    font-size: 14px; font-weight: 700; color: var(--sc-accent);
}

.scHubCard.isPending { cursor: default; }
.scHubCard.isPending:hover { transform: none; box-shadow: var(--sc-shadow); border-color: var(--sc-border); }
.scHubCard.isPending.scDark:hover { border-color: var(--sc-dark-border); }

/* ---- 1. Data: mini bar chart ---- */
/* Bars carry their real final height/y in markup; the reveal animates
   transform (scaleY from the bottom edge) rather than height/y, since
   animating SVG geometry attributes is a layout-triggering animation
   the site's own animation rules rule out (transform/opacity only). */
.scHubBars { width: 70%; height: 70%; overflow: visible; }
.scHubBar {
    fill: currentColor; opacity: .85;
    transform-box: fill-box; transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 900ms var(--sc-ease-out);
}
.scHubCardVisual.isVisible .scHubBar { transform: scaleY(1); }
.scHubCardVisual.isVisible .scHubBar:nth-child(2) { transition-delay: 80ms; }
.scHubCardVisual.isVisible .scHubBar:nth-child(3) { transition-delay: 160ms; }
.scHubCardVisual.isVisible .scHubBar:nth-child(4) { transition-delay: 240ms; }
.scHubCardVisual.isVisible .scHubBar:nth-child(5) { transition-delay: 320ms; }
.scHubCardVisual.isVisible .scHubBar:nth-child(6) { transition-delay: 400ms; }

/* ---- 2 & 6. Research / Legislative: document lines ---- */
.scHubDoc { width: 70%; display: flex; flex-direction: column; gap: 10px; }
.scHubDocLine { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--sc-accent) 22%, transparent); }
.scHubDocLineHi {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sc-accent) 22%, transparent) 0%, var(--sc-accent) 50%, color-mix(in srgb, var(--sc-accent) 22%, transparent) 100%);
    background-size: 220% 100%;
}
.scHubCardVisual.isVisible .scHubDocLineHi { animation: scHubSweep 2.6s ease-in-out infinite; }
@keyframes scHubSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* The line itself grows to meet the fixed cursor position, standing in
   for "something is being typed" without spelling out actual words. */
.scHubTyping { position: relative; background: transparent; overflow: visible; }
.scHubTypeFill {
    position: absolute; inset: 0; display: block; border-radius: inherit;
    background: color-mix(in srgb, var(--sc-accent) 22%, transparent);
    transform-origin: left center; transform: scaleX(0);
}
.scHubCardVisual.isVisible .scHubTypeFill { animation: scHubType 3.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes scHubType {
    0% { transform: scaleX(0); }
    45% { transform: scaleX(1); }
    75% { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}
.scHubTyping::after {
    content: ''; display: inline-block; width: 2px; height: 10px; background: var(--sc-accent);
    margin-left: 4px; vertical-align: -1px;
}
.scHubCardVisual.isVisible .scHubTyping::after { animation: scHubBlink 1s steps(1) infinite; }
@keyframes scHubBlink { 50% { opacity: 0; } }

/* ---- 3. Media: sparkline (line only, no endpoint dot: it kept clipping
   half-outside the viewBox near the corner, simpler and cleaner without it) ---- */
.scHubSpark { width: 78%; height: 78%; overflow: visible; }
.scHubSparkPath { stroke-dasharray: 400; stroke-dashoffset: 400; }
.scHubCardVisual.isVisible .scHubSparkPath { animation: scHubSparkDraw 3.6s var(--sc-ease-out) infinite; }
@keyframes scHubSparkDraw {
    0% { stroke-dashoffset: 400; }
    40%, 75% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 400; }
}

/* ---- 4. Creative: phone stack ---- */
.scHubPhone { position: relative; width: 60px; height: 96px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--sc-accent) 40%, transparent); }
.scHubPhoneCard { position: absolute; inset: 6px; border-radius: 8px; background: var(--sc-accent); opacity: 0; transform: scale(.9); }
.scHubCardVisual.isVisible .scHubPhoneCard { animation: scHubPhoneCycle 3.6s var(--sc-ease-out) infinite; }
.scHubPhoneCard1 { animation-delay: 0s !important; opacity: .95; }
.scHubPhoneCard2 { background: color-mix(in srgb, var(--sc-accent) 60%, #7C5CFC); animation-delay: 1.2s !important; }
.scHubPhoneCard3 { background: color-mix(in srgb, var(--sc-accent) 60%, #0C8599); animation-delay: 2.4s !important; }
@keyframes scHubPhoneCycle {
    0%, 8% { opacity: 0; transform: scale(.9); }
    16%, 28% { opacity: .95; transform: scale(1); }
    36%, 100% { opacity: 0; transform: scale(.9); }
}

/* ---- 5. War Room: booth status grid ---- */
.scHubGrid9 { display: grid; grid-template-columns: repeat(3, 20px); gap: 8px; }
.scHubGrid9 span { width: 20px; height: 20px; border-radius: 4px; background: rgba(15,23,42,.08); }
/* Negative delays start every cell already partway through its own cycle
   on the very first frame, so the grid reads as already-in-progress
   activity immediately instead of a multi-second wait for the first flip. */
.scHubCardVisual.isVisible .scHubGrid9 span { animation: scHubFlip 3.2s ease-in-out infinite; }
.scHubGrid9 span:nth-child(1) { animation-delay: -.2s !important; }
.scHubGrid9 span:nth-child(2) { animation-delay: -.8s !important; }
.scHubGrid9 span:nth-child(3) { animation-delay: -1.4s !important; }
.scHubGrid9 span:nth-child(4) { animation-delay: -2.0s !important; }
.scHubGrid9 span:nth-child(5) { animation-delay: -2.6s !important; }
.scHubGrid9 span:nth-child(6) { animation-delay: -.5s !important; }
.scHubGrid9 span:nth-child(7) { animation-delay: -1.1s !important; }
.scHubGrid9 span:nth-child(8) { animation-delay: -1.7s !important; }
.scHubGrid9 span:nth-child(9) { animation-delay: -2.3s !important; }
@keyframes scHubFlip {
    0%, 40% { background: rgba(15,23,42,.08); }
    50%, 70% { background: var(--sc-accent); }
    100% { background: rgba(15,23,42,.08); }
}

@media (prefers-reduced-motion: reduce) {
    .scHubBar, .scHubDocLineHi, .scHubTyping::after, .scHubSparkPath,
    .scHubTypeFill, .scHubPhoneCard, .scHubGrid9 span { animation: none !important; transition: none !important; }
    .scHubSparkPath { stroke-dashoffset: 0; }
    .scHubBar { transform: scaleY(1); }
}

@media (max-width: 767.98px) {
    .scHubCardVisual { height: 92px; }
}