/**
 * Reasoning extraction chamber embedded in horizontal-site.html only.
 * Namespaced hs-ri-*; pairs with substrate.css traversal rail (:is ri / hs-ri).
 */

.section.hs-ri-extraction{
  --hs-ri-cluster-seat-extra:clamp(16px,2vh,28px);
  --ri-support-pad-top:clamp(2px,.8vh,10px);
  /* Match substrate ambient beam: no extra vertical plane delta (substrate adds this to rail top only). */
  --ri-stage-beam-plane-shift:0px;
  --ri-cluster-beam-mid:clamp(14px,2.6vh,36px);
  /* Distance from section-layout top to .hs-ri-support-inner top (pad + margin); keeps rail Y = ::before beam. */
  /* Less standalone drop vs section-layout; system-mode uses State Engine plane (42%). */
  --hs-ri-support-inner-offset:clamp(10px,1.9vh,26px);
  --ri-whisper-top-pad-desk:clamp(18px,2.6vh,26px);
  --hs-ri-ease:cubic-bezier(.2,.8,.2,1);
  --hs-ri-brand:#00e5c0;
  --hs-ri-brand-glow:rgba(0,229,192,.34);
  --hs-ri-extraction-pad-top:clamp(48px,10vh,100px);
  --hs-ri-extraction-pad-bottom:clamp(24px,4vh,44px);
  /* Shared with substrate rail Y; does not replace system-track slide sizing. */
  /* Scroll layout rail Y; system-mode overrides rail to 42% like .state-grid::after */
  --sb-ambient-beam-y:clamp(164px,23.5vh,224px);
  padding-top:var(--hs-ri-extraction-pad-top);
  padding-bottom:var(--hs-ri-extraction-pad-bottom);
  min-height:auto;
}

.section.hs-ri-extraction .hs-ri-extraction-layout{
  min-height:clamp(420px,52vh,620px);
}

@media (max-width:760px){
  .section.hs-ri-extraction{
    display:none !important;
  }
}

