/* Award-style hero recipes (APB_Section_Components_Heroes2) — partition 3. Tokens only; every brand-tinted
   value derives from --apb-rx-brand; scrolljack heroes read --apb-p and default to their revealed end-state. */

/* ============================ paper_cutout (scrolljack, --apb-p) ============================ */
.apb-rx-hpcut{padding:0;position:relative}
.apb-rx-hpcut-track{height:240vh;position:relative}
.apb-rx-hpcut-stage{position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(90vmax 60vmax at 80% -20%,var(--apb-rx-soft,#f4f5f7),transparent 55%),var(--apb-rx-surface,#fff)}
.apb-rx-hpcut-stage::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 7%,transparent) 1px,transparent 1.5px);background-size:22px 22px}
.apb-rx-hpcut-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:2}
.apb-rx-hpcut-ey{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--apb-rx-accent-text,var(--apb-rx-brand));margin-bottom:16px}
.apb-rx-hpcut-ey::before,.apb-rx-hpcut-ey::after{content:"";width:26px;height:1.5px;background:currentColor;opacity:.5}
.apb-rx-hpcut-copy h1{font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(38px,7vw,84px);letter-spacing:var(--apb-rx-display-tracking,-.03em);line-height:var(--apb-rx-display-leading,1.0);
  margin:0;max-width:13ch;text-wrap:balance;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hpcut-copy h1 em{font-style:normal;color:var(--apb-rx-accent-text,var(--apb-rx-brand));position:relative}
.apb-rx-hpcut-copy h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.28em;z-index:-1;
  background:color-mix(in srgb,var(--apb-rx-brand) 22%,transparent);transform:rotate(-1.2deg)}
