@import "./section-common.css";

.sol-section {
    --stack-h: min(36vh, 285px);
    /* The dashboard mockup above sits directly over the fixed 3D scene
       (transparent), so a solid fill slammed in as a hard line at the top.
       Ease into --ink over a short distance, then a quiet green bloom so
       #0A0A0A reads as depth rather than a dead void. */
    --ink: #0A0A0A;
    --top-fade: clamp(48px, 6vw, 90px);
    width: 100%;
    background:
        radial-gradient(90% 55% at 50% 28%, #16321c55 0%, transparent 62%),
        radial-gradient(70% 45% at 88% 78%, #f8b8400f 0%, transparent 58%),
        linear-gradient(
            to bottom,
            transparent 0,
            color-mix(in srgb, var(--ink) 42%, transparent) calc(var(--top-fade) * 0.55),
            var(--ink) var(--top-fade),
            var(--ink) 100%
        );
    padding: calc(var(--sec-pad-y) * 0.55) var(--sec-pad-x) 0;
    position: relative;
}

/* Scroll distance for the pinned crossfade below. 300vh made the 4-card cycle
   feel like dead scrolling - the panel barely changes over a very long
   stretch, and any tool that captures the page without a real scroll (a
   screenshot extension, a static render) shows that stretch as a blank void. */
.sol-pin {
    height: 190vh;
}

.sol-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}

.sol-panel {
    width: 100%;
    max-width: var(--sec-max);
    margin: 0 auto;
    height: min(68vh, 575px);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sec-gap);
    padding: clamp(32px, 3.4vw, 48px);
    overflow: hidden;
}

.sol-left {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.sol-stack {
    position: relative;
    width: min(100%, 560px);
    height: var(--stack-h);
}

.sol-card {
    position: absolute;
    inset: 0;
    background: var(--card-light);
    border-radius: 28px;
    padding: clamp(24px, 2.4vw, 34px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    box-shadow: 0 18px 40px #00000040;
}

/* Icon leads the card and pushes the copy to the bottom edge. Laid out in
   flow (not absolutely) so it can never overlap the title as the card grows. */
.sol-icon {
    position: relative;
    width: 72px;
    height: 48px;
    flex: 0 0 auto;
    margin-bottom: auto;
}

.sol-icon-a,
.sol-icon-b {
    position: absolute;
    width: 56px;
    height: 28px;
}

/* Oversized echo of the card's own icon, filling the blank band between the
   icon and the copy. Decoration only - it carries no information. */
.sol-icon--ghost {
    position: absolute;
    right: 2%;
    top: 44%;
    margin: 0;
    opacity: 0.09;
    transform: translateY(-50%) scale(3.4);
    transform-origin: 100% 50%;
    animation: sol-ghost-drift 9s ease-in-out infinite alternate;
}

@keyframes sol-ghost-drift {
    from {
        transform: translateY(-50%) scale(3.4) rotate(0deg);
    }
    to {
        transform: translateY(-54%) scale(3.7) rotate(6deg);
    }
}

.sol-icon--overlap .sol-icon-a {
    top: 20px;
    left: 0;
    border-radius: 0 0 300px 300px;
    background: var(--text-on-light);
}

.sol-icon--overlap .sol-icon-b {
    top: 4px;
    left: 20px;
    border-radius: 300px 300px 0 0;
    background: #12261f33;
    backdrop-filter: blur(6px);
}

.sol-icon--orb .sol-icon-a {
    width: 36px;
    height: 36px;
    top: 6px;
    left: 0;
    border-radius: 50%;
    background: var(--text-on-light);
}

.sol-icon--orb .sol-icon-b {
    width: 36px;
    height: 36px;
    top: 6px;
    left: 18px;
    border-radius: 50%;
    background: #12261f2e;
    backdrop-filter: blur(6px);
}

.sol-icon--rings .sol-icon-a {
    width: 40px;
    height: 40px;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    border: 8px solid var(--text-on-light);
    background: transparent;
}

.sol-icon--rings .sol-icon-b {
    width: 24px;
    height: 24px;
    top: 12px;
    left: 28px;
    border-radius: 50%;
    background: #12261f33;
}

.sol-icon--discs .sol-icon-a {
    width: 38px;
    height: 38px;
    top: 4px;
    left: 0;
    border-radius: 50%;
    background: var(--text-on-light);
}

.sol-icon--discs .sol-icon-b {
    width: 38px;
    height: 38px;
    top: 10px;
    left: 22px;
    border-radius: 50%;
    background: var(--brand-line);
}

.sol-card-title {
    font-family: DM Sans;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-on-light);
    margin: 24px 0 10px;
    max-width: 16ch;
    text-wrap: balance;
}

.sol-card-desc {
    font-family: DM Sans;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text-on-light-2);
    margin: 0;
    max-width: 30ch;
}

