/* =========== Talent page: a different entrance per section =========== */
#tl1 .head.reveal,#tl2 .head.reveal,#tl2 .two>.reveal,#tl2 .checks.reveal,#tl-cta.reveal{opacity:1;transform:none;transition:none}

/* 1 Engagement models: heading words rise; the three cards arrive from three directions */
#tl1 .eyebrow{opacity:0;letter-spacing:.5em;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.8,.2,1)}
#tl1 .head.in .eyebrow{opacity:1;letter-spacing:.16em}
#tl1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
#tl1 .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;opacity:0;filter:blur(8px);
  transition:transform 1s cubic-bezier(.2,.85,.25,1),opacity .8s ease,filter .9s ease;transition-delay:calc(var(--i)*.09s + .15s)}
#tl1 .head.in .w>span{transform:none;opacity:1;filter:none}
#tl1 .grid3{perspective:1400px}
#tl1 .card.reveal{opacity:0;transform:none;
  transition:transform .4s ease,border-color .4s,background .4s,opacity .9s ease var(--w),translate 1.2s cubic-bezier(.2,.85,.25,1) var(--w),rotate 1.2s cubic-bezier(.2,.85,.25,1) var(--w),scale 1.2s cubic-bezier(.2,.85,.25,1) var(--w)}
#tl1 .card.reveal:nth-child(1){translate:-160px 0;rotate:0 1 0 40deg;scale:.9;transform-origin:0 50%;--w:.1s}
#tl1 .card.reveal:nth-child(2){translate:0 120px;scale:1.25;--w:.35s}
#tl1 .card.reveal:nth-child(3){translate:160px 0;rotate:0 1 0 -40deg;scale:.9;transform-origin:100% 50%;--w:.6s}
#tl1 .card.reveal.in{opacity:1;translate:0 0;rotate:0 1 0 0deg;scale:1}
#tl1 .card svg.li{stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset 1.5s ease calc(var(--w) + .7s),transform .4s ease,stroke .3s}
#tl1 .card.in svg.li{stroke-dashoffset:0}
#tl1 .card h3,#tl1 .card p{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
#tl1 .card.in h3{opacity:1;transform:none;transition-delay:calc(var(--w) + .8s)}
#tl1 .card.in p{opacity:1;transform:none;transition-delay:calc(var(--w) + .95s)}
/* the highlighted middle card pulses once when it lands */
#tl1 .card.feature.in{animation:featPulse 1.6s ease 1.1s 1}
@keyframes featPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}40%{box-shadow:0 0 0 14px rgba(139,92,246,.18),0 0 60px rgba(139,92,246,.35)}}

/* 2 Roles + process: headings wipe in; roles type down the list, steps hang off a line that draws down */
#tl2 .head h2{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.65,0,.25,1) .1s}
#tl2 .head.in h2{clip-path:inset(0 -10px 0 0)}
#tl2 .head .eyebrow{opacity:0;transform:translateX(-30px);transition:opacity .8s ease,transform .8s ease}
#tl2 .head.in .eyebrow{opacity:1;transform:none}
#tl2 .checks li{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.85,.25,1)}
#tl2 .checks li::before{scale:0;transition:scale .5s cubic-bezier(.2,1.4,.3,1)}
#tl2 .checks.in li{opacity:1;transform:none}
#tl2 .checks.in li::before{scale:1}
#tl2 .checks.in li:nth-child(1){transition-delay:.35s}#tl2 .checks.in li:nth-child(2){transition-delay:.47s}#tl2 .checks.in li:nth-child(3){transition-delay:.59s}
#tl2 .checks.in li:nth-child(4){transition-delay:.71s}#tl2 .checks.in li:nth-child(5){transition-delay:.83s}#tl2 .checks.in li:nth-child(6){transition-delay:.95s}
#tl2 .checks.in li:nth-child(1)::before{transition-delay:.7s}#tl2 .checks.in li:nth-child(2)::before{transition-delay:.82s}#tl2 .checks.in li:nth-child(3)::before{transition-delay:.94s}
#tl2 .checks.in li:nth-child(4)::before{transition-delay:1.06s}#tl2 .checks.in li:nth-child(5)::before{transition-delay:1.18s}#tl2 .checks.in li:nth-child(6)::before{transition-delay:1.3s}
#tl2 .steps.one{position:relative;padding-left:26px}
#tl2 .steps.one::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:0 0 14px rgba(34,211,238,.5);transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.65,0,.25,1) .3s}
#tl2 .two>div.in .steps.one::before{transform:scaleY(1)}
#tl2 .steps.one li.reveal{opacity:0;transform:translateX(90px);transition:opacity .9s ease var(--d),transform 1.1s cubic-bezier(.2,.85,.25,1) var(--d)}
#tl2 .steps.one li.reveal.in{opacity:1;transform:none}
#tl2 .steps.one li:nth-child(1){--d:.3s}#tl2 .steps.one li:nth-child(2){--d:.65s}#tl2 .steps.one li:nth-child(3){--d:1s}
#tl2 .steps.one li::after{content:"";position:absolute;left:-30px;top:30px;width:10px;height:10px;border-radius:50%;background:var(--c1);box-shadow:0 0 12px var(--c1);scale:0;
  transition:scale .6s cubic-bezier(.2,1.4,.3,1) calc(var(--d) + .3s)}