.apb-rx-hpcut-copy p{color:var(--apb-rx-muted,#6b7280);font-size:clamp(15px,1.5vw,17px);line-height:1.6;max-width:46ch;margin:20px 0 26px}
.apb-rx-hpcut-copy .apb-rx-h2ctas{justify-content:center}
.apb-rx-hpcut-item{position:absolute;width:clamp(140px,19vw,270px);z-index:1;
  --t:clamp(0, calc((var(--apb-p,1) - (var(--idx,0) * .2)) / .18), 1);
  opacity:var(--t);
  transform:translate(calc(var(--fx,0) * (1 - var(--t))), calc(var(--fy,-60vh) * (1 - var(--t)))) rotate(calc(var(--rot,0deg) + (1 - var(--t)) * var(--rspin,20deg)));
  filter:drop-shadow(0 18px 22px rgba(11,13,18,.28))}
.apb-rx-hpcut-item img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--apb-rx-soft,#f4f5f7);
  border:7px solid var(--apb-rx-surface-2,#fff);
  clip-path:polygon(1% 3%,7% 0%,15% 2%,26% 0%,38% 2%,52% 0%,65% 2%,78% 0%,90% 2%,99% 1%,100% 12%,98% 25%,100% 40%,98% 55%,100% 70%,98% 84%,100% 96%,91% 100%,78% 98%,64% 100%,50% 98%,36% 100%,22% 98%,10% 100%,1% 97%,2% 84%,0% 68%,2% 52%,0% 36%,2% 20%)}
.apb-rx-hpcut-item::after{content:"";position:absolute;top:-12px;left:50%;width:74px;height:26px;transform:translateX(-50%) rotate(calc(var(--rot,0deg) * -.6));
  background:color-mix(in srgb,var(--apb-rx-brand) 26%,rgba(255,255,255,.55));opacity:.85;
  clip-path:polygon(3% 12%,97% 0%,100% 88%,0% 100%)}
.apb-rx-hpcut-i1{top:9%;left:4%;--rot:-7deg;--fx:-30vw;--rspin:-26deg}
.apb-rx-hpcut-i2{top:52%;left:9%;--rot:5deg;--fx:-24vw;--fy:60vh;--rspin:18deg}
.apb-rx-hpcut-i3{top:7%;right:5%;--rot:6deg;--fx:30vw;--rspin:24deg}
.apb-rx-hpcut-i4{top:50%;right:8%;--rot:-4deg;--fx:26vw;--fy:60vh;--rspin:-20deg}
.apb-rx-hpcut-i5{bottom:-4%;left:38%;--rot:3deg;--fy:70vh;--rspin:14deg;width:clamp(120px,15vw,210px)}
@media(max-width:760px){
  .apb-rx-hpcut-item{width:clamp(96px,26vw,150px)}
  .apb-rx-hpcut-i2,.apb-rx-hpcut-i4{display:none}
  .apb-rx-hpcut-i1{top:4%;left:2%}.apb-rx-hpcut-i3{top:4%;right:2%}
}
@media (prefers-reduced-motion:reduce){.apb-rx-hpcut-track{height:100vh}}

/* ============================ kinetic_type (static) ============================ */
.apb-rx-hkin{position:relative;overflow:hidden;padding:clamp(70px,12vh,130px) 24px clamp(40px,7vh,80px);
  background:var(--apb-rx-ink,#0b0d12);color:#fff}
.apb-rx-hkin::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70vmax 50vmax at 50% 120%,color-mix(in srgb,var(--apb-rx-brand) 22%,transparent),transparent 60%)}
.apb-rx-hkin-wrap{max-width:1200px;margin:0 auto;position:relative}
.apb-rx-hkin-top{margin-bottom:clamp(24px,5vh,56px);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.apb-rx-hkin-head{margin:0;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(46px,9.5vw,128px);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.apb-rx-hkin-w{display:inline-block;opacity:0;transform:translateY(60%);
  animation:hkinRise calc(.8s / var(--apb-rx-dur,1)) cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--d,0s)}
.apb-rx-hkin-w--brand{color:transparent;
  background:linear-gradient(100deg,var(--apb-rx-brand),var(--apb-rx-brand2,var(--apb-rx-brand)) 55%,var(--apb-rx-brand3,var(--apb-rx-brand)));
  -webkit-background-clip:text;background-clip:text}
@keyframes hkinRise{to{opacity:1;transform:translateY(0)}}
.apb-rx-hkin-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(28px,5vh,54px)}
.apb-rx-hkin-sub p{margin:0;max-width:44ch;color:rgba(255,255,255,.72);font-size:clamp(15px,1.5vw,17px);line-height:1.6}
.apb-rx-hkin-sub .apb-rx-h2ctas{flex:none}
.apb-rx-hkin-marq{margin-top:clamp(36px,7vh,70px);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden;white-space:nowrap;padding:14px 0;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.apb-rx-hkin-marq-in{display:inline-flex;gap:44px;padding-right:44px;animation:hkinMarq calc(24s / var(--apb-rx-dur,1)) linear infinite}
.apb-rx-hkin-marq span{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:44px}
.apb-rx-hkin-marq span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--apb-rx-brand)}
@keyframes hkinMarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hkin-w{animation:none;opacity:1;transform:none}
  .apb-rx-hkin-marq-in{animation:none}
}

