/* TW Leads: scroll motion for the pension pages, paired with tw-motion.js and loaded after tw.css (static layout for
   the chapters, stack, rows and pocket is in tw.css). Transform, opacity and clip only.
   --p is a block's scroll progress, 0 to 1. Where the browser has scroll timelines it animates --p itself (bottom of
   this file); elsewhere tw-motion.js writes it on scroll. Its resting value is 1, so with no script, no timelines or
   reduced motion every block sits in its finished position and nothing is hidden. */
@property --p{syntax:'<number>';inherits:true;initial-value:1}
@property --yr{syntax:'<integer>';inherits:true;initial-value:2066}
@keyframes mo-p{from{--p:0}to{--p:1}}
@keyframes mo-word{from{transform:translateY(120%)}}
@keyframes mo-open{from{opacity:0;transform:translateY(10px)}}
@keyframes mo-drift{from{translate:0 -3%}to{translate:0 3%}}

/* count-up figures hold their width while they count */
.proof .ppill,.badge b{font-variant-numeric:tabular-nums}
.mo-num{display:inline-block;white-space:nowrap;text-align:right}

/* stagger entrance: .mo is the hidden start that tw-motion.js adds below the fold, then plays out with a delay */
.mo{opacity:0;transform:translateY(18px)}
.mo-sc{transform:translateY(22px) scale(.965)}
.mo,.mo-in{transition:none!important}

.team{position:relative}
.split-sec{overflow-x:clip}
.gbody .split{overflow-x:clip;overflow-clip-margin:24px}

@media (prefers-reduced-motion:no-preference){
  /* 1 hero: the H1 words rise out of their masks; as the hero leaves, the photo sinks and swells while the copy lifts away */
  .hw>span{animation:mo-word .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i,0) * 75ms)}
  .hero .bg{transform:translateY(calc((1 - var(--p)) * 30%)) scale(calc(1.12 - var(--p) * .12));transform-origin:50% 0}
  .hero-copy{transform:translateY(calc((1 - var(--p)) * -80px));opacity:clamp(0,calc(var(--p) * 1.6 - .6),1)}

  /* 2 employer | employee: columns swing in from either side, rows unfold down from their top edge, the badge turns once */
  .split-col{transform:translateX(calc((1 - var(--p)) * -150px)) rotate(calc((1 - var(--p)) * -5deg));opacity:clamp(0,calc(var(--p) * 2.2),1)}
  .split-col.employee{transform:translateX(calc((1 - var(--p)) * 150px)) rotate(calc((1 - var(--p)) * 5deg))}
  .split-col li{--q:clamp(0,calc(var(--p) * 2 - var(--i,0) * .14),1);transform:perspective(700px) rotateX(calc((1 - var(--q)) * -75deg));transform-origin:50% 0;opacity:var(--q)}

  /* 3 band: the year runs 2026 to 2066 with the bar and ticks, the photo and the words move at different rates */
  .band img{transform:translateY(calc((var(--p) - .5) * -100px)) scale(1.16)}
  .band .wrap{transform:translateY(calc((.5 - var(--p)) * 70px))}
  .band-tl i{transform:scaleX(var(--p))}
  .band-tk i{opacity:clamp(.25,calc((var(--p) - var(--i) / 8) * 14 + .25),1);transform:scaleY(clamp(.45,calc((var(--p) - var(--i) / 8) * 10 + .45),1))}

  /* 4 steps: the card underneath shrinks a little and dims as the next one covers it; the rail fills card by card */
  .steps .stepcard,.steps .stepcard:hover{transform:scale(calc(1 - var(--d,0) * .05))}
  .steps .stepcard::after{opacity:calc(var(--d,0) * .16)}
  .steps-rail i::after{transform:scaleX(var(--s,1))}
  .steps-rail b+b{transform:scale(clamp(.45,calc(var(--s,1) * 4 - 1),1))}
  .steps-rail b+b+b{transform:scale(clamp(.45,calc(var(--s,1) * 4 - 3),1))}

  /* 5 reviews: the rows slide past each other */
  .rev-rows{--rv:340px;--ro:240px}
  .rev-row{transform:translateX(calc((.4 - var(--p)) * var(--rv)))}
  .rev-row+.rev-row{transform:translateX(calc((var(--p) - .4) * var(--rv) - var(--ro)))}
  @media (max-width:700px){.rev-rows{--rv:220px;--ro:150px}}

  /* 6 team: the photos fan out from the centre, the outer ones last; a gentle tilt on hover (tw-motion.js sets --rx, --ry) */
  .team figure,.team figure:hover{--q:clamp(0,calc(var(--p) * 1.3 - var(--ax,0) * .15),1);transform:perspective(900px) translateX(calc((1 - var(--q)) * var(--dx,0) * -60%)) translateY(calc((1 - var(--q)) * 50px)) rotate(calc((1 - var(--q)) * var(--dx,0) * 7deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:50% 100%;z-index:var(--z,auto)}
  .team figure.tilt{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .25s}

  /* 7 guide: the reading bar fills, an opened chapter fades up */
  .gprog i{transform:scaleX(var(--p))}
  .chap.open .chap-more{animation:mo-open .5s cubic-bezier(.2,.7,.2,1)}

  /* 8 closing: the card rises out of the footer pocket and its shadow comes up with it */
  .closing-pk{transform:translateY(calc((1 - var(--p)) * 70px)) scale(calc(.92 + var(--p) * .08))}
  .closing-pk::before{opacity:var(--p)}

  /* scroll timelines: the browser drives --p from the page scroll; ranges match tw-motion.js */
  @supports (animation-timeline:view()){
    .hero,.band,.band-yr,.split-col,.reviews,.team figure,.closing-pk,.guide-sec{animation:mo-p linear both;animation-timeline:view()}
    .band{view-timeline:--band}
    .hero{animation-direction:reverse;animation-range:exit 0% exit 100%}
    .band-yr{animation-timeline:--band;animation-range:cover 15% cover 60%;--yr:calc(2026 + var(--p) * 40);counter-reset:yr var(--yr)}
    .band-yr .yr span{display:none}
    .band-yr .yr::before{content:counter(yr)}
    .split-col{animation-range:entry 0% cover 45%}
    .team figure{animation-range:cover 0% cover 38%}
    .closing-pk{animation-range:cover 0% cover 45%}
    .guide-sec{animation-range:contain 0% contain 100%}
    /* service cards: the photos drift a little slower than the page */
    .cards-wrap{view-timeline:--mo-cards block}
    .icard img{scale:1.08;animation:mo-drift linear both;animation-timeline:--mo-cards}
  }
}

/* contents list: one marker glides to the chapter you are reading (desktop, where the list is sticky) */
.mo-ind{display:none}
@media (min-width:1081px){
  .toc nav{position:relative}
  .mo-ind{display:block;position:absolute;left:-2px;top:0;width:2px;height:100px;background:var(--brand);transform-origin:0 0;pointer-events:none}
  .mo-ind.mo-go{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .toc .mo-has a.on{border-left-color:transparent}
}

/* safety nets: reduced motion, print, and the step bars when scripts are off */
@media (prefers-reduced-motion:reduce){.mo{opacity:1;transform:none}}
@media print{.mo{opacity:1!important;transform:none!important}.closing-pk,.rev-row,.split-col,.split-col li,.team figure,.hero .bg,.hero-copy{transform:none!important;opacity:1!important}}
@media (scripting:none){.stepcard .bar{transform:none}}