/* ============================================================
   SEC TEAM — "Arc Select" crew selector styles (js/team-select.js)
   ============================================================ */
/* About-section placement */
.about-team { margin-top: 4.5rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }
.about-team .section-eyebrow, .about-team .section-title { text-align: center; }
.about-team .section-title { margin-bottom: 2.6rem; }

#team-select { position: relative; }
/* Division logo watermark behind the panel. Logos are wildly different brightness (SEC black,
   ICE blue/orange, SDG red), so a raw colored watermark is invisible for the dark ones. JS sets
   a pre-baked WHITE ghost PNG of each logo as background-image (reliable, unlike CSS mask of an
   external image). z-index 5 = above the packed panel, below only the lightning canvas (z-index 6). */
.ts-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;   /* TRUE background: behind the roster, tabs, splash */
    background-repeat: no-repeat; background-position: center; background-size: contain;   /* logo as large as possible, whole */
    filter: blur(6px); opacity: 0.52;
    transition: opacity 0.4s ease;
}
.ts-fx { position: absolute; inset: -48px; z-index: 6; pointer-events: none; }   /* bleed past edges so glow isn't clipped (matches MARGIN in team-select.js) */

/* ---------- division tabs (SEC / ICE / SDG) ---------- */
.ts-tabs { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; position: relative; z-index: 3; }
.ts-tab {
    flex: 1; min-width: 0; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 1.1rem;
    background: #14141a; border: 1px solid var(--border); color: var(--text-muted);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition: background 0.2s, border-color 0.2s, color 0.2s, filter 0.2s;
}
.ts-tab-key  { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; color: var(--text-soft); }
.ts-tab-name { font: 600 0.6rem/1.2 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-tab:hover:not(.is-active) { border-color: var(--sec-red-soft); color: var(--text); }
.ts-tab.is-active {
    background: linear-gradient(135deg, var(--sec-red), #8f1217);
    border-color: var(--sec-red); color: #fff;
    filter: drop-shadow(0 0 14px var(--sec-red-glow));
}
.ts-tab.is-active .ts-tab-key { color: #fff; }

.ts-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.8rem; align-items: center; position: relative; z-index: 2; }

/* power-on cascade when a division loads */
.ts-grid.powering .ts-cell { animation: tsPowerOn 0.5s ease backwards; animation-delay: calc(var(--i, 0) * 0.06s); }
@keyframes tsPowerOn {
    0%   { opacity: 0; transform: translateY(9px) scale(0.95); filter: brightness(2.2); }
    55%  { filter: brightness(1.3) drop-shadow(0 0 12px var(--sec-red-glow)); }
    100% { opacity: 1; transform: none; }
}

/* ---------- roster grid ---------- */
.ts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    position: relative; z-index: 2;
    outline: none;
}
.ts-cell {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 0; margin: 0; cursor: pointer;
    background: #14141a;
    border: 1px solid var(--border);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: transform 0.22s ease, filter 0.22s ease, border-color 0.22s ease;
}
.ts-cell-media { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.ts-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.5); transition: filter 0.3s; }
.ts-sil { width: 84%; height: 94%; color: #2a2f3a; transition: color 0.3s; }
.ts-sil .ts-hat { fill: #3a2125; transition: fill 0.3s; }
.ts-cell-name {
    position: relative; z-index: 2;
    font: 700 0.58rem/1.2 'Inter', sans-serif;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-soft); text-align: center;
    padding: 0.45rem 0.3rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
}
/* position line under the name (owners/titled roles) */
.ts-cell-role {
    display: block; margin-top: 0.12rem;
    font: 600 0.48rem/1.15 'Inter', sans-serif; letter-spacing: 0.05em;
    color: var(--sec-red-soft);
}
.ts-cell-ring { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* simple hover on the small roster frames (devices with a real pointer) */
@media (hover: hover) and (pointer: fine) {
    .ts-cell:hover:not(.is-active) {
        border-color: var(--sec-red-soft);
        transform: translateY(-3px);
    }
    .ts-cell:hover:not(.is-active) .ts-sil { color: #5a6473; }
    .ts-cell:hover:not(.is-active) .ts-sil .ts-hat { fill: #7a3036; }
    .ts-cell:hover:not(.is-active) .ts-photo { filter: grayscale(0.4) brightness(0.8); }
    .ts-cell:hover:not(.is-active) .ts-cell-name { color: var(--text-soft); }
}

/* energized / selected — modest lift; the electricity now lives on the big splash portrait */
.ts-cell.is-active {
    border-color: var(--sec-red);
    transform: translateY(-3px) scale(1.035);
    filter: drop-shadow(0 0 8px var(--sec-red-glow));
    z-index: 4;
}
.ts-cell.is-active .ts-photo { filter: grayscale(0) brightness(1.03); }
.ts-cell.is-active .ts-sil { color: #c2cbd8; }
.ts-cell.is-active .ts-sil .ts-hat { fill: var(--sec-red); }
.ts-cell.is-active .ts-cell-name { color: #fff; }
/* MK-style corner brackets on the selected cell */
.ts-cell.is-active .ts-cell-ring::before,
.ts-cell.is-active .ts-cell-ring::after {
    content: ''; position: absolute; width: 15px; height: 15px; border: 3px solid var(--sec-red);
}
.ts-cell.is-active .ts-cell-ring::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.ts-cell.is-active .ts-cell-ring::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* ---------- splash panel ---------- */
.ts-splash {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
    min-height: 300px;
}
.ts-splash-media { position: relative; width: 184px; aspect-ratio: 3 / 4; }
.ts-aura {
    position: absolute; inset: -14px;
    border-radius: 46% / 38%;
    background: radial-gradient(circle, var(--sec-red-glow), transparent 70%);
    filter: blur(10px);
    animation: tsPulse 2.4s ease-in-out infinite;
}
.ts-splash-portrait {
    position: relative; z-index: 2; width: 100%; height: 100%;
    display: flex; align-items: flex-end; justify-content: center;
    border: 1px solid rgba(216, 30, 38, 0.45);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    background: linear-gradient(160deg, #16161d, #0c0c11);
    overflow: hidden;
}
.ts-splash-portrait .ts-sil { width: 100%; height: 100%; color: #ccd4df; }
.ts-splash-portrait .ts-sil .ts-hat { fill: var(--sec-red); }
.ts-splash-portrait .ts-photo { width: 100%; height: 100%; object-fit: cover; filter: none; }
@keyframes tsPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.ts-name { font-family: 'Oswald', sans-serif; font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; text-transform: uppercase; line-height: 1; margin: 0 0 0.25rem; color: #fff; }
.ts-epithet { font-family: 'Oswald', sans-serif; font-weight: 600; font-style: italic; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--sec-red-soft); margin: 0 0 0.85rem; }
.ts-epithet:empty { display: none; }
.ts-bio { color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; margin: 0; max-width: 44ch; }
.ts-focus { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.95rem; padding: 0; max-width: 400px; }
.ts-focus:empty { display: none; }
.ts-focus li {
    font-family: 'Oswald', sans-serif; font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft);
    padding: 0.3rem 0.62rem; border-radius: 999px;
    border: 1px solid rgba(216, 30, 38, 0.35); background: rgba(216, 30, 38, 0.06);
    animation: tsChip 0.4s ease backwards; animation-delay: calc(var(--i, 0) * 0.045s);
}
@keyframes tsChip { 0% { opacity: 0; transform: translateY(6px) scale(0.9); } 100% { opacity: 1; transform: none; } }

/* mission statement — full-width footer at the bottom of the team panel */
.ts-mission {
    position: relative; z-index: 1;   /* above the blurred bg watermark */
    margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center;
}
.ts-mission-label { font: 700 0.72rem/1 'Inter', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sec-red-soft); }
.ts-mission-text { color: var(--text-soft); font-size: 1.08rem; font-style: italic; line-height: 1.5; max-width: 64ch; }

/* shrink/fizzle then pop the whole card on each pick (red flash removed) */
.ts-flash { display: none; }
.ts-splash { transform-origin: center center; }
.ts-splash.is-pop { animation: tsPop 0.5s cubic-bezier(0.3, 1.3, 0.4, 1); }
@keyframes tsPop {
    0%   { transform: scale(1);     opacity: 1; }
    30%  { transform: scale(0.8);   opacity: 0.3; }   /* fizzle out — content swaps here */
    62%  { transform: scale(1.045); opacity: 1; }      /* pop overshoot */
    100% { transform: scale(1);     opacity: 1; }
}

/* ---------- responsive + motion ---------- */
@media (max-width: 880px) {
    .ts-body { grid-template-columns: 1fr; gap: 1.8rem; }
    .ts-splash { grid-template-columns: 116px 1fr; min-height: 0; }
    .ts-splash-media { width: 116px; }
}
@media (max-width: 560px) {
    .ts-tab { padding: 0.6rem 0.7rem; align-items: center; }
    .ts-tab-name { display: none; }
    .ts-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-aura, .ts-focus li, .ts-splash.is-pop, .ts-cell { animation: none !important; transition: none !important; }
}