/* The Year Ahead Scorecard motion, 10 November 2026.
   Extends the shared elviscumez.com motion system (animations-20261107.css, vendored beside this file):
   same easing, keyframes, durations, stagger, fail-open and reduced-motion rules, adapted to the
   typographic cream layout. No hero, navy surfaces, framed portrait, watermark or pattern is added.
   Nothing here animates a layout property except the existing progress and dimension bar widths.
   Every motion rule is screen only, so a printed copy never inherits a hidden or half-drawn state. */
.motion-mask:nth-of-type(2) .motion-word{--word-delay:90ms}
.motion-mask:nth-of-type(3) .motion-word{--word-delay:180ms}
.motion-mask:nth-of-type(4) .motion-word{--word-delay:270ms}
.motion-mask:nth-of-type(5) .motion-word{--word-delay:360ms}
.motion-mask:nth-of-type(6) .motion-word{--word-delay:450ms}
.motion-mask:nth-of-type(7) .motion-word{--word-delay:540ms}
.motion-mask:nth-of-type(8) .motion-word{--word-delay:630ms}
.motion-mask:nth-of-type(9) .motion-word{--word-delay:720ms}
.motion-mask:nth-of-type(10) .motion-word{--word-delay:810ms}
.motion-mask:nth-of-type(11) .motion-word{--word-delay:900ms}
.motion-mask:nth-of-type(12) .motion-word{--word-delay:990ms}
.motion-mask:nth-of-type(13) .motion-word{--word-delay:1080ms}
.motion-mask:nth-of-type(14) .motion-word{--word-delay:1170ms}

/* Typographic headings keep their approved line height, so the masks add no height. The shared .12em
   bottom padding (with its negative margin) still keeps the tails of g, y and p clear of the clip, and a
   matching side allowance keeps serif overhangs such as the arm of y unclipped without moving any word. */
#intro-title .motion-mask,#details-title .motion-mask,.res-title__band .motion-mask,.privacy-main h1 .motion-mask{line-height:inherit;padding-left:.06em;padding-right:.06em;margin-left:-.06em;margin-right:-.06em}

/* Byline: the picture becomes the 72px clipping circle, so the shutter and the settle never square it off. Same size at rest. */
.byline picture{position:relative;display:block;width:72px;height:72px;overflow:hidden;border-radius:50%;isolation:isolate}
.byline picture::before{content:"";position:absolute;inset:0;background:var(--cream);pointer-events:none;z-index:3;transform:scaleY(0);transform-origin:top}
.byline img{transform-origin:50% 50%}