@media (min-width:761px){
  /*
    Narrow shell only when NOT in horizontal system-mode — never override system-track slide geometry (100vw / flex).
  */
  body:not(.system-mode) .section.hs-ri-extraction{
    width:min(1240px,calc(100vw - 20px));
    --hs-ri-env-shift:clamp(40px,5.2vw,104px);
    margin-left:max(0px,calc((100vw - min(1240px,100vw - 20px)) / 2 - var(--hs-ri-env-shift)));
    margin-right:auto;
  }

  body:not(.system-mode) .section.hs-ri-extraction .hs-ri-extraction-layout.section-layout,
  body:not(.system-mode) .section.section.hs-ri-extraction > .hs-ri-extraction-layout{
    gap:clamp(32px,5vw,72px);
    grid-template-columns:minmax(320px,520px) minmax(0,1fr);
    align-items:flex-start;
    align-content:start;
    padding-left:0;
    padding-right:clamp(6px,1.6vw,20px);
  }

  .section.hs-ri-extraction .hs-ri-support-inner{
    margin-top:var(--hs-ri-support-inner-offset);
    position:relative;
    z-index:0;
  }

  /*
    One continuous beam vs section-layout::before:
    same top + translateY(-50%); left bleed matches ambient (-12%); right extends for terminal read.
    Coordinates are relative to .hs-ri-support-inner, so subtract layout→inner offset.
    isolation: beam/shimmer screen-blend stays inside the stack (State Engine: ::after z-index:0 under cards z-index:1).
  */
  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner > .hs-ri-rail-stack{
    left:-12%;
    /* Extend rail past card 03 so the signal terminates as hardware, not mid-air fade. */
    right:-20%;
    top:calc(
      var(--sb-ambient-beam-y)
      - var(--ri-support-pad-top)
      - var(--hs-ri-support-inner-offset)
    );
    transform:translateY(-50%);
    z-index:0;
    isolation:isolate;
  }

  /* Packet pulse layer: idle hidden; traverses beam only while a card is hovered/focused */
  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner > .hs-ri-rail-stack .hs-ri-rail-pulse{
    position:absolute;
    top:50%;
    left:-10%;
    width:min(26%,220px);
    height:18px;
    margin:0;
    padding:0;
    border:none;
    border-radius:999px;
    pointer-events:none;
    opacity:0;
    transform:translateY(-50%);
    mix-blend-mode:normal;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.05) 22%,
      rgba(245,255,252,.12) 48%,
      rgba(0,229,192,.11) 62%,
      rgba(255,255,255,.06) 78%,
      transparent 100%);
    filter:blur(7px);
    box-shadow:
      0 0 18px rgba(0,229,192,.05),
      0 0 42px rgba(255,255,255,.03);
    animation:none;
  }

  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner:has(.hs-ri-whisper:hover) > .hs-ri-rail-stack .hs-ri-rail-pulse,
  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner:has(.hs-ri-whisper:focus-visible) > .hs-ri-rail-stack .hs-ri-rail-pulse{
    animation:hsRiBeamPacket 1.15s cubic-bezier(.22,.61,.36,1) forwards;
  }

  /*
    Optical beam pass: hold luminance through zone 3; mask ends in a short deliberate clip
    (substrate default soft-fades from ~96% and the gradient tails off by 100%).
  */
  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner > .hs-ri-rail-stack .hs-ri-rail{
    background:linear-gradient(90deg,
      rgba(0,229,192,.018) 0%,
      rgba(0,229,192,.048) 14%,
      rgba(0,229,192,.098) 38%,
      rgba(0,229,192,.128) 52%,
      rgba(0,229,192,.114) 68%,
      rgba(0,229,192,.096) 82%,
      rgba(0,229,192,.076) 100%);
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.38) 3.5%,
      #000 10%,
      #000 99.2%,
      rgba(0,0,0,.9) 99.75%,
      transparent 100%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.38) 3.5%,
      #000 10%,
      #000 99.2%,
      rgba(0,0,0,.9) 99.75%,
      transparent 100%);
    /* Halo stays behind mounted cards (State Engine: beam under nodes). */
    box-shadow:
      0 0 10px rgba(0,229,192,.032),
      0 0 26px rgba(0,229,192,.018),
      0 0 44px rgba(0,229,192,.01);
  }

  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner > .hs-ri-rail-stack .hs-ri-rail-shimmer{
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(0,229,192,.038) 36%,
      rgba(0,229,192,.062) 62%,
      rgba(0,229,192,.048) 82%,
      rgba(0,229,192,.028) 94%,
      transparent 100%);
    background-size:240% 100%;
    opacity:.14;
    mix-blend-mode:normal;
  }

  section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner > .hs-ri-rail-stack .hs-ri-rail-mark{
    opacity:.42;
    mix-blend-mode:normal;
  }

  /* Corridor wash: weaker behind extraction cards so nodes stay dominant */
  section.section.hs-ri-extraction.section.substrate-environment::after{
    opacity:.34;
    animation:none;
    background:
      radial-gradient(ellipse 125% 36% at 58% 43%, rgba(0,229,192,.048), transparent 58%),
      radial-gradient(ellipse 95% 26% at 54% 46%, rgba(0,229,192,.024), transparent 62%),
      radial-gradient(circle at 70% 50%, rgba(0,229,192,.026), transparent 60%);
  }
}

.hs-ri-copy{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  max-width:min(520px,100%);
  padding-top:clamp(2px,.8vh,10px);
}

.hs-ri-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(0,229,192,.2);
  border-radius:999px;
  background:rgba(0,229,192,.07);
  color:#9effee;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.2em;
}

.hs-ri-eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--hs-ri-brand);
  box-shadow:0 0 14px var(--hs-ri-brand-glow);
}

