/* ==========================================================
   Interactive Orbit Teams Page Stylesheet
 ========================================================== */

:root {
    --bg-dark: #090d16;
    --card-bg: rgba(17, 24, 39, 0.7);
    --border-glow: rgba(243, 198, 35, 0.4);
    --line-color: rgba(255, 255, 255, 0.08);
}

.teams-page-body {
    background-color: var(--bg-main-light, var(--slate-900));
    color: var(--text-primary, var(--gray-50));
    font-family: 'Inter', sans-serif;
    overflow-y: auto;
    position: relative;
}

/* Page Wrapper */
.teams-viewport-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Background Glow */
.teams-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--blue-500-alpha-06) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* Header */
.teams-header {
    text-align: center;
    margin-bottom: 60px;
    z-index: 5;
    position: relative;
}

.teams-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, var(--white) 0%, var(--text-secondary, var(--slate-400)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.teams-header p {
    color: var(--text-secondary, var(--slate-400));
    font-size: 16px;
    margin: 0;
}

/* ==========================================================
   Tab Switcher: Our Story / Meet the Team
 ========================================================== */

.teams-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 50px;
    z-index: 5;
    position: relative;
}

.teams-tab {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, var(--slate-400));
    background: var(--bg-card, var(--slate-800-alpha-60));
    border: 1px solid var(--border-card, var(--white-alpha-08));
    border-radius: 999px;
    padding: 10px 26px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.teams-tab:hover {
    color: var(--text-primary, var(--gray-50));
    border-color: var(--brand-primary, var(--yellow-400));
}

.teams-tab.active {
    background: var(--brand-primary, var(--yellow-400));
    border-color: var(--brand-primary, var(--yellow-400));
    color: var(--black);
}

/* Tab panels — only one visible at a time */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

body.light-theme .teams-tab {
    background: var(--white-alpha-90);
    border-color: var(--black-alpha-08);
    color: var(--slate-600);
}

body.light-theme .teams-tab:hover {
    color: var(--slate-900);
    border-color: var(--slate-900);
}

body.light-theme .teams-tab.active {
    background: var(--brand-primary, var(--yellow-400));
    border-color: var(--brand-primary, var(--yellow-400));
    color: var(--black);
}

/* ==========================================================
   Synfra Story Timeline — a loose, hand-drawn-feeling path (icon
   circle + plain text, no cards) with one meandering line threaded
   through the actual node positions, mirroring the reference roadmap
   graphic. The line is computed in JS from each node's real on-screen
   center (see teams.js), so it always lines up exactly instead of
   relying on a decorative background image.
 ========================================================== */

.synfra-story {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 60px auto;
    z-index: 5;
    position: relative;
}

.synfra-story-header {
    text-align: center;
    margin-bottom: 60px;
}

.synfra-story-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: var(--text-primary, var(--gray-50));
}

.synfra-story-header p {
    color: var(--text-secondary, var(--slate-400));
    font-size: 15px;
    margin: 0;
}

.synfra-story-timeline {
    position: relative;
    padding: 10px 0 30px 0;
}

.story-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.story-path-svg path {
    fill: none;
    stroke: var(--white-alpha-18);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1.4s ease;
}

.story-path-svg path.story-path-drawn {
    stroke-dashoffset: 0;
}

.story-point {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: fit-content;
    max-width: 60%;
    margin-bottom: 64px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.story-point-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternating horizontal placement — a loose two-column meander rather
   than a rigid centered spine. */
.story-point-a {
    margin-left: 0;
}

.story-point-b {
    margin-left: 30%;
    margin-top: -30px;
}

.story-point:last-child {
    margin-bottom: 0;
}

.story-icon-circle {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--yellow-400-alpha-14);
    border: 1px solid var(--yellow-400-alpha-35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--brand-primary, var(--yellow-400));
    overflow: hidden;
}

.story-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.story-text {
    padding-top: 6px;
}

.story-text-title {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: var(--text-primary, var(--gray-50));
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.story-text-tag {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-primary, var(--yellow-400));
    margin-bottom: 6px;
}

