/* Investment Path – preview
   The illustrative path card, its drawn chart and its animations.
   ========================================================================== */

.path-preview {
    position: relative;
    min-height: 525px;
    padding: 22px;
    overflow: hidden;
    border-radius: 28px;
    /* The border, fill and backdrop-filter come from the shared glass in
       01-shell.css, so every panel on the page shows the trend line passing
       under it the same way. Only this card's own corner glow is here – and
       it is a background layer, not a positioned child. It used to be a
       blurred ::before bleeding past the corner and held in only by
       `overflow: hidden` – but this element also carries a backdrop-filter
       and two animations, and each of those promotes it to its own
       compositing layer. Safari then clips descendants to the square bounding
       box rather than the rounded one, so the glow filled the top-right
       corner and the radius appeared to break. A background layer is always
       clipped to the border radius. */
    background-image:
        radial-gradient(300px circle at calc(100% + 40px) -55px,
            rgba(34, 211, 238, 0.15), transparent 68%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 55%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.26);
    animation:
        landingRise 0.75s 0.14s cubic-bezier(0.2, 0.8, 0.2, 1) both,
        previewFloat 6s 1s ease-in-out infinite;
}

.path-preview-top,
.path-preview-axis,
.path-preview-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.path-preview-top {
    position: relative;
    color: var(--text-faint);
    font-size: 9.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.path-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 999px;
    color: var(--green);
    background: rgba(52, 211, 153, 0.07);
    letter-spacing: 0.06em;
}

.path-live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45);
    animation: livePulse 2s ease-out infinite;
}

.path-preview-number {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 31px;
}

.path-preview-number span {
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.05em;
}

.path-preview-number small {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 650;
}

.path-preview-chart {
    width: 100%;
    height: auto;
    margin-top: 6px;
    overflow: visible;
}

.preview-grid-lines {
    fill: none;
    stroke: var(--border);
    stroke-width: 1;
}

.preview-area {
    fill: url("#previewArea");
    opacity: 0;
    animation: previewAreaIn 0.8s 0.9s ease forwards;
}

.preview-line {
    fill: none;
    stroke: url("#previewLine");
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawPreview 1.8s 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.preview-points {
    fill: var(--surface-solid);
    stroke: var(--green);
    stroke-width: 3;
}

.preview-points circle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: pointPop 0.32s ease forwards;
}

.preview-points circle:nth-child(1) { animation-delay: 0.5s; }
.preview-points circle:nth-child(2) { animation-delay: 1.25s; }
.preview-points circle:nth-child(3) { animation-delay: 2s; }

.path-preview-axis {
    margin-top: -11px;
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 650;
}

.path-preview-note {
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-alt);
}

.preview-note-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--green);
    background: var(--green-soft);
    font-size: 17px;
    font-weight: 800;
}

.path-preview-note > span:last-child {
    display: grid;
    gap: 3px;
}

.path-preview-note strong {
    font-size: 11px;
}

.path-preview-note small {
    color: var(--text-faint);
    font-size: 9.5px;
}

@keyframes landingRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes previewFloat {
    50% { transform: translateY(-7px); }
}

@keyframes livePulse {
    70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@keyframes drawPreview {
    to { stroke-dashoffset: 0; }
}

@keyframes previewAreaIn {
    to { opacity: 1; }
}

@keyframes pointPop {
    from { opacity: 0; transform: scale(0.2); }
    to { opacity: 1; transform: scale(1); }
}