/* ═══════════════════════════════════════════════════════════════
   ABL Site Ecosystem — Tabs + futuristic panels + orbit diagram
   ═══════════════════════════════════════════════════════════════ */

.abl-site-ecosystem {
    background: var(--abl-surface);
    transition: background-color 0.3s ease;
}

.abl-site-ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
}

/* Mobile (stacked): show the orbit FIRST so the user sees the selector,
   taps a node, then reads the description immediately below — no scroll
   back up required. Desktop resets this order below. */
.abl-site-ecosystem-grid > .abl-site-ecosystem-orbit {
    order: 1;
}
.abl-site-ecosystem-grid > .abl-site-ecosystem-panels-wrapper {
    order: 2;
}

/* ═══════════════════════════════════════════════════════════════
   Panel — futuristic card style
   ═══════════════════════════════════════════════════════════════ */
.abl-site-ecosystem-panels-wrapper {
    position: relative;
}

.abl-site-ecosystem-panel {
    display: none;
    position: relative;
    border-radius: 1.25rem;
}

.abl-site-ecosystem-panel--active {
    display: block;
}

/* ── COMET TRAIL ──
   An SVG teardrop comet (round head + tapering pointy tail) fires from
   the clicked orbit node toward the right edge of the panel. The wrapper
   is a 0×0 anchor point translated by --start-x/--start-y → --end-x/--end-y.
   The teardrop's round head is positioned so it sits exactly on the
   wrapper anchor — i.e. the head lands at the same end coordinate. The
   whole SVG rotates by --travel-angle (set in JS) so the comet always
   faces its direction of travel. */
.abl-site-ecosystem-comet {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 20;
    transform: translate(var(--start-x), var(--start-y));
    animation: abl-site-comet-fly 500ms cubic-bezier(0.3, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
    color: var(--comet-color, #ffffff);
    filter:
        drop-shadow(0 0 6px var(--comet-color, #ffffff))
        drop-shadow(0 0 14px color-mix(in srgb, var(--comet-color, #ffffff) 60%, transparent));
}

.abl-site-ecosystem-comet svg {
    position: absolute;
    /* SVG viewBox is 90×20; the head is at viewBox (80, 10).
       Rendered at 90×10 (half-height), so the head sits at rendered (80, 5).
       Offset the SVG so that point coincides with the wrapper anchor (0,0). */
    top: -5px;
    left: -80px;
    width: 90px;
    height: 10px;
    overflow: visible;
    transform: rotate(var(--travel-angle, 0deg));
    /* Pivot rotation around the head, not the SVG centre */
    transform-origin: 80px 5px;
}

@keyframes abl-site-comet-fly {
    0% {
        transform: translate(var(--start-x), var(--start-y));
        opacity: 0;
    }
    15% { opacity: 1; }
    100% {
        transform: translate(var(--end-x), var(--end-y));
        opacity: 1;
    }
}

/* On comet impact: new panel appears, then a soft glow radiates outward
   from 0 → 12px in the active product colour over ~1s, holds briefly,
   then fades back to nothing. Total 3 seconds. */
.abl-site-ecosystem-panel--glow {
    animation: abl-site-panel-glow 3000ms ease-in-out forwards;
}

@keyframes abl-site-panel-glow {
    0%   { filter: drop-shadow(0 0 0 transparent); }
    35%  { filter: drop-shadow(0 0 12px var(--card-color)); }
    55%  { filter: drop-shadow(0 0 12px var(--card-color)); }
    100% { filter: drop-shadow(0 0 0 transparent); }
}

/* Inner panel */
.abl-site-ecosystem-panel-inner {
    background: var(--abl-card);
    border: 1px solid var(--abl-border);
    border-radius: 1.25rem;
    padding: 2rem;
}

/* ── Header: icon + tagline + status pill ── */
.abl-site-ecosystem-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem 0;
}

.abl-site-ecosystem-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.abl-site-ecosystem-panel-tagline {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--card-color);
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.abl-site-ecosystem-panel-status {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    color: #ffffff;
    flex-shrink: 0;
}

.abl-site-ecosystem-panel-status--beta { background: #f59e0b; }
.abl-site-ecosystem-panel-status--soon { background: var(--card-color); }

/* ── Gradient divider ── */
.abl-site-ecosystem-panel-divider {
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--card-color), transparent);
    opacity: 0.3;
    margin-bottom: 1.25rem;
}

/* ── Solution text ── */
.abl-site-ecosystem-panel-solution {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--abl-text);
    margin: 0 0 1.5rem 0;
}

/* ── Features list ── */
.abl-site-ecosystem-panel-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.abl-site-ecosystem-panel-features li {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--abl-text);
    line-height: 1.5;
}

.abl-site-ecosystem-panel-check {
    color: var(--card-color);
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Orbit diagram
   ═══════════════════════════════════════════════════════════════ */
.abl-site-ecosystem-orbit {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 3rem auto;
    overflow: visible;
}

.abl-site-ecosystem-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed var(--abl-accent);
    opacity: 0.45;
    transition: border-color 0.3s ease;
}

.abl-site-ecosystem-orbit-ring--outer {
    inset: 0;
    animation: abl-site-spin-slow 60s linear infinite;
}

.abl-site-ecosystem-orbit-ring--inner {
    inset: 20%;
    animation: abl-site-spin-slow 40s linear infinite reverse;
}

.abl-site-ecosystem-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.abl-site-ecosystem-orbit-center-img {
    width: 40px;
    height: 40px;
}
.abl-site-ecosystem-orbit-logo--dark { display: none; }
[data-theme-mode="dark"] .abl-site-ecosystem-orbit-logo--light { display: none; }
[data-theme-mode="dark"] .abl-site-ecosystem-orbit-logo--dark { display: block; }

.abl-site-ecosystem-orbit-center-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--abl-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.abl-site-ecosystem-orbit-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transform: translate(-50%, -50%);
    /* Reset <button> styles */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

.abl-site-ecosystem-orbit-node:focus-visible {
    outline: 2px solid var(--node-color, var(--abl-accent));
    outline-offset: 6px;
    border-radius: 50%;
}

.abl-site-ecosystem-orbit-node--active .abl-site-ecosystem-orbit-node-name {
    color: var(--node-color, var(--abl-accent));
    font-weight: 700;
}

.abl-site-ecosystem-orbit-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--abl-card);
    border: 1.5px solid color-mix(in srgb, var(--node-color, var(--abl-accent)) 70%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--node-color, var(--abl-accent)) 14%, transparent),
        0 0 14px 2px color-mix(in srgb, var(--node-color, var(--abl-accent)) 32%, transparent),
        0 0 28px 5px color-mix(in srgb, var(--node-color, var(--abl-accent)) 16%, transparent);
    transition: all 0.3s ease;
}

