/* ============================================================
   IRPC India — Story timeline FX (Our Story page)
   Curvy scroll-drawn path · comet · sparks · ghost year
   Loaded after site.css / enhance.css.
   ============================================================ */

.timeline.tl-fancy{isolation:isolate}
.timeline.tl-fancy .tl-card{position:relative;z-index:2}
.timeline.tl-fancy .tl-node{z-index:3}

/* ---------- the SVG path layer ---------- */
.tl-svg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible;
}
.tl-path-ghost{
  fill:none;stroke:var(--line);stroke-width:2;
  stroke-dasharray:3 9;stroke-linecap:round;
}
.tl-path-draw{
  fill:none;stroke:url(#tlGrad);stroke-width:3.5;stroke-linecap:round;
}
.tl-path-soft{
  fill:none;stroke:url(#tlGrad);stroke-width:12;stroke-linecap:round;
  opacity:.16;filter:url(#tlBlur);
}

/* ---------- comet ---------- */
.tl-comet .halo{
  fill:var(--gold);opacity:.14;
  transform-box:fill-box;transform-origin:center;
  animation:tlHalo 2.2s ease-in-out infinite;
}
.tl-comet .glow{fill:var(--gold-soft);opacity:.55;filter:url(#tlBlur)}
.tl-comet .core{fill:#fff;stroke:var(--gold);stroke-width:2.5}
@keyframes tlHalo{
  0%,100%{transform:scale(1);opacity:.14}
  50%{transform:scale(1.45);opacity:.05}
}
.tl-spark-dot{fill:var(--gold);transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  .tl-spark-dot{animation:tlSparkDot .9s ease-out forwards}
}
@keyframes tlSparkDot{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(.15) translateY(10px)}
}

/* ---------- nodes ---------- */
.timeline.tl-fancy .tl-node{
  transition:background .35s,border-color .35s,transform .45s var(--ease),box-shadow .45s;
}
.tl-item.tl-lit .tl-node{
  background:var(--gold);border-color:var(--gold);
  transform:translate(-50%,-50%) scale(1.22);
  box-shadow:0 0 0 7px rgba(216,165,62,.18),0 0 24px rgba(216,165,62,.55);
}
/* ripple ring on light-up */
.tl-item.tl-lit .tl-node::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--gold);opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .tl-item.tl-lit .tl-node::after{animation:tlRipple .9s var(--ease)}
}
@keyframes tlRipple{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(3.4)}
}

/* ---------- spark burst (DOM, at node) ---------- */
.tl-burst{
  position:absolute;left:50%;top:50%;width:0;height:0;
  z-index:4;pointer-events:none;
}
.tl-burst i{
  position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  animation:tlBurst .7s var(--ease) forwards;
}
.tl-burst i:nth-child(even){background:var(--brand-blue);width:4px;height:4px}
@keyframes tlBurst{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(.2)}
}

/* ---------- cards: livelier reveal + lit state ---------- */
@media (prefers-reduced-motion: no-preference){
  .timeline.tl-fancy .tl-item .tl-card{
    opacity:0;
    transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .5s,border-color .4s;
  }
  .timeline.tl-fancy .tl-item:nth-child(odd) .tl-card{transform:translateX(-46px) rotate(-1.4deg)}
  .timeline.tl-fancy .tl-item:nth-child(even) .tl-card{transform:translateX(46px) rotate(1.4deg)}
  .timeline.tl-fancy .tl-item.is-in .tl-card{opacity:1;transform:none}
  @media (max-width:860px){
    .timeline.tl-fancy .tl-item:nth-child(odd) .tl-card,
    .timeline.tl-fancy .tl-item:nth-child(even) .tl-card{transform:translateY(34px) rotate(0deg)}
    .timeline.tl-fancy .tl-item.is-in .tl-card{transform:none}
  }
}
.timeline.tl-fancy .tl-card:hover{transform:translateY(-5px)}
.timeline.tl-fancy .tl-img img{transition:transform .9s var(--ease)}
.timeline.tl-fancy .tl-card:hover .tl-img img{transform:scale(1.06)}

.tl-item.tl-lit .tl-card{border-color:rgba(216,165,62,.55)}
.tl-item .tl-year{transition:color .4s}
.tl-item.tl-lit .tl-year{color:var(--gold)}

/* year connector tick from node toward card */
.tl-item .tl-card::before{
  content:"";position:absolute;top:50%;width:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  opacity:0;transition:width .6s var(--ease) .1s,opacity .4s .1s;
}
.tl-item:nth-child(odd) .tl-card::before{left:100%;background:linear-gradient(270deg,var(--gold),transparent)}
.tl-item:nth-child(even) .tl-card::before{right:100%}
.tl-item.tl-lit .tl-card::before{width:2.5rem;opacity:.9}
@media (max-width:860px){
  .tl-item:nth-child(odd) .tl-card::before,
  .tl-item:nth-child(even) .tl-card::before{left:auto;right:100%;background:linear-gradient(90deg,var(--gold),transparent)}
  .tl-item.tl-lit .tl-card::before{width:2.4rem}
}

/* ---------- giant ghost year that follows progress ---------- */
.tl-ghost-year{
  position:sticky;top:34vh;height:0;z-index:0;
  display:flex;justify-content:center;pointer-events:none;
}
.tl-ghost-year span{
  font-family:var(--display);font-weight:600;line-height:1;
  font-size:clamp(7rem,17vw,15rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px rgba(44,76,255,.16);
  user-select:none;
}
.tl-ghost-year span.pop{animation:tlYearPop .7s var(--ease)}
@keyframes tlYearPop{
  0%{opacity:0;transform:translateY(20px) scale(.96)}
  100%{opacity:1;transform:none}
}
@media (max-width:860px){.tl-ghost-year{display:none}}
@media (prefers-reduced-motion: reduce){
  .tl-comet .halo{animation:none}
  .tl-ghost-year span.pop{animation:none}
}