/* ============================ svg_drawline (static) ============================ */
.apb-rx-hdrw{position:relative;overflow:hidden;padding:clamp(60px,10vh,110px) 24px;background:var(--apb-rx-surface,#fff)}
.apb-rx-hdrw::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(70vmax 55vmax at 92% 0%,var(--apb-rx-soft,#f4f5f7),transparent 55%)}
.apb-rx-hdrw-wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,72px);align-items:center;position:relative}
.apb-rx-hdrw-ey{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--apb-rx-accent-text,var(--apb-rx-brand));margin-bottom:16px}
.apb-rx-hdrw-wrap h1{margin:0 0 18px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(34px,4.8vw,58px);letter-spacing:var(--apb-rx-display-tracking,-.02em);line-height:var(--apb-rx-display-leading,1.06);
  color:var(--apb-rx-ink,#0b0d12);text-wrap:balance}
.apb-rx-hdrw-lead{color:var(--apb-rx-muted,#6b7280);font-size:clamp(15px,1.5vw,17px);line-height:1.65;margin:0 0 26px;max-width:50ch}
.apb-rx-hdrw-wrap .apb-rx-h2ctas{margin-bottom:30px}
.apb-rx-hdrw-facts{display:flex;gap:clamp(20px,4vw,44px);border-top:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);padding-top:22px}
.apb-rx-hdrw-facts b{display:block;font-size:22px;font-weight:800;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hdrw-facts span{font-size:12.5px;color:var(--apb-rx-muted,#6b7280)}
.apb-rx-hdrw-art{position:relative}
.apb-rx-hdrw-art svg{display:block;width:100%;height:auto;overflow:visible}
.apb-rx-hdrw-art .st{fill:none;stroke:var(--apb-rx-ink,#0b0d12);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;animation:hdrwDraw calc(2.2s / var(--apb-rx-dur,1)) cubic-bezier(.6,0,.2,1) forwards;animation-delay:var(--d,0s)}
.apb-rx-hdrw-art .st--brand{stroke:var(--apb-rx-brand);stroke-width:2.2}
.apb-rx-hdrw-art .st--soft{stroke:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 30%,transparent)}
@keyframes hdrwDraw{to{stroke-dashoffset:0}}
.apb-rx-hdrw-art .fillin{fill:color-mix(in srgb,var(--apb-rx-brand) 14%,transparent);opacity:0;
  animation:hdrwFill calc(.8s / var(--apb-rx-dur,1)) ease forwards;animation-delay:2.1s}
@keyframes hdrwFill{to{opacity:1}}
.apb-rx-hdrw-art .orbit{fill:var(--apb-rx-brand);animation:hdrwOrbit calc(9s / var(--apb-rx-dur,1)) linear infinite;transform-origin:210px 150px}
@keyframes hdrwOrbit{to{transform:rotate(360deg)}}
@media(max-width:860px){.apb-rx-hdrw-wrap{grid-template-columns:1fr;gap:36px}.apb-rx-hdrw-art{max-width:440px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hdrw-art .st{animation:none;stroke-dashoffset:0}
  .apb-rx-hdrw-art .fillin{animation:none;opacity:1}
  .apb-rx-hdrw-art .orbit{animation:none}
}

/* ============================ zoom_through (scrolljack, --apb-p) ============================ */
.apb-rx-hzoom{padding:0;position:relative}
.apb-rx-hzoom-track{height:260vh;position:relative}
.apb-rx-hzoom-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--apb-rx-surface,#fff);
  display:flex;align-items:center;justify-content:center;
  --hz-p3:calc(var(--apb-p,1) * var(--apb-p,1) * var(--apb-p,1));
  --hz-zoom:calc(1 + var(--hz-p3) * 30);
  --hz-through:clamp(0, calc((var(--apb-p,1) - .62) / .3), 1);
  --hz-word:clamp(0, calc(1 - var(--hz-through) * 1.4), 1);
  --hz-scene:clamp(0, calc(var(--apb-p,1) * .5 + var(--hz-through)), 1);
  --hz-copy:clamp(0, calc((var(--apb-p,1) - .78) / .22), 1)}
.apb-rx-hzoom-scene{position:absolute;inset:0;background-size:cover;background-position:center;opacity:var(--hz-scene,0);
  background-color:color-mix(in srgb,var(--apb-rx-brand) 30%,var(--apb-rx-ink,#0b0d12))}
.apb-rx-hzoom-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.5),rgba(11,13,18,.2) 45%,rgba(11,13,18,.62))}
.apb-rx-hzoom-word{position:relative;margin:0;font-family:var(--apb-rx-font-display,inherit);font-weight:900;text-transform:uppercase;
  font-size:clamp(70px,17vw,240px);letter-spacing:-.04em;line-height:1;user-select:none;
  background-image:var(--hz-img);background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:scale(var(--hz-zoom,1));transform-origin:50% 54%;opacity:var(--hz-word,1);will-change:transform}
.apb-rx-hzoom-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:24px;opacity:var(--hz-copy,0);transform:scale(calc(.94 + .06 * var(--hz-copy,0)))}
.apb-rx-hzoom-copy h1{margin:0 0 14px;color:#fff;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(32px,5.5vw,60px);letter-spacing:var(--apb-rx-display-tracking,-.02em);line-height:var(--apb-rx-display-leading,1.05);max-width:16ch;text-wrap:balance}
.apb-rx-hzoom-copy p{margin:0 0 26px;color:rgba(255,255,255,.8);font-size:clamp(15px,1.6vw,18px);line-height:1.6;max-width:50ch}
.apb-rx-hzoom-copy .apb-rx-h2ctas{justify-content:center}
@media (prefers-reduced-motion:reduce){.apb-rx-hzoom-track{height:100vh}}