/* ==========================================================================
   Sign-In Quarterly Bars Chart (shared)
   ==========================================================================
   Inks and motion for the decorative, text-free chart drawn by
   components/home/_sign_in_chart.html::sign_in_chart. Two surfaces place it
   on the emerald trail ground:
     - the signed-out sign-in page (sign_in_layout.css, .sign-in-canvas__chart)
     - the auth flow pages' brand rail (auth_flow_pages.css, .afp-split__rail-chart)
   Each placement owns the layer's position and size; this sheet owns only
   what the chart looks like, so both surfaces draw the same chart.

   Drawn in the Performance Dashboard's chart language: bars rising to the
   right, a balance curve to "today", then a dashed divider and a widening
   projection band. By default the SVG fills its layer and is anchored to the
   bottom edge (xMidYMax slice). Inks are low-alpha mint rather than white,
   so the chart stays behind white copy instead of competing with it.

   Loaded per route via css_loader.py: the anonymous index, the auth flow
   pages, and the design prototypes that render the chart.
   ========================================================================== */

.sign-in-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Where actuals end: a dashed divider and a widening projection band. */
.sign-in-chart__divider {
    stroke: rgb(255 255 255 / 0.08);
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
}

.sign-in-chart__band {
    fill: rgb(167 243 208 / 0.035);
}

/* Bars grow in quarter by quarter; recent quarters are a little stronger. */
.sign-in-chart__bar {
    fill: #a7f3d0;
    opacity: var(--sign-in-bar-opacity);
    transform-box: fill-box;
    transform-origin: bottom;
    animation: sign-in-bar-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sign-in-chart__bar--latest {
    opacity: 0.16;
}

.sign-in-chart__bar--projected {
    fill: rgb(167 243 208 / 0.05);
    stroke: #a7f3d0;
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
    opacity: 0.26;
    vector-effect: non-scaling-stroke;
}

@keyframes sign-in-bar-rise {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* The balance line draws itself in. */
.sign-in-chart__line {
    fill: none;
    stroke: rgb(167 243 208 / 0.34);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sign-in-chart-draw 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.sign-in-chart__projection {
    --sign-in-fade-target: 1;
    fill: none;
    stroke: rgb(167 243 208 / 0.3);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 1 8;
    opacity: 0;
    animation: sign-in-chart-fade 0.8s ease 2.6s forwards;
}

/* Filled area under the balance line. */
.sign-in-chart__stop-strong {
    stop-color: #a7f3d0;
    stop-opacity: 0.1;
}

.sign-in-chart__stop-clear {
    stop-color: #a7f3d0;
    stop-opacity: 0;
}

.sign-in-chart__area {
    --sign-in-fade-target: 1;
    opacity: 0;
    animation: sign-in-chart-fade 1.4s ease 1.2s forwards;
}

/* Quarterly dots on the line. */
.sign-in-chart__marker {
    --sign-in-fade-target: 1;
    fill: rgb(167 243 208 / 0.34);
    opacity: 0;
    animation: sign-in-chart-fade 0.4s ease forwards;
}

/* The latest actual month pulses. */
.sign-in-chart__head {
    fill: rgb(209 250 229 / 0.6);
    stroke: rgb(94 234 212 / 0.5);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.sign-in-chart__pulse {
    fill: none;
    stroke: rgb(94 234 212 / 0.45);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: sign-in-chart-pulse 2.4s ease-out infinite;
}

@keyframes sign-in-chart-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sign-in-chart-fade {
    to { opacity: var(--sign-in-fade-target, 1); }
}

@keyframes sign-in-chart-pulse {
    0% { opacity: 0.7; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(2.6); }
}