/* Count-ups: the accessible figure stays in flow; only an aria-hidden copy counts over it, so the width cannot shift. */
.score__num,.dim__pct{position:relative}
.sc-num-visual{position:absolute;inset:0;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.score__num .sc-num-visual{text-align:left}
.dim__pct .sc-num-visual{text-align:right}
.is-counting > .sc-num-base{opacity:0}

@media screen and (prefers-reduced-motion:no-preference){
  /* Intro: cream, typographic. Kicker rule draws, the title rises word by word, copy follows. */
  html.js.motion-ok .screen--intro .kicker,html.js.motion-ok .screen--details .kicker,html.js.motion-ok .res-head .kicker,html.js.motion-ok .privacy-main .kicker{animation:ecu-eyebrow .9s var(--motion-ease) both}
  html.js.motion-ok .screen--intro .kicker::before,html.js.motion-ok .screen--details .kicker::before,html.js.motion-ok .res-head .kicker::before,html.js.motion-ok .privacy-main .kicker::before{transform-origin:left;animation:ecu-rule 1s var(--motion-ease) .08s both}
  html.js.motion-ok .screen--intro .year-mark{animation:yas-settle 1.8s var(--motion-ease) .15s both}
  html.js.motion-ok .screen--intro .intro__body{animation:ecu-copy 1.05s var(--motion-ease) .2s both}
  html.js.motion-ok .screen--intro .facts{animation:ecu-copy 1.05s var(--motion-ease) .45s both}
  html.js.motion-ok .screen--intro .btn-row{animation:ecu-copy .95s var(--motion-ease) .65s both}
  html.js.motion-ok .screen--intro .fine{animation:ecu-copy 1.05s var(--motion-ease) .8s both}
  html.js.motion-ok .screen--intro .byline{animation:ecu-copy 1.05s var(--motion-ease) .85s both}
  html.js.motion-ok .byline picture::before{animation:ecu-shutter 1.3s var(--motion-ease) .9s both}
  html.js.motion-ok .byline img{animation:ecu-portrait 1.5s var(--motion-ease) .9s both}

  /* Questions: entrance each time the screen is shown. */
  html.js.motion-ok .screen--quiz .progress{animation:ecu-eyebrow .9s var(--motion-ease) both}
  html.js.motion-ok .screen--quiz .question__text{animation:ecu-copy 1.05s var(--motion-ease) .1s both}
  html.js.motion-ok .screen--quiz .question__hint{animation:ecu-copy 1.05s var(--motion-ease) .2s both}
  html.js.motion-ok .screen--quiz .choice{animation:ecu-reveal 1.05s var(--motion-ease) var(--choice-delay,.3s) both}
  html.js.motion-ok .screen--quiz .keys,html.js.motion-ok .screen--quiz .quiz-nav{animation:ecu-copy .95s var(--motion-ease) .6s both}
  .choice:nth-child(2){--choice-delay:.36s;--swap-delay:.06s}
  .choice:nth-child(3){--choice-delay:.42s;--swap-delay:.09s}
  .choice:nth-child(4){--choice-delay:.48s;--swap-delay:.12s}
  .choice:nth-child(5){--choice-delay:.54s;--swap-delay:.15s}
  /* Question change: quicker, so 15 questions never feel slow. Two identical keyframes alternate so it replays every time. */
  html.js.motion-ok .question.sc-swap-a .question__text{animation:sc-swap-a .6s var(--motion-ease) both}
  html.js.motion-ok .question.sc-swap-b .question__text{animation:sc-swap-b .6s var(--motion-ease) both}
  html.js.motion-ok .question.sc-swap-a .question__hint{animation:sc-swap-a .6s var(--motion-ease) .04s both}
  html.js.motion-ok .question.sc-swap-b .question__hint{animation:sc-swap-b .6s var(--motion-ease) .04s both}
  html.js.motion-ok .question.sc-swap-a .choice{animation:sc-swap-a .6s var(--motion-ease) var(--swap-delay,.03s) both}
  html.js.motion-ok .question.sc-swap-b .choice{animation:sc-swap-b .6s var(--motion-ease) var(--swap-delay,.03s) both}
  html.js.motion-ok .progress__fill{transition:width .7s var(--motion-ease)}
  /* Open numbered circles: the circle itself lifts, presses and pops, not a boxed label. */
  html.js.motion-ok .choice__num{transition:transform .35s var(--motion-ease),box-shadow .35s var(--motion-ease),background-color .15s,color .15s}
  html.js.motion-ok .choice input:checked+label .choice__num{animation:sc-pop .45s var(--motion-ease) both}
  html.js.motion-ok .choice label:active .choice__num{transform:scale(.94)}

  /* Details. */
  html.js.motion-ok .screen--details #details-lead{animation:ecu-copy 1.05s var(--motion-ease) .15s both}
  html.js.motion-ok .screen--details .form > *{animation:ecu-reveal 1.05s var(--motion-ease) var(--field-delay,.25s) both}
  .form > :nth-child(2){--field-delay:.32s}
  .form > :nth-child(3){--field-delay:.39s}
  .form > :nth-child(4){--field-delay:.46s}
  .form > :nth-child(5){--field-delay:.53s}
  html.js.motion-ok .error-summary:not([hidden]){animation:ecu-copy .6s var(--motion-ease) both}
  html.js.motion-ok .field__error:not([hidden]){animation:ecu-eyebrow .45s var(--motion-ease) both}
  html.js.motion-ok .field input{transition:border-color .2s,box-shadow .35s var(--motion-ease)}
  html.js.motion-ok .field input:focus-visible{box-shadow:0 8px 22px rgba(20,33,61,.1)}

  /* Results opening: typographic. The score figure rises and counts; the band rises word by word. */
  html.js.motion-ok .res-head .score{animation:ecu-copy 1.05s var(--motion-ease) .1s both}
  html.js.motion-ok .res-head .res-title__pre{animation:ecu-eyebrow .9s var(--motion-ease) .15s both}
  html.js.motion-ok .res-head .res-title__band .motion-word{animation-delay:calc(var(--word-delay,0ms) + .2s)}
  html.js.motion-ok .res-head #res-band-text{animation:ecu-copy 1.05s var(--motion-ease) .35s both}
  html.js.motion-ok .signup-status:not([hidden]){animation:ecu-copy 1.05s var(--motion-ease) .2s both}
  /* Dimension bars hold at zero until their group enters, then fill one after another. */
  html.js.motion-ok .dim__fill{transition:width 1.4s var(--motion-ease) var(--bar-delay,.25s)}
  html.js.motion-ok .res-dims:not(.is-visible) .dim__fill{width:0!important}
  .dims > li:nth-child(2) .dim__fill{--bar-delay:.4s}
  .dims > li:nth-child(3) .dim__fill{--bar-delay:.55s}
  html.js.motion-ok .dims > li .dim__meta{transition:opacity .6s var(--motion-ease) 1.2s}
  html.js.motion-ok .res-dims:not(.is-visible) .dim__meta{opacity:0}
  /* Focus books and next steps. */
  html.js.motion-ok .focus.is-entering .books > li{animation:ecu-reveal 1.05s var(--motion-ease) var(--book-delay,.2s) both}
  .focus .books > li:nth-child(2){--book-delay:.29s}
  .focus .books > li:nth-child(3){--book-delay:.38s}
  html.js.motion-ok .steps.is-entering > .step{animation:ecu-reveal 1.05s var(--motion-ease) var(--step-delay,0ms) both}
  .steps > .step:nth-child(2){--step-delay:90ms}
  .steps > .step:nth-child(3){--step-delay:180ms}
  .steps > .step:nth-child(n+4){--step-delay:270ms}
  /* Buttons keep their colour transitions alongside the shared magnetic move. */
  html.js.motion-ok .btn{transition:transform .35s var(--motion-ease),background-color .15s,color .15s,border-color .15s}
  html.js.motion-ok .btn:disabled{transform:none}
  html.js.motion-ok .btn:disabled::before{display:none}
  html.js.motion-ok .books a{transition:color .2s}

  /* Privacy page: modest. Kicker, title and lead only; sections use the shared reveal. */
  html.js.motion-ok .privacy-main .prose > .lead{animation:ecu-copy 1.05s var(--motion-ease) .2s both}

  @media (hover:hover) and (pointer:fine){
    html.js.motion-ok .choice label:hover .choice__num{transform:translateY(-3px);box-shadow:0 8px 18px rgba(20,33,61,.14)}
    html.js.motion-ok .focus.is-visible:not(.is-entering) .books > li{transition:transform .4s var(--motion-ease)}
    html.js.motion-ok .focus.is-visible:not(.is-entering) .books > li:hover{transform:translateX(5px)}
  }
}
@keyframes sc-swap-a{from{transform:translate3d(0,18px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes sc-swap-b{from{transform:translate3d(0,18px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes sc-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
/* The 2027 numeral settles softly into place: a fade and a short rise, nothing more. */
@keyframes yas-settle{from{transform:translate3d(0,14px,0);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .choice__num,.btn,.byline img,.year-mark,.books > li,.step{transform:none!important}
  .year-mark{opacity:1!important}
  .byline picture::before,.sc-num-visual{display:none!important}
  .sc-num-base{opacity:1!important}
}
@media print{
  .sc-num-visual,.byline picture::before{display:none!important}
  .sc-num-base{opacity:1!important}
}