.story-text-description {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, var(--slate-400));
    margin: 0;
}

body.light-theme .synfra-story-header h2 {
    color: var(--slate-900);
}

body.light-theme .story-text-title {
    color: var(--slate-900);
}

body.light-theme .story-path-svg path {
    stroke: var(--slate-900-alpha-18);
}

/* Below 768px: single column, no horizontal offset — the meander
   collapses to a straight-ish read-down-the-page line. */
@media (max-width: 768px) {
    .story-point,
    .story-point-a,
    .story-point-b {
        max-width: 100%;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 48px;
    }

    .story-icon-circle {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
}

/* Orbit Visual Container Stage — reserves layout space equal to the
   playground's current scaled size, so the horizontally-centered playground
   inside it is always exactly centered regardless of viewport width.

   The playground itself is a 1200x1200 canvas, but the rings only occupy
   a band roughly ±415px around its center (370px outer-ring radius + card
   half-width) — dead-centering the full 1200px box in a 1200px-tall stage
   left ~185px of pure whitespace above AND below the visible cards. The
   stage is now sized to that visible band instead, and the canvas is
   pulled up by that same ~185px via `top` so the band lines up with the
   stage's top edge. */
.orbit-playground-stage {
    position: relative;
    width: 100%;
    height: 850px;
    margin: 10px auto 40px;
    overflow: hidden;
}

/* The orbit itself is a fixed 1200x1200 canvas (SVG tracks + JS-positioned
   cards are all computed against that fixed coordinate space), horizontally
   centered via left:50% + translateX(-50%). Vertically it's pulled up by
   `top` so the visible ring band (not the full empty canvas) sits flush
   with the stage — scale() at the breakpoints below stays anchored to the
   canvas's own center, so `top` is rescaled by the same factor there. */
.orbit-playground {
    width: 1200px;
    height: 1200px;
    position: absolute;
    top: -175px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center Logo */
.orbit-center-node {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 20;
    background: var(--bg-card, var(--slate-800));
    border: 2px solid var(--border-card, var(--white-alpha-10));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-premium, 0 10px 30px var(--black-alpha-50));
    transition: all 0.3s ease;
}

.orbit-center-node img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Center Dotted Ring */
.orbit-center-ring {
    position: absolute;
    width: 161px;
    height: 161px;
    border: 3px dotted var(--brand-primary, var(--yellow-400));
    border-radius: 50%;
    z-index: 1;
    animation: rotate-clockwise 15s linear infinite;
    pointer-events: none;
}

/* SVG Orbit Tracks */
.orbit-svg-tracks {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 1200px;
    pointer-events: none;
    z-index: 1;
}

.orbit-svg-tracks circle {
    fill: none;
    stroke: var(--brand-primary, var(--yellow-400));
    stroke-width: 3px;
    opacity: 0.4;
    transform-origin: center center;
}

.track-inner {
    stroke-dasharray: 6 12; /* Small gap */
}

.track-middle {
    stroke-dasharray: 8 24; /* Medium gap */
}

.track-outer {
    stroke-dasharray: 10 40; /* Large gap */
}

/* Specific Orbit Containers holding elements */
.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
    transform-origin: center center;
    pointer-events: none;
}

/* Rotation Directions */
.rotate-cw {
    animation: rotate-clockwise 45s linear infinite;
}

.rotate-ccw {
    animation: rotate-counter-clockwise 60s linear infinite;
}

.rotate-cw-slow {
    animation: rotate-clockwise 80s linear infinite;
}

/* Hover Pauses Rotation */
.orbit-container:hover,
.orbit-container:hover .team-member-card-wrapper {
    animation-play-state: paused !important;
}

/* Orbit Element Wrapper (needed for counter-rotation to keep cards upright) */
.team-member-card-wrapper {
    position: absolute;
    pointer-events: auto;
    transform-origin: center center;
}

.team-member-card-wrapper:hover {
    z-index: 100 !important;
}

