/* ============================================================
   SECTION: Two Superpowers
   Planet sits between the two feature cards
   ============================================================ */

.section-superpowers {
    position: relative;
    padding: 6rem 2rem 7rem;
    background: linear-gradient(180deg, #e8f0fb 0%, #f0f6fd 50%, #e8f0fb 100%);
    overflow: hidden;
}

/* Subtle ambient blobs */
.superpowers-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.35;
}

.superpowers-orb-1 {
    width: 480px;
    height: 480px;
    top: -120px;
    left: -140px;
    background: radial-gradient(circle, #b8d0f0 0%, transparent 70%);
}

.superpowers-orb-2 {
    width: 380px;
    height: 380px;
    bottom: -80px;
    right: -100px;
    background: radial-gradient(circle, #c4d8f4 0%, transparent 70%);
}

/* Section header */
.superpowers-header {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
}

.superpowers-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4a6fa5;
    margin-bottom: 0.8rem;
}

.superpowers-title {
    font-size: clamp(1.85rem, 4vw, 2.9rem);
    font-weight: 700;
    color: #0f1c33;
    line-height: 1.15;
}

.superpowers-title em {
    font-style: normal;
    background: linear-gradient(135deg, #3a66c8 0%, #5585d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Cards row */
.superpowers-cards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Individual card */
.superpowers-card {
    flex: 1;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 22px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow:
        0 4px 24px rgba(60, 100, 180, 0.08),
        0 1px 4px rgba(60, 100, 180, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.superpowers-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 36px rgba(60, 100, 180, 0.13),
        0 2px 8px rgba(60, 100, 180, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.superpowers-card-icon {
    width: 52px;
    height: 52px;
    background: rgba(190, 214, 245, 0.45);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.4rem;
    color: #4a6fa5;
    border: 1px solid rgba(190, 214, 245, 0.5);
}

.superpowers-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #0f1c33;
}

.superpowers-card p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #5a6d8a;
    margin: 0;
}

/* ---- Planet Wrapper ---- */
.planet-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin: 0 -14px;
    /* slight overlap into the cards */
    z-index: 5;
    align-self: center;
    filter:
        drop-shadow(0 6px 18px rgba(30, 60, 120, 0.28)) drop-shadow(0 1px 4px rgba(30, 60, 120, 0.16));
}

/* Canvas */
#planet-canvas {
    display: block;
    width: 80px !important;
    height: 80px !important;
    opacity: 0;
    transform: scale(0.2);
    transition: none;
}

#planet-canvas.visible {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ---- Orbit Ring ---- */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    margin-top: -55px;
    margin-left: -55px;
    border: 1.5px solid rgba(107, 140, 200, 0.22);
    border-radius: 50%;
    pointer-events: none;
    /* Entry state */
    opacity: 0;
    transform: scale(0.4) rotate(-30deg);
    transition: none;
}

.orbit-ring.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition:
        opacity 0.4s ease 0.3s,
        transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s;
}

/* ---- Orbit Dot ---- */
.orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    margin-left: -3.5px;
    background: rgba(80, 120, 200, 0.45);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(80, 120, 200, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease 0.55s;
}

.orbit-dot.visible {
    opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .superpowers-cards-row {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .superpowers-card {
        max-width: 100%;
    }

    .planet-wrapper {
        margin: 0.5rem auto;
        width: 70px;
        height: 70px;
    }

    #planet-canvas {
        width: 70px !important;
        height: 70px !important;
    }

    .orbit-ring {
        width: 96px;
        height: 96px;
        margin-top: -48px;
        margin-left: -48px;
    }
}