.hs-ri-title{
  margin:clamp(18px,3vh,26px) 0 0;
  max-width:34ch;
  font-size:clamp(28px,3.85vw,50px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:850;
  color:#eef7ff;
}

.hs-ri-lead{
  margin:clamp(22px,3.5vh,32px) 0 0;
  max-width:48ch;
  color:#d0e4ef;
  font-size:clamp(15px,1.35vw,17px);
  font-weight:550;
  line-height:1.62;
  letter-spacing:.01em;
}

.hs-ri-contact{
  display:inline-block;
  margin-top:clamp(18px,2.8vh,26px);
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9eb4c4;
  text-decoration:none;
  border-bottom:1px solid rgba(0,229,192,.22);
  padding-bottom:2px;
  transition:color .22s var(--hs-ri-ease), border-color .22s var(--hs-ri-ease), text-shadow .22s var(--hs-ri-ease);
}

.hs-ri-contact:hover{
  color:var(--hs-ri-brand);
  border-color:rgba(0,229,192,.42);
  text-shadow:0 0 16px rgba(0,229,192,.1);
}

.hs-ri-support{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  width:100%;
  min-width:0;
  align-self:stretch;
}

@media (min-width:761px){
  .hs-ri-support{
    margin-top:0;
    padding-top:var(--ri-support-pad-top);
    max-width:none;
  }
}

.hs-ri-support-inner{
  position:relative;
  padding-left:clamp(12px,3vw,22px);
}

@media (min-width:761px){
  /* Near .state-output desktop inset; slightly tighter left so stack sits closer to beam ingress. */
  .hs-ri-support-inner{
    padding-left:clamp(12px,2.2vw,26px);
    padding-right:clamp(8px,1.6vw,18px);
    min-height:clamp(260px,42vh,420px);
  }
}

.hs-ri-cluster{
  position:relative;
  /* Above rail-stack + corridor (State Engine: cards z-index:1 over beam ::after z-index:0) */
  z-index:6;
}

@media (min-width:761px){
  .hs-ri-cluster{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:flex-start;
    gap:clamp(10px,1.6vw,18px);
    width:100%;
    margin-left:0;
    padding-top:calc(
      var(--sb-ambient-beam-y)
      - var(--ri-support-pad-top)
      - var(--hs-ri-support-inner-offset)
      - var(--ri-cluster-beam-mid)
      + var(--hs-ri-cluster-seat-extra)
    );
    box-sizing:border-box;
  }
}

@keyframes hsRiBeamPacket{
  0%{
    left:-12%;
    opacity:0;
  }
  8%{
    opacity:.38;
  }
  92%{
    opacity:.34;
  }
  100%{
    left:96%;
    opacity:0;
  }
}

@keyframes hsRiCardScan{
  0%{
    transform:translateX(-35%);
    opacity:0;
  }
  14%{
    opacity:.26;
  }
  86%{
    opacity:.2;
  }
  100%{
    transform:translateX(235%);
    opacity:0;
  }
}

.hs-ri-whisper{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  margin:0;
  padding:clamp(14px,2vh,20px) clamp(10px,1.2vw,13px);
  text-align:left;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.016)),
    rgba(6,16,24,.52);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:inherit;
  cursor:default;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 14px 36px rgba(0,0,0,.22),
    0 0 28px rgba(0,229,192,.008);
  transition:border-color .32s var(--hs-ri-ease), box-shadow .32s var(--hs-ri-ease), background .32s var(--hs-ri-ease), opacity .32s var(--hs-ri-ease);
  isolation:isolate;
}

.hs-ri-whisper::before{
  content:"";
  position:absolute;
  inset:-12% -22% -18% -22%;
  border-radius:clamp(20px,5vw,36px);
  pointer-events:none;
  z-index:-1;
  opacity:.45;
  background:
    radial-gradient(ellipse 95% 65% at 50% 8%, rgba(0,229,192,.032), transparent 58%),
    radial-gradient(ellipse 120% 90% at 50% 85%, rgba(0,229,192,.016), transparent 62%);
  filter:blur(11px);
}

.hs-ri-whisper-dot{
  position:absolute;
  left:50%;
  top:0;
  width:9px;
  height:9px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--hs-ri-brand);
  box-shadow:
    0 0 0 2px rgba(0,229,192,.12),
    0 0 14px rgba(0,229,192,.22),
    0 0 28px rgba(0,229,192,.07);
  pointer-events:none;
  z-index:1;
  transition:
    background .38s var(--hs-ri-ease),
    box-shadow .38s var(--hs-ri-ease),
    filter .38s var(--hs-ri-ease);
}

.hs-ri-whisper-dot::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.35) 55%, transparent 72%);
  filter:blur(.45px);
  transition:opacity .38s var(--hs-ri-ease);
  pointer-events:none;
}

.hs-ri-whisper:hover .hs-ri-whisper-dot::before,
.hs-ri-whisper:focus-visible .hs-ri-whisper-dot::before{
  opacity:1;
}