/* --- right column ------------------------------------------------------- */

.sol-right {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: end;
    gap: 24px;
    min-width: 0;
    min-height: 0;
}

.sol-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    justify-content: flex-end;
}

.sol-progress-count {
    font-family: DM Sans;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sol-progress-count span {
    color: var(--text-4);
}

.sol-progress-rail {
    flex: 0 1 180px;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.sol-progress-fill {
    display: block;
    height: 100%;
    background: var(--brand-bright);
    transform-origin: 0 50%;
    transition: transform 0.35s ease;
}

.sol-glass {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    pointer-events: none;
}

.sol-glass-card {
    position: absolute;
    width: min(66%, 330px);
    aspect-ratio: 1.62 / 1;
    border-radius: 18px;
    border: 1px solid var(--line-strong);
    background: linear-gradient(145deg, #ffffff18, #ffffff06);
    box-shadow: 0 20px 50px #00000066;
    overflow: hidden;
}

/* The two deepest cards sit furthest left, so they are also the smallest -
   at full width they would reach past the column and crowd the copy stack on
   the left. Shrinking them keeps them inside the column and reads as distance
   at the same time. */
.sol-glass-card--deepest {
    right: 55%;
    top: -5%;
    width: min(40%, 200px);
    opacity: 0.4;
    background: linear-gradient(145deg, #ffffff0b, #ffffff03);
    box-shadow: 0 10px 26px #0000004d;
}

.sol-glass-card--deep {
    right: 45%;
    top: -1%;
    width: min(50%, 250px);
    opacity: 0.6;
    background: linear-gradient(145deg, #ffffff0e, #ffffff03);
    box-shadow: 0 13px 32px #00000052;
}

.sol-glass-card--rear {
    right: 34%;
    top: 2%;
    background: linear-gradient(145deg, #ffffff10, #ffffff04);
    box-shadow: 0 16px 40px #00000059;
}

.sol-glass-card--back {
    right: 17%;
    top: 16%;
    backdrop-filter: blur(10px);
}

.sol-glass-card--front {
    right: 0;
    bottom: 4%;
}

/* Soft breathing light behind the stack so the column does not read as an
   empty half of the panel. */
.sol-glow {
    position: absolute;
    left: 4%;
    top: 50%;
    width: 96%;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-line) 0%, var(--brand-tint) 44%, transparent 70%);
    filter: blur(10px);
    animation: sol-glow-pulse 7s ease-in-out infinite;
}

@keyframes sol-glow-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(-50%) scale(0.94);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.04);
    }
}

.sol-glass-card img {
    width: 140%;
    height: 140%;
    object-fit: cover;
    opacity: 0.55;
    filter: blur(1px) saturate(0.7);
}

.sol-cta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-solid);
    color: var(--text);
    font-family: DM Sans;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-radius: 999px;
    padding: 16px 26px 16px 28px;
    box-shadow: 0 12px 30px var(--brand-line);
    transition: background 0.2s ease;
}

.sol-cta:hover {
    background: var(--brand-hover);
}

@media (max-width: 992px) {
    .sol-section {
        padding: calc(var(--sec-pad-y) * 0.55) var(--sec-pad-x) 0;
    }

    .sol-pin {
        height: auto;
    }

    .sol-sticky {
        position: relative;
        height: auto;
    }

    .sol-panel {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 24px 22px 28px;
        border-radius: 26px;
    }

    .sol-stack {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .sol-card {
        position: relative;
        inset: auto;
        transform: none !important;
        opacity: 1 !important;
    }

    .sol-icon {
        margin-bottom: 0;
    }

    .sol-icon--ghost {
        display: none;
    }

    .sol-card-title {
        margin-top: 20px;
    }

    .sol-progress {
        display: none;
    }

    .sol-right {
        grid-template-rows: auto auto;
        justify-items: stretch;
    }

    .sol-glass {
        height: 200px;
    }

    .sol-cta {
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sol-icon--ghost,
    .sol-glow {
        animation: none;
    }

    .sol-pin {
        height: auto;
    }

    .sol-sticky {
        position: relative;
        height: auto;
    }

    .sol-stack {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .sol-card {
        position: relative;
        inset: auto;
        transform: none !important;
        opacity: 1 !important;
    }

    .sol-icon {
        margin-bottom: 0;
    }
}