/**
 * Rekhi Manufacturing Process Timeline — Frontend Styles
 * Glassmorphism timeline with staggered animation.
 * ALL colors driven by CSS custom properties — zero hardcoded hex/rgba.
 * --rekhi-accent, --rekhi-accent-rgb, --rekhi-accent-light set via PHP.
 */
.rekhi-mp-container{--rekhi-accent:#ff6600;--rekhi-accent-rgb:255,102,0;--rekhi-accent-light:#ffaa33;--rekhi-bg:#0a0a0a;--rekhi-text:#ffffff;--rekhi-subtitle:#aaaaaa;--rekhi-step-circle-bg:#1a1a1a;--rekhi-step-circle-border:#333;--rekhi-step-circle-text:#666;--rekhi-glass-bg:rgba(255,255,255,0.06);--rekhi-glass-border:rgba(var(--rekhi-accent-rgb),0.2);--rekhi-glass-shadow:0 8px 32px rgba(0,0,0,0.4);--rekhi-step-title-color:#eeeeee;--rekhi-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;width:100%;max-width:1280px;margin:0 auto;text-align:center;padding:40px 20px;box-sizing:border-box;font-family:var(--rekhi-font);color:var(--rekhi-text)}
.rekhi-mp-container--fullwidth{max-width:none;background:var(--rekhi-bg)}

.rekhi-mp-header{margin-bottom:60px}
.rekhi-mp-title{font-size:3.2rem;font-weight:700;margin:0 0 12px;background:linear-gradient(90deg,var(--rekhi-text),var(--rekhi-accent),var(--rekhi-text));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rekhi-mp-subtitle{font-size:1.25rem;color:var(--rekhi-subtitle);font-weight:400;margin:0}

.rekhi-mp-timeline{position:relative;padding:60px 0}
.rekhi-mp-timeline-line{position:absolute;top:88px;left:5%;right:5%;height:6px;background:rgba(var(--rekhi-accent-rgb),0.2);border-radius:9999px;overflow:hidden}
.rekhi-mp-timeline-progress{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--rekhi-accent),var(--rekhi-accent-light));width:0%;transition:width 4s cubic-bezier(0.25,0.1,0.25,1);box-shadow:0 0 25px var(--rekhi-accent)}

.rekhi-mp-steps{display:flex;justify-content:space-between;position:relative;z-index:2;gap:24px}
.rekhi-mp-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;opacity:0;transform:translateY(40px);transition:all 0.6s cubic-bezier(0.25,0.1,0.25,1)}
.rekhi-mp-step.active{opacity:1;transform:translateY(0)}

.rekhi-mp-glass-card{width:100%;max-width:220px;height:220px;background:var(--rekhi-glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--rekhi-glass-border);border-radius:20px;padding:32px 20px;box-shadow:var(--rekhi-glass-shadow);transition:all 0.4s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
.rekhi-mp-step.active .rekhi-mp-glass-card{border-color:var(--rekhi-accent);box-shadow:0 0 40px rgba(var(--rekhi-accent-rgb),0.25)}

.rekhi-mp-step-circle{width:78px;height:78px;background:var(--rekhi-step-circle-bg);border:5px solid var(--rekhi-step-circle-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:var(--rekhi-step-circle-text);position:relative;z-index:3;transition:all 0.5s ease;box-shadow:0 10px 30px rgba(0,0,0,0.6);flex-shrink:0;margin-bottom:24px}
.rekhi-mp-step.active .rekhi-mp-step-circle{border-color:var(--rekhi-accent);color:var(--rekhi-accent);box-shadow:0 0 0 12px rgba(var(--rekhi-accent-rgb),0.15),0 0 35px rgba(var(--rekhi-accent-rgb),0.4);background:rgba(var(--rekhi-accent-rgb),0.1)}
.rekhi-mp-step-icon{font-size:2.2rem;transition:transform 0.4s ease}
.rekhi-mp-step.active .rekhi-mp-step-icon{transform:scale(1.15);color:var(--rekhi-accent)}
.rekhi-mp-step-number{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#111;color:var(--rekhi-accent);font-size:0.95rem;font-weight:700;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #1a1a1a}
.rekhi-mp-step-title{font-size:1.25rem;font-weight:600;color:var(--rekhi-step-title-color);line-height:1.3;margin:0}
.rekhi-mp-step-description{font-size:0.85rem;color:var(--rekhi-subtitle);line-height:1.5;margin:10px 0 0;opacity:0;max-height:0;overflow:hidden;transition:all 0.4s ease}
.rekhi-mp-step.active .rekhi-mp-step-description{opacity:1;max-height:120px}

.rekhi-mp-step-circle.glow{animation:rekhi-mp-pulse 2s infinite alternate}
@keyframes rekhi-mp-pulse{from{box-shadow:0 0 20px var(--rekhi-accent),0 0 0 12px rgba(var(--rekhi-accent-rgb),0.15)}to{box-shadow:0 0 45px var(--rekhi-accent),0 0 0 12px rgba(var(--rekhi-accent-rgb),0.15)}}

@media(max-width:992px){
.rekhi-mp-container{max-width:100%;padding:30px 16px}
.rekhi-mp-header{margin-bottom:40px}
.rekhi-mp-title{font-size:2.4rem}
.rekhi-mp-subtitle{font-size:1.1rem}
.rekhi-mp-timeline-line{top:50px;left:48px;right:auto;width:6px;height:auto;bottom:50px}
.rekhi-mp-timeline-progress{width:100%!important;height:0%;transition:height 4s cubic-bezier(0.25,0.1,0.25,1)}
.rekhi-mp-steps{flex-direction:column;align-items:flex-start;gap:50px;padding-left:70px}
.rekhi-mp-step{flex:none;width:100%;flex-direction:row;align-items:center;gap:25px;opacity:0;transform:translateX(-30px)}
.rekhi-mp-step.active{transform:translateX(0)}
.rekhi-mp-glass-card{width:100%;max-width:none;height:180px;flex-direction:row;text-align:left;padding:20px 24px;gap:20px}
.rekhi-mp-step-circle{margin-bottom:0;flex-shrink:0}
.rekhi-mp-step-title{font-size:1.3rem}
.rekhi-mp-step-description{font-size:0.9rem}
.rekhi-mp-step.active .rekhi-mp-step-description{max-height:80px}
}
@media(max-width:600px){
.rekhi-mp-title{font-size:1.9rem}
.rekhi-mp-subtitle{font-size:1rem}
.rekhi-mp-timeline-line{left:40px}
.rekhi-mp-steps{padding-left:58px;gap:40px}
.rekhi-mp-glass-card{height:auto;min-height:140px;padding:18px 20px;gap:16px}
.rekhi-mp-step-circle{width:68px;height:68px}
.rekhi-mp-step-icon{font-size:1.9rem}
.rekhi-mp-step-number{width:24px;height:24px;font-size:0.8rem;top:-6px}
.rekhi-mp-step-title{font-size:1.15rem}
}
@media(prefers-reduced-motion:reduce){.rekhi-mp-step{transition:opacity 0.1s ease}.rekhi-mp-step.active{opacity:1;transform:none}.rekhi-mp-timeline-progress{transition:none}.rekhi-mp-step-circle.glow{animation:none}}