#tl2 .steps.one li.in::after{scale:1}

/* closing CTA: light lines open from the centre above and below, headline tracks in, button stretches out of a dot */
#tl-cta{position:relative;overflow:hidden}
#tl-cta::before,#tl-cta::after{content:"";position:absolute;left:50%;height:1px;width:80%;transform:translateX(-50%) scaleX(0);
  background:linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent);box-shadow:0 0 24px rgba(34,211,238,.5);transition:transform 1.6s cubic-bezier(.65,0,.25,1)}
#tl-cta::before{top:0}#tl-cta::after{bottom:0;transition-delay:.2s}
#tl-cta.in::before,#tl-cta.in::after{transform:translateX(-50%) scaleX(1)}
#tl-cta h2{opacity:0;letter-spacing:.35em;transition:opacity 1.2s ease .3s,letter-spacing 1.6s cubic-bezier(.2,.8,.2,1) .3s}
#tl-cta.in h2{opacity:1;letter-spacing:-.02em}
#tl-cta .muted{opacity:0;transition:opacity 1s ease .9s}
#tl-cta.in .muted{opacity:1}
#tl-cta .btn{opacity:0;scale:.15 1;border-radius:999px;transition:transform .25s,box-shadow .25s,opacity .5s ease 1.2s,scale 1s cubic-bezier(.2,1.1,.3,1.15) 1.2s}
#tl-cta.in .btn{opacity:1;scale:1 1}

@media (max-width:900px){#tl1 .card.reveal:nth-child(1),#tl1 .card.reveal:nth-child(3){translate:0 70px;rotate:0 1 0 0deg}}
@media (prefers-reduced-motion:reduce){
  #tl1 *,#tl2 *,#tl-cta,#tl-cta *{transition:none!important;animation:none!important}
  #tl1 .eyebrow,#tl1 .w>span,#tl1 .card,#tl1 .card h3,#tl1 .card p,#tl2 .eyebrow,#tl2 .checks li,#tl2 .steps.one li,#tl-cta h2,#tl-cta .muted,#tl-cta .btn{opacity:1;transform:none;filter:none;translate:0 0;rotate:0deg;scale:1 1;letter-spacing:.16em}
  #tl-cta h2{letter-spacing:-.02em}
  #tl2 .head h2{clip-path:none}
  #tl1 .card svg.li{stroke-dashoffset:0}
  #tl2 .checks li::before,#tl2 .steps.one li::after{scale:1}
  #tl2 .steps.one::before{transform:none}
}

/* mobile: gentle fade-up only, so stacked cards never overlap mid-animation */
@media (max-width:900px){
  #tl1 .card.reveal:nth-child(n){translate:0 24px;rotate:0 1 0 0deg;scale:1}
  #tl1 .card.reveal.in:nth-child(n){translate:0 0}
}