.hs-ri-whisper:hover .hs-ri-whisper-dot,
.hs-ri-whisper:focus-visible .hs-ri-whisper-dot{
  filter:contrast(1.12) saturate(1.06);
  background:linear-gradient(145deg, rgba(255,255,255,.55) 0%, rgba(210,255,248,.22) 38%, var(--hs-ri-brand) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 0 0 2px rgba(0,229,192,.2),
    0 0 16px rgba(0,229,192,.28),
    0 0 32px rgba(0,229,192,.1);
}

.hs-ri-whisper-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(64px,11vw,128px);
  height:18px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  opacity:.26;
  background:radial-gradient(ellipse 50% 45% at 50% 50%, rgba(0,229,192,.16), transparent 72%);
  filter:blur(8px);
  transition:opacity .38s var(--hs-ri-ease), filter .38s var(--hs-ri-ease);
}

.hs-ri-whisper:hover .hs-ri-whisper-dot::after,
.hs-ri-whisper:focus-visible .hs-ri-whisper-dot::after{
  opacity:.38;
  filter:blur(6px);
}

.hs-ri-whisper-idx{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  color:rgba(0,229,192,.42);
  margin-bottom:6px;
  transition:color .36s var(--hs-ri-ease);
}

.hs-ri-whisper-kicker{
  display:block;
  font-size:13px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(223,245,240,.82);
  margin-bottom:8px;
  transition:color .36s var(--hs-ri-ease), text-shadow .36s var(--hs-ri-ease);
}

.hs-ri-whisper-copy{
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#7892a5;
  letter-spacing:.02em;
  opacity:.76;
  transition:opacity .36s var(--hs-ri-ease), color .36s var(--hs-ri-ease), text-shadow .36s var(--hs-ri-ease);
}

.hs-ri-whisper:hover .hs-ri-whisper-copy,
.hs-ri-whisper:focus-visible .hs-ri-whisper-copy{
  opacity:.94;
  color:#d4e8f2;
  text-shadow:0 0 20px rgba(0,229,192,.06);
}

/* Inactive cards read softer while another node is active */
.hs-ri-cluster:has(.hs-ri-whisper:hover) .hs-ri-whisper:not(:hover) .hs-ri-whisper-kicker,
.hs-ri-cluster:has(.hs-ri-whisper:focus-visible) .hs-ri-whisper:not(:focus-visible) .hs-ri-whisper-kicker{
  color:rgba(210,232,228,.58);
  text-shadow:none;
}

.hs-ri-cluster:has(.hs-ri-whisper:hover) .hs-ri-whisper:not(:hover) .hs-ri-whisper-copy,
.hs-ri-cluster:has(.hs-ri-whisper:focus-visible) .hs-ri-whisper:not(:focus-visible) .hs-ri-whisper-copy{
  opacity:.62;
  color:#6b8498;
  text-shadow:none;
}

.hs-ri-cluster:has(.hs-ri-whisper:hover) .hs-ri-whisper:not(:hover) .hs-ri-whisper-idx,
.hs-ri-cluster:has(.hs-ri-whisper:focus-visible) .hs-ri-whisper:not(:focus-visible) .hs-ri-whisper-idx{
  color:rgba(0,229,192,.26);
}

.hs-ri-whisper:hover .hs-ri-whisper-kicker,
.hs-ri-whisper:focus-visible .hs-ri-whisper-kicker{
  color:rgba(248,252,255,.94);
  text-shadow:0 0 22px rgba(0,229,192,.07);
}

.hs-ri-whisper:hover .hs-ri-whisper-idx,
.hs-ri-whisper:focus-visible .hs-ri-whisper-idx{
  color:rgba(0,229,192,.52);
}

