/* Award-style hero recipes (APB_Section_Components_Heroes2) — partition 4. Tokens only; every brand-tinted
   value derives from --apb-rx-brand; scrolljack heroes read --apb-p and default to their revealed end-state.
   Reuses shared .apb-rx-h2cta* button styles + hx2 helpers from component-heroes2.css. */

/* ============================ slat_shutter (scrolljack, --apb-p) ============================ */
.apb-rx-hslat{padding:0;position:relative}
.apb-rx-hslat-track{height:240vh;position:relative}
.apb-rx-hslat-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hslat-back{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:color-mix(in srgb,var(--apb-rx-brand2,var(--apb-rx-brand)) 35%,var(--apb-rx-ink,#0b0d12))}
.apb-rx-hslat-back::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.45),rgba(11,13,18,.15) 45%,rgba(11,13,18,.66))}
.apb-rx-hslat-slats{position:absolute;inset:0;display:flex}
.apb-rx-hslat-slat{flex:1;position:relative;overflow:hidden;background-image:var(--hs-img);background-size:800% 100%;
  background-position:calc(var(--i,0) * -100%) 0;background-color:color-mix(in srgb,var(--apb-rx-brand) 30%,var(--apb-rx-ink,#0b0d12));
  transform:translateY(calc(clamp(0, (var(--apb-p, 1) - var(--d0, 0)) / .55, 1) * var(--dir, 1) * 118%));
  box-shadow:8px 0 24px rgba(11,13,18,.35)}
.apb-rx-hslat-slat::after{content:"";position:absolute;inset:0;background:rgba(11,13,18,calc(.12 + .1 * var(--tone, 0)))}
.apb-rx-hslat-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  opacity:clamp(0, 1 - var(--apb-p, 1) * 2.2, 1);pointer-events:none}
.apb-rx-hslat-title span{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.apb-rx-hslat-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  padding:0 24px clamp(40px,10vh,90px);opacity:clamp(0, (var(--apb-p, 1) - .7) / .3, 1);
  transform:translateY(calc((1 - clamp(0, (var(--apb-p, 1) - .7) / .3, 1)) * 24px))}
.apb-rx-hslat-copy h1{margin:0 0 12px;color:#fff;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(30px,4.8vw,54px);letter-spacing:var(--apb-rx-display-tracking,-.02em);line-height:var(--apb-rx-display-leading,1.06);max-width:18ch;text-wrap:balance}
.apb-rx-hslat-copy p{margin:0 0 24px;color:rgba(255,255,255,.8);font-size:clamp(14px,1.5vw,17px);line-height:1.6;max-width:52ch}
.apb-rx-hslat-copy .apb-rx-h2ctas{justify-content:center}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hslat-track{height:100vh}
}

/* ============================ deck_shuffle (scrolljack, --apb-p) ============================ */
.apb-rx-hdck{padding:0;position:relative}
.apb-rx-hdck-track{height:240vh;position:relative}
.apb-rx-hdck-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80vmax 55vmax at 50% -20%,var(--apb-rx-soft,#f4f5f7),transparent 60%),var(--apb-rx-surface,#fff)}
.apb-rx-hdck-copy{position:relative;z-index:1;text-align:center;padding:24px;max-width:760px;
  opacity:var(--hd-copy);transform:scale(calc(.92 + .08 * var(--hd-copy)))}
.apb-rx-hdck-ey{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-hdck-copy h1{margin:12px 0 16px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(36px,6vw,68px);letter-spacing:var(--apb-rx-display-tracking,-.025em);line-height:var(--apb-rx-display-leading,1.02);
  color:var(--apb-rx-ink,#0b0d12);text-wrap:balance}
.apb-rx-hdck-copy p{margin:0 0 26px;color:var(--apb-rx-muted,#6b7280);font-size:clamp(15px,1.6vw,18px);line-height:1.6}
.apb-rx-hdck-stage{--hd-copy:clamp(0, (var(--apb-p, 1) - .45) / .4, 1)}
.apb-rx-hdck-card{position:absolute;left:50%;top:50%;width:clamp(230px,30vw,400px);aspect-ratio:4/5;z-index:2;
  margin:calc(clamp(230px,30vw,400px) * -.625) 0 0 calc(clamp(230px,30vw,400px) * -.5);
  border-radius:calc(var(--apb-rx-radius) * 1.1);overflow:hidden;background:var(--apb-rx-soft,#f4f5f7);
  border:6px solid var(--apb-rx-surface,#fff);box-shadow:var(--apb-rx-shadow-3);
  --hd-t:clamp(0, (var(--apb-p, 1) - var(--d0, 0)) / .32, 1);
  transform:
    translate(calc(var(--hd-t) * var(--tx,0)), calc(var(--hd-t) * var(--ty,0) + (1 - var(--hd-t)) * var(--stack-y,0px)))
    rotate(calc(var(--rot,0deg) + var(--hd-t) * var(--rspin,0deg)))
    scale(calc(1 - var(--depth,0) * .05 + var(--hd-t) * .06))}
.apb-rx-hdck-card img{display:block;width:100%;height:100%;object-fit:cover}
.apb-rx-hdck-c1{--rot:-2deg;--tx:-60vw;--ty:-16vh;--rspin:-16deg;--depth:0;--stack-y:0px;--d0:0;z-index:6}
.apb-rx-hdck-c2{--rot:3deg;--tx:62vw;--ty:-10vh;--rspin:18deg;--depth:1;--stack-y:8px;--d0:.144;z-index:5}
.apb-rx-hdck-c3{--rot:-5deg;--tx:-58vw;--ty:20vh;--rspin:-22deg;--depth:2;--stack-y:16px;--d0:.288;z-index:4}
.apb-rx-hdck-c4{--rot:6deg;--tx:60vw;--ty:24vh;--rspin:20deg;--depth:3;--stack-y:24px;--d0:.432;z-index:3}
.apb-rx-hdck-c5{--rot:-1deg;--tx:0vw;--ty:-70vh;--rspin:8deg;--depth:4;--stack-y:32px;--d0:.576;z-index:2}
.apb-rx-hdck-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--apb-rx-muted,#6b7280);
  opacity:clamp(0, 1 - var(--hd-copy) * 2, 1)}
.apb-rx-hdck-hint svg{width:14px;height:14px;animation:hdckNudge calc(1.6s / var(--apb-rx-dur,1)) ease-in-out infinite}
@keyframes hdckNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(max-width:700px){.apb-rx-hdck-card{width:clamp(190px,58vw,260px);margin-left:calc(clamp(190px,58vw,260px) * -.5);margin-top:calc(clamp(190px,58vw,260px) * -.625)}}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hdck-track{height:100vh}
  .apb-rx-hdck-hint{display:none}
}

/* ============================ blob_morph (static) ============================ */
.apb-rx-hblb{position:relative;overflow:hidden;padding:clamp(70px,13vh,140px) 24px;background:var(--apb-rx-surface,#fff)}
.apb-rx-hblb-bg{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none;filter:blur(clamp(30px,5vw,60px));opacity:.85}
.apb-rx-hblb-wrap{position:relative;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,72px);align-items:center}
.apb-rx-hblb-ey{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--apb-rx-radius-pill,999px);
  background:color-mix(in srgb,var(--apb-rx-surface,#fff) 70%,transparent);border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);
  font-size:12.5px;font-weight:700;color:var(--apb-rx-accent-text,var(--apb-rx-brand));margin-bottom:18px}
.apb-rx-hblb-ey i{width:7px;height:7px;border-radius:50%;background:var(--apb-rx-brand);
  animation:hblbPulse calc(2s / var(--apb-rx-dur,1)) ease-in-out infinite}
@keyframes hblbPulse{0%,100%{box-shadow:0 0 0 0 var(--apb-rx-glow-soft)}50%{box-shadow:0 0 0 7px transparent}}
.apb-rx-hblb h1{margin:0 0 16px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(36px,5.2vw,62px);letter-spacing:var(--apb-rx-display-tracking,-.02em);line-height:var(--apb-rx-display-leading,1.05);
  color:var(--apb-rx-ink,#0b0d12);text-wrap:balance}
.apb-rx-hblb h1 em{font-style:normal;color:transparent;
  background:linear-gradient(95deg,var(--apb-rx-brand),var(--apb-rx-brand2,var(--apb-rx-brand)) 60%,var(--apb-rx-brand3,var(--apb-rx-brand)));
  -webkit-background-clip:text;background-clip:text}
.apb-rx-hblb-lead{margin:0 0 28px;color:var(--apb-rx-muted,#6b7280);font-size:clamp(15px,1.6vw,18px);line-height:1.65;max-width:48ch}
.apb-rx-hblb-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.apb-rx-hblb-note{font-size:13px;color:var(--apb-rx-muted,#6b7280)}
.apb-rx-hblb-card{position:relative;border-radius:calc(var(--apb-rx-radius) * 1.3);padding:26px;
  background:color-mix(in srgb,var(--apb-rx-surface,#fff) 72%,transparent);
  border:var(--apb-rx-border,1px) solid color-mix(in srgb,#fff 60%,var(--apb-rx-line,#e7e8ec));
  box-shadow:var(--apb-rx-shadow-3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.apb-rx-hblb-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--apb-rx-line,#e7e8ec) 60%,transparent)}
.apb-rx-hblb-row:last-of-type{border-bottom:0}
.apb-rx-hblb-ic{width:36px;height:36px;flex:none;border-radius:calc(var(--apb-rx-radius) * .7);display:flex;align-items:center;justify-content:center;
  background:var(--apb-rx-soft,#f4f5f7);color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-hblb-ic svg{width:18px;height:18px}
.apb-rx-hblb-row b{display:block;font-size:14px;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hblb-row span{font-size:12.5px;color:var(--apb-rx-muted,#6b7280)}
.apb-rx-hblb-chip{position:absolute;width:22px;height:22px;border-radius:var(--apb-rx-radius-pill,999px);
  display:flex;align-items:center;justify-content:center;background:var(--apb-rx-surface-2,#fff);
  border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);box-shadow:var(--apb-rx-shadow-2);
  animation:hblbFloat calc(5.5s / var(--apb-rx-dur,1)) ease-in-out infinite;animation-delay:var(--d,0s)}
.apb-rx-hblb-chip i{width:8px;height:8px;border-radius:50%;background:var(--apb-rx-brand)}
.apb-rx-hblb-chip--a{top:-11px;right:8%}
.apb-rx-hblb-chip--b{bottom:-11px;left:-6%;--d:1.4s}
@keyframes hblbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:860px){.apb-rx-hblb-wrap{grid-template-columns:1fr;gap:40px}.apb-rx-hblb-chip--b{left:2%}}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hblb-chip{animation:none}
  .apb-rx-hblb-ey i{animation:none}
}

/* ============================ horizon_scrub (scrolljack HORIZONTAL, --apb-p) ============================ */
.apb-rx-hhsc{padding:0;position:relative}
.apb-rx-hhsc-track{height:300vh;position:relative}
.apb-rx-hhsc-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--apb-rx-ink,#0b0d12);display:flex;flex-direction:column}
.apb-rx-hhsc-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:clamp(28px,6vh,56px) clamp(20px,5vw,64px) 20px}
.apb-rx-hhsc-head h1{margin:0;color:#fff;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(30px,4.6vw,54px);letter-spacing:var(--apb-rx-display-tracking,-.02em);line-height:var(--apb-rx-display-leading,1.05);max-width:18ch;text-wrap:balance}
.apb-rx-hhsc-head h1 em{font-style:normal;color:color-mix(in srgb,var(--apb-rx-brand) 55%,#fff)}
.apb-rx-hhsc-sub{margin:8px 0 0;color:rgba(255,255,255,.72);font-size:clamp(13px,1.3vw,15px);max-width:44ch}
.apb-rx-hhsc-head .apb-rx-h2ctas{justify-content:flex-end}
/* the rail — translateX approximated: rail is sized wider than viewport via panel widths, tuned so the
   last panel lands on-screen at --apb-p:1 (exact CSS measurement of rail overflow is not possible). */
.apb-rx-hhsc-viewport{position:relative;flex:1;display:flex;align-items:center;overflow:hidden}
.apb-rx-hhsc-rail{display:flex;gap:clamp(14px,2vw,26px);padding:0 clamp(20px,5vw,64px);
  transform:translateX(calc(var(--apb-p, 1) * -68%));will-change:transform}
.apb-rx-hhsc-panel{position:relative;flex:none;width:clamp(240px,26vw,380px);aspect-ratio:3/4;border-radius:calc(var(--apb-rx-radius) * 1.2);
  overflow:hidden;background:color-mix(in srgb,var(--apb-rx-brand) 25%,var(--apb-rx-ink,#0b0d12));box-shadow:var(--apb-rx-shadow-3)}
.apb-rx-hhsc-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.apb-rx-hhsc-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,transparent 40%,rgba(11,13,18,.78))}
.apb-rx-hhsc-panel figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff}
.apb-rx-hhsc-panel figcaption i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--apb-rx-brand) 50%,#fff)}
.apb-rx-hhsc-prog{position:relative;z-index:2;margin:18px clamp(20px,5vw,64px) clamp(24px,5vh,44px);height:2px;background:rgba(255,255,255,.16);border-radius:2px}
.apb-rx-hhsc-prog i{position:absolute;left:0;top:0;bottom:0;width:calc(8% + var(--apb-p, 1) * 92%);border-radius:2px;
  background:linear-gradient(90deg,var(--apb-rx-brand),var(--apb-rx-brand2,var(--apb-rx-brand)))}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hhsc-track{height:100vh}
  .apb-rx-hhsc-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .apb-rx-hhsc-rail{transform:none}
}