/*
 * Research and Perspective: index page
 * Research and Perspective (rp) — draft, not yet on the release allowlist.
 * Generated from the reviewed design canvas; see docs/research-perspective.md.
 * Scoped to body.rp-page so shared pages are unaffected.
 */
html:has(> body.rp-page),body.rp-page{overflow-x:clip}
body.rp-page{background:#f7f5f2;color:#121214;}
.rp-main a{color:inherit}
.rp-main a:hover{color:#4a52ff}
.rp-index .row{transition:background .4s cubic-bezier(.22,1,.36,1)}
.rp-index .row:hover{background:#f1efeb}
.rp-index .row:hover .arr{transform:translateX(6px);color:#4a52ff}
.rp-index .arr{transition:transform .4s cubic-bezier(.22,1,.36,1),color .3s}
@keyframes rv{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.rp-index .in1{animation:rise .9s cubic-bezier(.22,1,.36,1) both .05s}
.rp-index .in2{animation:rise .9s cubic-bezier(.22,1,.36,1) both .18s}
.rp-index .in3{animation:rise .9s cubic-bezier(.22,1,.36,1) both .31s}
.rp-index .cue{animation:cue 2.4s cubic-bezier(.22,1,.36,1) infinite;transform-origin:top}
@supports (animation-timeline: view()){
  .rp-index .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .rp-index .hero-fade{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 90vh}
}
@keyframes heroOut{to{opacity:.15;transform:translateY(-60px) scale(.98)}}
@media (max-width:860px){
  .rp-index .feat{grid-template-columns:minmax(0,1fr)!important}
  .rp-index .rowgrid{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .rp-index .hide-m{display:none!important}
  .rp-index .foot{grid-template-columns:minmax(0,1fr)!important}
}
.rp-index .aphero{position:relative;margin:48px 0 0;height:clamp(180px,20vw,240px);display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:#0b0b0c;border:1px solid rgba(255,255,255,.08)}
.rp-index .aph{position:relative;display:block;width:min(120px,34%);height:auto;overflow:visible}
.rp-index .apcard .aph{width:min(112px,40%)}
.rp-index .aph g,.rp-index .aph circle,.rp-index .aph path{transform-box:view-box;transform-origin:0 0}
.rp-index .ap-body,.rp-index .ap-dot{fill:#f4f2ee}
.rp-index .ap-hole{animation:apOpen 1.6s cubic-bezier(.22,1,.36,1) both .3s}
.rp-index .ap-sl{animation:apTwist 1.6s cubic-bezier(.22,1,.36,1) both .3s}
.rp-index .ap-body,.rp-index .ap-dot{animation:apFadeIn .9s ease both}
@keyframes apFadeIn{from{opacity:0}to{opacity:1}}
@keyframes apOpen{from{r:3px}to{r:16.75px}}
@keyframes apTwist{from{transform:rotate(-50deg)}to{transform:rotate(0deg)}}
@keyframes apTurn{from{transform:rotate(0deg)}to{transform:rotate(60deg)}}
@keyframes apWiden{from{transform:scale(1)}to{transform:scale(1.55)}}
@keyframes apShrink{from{transform:scale(1)}to{transform:scale(.55)}}
@keyframes apTurnIn{from{transform:rotate(-45deg)}to{transform:rotate(0deg)}}
@keyframes apWidenIn{from{transform:scale(.45)}to{transform:scale(1)}}
@supports (animation-timeline: scroll()){
  .rp-index .ap-scroll .ap-ss{animation:apTurn linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .rp-index .ap-scroll .ap-hs{animation:apWiden linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .rp-index .ap-scroll .ap-ds{animation:apShrink linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .rp-index .ap-view .ap-ss{animation:apTurnIn linear both;animation-timeline:view();animation-range:cover 8% cover 50%}
  .rp-index .ap-view .ap-hs{animation:apWidenIn linear both;animation-timeline:view();animation-range:cover 8% cover 50%}
}
@media (prefers-reduced-motion: reduce){
  .rp-page *{animation:none!important;transition:none!important}
}
.rp-index .chip{transition:background .3s cubic-bezier(.22,1,.36,1),color .3s,border-color .3s}