@media (min-width:761px){
  .hs-ri-whisper{
    flex:1 1 0;
    min-width:0;
    max-width:min(300px,34%);
    padding-top:var(--ri-whisper-top-pad-desk);
    z-index:3;
  }

  /* Single horizontal inspection sweep (card body only; avoids node dot) */
  .hs-ri-whisper::after{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    top:clamp(30px,4.5vh,44px);
    bottom:clamp(10px,1.6vh,14px);
    width:38%;
    border-radius:8px;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.035) 38%,
      rgba(0,229,192,.055) 50%,
      rgba(255,255,255,.032) 62%,
      transparent 100%);
    filter:blur(5px);
    mix-blend-mode:normal;
    mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }

  .hs-ri-whisper-idx,
  .hs-ri-whisper-kicker,
  .hs-ri-whisper-copy{
    position:relative;
    z-index:1;
  }

  .hs-ri-whisper:hover::after,
  .hs-ri-whisper:focus-visible::after{
    animation:hsRiCardScan 1.28s cubic-bezier(.25,.46,.45,.94) forwards;
  }
}

.hs-ri-whisper:hover,
.hs-ri-whisper:focus-visible{
  outline:none;
  border-color:rgba(0,229,192,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(8,22,32,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 44px rgba(0,0,0,.22),
    0 0 36px rgba(0,229,192,.06);
}

.hs-ri-whisper:focus-visible{
  outline:2px solid rgba(0,229,192,.22);
  outline-offset:2px;
}

@media (min-width:1024px){
  /*
    Horizontal system-mode: same mount + traversal plane as State Engine
    (.state-output padding, .state-grid::after at 42% / 6% inset). Removes standalone px-stack offsets here only.
  */
  body.system-mode .hs-ri-extraction .hs-ri-support{
    padding-top:0;
  }

  body.system-mode .section.hs-ri-extraction .hs-ri-support-inner{
    margin-top:0;
    /* Match state-output inset; tighter left pulls stack toward beam convergence */
    padding:10px 18px 18px 10px;
    box-sizing:border-box;
    min-height:clamp(228px,35vh,372px);
  }

  body.system-mode section.section.hs-ri-extraction.substrate-environment[data-hs-ri-stage] .hs-ri-support-inner > .hs-ri-rail-stack{
    left:6%;
    right:6%;
    top:42%;
    transform:translateY(-50%);
  }

  /* State Engine grid gap 12px; extra top seats row so beam reads through card mid-band */
  body.system-mode .hs-ri-extraction .hs-ri-cluster{
    gap:12px;
    padding-top:clamp(28px,6.8vh,72px);
    margin-left:0;
  }

  body.system-mode .section.hs-ri-extraction{
    --ri-whisper-top-pad-desk:clamp(15px,2.2vh,22px);
  }

  body.system-mode .system-track > section[data-system-stage="reasoning-extraction"]{
    background:
      radial-gradient(circle at 46% 42%, rgba(0,229,192,.028), transparent 56%),
      radial-gradient(circle at 62% 54%, rgba(180,255,240,.018), transparent 54%);
  }

  /*
    Single ::after on the slide: replaces generic system-track slide wash + substrate corridor
    with a dimmer blend so extraction nodes sit clearly above the beam plane.
  */
  body.system-mode .system-track > section.hs-ri-extraction.section.substrate-environment:not(.hero)::after{
    opacity:.2;
    animation:none;
    background:
      radial-gradient(ellipse 125% 36% at 58% 43%, rgba(0,229,192,.03), transparent 58%),
      radial-gradient(ellipse 95% 26% at 54% 46%, rgba(0,229,192,.014), transparent 62%),
      radial-gradient(circle at 56% 42%, rgba(0,229,192,.014), transparent 62%);
  }

  body.system-mode .hs-ri-extraction .hs-ri-whisper{
    opacity:.88;
  }

  body.system-mode .hs-ri-extraction .hs-ri-whisper:hover,
  body.system-mode .hs-ri-extraction .hs-ri-whisper:focus-visible{
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  .section.hs-ri-extraction.substrate-environment::before,
  .section.hs-ri-extraction.substrate-environment::after{animation:none}
  .section.hs-ri-extraction.substrate-environment::after{opacity:.3}
  .hs-ri-support-inner:has(.hs-ri-whisper:hover) > .hs-ri-rail-stack .hs-ri-rail-pulse,
  .hs-ri-support-inner:has(.hs-ri-whisper:focus-visible) > .hs-ri-rail-stack .hs-ri-rail-pulse{
    animation:none !important;
    opacity:0;
  }
  .hs-ri-whisper::after{
    animation:none !important;
    opacity:0 !important;
  }
  .hs-ri-whisper:hover,.hs-ri-whisper:focus-visible{transform:none}
}