/* Process timeline story (js/process-story.js adds .pt-on and the track). */
#process .process-timeline.pt-on { perspective: 1400px; }
#process .process-timeline.pt-on .timeline-line { opacity: 0 !important; }

/* Track: faint rail, blue fill drawn by scroll, glowing comet at the tip */
#process .pt-track { position: absolute; width: 2px; transform: translateX(-50%); z-index: 1; pointer-events: none; background: #dbe4f1; border-radius: 2px; }
#process .pt-fill { position: absolute; inset: 0; transform-origin: top; transform: scaleY(0); border-radius: 2px;
    background: linear-gradient(180deg, #93c5fd, #2563eb 40%, #1d4ed8); box-shadow: 0 0 12px rgba(37, 99, 235, .45); }
#process .pt-comet { position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-top: -5px; transition: opacity .3s ease; }
#process .pt-comet span { position: absolute; inset: 0; border-radius: 50%; background: #2563eb; border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), 0 0 12px 2px rgba(37, 99, 235, .4); }
#process .pt-comet span::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(37, 99, 235, .4); animation: pt-ping 1.8s ease-out infinite; }
#process .pt-comet.is-hidden { opacity: 0; }

/* Cards: wait tilted and soft, swing in from their side in 3D */
#process .pt-on .process-step { opacity: 1 !important; transform: none !important; transition: none !important; }
#process .pt-on .process-step .step-content {
    opacity: 0; filter: blur(6px);
    transition: opacity .7s ease, filter .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1), background .5s ease, box-shadow .5s ease, border-color .5s ease !important;
    transform-style: preserve-3d;
}
#process .pt-on .process-step:nth-child(odd) .step-content { transform: translateX(-56px) rotateY(24deg) scale(.94) !important; transform-origin: right center; }
#process .pt-on .process-step:nth-child(even) .step-content { transform: translateX(56px) rotateY(-24deg) scale(.94) !important; transform-origin: left center; }
#process .pt-on .process-step.pt-in .step-content { opacity: 1; filter: none; transform: none !important; }

/* Number badge: hollow until reached */
#process .pt-on .step-number {
    opacity: 1 !important; background: #fff !important; color: #2563eb !important; border: 2px solid #c7d8fb;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08) !important; transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1) !important;
}
#process .pt-on .process-step.pt-done .step-number { background: #2563eb !important; color: #fff !important; border-color: #2563eb; box-shadow: 0 4px 14px rgba(37, 99, 235, .35) !important; }

/* Passed steps keep a blue edge */
#process .pt-on .process-step.pt-done .step-content { border-color: #c7d8fb !important; box-shadow: inset 3px 0 0 #2563eb, 0 4px 16px rgba(15, 23, 42, .05) !important; }
#process .pt-on .process-step.pt-done:nth-child(even) .step-content { box-shadow: inset -3px 0 0 #2563eb, 0 4px 16px rgba(15, 23, 42, .05) !important; }

/* Active step: the blue card */
#process .pt-on .process-step.pt-active .step-content {
    background: radial-gradient(ellipse at 90% 0%, #528bff80, transparent 55%), linear-gradient(135deg, #2563eb, #1b4fc9) !important;
    border-color: #2563eb !important; transform: scale(1.04) !important;
    box-shadow: 0 24px 48px -20px rgba(29, 78, 216, .6), 0 0 0 6px rgba(37, 99, 235, .08) !important;
}
#process .pt-on .process-step.pt-active .step-content :is(h3, p, .st-word) { color: #fff !important; }
#process .pt-on .process-step.pt-active .step-content p { color: #dbe7ff !important; }
#process .pt-on .process-step.pt-active .step-number {
    background: #fff !important; color: #1d4ed8 !important; border-color: #fff;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, .18), 0 8px 20px rgba(29, 78, 216, .45) !important;
}
#process .pt-on .process-step:nth-child(odd).pt-active .step-number { transform: translateY(-50%) scale(1.15) !important; }
#process .pt-on .process-step:nth-child(even).pt-active .step-number { transform: translateY(-50%) scale(1.15) !important; }
#process .pt-on .process-step.pt-active .step-number::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(37, 99, 235, .5); animation: pt-ping 1.6s ease-out infinite; }

/* Inside each card: title then text rise in after the card lands */
#process .pt-on .process-step .step-content { overflow: hidden; }
#process .pt-on .process-step .step-content :is(h3, p) { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1), color .4s ease !important; }
#process .pt-on .process-step.pt-in .step-content h3 { opacity: 1; transform: none; transition-delay: .25s, .25s, 0s !important; }
#process .pt-on .process-step.pt-in .step-content p { opacity: 1; transform: none; transition-delay: .4s, .4s, 0s !important; }
/* Light sweep across the card when it becomes active */
#process .pt-on .process-step .step-content::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); opacity: 0;
}
#process .pt-on .process-step.pt-active .step-content::after { animation: pt-sweep 1.1s ease .15s 1 both; }
@keyframes pt-sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 0; } }
@keyframes pt-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* Mobile: line on the left, cards slide up instead of swinging */
@media (max-width: 768px) {
    #process .pt-on .process-step:nth-child(odd) .step-content,
    #process .pt-on .process-step:nth-child(even) .step-content { transform: translateY(28px) scale(.96) !important; transform-origin: center; }
    #process .pt-on .process-step.pt-in .step-content { transform: none !important; }
    #process .pt-on .process-step.pt-active .step-content { transform: scale(1.02) !important; }
    #process .pt-on .process-step.pt-done:nth-child(even) .step-content { box-shadow: inset 3px 0 0 #2563eb, 0 4px 16px rgba(15, 23, 42, .05) !important; }
    #process .pt-on .process-step:nth-child(n).pt-active .step-number { transform: scale(1.12) !important; }
}

@media (prefers-reduced-motion: reduce) {
    #process .pt-on .process-step .step-content { transition: none !important; filter: none; opacity: 1; transform: none !important; }
    #process .pt-comet span::after, #process .pt-on .process-step.pt-active .step-number::after, #process .pt-on .process-step.pt-active .step-content::after { animation: none; }
    #process .pt-on .process-step .step-content :is(h3, p) { opacity: 1; transform: none; transition: none !important; }
}