/* r9-motion.css: inner page motion (compile / assemble family). Map: design/loop/budleiser-2026/MOTION-R9.md
   Rules: text never changes opacity (decoration and small transforms only). Every hide state sits inside no-preference AND html.r9-ready.
   Reduced motion: no animations, no transitions. Looping decoration stops with html.r9-paused or a hidden tab. */
@media (prefers-reduced-motion:no-preference){
  .h9 .eyebrow::after{animation:r9blk 1s steps(2) infinite}
  @keyframes r9blk{50%{opacity:.2}}
  html.r9-ready body.ip .sec:not(.h9) .sec-label::after{clip-path:inset(0 100% 0 0)}
  html.r9-ready body.ip .sec.sec-seen .sec-label::after{clip-path:inset(0);transition:clip-path 1.2s steps(12) .2s}
  html.r9-paused *,html.r9-hidden *,html.r9-paused *::before,html.r9-paused *::after,html.r9-hidden *::before,html.r9-hidden *::after{animation-play-state:paused!important}
  html.r9-ready body.ip .ftr.rvf::before{clip-path:inset(0 100% 0 0)}
  html.r9-ready body.ip .ftr.rvf.on::before{clip-path:inset(0);transition:clip-path 1.4s steps(28)}

  /* ---- reveal kinds: one per section on a page. Items start offset or marked and settle; opacity stays 1 ---- */
  html.r9-ready [data-rv=snap] .rvi:not(.on){transform:translateY(-22px)}
  html.r9-ready [data-rv=snap] .rvi.on{transition:transform .8s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--k)*.09s)}
  html.r9-ready [data-rv=slidel] .rvi:not(.on){transform:translateX(-34px)}
  html.r9-ready [data-rv=slidel] .rvi.on{transition:transform .6s steps(6);transition-delay:calc(var(--k)*.1s)}
  html.r9-ready [data-rv=slider] .rvi:not(.on){transform:translateX(34px)}
  html.r9-ready [data-rv=slider] .rvi.on{transition:transform .6s steps(6);transition-delay:calc(var(--k)*.1s)}
  html.r9-ready [data-rv=rise] .rvi:not(.on){transform:translateY(26px)}
  html.r9-ready [data-rv=rise] .rvi.on{transition:transform .7s steps(7);transition-delay:calc(var(--k)*.12s)}
  html.r9-ready [data-rv=stamp] .rvi:not(.on){transform:scale(1.05);box-shadow:8px 8px 0 var(--steel)}
  html.r9-ready [data-rv=stamp] .rvi.on{animation:r9stamp .7s ease-out both;animation-delay:calc(var(--k)*.18s)}
  @keyframes r9stamp{0%{transform:scale(1.07);box-shadow:8px 8px 0 var(--steel)}55%{transform:scale(.985);box-shadow:5px 5px 0 var(--steel)}100%{transform:none;box-shadow:0 0 0 transparent}}
  html.r9-ready [data-rv=hinge] .rvi:not(.on){transform:perspective(700px) rotateX(16deg);transform-origin:50% 0}
  html.r9-ready [data-rv=hinge] .rvi.on{transition:transform .7s steps(6);transform-origin:50% 0;transition-delay:calc(var(--k)*.12s)}
  html.r9-ready [data-rv=zoom] .rvi:not(.on){transform:scale(.94)}
  html.r9-ready [data-rv=zoom] .rvi.on{transition:transform .6s steps(5);transition-delay:calc(var(--k)*.1s)}
  html.r9-ready [data-rv=shadow] .rvi:not(.on){transform:translate(-8px,-8px);box-shadow:8px 8px 0 var(--steel)}
  html.r9-ready [data-rv=shadow] .rvi.on{transition:transform .5s steps(4),box-shadow .5s steps(4);transition-delay:calc(var(--k)*.14s)}
  html.r9-ready [data-rv=ring] .rvi:not(.on){outline:3px solid var(--cy);outline-offset:18px}
  html.r9-ready [data-rv=ring] .rvi.on{outline:3px solid transparent;outline-offset:0;transition:outline-offset .7s steps(7),outline-color .3s steps(3) .5s;transition-delay:calc(var(--k)*.14s)}
  html.r9-ready [data-rv=edge] .rvi:not(.on){box-shadow:inset 4px 0 0 var(--cy);transform:translateY(12px)}
  html.r9-ready [data-rv=edge] .rvi.on{animation:r9edge .8s steps(5) both;animation-delay:calc(var(--k)*.12s)}
  @keyframes r9edge{0%{box-shadow:inset 4px 0 0 var(--cy);transform:translateY(12px)}45%{box-shadow:inset 4px 0 0 var(--cy);transform:translateY(5px)}100%{box-shadow:inset 0 0 0 transparent;transform:none}}
  html.r9-ready [data-rv=top] .rvi:not(.on){box-shadow:inset 0 5px 0 var(--amber);transform:translateY(-10px)}
  html.r9-ready [data-rv=top] .rvi.on{animation:r9top .8s steps(5) both;animation-delay:calc(var(--k)*.12s)}
  @keyframes r9top{0%{box-shadow:inset 0 5px 0 var(--amber);transform:translateY(-10px)}50%{box-shadow:inset 0 5px 0 transparent;transform:translateY(-4px)}70%{box-shadow:inset 0 5px 0 var(--amber)}100%{box-shadow:inset 0 0 0 transparent;transform:none}}
  html.r9-ready [data-rv=tilt] .rvi:not(.on){transform:rotate(-1.6deg) translateY(14px);transform-origin:0 100%}
  html.r9-ready [data-rv=tilt] .rvi.on{transition:transform .7s steps(5);transition-delay:calc(var(--k)*.12s)}
  html.r9-ready [data-rv=skew] .rvi:not(.on){transform:translateX(-24px) skewX(-8deg)}
  html.r9-ready [data-rv=skew] .rvi.on{transition:transform .6s steps(6);transition-delay:calc(var(--k)*.1s)}
  html.r9-ready [data-rv=flicker] .rvi:not(.on){outline:2px solid var(--steel);outline-offset:-2px}
  html.r9-ready [data-rv=flicker] .rvi.on{animation:r9fl .6s steps(1) both;animation-delay:calc(var(--k)*.15s)}
  @keyframes r9fl{0%{outline:2px solid var(--steel);outline-offset:-2px}20%{outline:2px solid transparent}40%{outline:2px solid var(--cy);outline-offset:-2px}60%{outline:2px solid transparent}80%{outline:2px solid var(--steel);outline-offset:-2px}100%{outline:2px solid transparent}}
  html.r9-ready [data-rv=grow] .rvi:not(.on){box-shadow:inset 0 -6px 0 var(--steel);transform:translateY(18px)}
  html.r9-ready [data-rv=grow] .rvi.on{animation:r9grow .7s steps(6) both;animation-delay:calc(var(--k)*.12s)}
  @keyframes r9grow{0%{box-shadow:inset 0 -6px 0 var(--steel);transform:translateY(18px)}60%{box-shadow:inset 0 -6px 0 var(--steel);transform:translateY(4px)}100%{box-shadow:inset 0 0 0 transparent;transform:none}}
  html.r9-ready [data-rv=cut] .rvi:not(.on){box-shadow:0 0 0 3px var(--cy);transform:scaleX(.97)}
  html.r9-ready [data-rv=cut] .rvi.on{box-shadow:0 0 0 0 transparent;transition:transform .5s steps(5),box-shadow .6s steps(6);transition-delay:calc(var(--k)*.1s)}

  /* micro */
  body.ip .l3,body.ip .eng,body.ip .gcard,body.ip .pkg,body.ip .card{transition:transform .25s steps(3),box-shadow .25s}
  body.ip .l3:hover,body.ip .gcard:hover,body.ip .pkg:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--steel)}
  .h9 .btn::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 12px,transparent 12px 24px);clip-path:inset(0 100% 0 0);pointer-events:none}
  .h9 .btn:hover::after{animation:fxFill .6s steps(8) forwards}

  /* ---- hero art: decoration draws itself (pathLength=1 on every draw line) ---- */
  .h9 .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:r9draw 1.1s steps(16) forwards;animation-delay:calc(var(--d,0)*.26s + .2s)}
  @keyframes r9draw{to{stroke-dashoffset:0}}
  .h9 .fade{animation:r9fillin .5s steps(4) backwards;animation-delay:calc(var(--d,0)*.26s + .5s)}
  @keyframes r9fillin{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .h9 .eyebrow::after{animation:none}
  #r9-pause{display:none}
}