/* The Team Member Card */
.team-member-card {
    width: 90px;
    background: var(--bg-card, var(--slate-800));
    border: 1px solid var(--border-card, var(--white-alpha-08));
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 4px 20px var(--black-alpha-30);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Square Profile Photo */
.team-member-photo {
    width: 74px;
    height: 74px;
    border-radius: 6px;
    object-fit: cover;
    margin-bottom: 8px;
    border: 1px solid var(--white-alpha-05);
}

.team-member-name {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-primary, var(--gray-50));
    margin: 2px 0 1px 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.team-member-designation {
    font-size: 7.5px;
    color: var(--brand-primary, var(--yellow-400));
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Hover Glow & Elevation (Scale + 5px virtual padding/elevation) */
.team-member-card:hover {
    transform: scale(1.15) translateY(-6px);
    z-index: 100;
    border-color: var(--brand-primary, var(--yellow-400));
    box-shadow: 0 15px 35px var(--yellow-400-alpha-35), 0 0 20px var(--yellow-400-alpha-20);
}

/* Page Control: Close button to go back */
.teams-close-btn {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: var(--bg-card, var(--slate-800-alpha-70));
    border: 1px solid var(--border-card, var(--white-alpha-10));
    color: var(--text-primary, var(--gray-50));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(8px);
    z-index: 100;
}

.teams-close-btn:hover {
    background: var(--color-primary, var(--yellow-400));
    border-color: var(--color-primary, var(--yellow-400));
    color: var(--black);
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 0 15px var(--yellow-400-alpha-40);
}

/* Back button in teams layout - ensure never underlined across all states */
.teams-page-body .back-fab,
.teams-page-body .back-fab:hover,
.teams-page-body .back-fab:focus,
.teams-page-body .back-fab:visited,
.teams-page-body .back-fab:active {
    text-decoration: none;
}

/* Animations */
@keyframes rotate-clockwise {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotate-counter-clockwise {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

/* CSS Theme Support */
body.light-theme .teams-page-body {
    background-color: var(--gray-50);
    color: var(--slate-900);
}

body.light-theme .teams-glow {
    background: radial-gradient(circle, var(--blue-500-alpha-04) 0%, transparent 70%);
}

body.light-theme .team-member-card {
    background: var(--white-alpha-90);
    border-color: var(--black-alpha-08);
    box-shadow: 0 4px 15px var(--black-alpha-05);
}

body.light-theme .team-member-name {
    color: var(--slate-900);
}

/* Yellow reads poorly on the light-theme card background — swap the
   designation text and hover glow/border to near-black instead. Rings,
   SVG tracks, and the close button stay yellow in both themes. */
body.light-theme .team-member-designation {
    color: var(--slate-900);
}

body.light-theme .team-member-card:hover {
    border-color: var(--slate-900);
    box-shadow: 0 15px 35px var(--slate-900-alpha-25), 0 0 20px var(--slate-900-alpha-12);
}

body.light-theme .orbit-center-node {
    background: var(--white);
    border-color: var(--black-alpha-10);
}

body.light-theme .teams-header h1 {
    background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-600) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Orbit Playground Scaling — desktop down through tablet only (stops at
   992px on purpose; not tuned for phone widths). The stage height, and the
   canvas's `top` pull-up, are both rescaled by the same factor as the
   scale() below so the visible ring band stays flush with the stage at
   every breakpoint (see the base .orbit-playground-stage/.orbit-playground
   comments above for why these aren't just 1200px/-175px throughout). */
@media (max-width: 1200px) {
    .orbit-playground-stage {
        height: 725px; /* 850px * 0.85 */
    }

    .orbit-playground {
        top: -149px; /* -175px * 0.85 */
        transform: translateX(-50%) scale(0.85);
    }
}

@media (max-width: 992px) {
    .orbit-playground-stage {
        height: 555px; /* 850px * 0.65 */
    }

    .orbit-playground {
        top: -114px; /* -175px * 0.65 */
        transform: translateX(-50%) scale(0.65);
    }
}