/* Bounce: lifts + scales the icon to draw attention.
   Triggered every time the orbit enters the viewport (see ecosystem JS).
   Applied via .abl-site-ecosystem-orbit-node--jiggle on the parent so the
   parent's positioning transform isn't disturbed. */
.abl-site-ecosystem-orbit-node--jiggle .abl-site-ecosystem-orbit-node-icon {
    animation: abl-site-orbit-bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes abl-site-orbit-bounce {
    0%   { transform: translateY(0)    scale(1); }
    35%  { transform: translateY(-10px) scale(1.18); }
    65%  { transform: translateY(0)    scale(0.96); }
    100% { transform: translateY(0)    scale(1); }
}

.abl-site-ecosystem-orbit-node-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--abl-text);
    white-space: nowrap;
}

/* Position nodes at 90deg intervals on the outer ring */
.abl-site-ecosystem-orbit-node--1 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.abl-site-ecosystem-orbit-node--2 {
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
}

.abl-site-ecosystem-orbit-node--3 {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.abl-site-ecosystem-orbit-node--4 {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

/* ═══════════════════════════════════════════════════════════════
   Deep-link highlight pulse
   ═══════════════════════════════════════════════════════════════ */
.abl-site-ecosystem-panel--highlighted .abl-site-ecosystem-panel-inner {
    border-color: var(--card-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   Mobile compact mode (<768px)
   The orbit + a compact version of the active card share one viewport.
   Full content is hidden until the user taps "Read more", which adds
   .is-expanded to the panels wrapper and reveals divider, features,
   and the full solution text. Desktop (≥768px) resets everything. */
.abl-site-ecosystem-panel-readmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Negative top margin pulls the pill up so it overlaps the card's
       bottom edge, making it look tethered to the card rather than
       floating in the gap between the card and the orbit. */
    margin: -1.1rem auto 0;
    padding: 0.55rem 1.1rem;
    position: relative;
    z-index: 2;
    background: var(--abl-card);
    border: 1px solid var(--abl-border);
    border-radius: 999px;
    color: var(--abl-text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.abl-site-ecosystem-panel-readmore:hover {
    border-color: var(--abl-accent);
    color: var(--abl-accent);
}
.abl-site-ecosystem-panel-readmore-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}
.abl-site-ecosystem-panels-wrapper.is-expanded .abl-site-ecosystem-panel-readmore-icon {
    transform: rotate(180deg);
}

/* Compact-by-default on mobile: hide divider, features, and truncate
   the solution to a single line. Tagline + 1-line solution + Read more
   leaves room for the orbit above in the same viewport. */
@media (max-width: 767.98px) {
    .abl-site-ecosystem-grid {
        gap: 2.25rem;
    }
    .abl-site-ecosystem-orbit {
        width: 220px;
        height: 220px;
        margin: 0.5rem auto 1rem;
    }
    .abl-site-ecosystem-orbit-node-icon {
        width: 38px;
        height: 38px;
    }
    .abl-site-ecosystem-panel-inner {
        padding: 1.75rem 1.5rem 1.5rem;
    }
    .abl-site-ecosystem-panel-header {
        margin-bottom: 0.75rem;
    }

    /* Collapsed state — hide divider + features, clamp solution to 1 line */
    .abl-site-ecosystem-panels-wrapper:not(.is-expanded) .abl-site-ecosystem-panel-divider,
    .abl-site-ecosystem-panels-wrapper:not(.is-expanded) .abl-site-ecosystem-panel-features {
        display: none;
    }
    .abl-site-ecosystem-panels-wrapper:not(.is-expanded) .abl-site-ecosystem-panel-solution {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Read more button is mobile-only */
    .abl-site-ecosystem-panel-readmore {
        display: none;
    }

    .abl-site-ecosystem-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }

    /* Restore DOM order on desktop: panels on the left, orbit on the right */
    .abl-site-ecosystem-grid > .abl-site-ecosystem-panels-wrapper {
        order: 0;
    }
    .abl-site-ecosystem-grid > .abl-site-ecosystem-orbit {
        order: 0;
    }

    .abl-site-ecosystem-panel-features {
        grid-template-columns: 1fr 1fr;
    }

    .abl-site-ecosystem-orbit {
        width: 340px;
        height: 340px;
    }
}

@media (min-width: 1200px) {
    .abl-site-ecosystem-panel-inner {
        padding: 2.5rem;
    }

    .abl-site-ecosystem-orbit {
        width: 380px;
        height: 380px;
    }

    .abl-site-ecosystem-orbit-node-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}