/* hero: services (blueprint drafting). A pen dot travels the top dimension line, then the sheet repeats every 9 s */
@media (prefers-reduced-motion:no-preference){
  .h9-services .pen-s{offset-path:path("M30 28H490");offset-rotate:0deg;animation:r9pen 9s steps(60) 2.6s infinite}
  @keyframes r9pen{0%{offset-distance:0%}60%,100%{offset-distance:100%}}
}
@media (prefers-reduced-motion:reduce){.h9-services .pen-s{display:none}}

/* ---- hero art per page ---- */
.h9 .st{fill:none;stroke:var(--cy);stroke-width:1.6}
.h9 .st.f{stroke:#8F99E8}
.h9 .ringx{fill:none;stroke:var(--cy);stroke-width:1.5;opacity:0}
.h9 .scanv{opacity:0}
@media (prefers-reduced-motion:no-preference){
  /* work: catalog compile. A scan line passes over the assembled catalog */
  .h9 .scanv{opacity:.8;animation:r9scan 8s steps(52) 2.4s infinite}
  @keyframes r9scan{0%{transform:translateX(0)}70%,100%{transform:translateX(520px)}}
  /* games: arcade boot. Bricks power on row by row, ball and paddle run */
  .h9 .brick{animation:r9brick .6s steps(4) backwards;animation-delay:calc(var(--d)*.35s + .4s)}
  @keyframes r9brick{0%{opacity:0;transform:translateY(-14px)}50%{opacity:1}100%{opacity:1;transform:none}}
  .h9 .paddle{animation:r9pad 9s steps(34) 2s infinite alternate}
  @keyframes r9pad{from{transform:translateX(-170px)}to{transform:translateX(170px)}}
  .h9 .ball{offset-path:path("M250 340L100 190L400 120L180 250L430 200L250 340");offset-rotate:0deg;animation:r9ball 9s linear 2s infinite}
  @keyframes r9ball{from{offset-distance:0%}to{offset-distance:100%}}
  /* proof: data assembles. Bars grow, marker rides the trend */
  .h9 .bar{transform-box:fill-box;transform-origin:50% 100%;animation:r9bar .7s steps(6) backwards;animation-delay:calc(var(--i)*.14s + .3s)}
  @keyframes r9bar{from{transform:scaleY(0)}to{transform:none}}
  .h9 .trendpen{offset-path:path("M65 306L111 276L157 284L203 236L249 246L295 196L341 174L387 146L433 114L479 74");offset-rotate:0deg;animation:r9ball 7s steps(48) 3s infinite}
  /* contact: signal handshake. Pulses cross, a ring closes at the middle */
  .h9 .pulse{animation:r9ball 4s steps(30) 1.5s infinite}
  .h9 .pa{offset-path:path("M140 200H380");offset-rotate:0deg}
  .h9 .pb{offset-path:path("M380 200H140");offset-rotate:0deg;animation-delay:3.5s}
  .h9 .ringx{transform-box:fill-box;transform-origin:center;animation:r9ring 4s steps(8) 3.5s infinite}
  @keyframes r9ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
  /* blog: index cards file into the rail, a tab marker slides down it */
  .h9 .tabpen{animation:r9tab 7s steps(10) 2.5s infinite alternate}
  @keyframes r9tab{from{transform:translateY(0)}to{transform:translateY(230px)}}
  /* story: a hand of five cards is dealt */
  .h9 .deal{transform-origin:260px 290px;transform:rotate(var(--a));animation:r9deal .9s steps(9) backwards;animation-delay:calc(var(--i)*.28s + .3s)}
  @keyframes r9deal{from{transform:translate(-300px,50px) rotate(-90deg)}to{transform:rotate(var(--a))}}
  /* privacy: a marker walks the shield outline. terms: a marker signs */
  .h9 .shieldpen{offset-path:path("M260 40L400 90V210C400 290 330 340 260 365C190 340 120 290 120 210V90Z");offset-rotate:0deg;animation:r9ball 8s steps(60) 3s infinite}
  .h9 .signpen{offset-path:path("M150 330C165 295 178 355 195 322S228 300 246 328S286 345 320 308");offset-rotate:0deg;animation:r9ball 6s steps(50) 3.4s infinite}
  /* 404: blocks scatter and reassemble, with a short glitch now and then */
  .h9 .gl{animation:r9gl .9s steps(6) backwards,r9jit 7s steps(1) 3s infinite;animation-delay:calc(var(--i)*.15s + .2s),3s}
  @keyframes r9gl{from{transform:translateX(var(--j))}to{transform:none}}
  @keyframes r9jit{0%,90%,100%{transform:none}92%{transform:translateX(var(--j))}96%{transform:translateX(calc(var(--j)*-.5))}}
}
@media (prefers-reduced-motion:reduce){.h9 .scanv,.h9 .ball,.h9 .trendpen,.h9 .pulse,.h9 .shieldpen,.h9 .signpen,.h9 .tabpen,.h9 .paddle{display:none}.h9 .paddle{display:block}}

/* games: arcade boot. The screen powers on from a centre line, bricks drop in row by row, the ball bounces off the wall, the paddle slides */
@media (prefers-reduced-motion:no-preference){
  .crt .wall .brick{animation:r9brick .6s steps(4) backwards;animation-delay:calc(var(--d)*.3s + .3s)}
  .crt .wall .ball{offset-path:path("M260 100L60 40L420 70L180 20L470 60L260 100");offset-rotate:0deg;animation:r9ball 7s linear 1.6s infinite}
  .crt-screen img{animation:r9crt 1.1s steps(9) .5s backwards}
  @keyframes r9crt{from{clip-path:inset(49% 0 49% 0)}to{clip-path:inset(0)}}
  .crt-screen::before{animation:r9scanl 6s linear infinite}
  @keyframes r9scanl{from{background-position:0 0}to{background-position:0 12px}}
  .crt-pad{animation:r9padc 7s steps(26) 1.6s infinite alternate}
  @keyframes r9padc{from{transform:translateX(-90%)}to{transform:translateX(90%)}}
}

/* ===== R9 fix round 3: motion ===== */
@media (prefers-reduced-motion:no-preference){
  /* work hero: three real screens slide in and settle, tags flash on, a scan line passes the stack */
  .ws{animation:r9ws .9s steps(7) backwards,r9wfloat 7s steps(8) infinite alternate;animation-delay:calc(var(--i)*.4s + .2s),calc(var(--i)*.7s + 2.2s)}
  @keyframes r9wfloat{from{transform:none}to{transform:translateY(-20px)}}
  @keyframes r9ws{from{transform:translate(70px,28px);box-shadow:0 0 0 var(--steel)}}
  .ws-tag{animation:r9tag .6s steps(4) backwards;animation-delay:calc(var(--i)*.4s + 1.1s)}
  @keyframes r9tag{from{background:#fff}50%{background:var(--cy)}}
  .wscan{opacity:.85;animation:r9wscan 8s steps(52) 2.8s infinite}
  @keyframes r9wscan{0%{left:0}70%,100%{left:100%}}
  .ws img{animation:r9wpan 16s ease-in-out 2s infinite alternate}
  @keyframes r9wpan{from{transform:scale(1)}to{transform:scale(1.07)}}
  /* services hero plate: slow push in */
  .plate>img{animation:r9plate 12s ease-in-out .5s infinite alternate;transform-origin:50% 60%}
  @keyframes r9plate{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,2%)}}
  /* proof hero marker rides the loop ring */
  .h9 .trendpen{offset-path:path("M260 60A140 140 0 1 1 260 340A140 140 0 1 1 260 60Z")}
  /* blog hero cards shuffle one by one */
  .h9 .bc{animation:r9bc 7s steps(8) infinite;animation-delay:calc(var(--i)*.9s + 3.5s)}
  @keyframes r9bc{0%,55%,100%{transform:none}65%,90%{transform:translateX(-30px)}}
  /* summary cards: segmented bar fills in steps, number ticks in */
  html.r9-ready .sum-card:not(.on)::before{clip-path:inset(0 100% 0 0)}
  html.r9-ready .sum-card.on::before{clip-path:inset(0);transition:clip-path .9s steps(12);transition-delay:calc(var(--k)*.12s + .2s)}
  html.r9-ready .sum-card.on .sum-n{animation:r9tick .6s steps(3) backwards;animation-delay:calc(var(--k)*.12s + .2s)}
  @keyframes r9tick{from{transform:translateX(-14px)}}
  .sum-card,.mo3-c{transition:transform .25s steps(3),box-shadow .25s}
  .sum-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--steel)}
  /* article: pull quote bar draws down, figures unveil in steps, caption rule runs across, wide photo pans */
  html.r9-ready .pq:not(.on)::before{clip-path:inset(0 0 100% 0)}
  html.r9-ready .pq.on::before{clip-path:inset(0);transition:clip-path 1s steps(10) .15s}
  html.r9-ready .pq.on footer::before{content:"";display:inline-block;width:0;height:2px;background:var(--cy);vertical-align:middle;margin-right:10px;animation:r9ln .8s steps(8) .9s forwards}
  @keyframes r9ln{to{width:44px}}
  html.r9-ready .article-figs:not(.on) img,html.r9-ready .fig-wide:not(.on) img{clip-path:inset(0 100% 0 0)}
  html.r9-ready .article-figs.on img{animation:r9unveil 1s steps(10) backwards,r9wpan 16s ease-in-out 1.2s infinite alternate}
  html.r9-ready .article-figs.on figure+figure img{animation-delay:.25s,1.4s}
  html.r9-ready .fig-wide.on img{animation:r9unveil 1.1s steps(11) backwards,r9fpan 14s ease-in-out 1.3s infinite alternate}
  @keyframes r9unveil{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  @keyframes r9fpan{from{object-position:50% 20%}to{object-position:50% 70%}}
  html.r9-ready .article-figs.on figcaption::after,html.r9-ready .fig-wide.on figcaption::after{animation:r9capln 1s steps(10) .6s backwards}
  @keyframes r9capln{from{transform:scaleX(0);transform-origin:0 50%}to{transform:scaleX(1);transform-origin:0 50%}}
  /* blog index card: photo unveils then pans, tags slide in, underline bar draws */
  html.r9-ready .blog-card.rvi:not(.on) .blog-thumb img{clip-path:inset(0 100% 0 0)}
  html.r9-ready .blog-card.on .blog-thumb img{animation:r9unveil 1.2s steps(12) .1s backwards,r9wpan 14s ease-in-out 1.5s infinite alternate}
  html.r9-ready .blog-card.on .blog-tags span{animation:r9tick .6s steps(4) .5s backwards}
  html.r9-ready .blog-card.rvi:not(.on) .blog-meta h2::after{clip-path:inset(0 100% 0 0)}
  html.r9-ready .blog-card.on .blog-meta h2::after{clip-path:inset(0);transition:clip-path 1s steps(14) .6s}
  .blog-card{transition:transform .25s steps(3),box-shadow .25s}
  .blog-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--steel)}
}
@media (prefers-reduced-motion:no-preference){
  .h9-privacy .h9-art::after,.h9-terms .h9-art::after,.h9-story .h9-art::after{animation:r9sweep 7s steps(40) 3s infinite}
  @keyframes r9sweep{0%{top:0;opacity:.6}70%{top:100%;opacity:.6}100%{top:100%;opacity:0}}
  .plate::after{animation:r9sweepx 8s steps(48) 2.5s infinite}
  @keyframes r9sweepx{0%{left:0;opacity:.7}70%{left:100%;opacity:.7}100%{left:100%;opacity:0}}
  .h9-story .deal{animation:r9deal .9s steps(9) backwards,r9fan 6s steps(12) 2.4s infinite alternate;animation-delay:calc(var(--i)*.28s + .3s),calc(var(--i)*.2s + 2.4s)}
  @keyframes r9fan{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a)*1.3)) translateY(-8px)}}
}
@media (prefers-reduced-motion:reduce){.wscan{display:none}}