/* ==========================================================================
   The Hemochron Assessment — /assessment/
   The visitor's own view from the sampling chair. The chamber image is the stage;
   the dialogue sits in a panel that reads like the bench's holographic readout.
   ========================================================================== */

.page-assessment{--voice:var(--provak);background:#030205}
.page-assessment .site-foot{position:relative;z-index:2}

.hc{position:relative;background:#030205;isolation:isolate}
.hc-stage{position:relative;overflow:hidden}
.hc-band{position:relative;overflow:hidden;background:#050408}

/* the scene is always the image's own 3:2 box, so every overlay can be placed in image percentages;
   JS moves it with a single transform (pan + zoom) toward whoever is speaking */
.hc-scene{position:absolute;left:0;top:0;width:var(--sw,100%);aspect-ratio:3/2;transform-origin:0 0;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--z,1));
  transition:transform 1.4s cubic-bezier(.3,.1,.2,1);will-change:transform}
.hc-scene>img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(var(--lum,.55)) saturate(.9);transition:filter 1.6s var(--ease)}
.hc[data-lights="on"] .hc-scene>img{--lum:.92}
.hc[data-lights="dim"] .hc-scene>img{--lum:.42}

/* spotlight on the speaker; everything else sinks */
.hc-light{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease),background-position 1.2s var(--ease);
  background:radial-gradient(circle at var(--sx,50%) var(--sy,22%),rgba(0,0,0,0) 0,rgba(0,0,0,0) 7%,rgba(3,2,5,.34) 15%,rgba(3,2,5,.62) 30%)}
.hc[data-speaking] .hc-light{opacity:1}
.hc-halo{position:absolute;left:var(--sx,50%);top:var(--sy,22%);width:15%;aspect-ratio:1;transform:translate(-50%,-44%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--voice) 22%,transparent) 0,transparent 62%);mix-blend-mode:screen;transition:opacity 1s var(--ease),left 1.2s var(--ease)}
.hc[data-speaking] .hc-halo{opacity:.85}

/* the reader box: its violet lamp and red lines, at their place in the photograph */
.hc-lamp{position:absolute;left:97.66%;top:67.8%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:.25;
  background:radial-gradient(circle,rgba(206,160,255,.95) 0,rgba(150,90,255,.45) 18%,transparent 62%);mix-blend-mode:screen}
.hc-lamp.flash{animation:hc-flash 1.1s ease-out}
@keyframes hc-flash{0%{opacity:.25;transform:translate(-50%,-50%) scale(1)}12%{opacity:1;transform:translate(-50%,-50%) scale(2.6)}100%{opacity:.25;transform:translate(-50%,-50%) scale(1)}}
.hc-sampling .hc-lamp{animation:hc-throb 1s ease-in-out infinite}
@keyframes hc-throb{50%{opacity:.8}}
/* the whole room catches the flash for an instant */
.hc-flashroom{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 70%,rgba(150,90,255,.28),transparent 60%);opacity:0}
.hc-flashroom.flash{animation:hc-room 1.1s ease-out}
@keyframes hc-room{12%{opacity:1}100%{opacity:0}}

/* the Draconi does not speak. Once, at the end, something behind the glass. */
.hc-eyes{position:absolute;left:80.25%;top:22.2%;width:3.2%;height:1.2%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(closest-side at 18% 50%,rgba(255,196,120,.95),transparent),radial-gradient(closest-side at 82% 50%,rgba(255,196,120,.95),transparent);filter:blur(1px)}
.hc-eyes.glow{animation:hc-eyes 2.6s ease-in-out}
@keyframes hc-eyes{30%{opacity:.9}55%{opacity:.75}100%{opacity:0}}

.hc-vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,2,5,.75) 0,rgba(3,2,5,0) 18%),linear-gradient(to top,rgba(3,2,5,.92) 0,rgba(3,2,5,0) 46%),radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(3,2,5,.6) 100%)}

/* ---------------- the panel ---------------- */
.hc-panel{position:relative;z-index:3;color:var(--bone)}
.hc-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--voice),transparent);opacity:.9;transition:background .8s}
.hc-bar{display:flex;align-items:center;gap:.4rem 1.1rem;flex-wrap:wrap;padding:.62rem 1.1rem;border-bottom:1px solid var(--line);font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--ash)}
.hc-status{display:flex;align-items:center;gap:.55rem;color:var(--bone);margin-right:auto;min-width:0}
.hc-status::before{content:"";width:7px;height:7px;flex:none;background:var(--voice);box-shadow:0 0 10px var(--voice);animation:hc-blink 2.4s steps(2) infinite}
@keyframes hc-blink{50%{opacity:.35}}
.hc-stat{white-space:nowrap}
.hc-stat b{font-weight:600;color:var(--bone);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.hc-stat.jump b{color:var(--blood-2);transition:none}
.hc-toggles{display:flex;gap:.35rem}
.hc-toggles button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ash);border:1px solid var(--line-2);padding:.42rem .6rem;min-height:32px;line-height:1}
.hc-toggles button[aria-pressed="true"]{color:var(--bone);border-color:var(--voice)}
.hc-toggles button:hover{color:#fff}
.hc-track{height:2px;background:rgba(236,230,218,.07)}
.hc-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blood),var(--blood-2));box-shadow:0 0 12px var(--blood-glow);transition:width .9s var(--ease)}

.hc-body{padding:clamp(1.1rem,2.6vw,1.9rem) clamp(1.1rem,3vw,2.2rem) clamp(1.2rem,2.6vw,1.9rem)}
.hc-view{animation:hc-in .7s var(--ease) both}
@keyframes hc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hc-kicker{display:flex;align-items:center;gap:.7rem;margin:0 0 .5rem;font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;color:var(--voice)}
.hc-kicker::before{content:"";width:22px;height:1px;background:currentColor}
.hc-kicker .n{color:var(--dust);margin-left:auto;letter-spacing:.16em}
.hc-act{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.45;color:var(--ash);margin:0 0 .7rem}
.hc-q{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.18;margin:0 0 1.15rem;color:#f4efe6;outline:none;min-height:1.2em}
.hc-say{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.3;color:#f4efe6;margin:0 0 1rem;outline:none}
.hc-say.small{font-size:clamp(1.15rem,1.9vw,1.45rem)}
.caret::after{content:"";display:inline-block;width:.08em;height:.95em;margin-left:.08em;vertical-align:-.1em;background:var(--voice);animation:hc-blink 1s steps(2) infinite}

.hc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:0;padding:0;list-style:none}
.hc-opts.wait{visibility:hidden}
.hc-opts>li{display:flex;min-width:0}
.hc-opt{display:grid;grid-template-columns:2.1rem minmax(0,1fr);align-items:start;gap:.2rem;width:100%;text-align:left;padding:.78rem .9rem .8rem .7rem;min-height:3.6rem;
  font-family:var(--sans);font-size:.95rem;line-height:1.42;color:var(--bone);background:rgba(10,8,16,.55);border:1px solid var(--line-2);
  transition:border-color .2s,background .2s,transform .2s,opacity .35s}
.hc-opt .k{font-family:var(--hud);font-weight:600;letter-spacing:.14em;font-size:.72rem;color:var(--dust);padding-top:.2rem}
.hc-opt:hover{border-color:color-mix(in srgb,var(--voice) 70%,transparent);background:rgba(28,20,34,.72)}
.hc-opt:hover .k,.hc-opt:focus-visible .k{color:var(--voice)}
.hc-opt:focus-visible{outline:2px solid var(--voice);outline-offset:2px}
.hc-opts.picked .hc-opt{opacity:.25;pointer-events:none}
.hc-opts.picked .hc-opt.on{opacity:1;border-color:var(--voice);background:rgba(28,20,34,.9);box-shadow:0 0 0 1px var(--voice),0 0 26px -8px var(--voice)}

.hc-you{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;margin:0 0 1.1rem;padding:.7rem .9rem;border-left:2px solid var(--line-2);background:rgba(236,230,218,.035)}
.hc-you .l{font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--dust);padding-top:.18rem}
.hc-you p{margin:0;font-size:.95rem;color:var(--ash)}
.hc-sample{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:#c9a8ff}
.hc-sample i{flex:1;height:2px;background:rgba(201,168,255,.14);position:relative;overflow:hidden}
.hc-sample i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#c9a8ff,transparent);transform:translateX(-100%);animation:hc-scan 1.1s linear infinite}
@keyframes hc-scan{to{transform:translateX(100%)}}
.hc-who{display:block;font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--voice);margin:0 0 .45rem}

.hc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:1.2rem}
.hc-actions .btn{--bg:color-mix(in srgb,var(--voice) 78%,#000)}
.hc-actions .btn.ghost{--bg:rgba(236,230,218,.06)}
.hc-intro .hc-actions .btn{--bg:var(--blood)}
.hc-link{font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--ash);border-bottom:1px solid var(--line-2);padding:.35rem 0}
.hc-link:hover{color:#fff;border-color:var(--voice)}
.hc-fine{margin:.9rem 0 0;font-size:.78rem;color:var(--dust);line-height:1.55}

/* intro */
.hc-intro h1{font-size:clamp(2.5rem,5.4vw,4.6rem);margin:0 0 .35em;line-height:.98}
.hc-intro h1 em{font-style:italic;color:var(--blood-2);font-weight:400}
.hc-intro .lede{font-size:clamp(1rem,1.3vw,1.1rem);color:#d9d2c8;max-width:56ch;margin:0 0 .6rem}
.hc-intro .punch{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.45rem);color:var(--bone);margin:0}
.hc-intro .eyebrow{margin-bottom:.8rem}
.hc-resume{margin-top:1.1rem;padding:.8rem 1rem;border:1px solid var(--line-2);font-size:.9rem;color:var(--ash)}
.hc-resume p{margin:0 0 .6rem}

/* verdict */
.hc-confer{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--ash);margin:.4rem 0}
.hc-confer span{display:inline-block;animation:hc-fade 2.2s ease-in-out infinite}
@keyframes hc-fade{50%{opacity:.35}}
.hc-verdict{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.04;margin:0 0 .9rem;color:var(--voice);outline:none}
.hc-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 1.6rem;align-items:start}
.hc-result>.hc-sigil{grid-column:2;grid-row:1}
.hc-rtext{grid-column:1;grid-row:1;min-width:0}
.hc-result h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-style:italic;color:#f4efe6;margin:0 0 .6rem}
.hc-result p{font-size:.98rem;color:#d9d2c8;margin:0 0 .8rem;max-width:62ch}
.hc-sigil{width:clamp(84px,11vw,128px);aspect-ratio:1;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--voice) 45%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--voice) 16%,transparent),transparent 70%);position:relative}
.hc-sigil img{width:78%;height:auto}
.hc-sigil.none::before{content:"";width:58%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(236,230,218,.35)}
.hc-sigil.none::after{content:"";position:absolute;width:62%;height:1px;background:rgba(245,38,26,.8);transform:rotate(-38deg)}
.hc-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem;padding:.42rem .75rem;font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:#fff;background:color-mix(in srgb,var(--badge,var(--voice)) 30%,transparent);border:1px solid var(--badge,var(--voice))}
.hc-badge.praetorian{--badge:var(--draconi)}
.hc-badge.praetorian::before{content:"P";font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:0;color:var(--violet-2);line-height:1}
.hc-badge.necromancer{--badge:var(--draconi)}
.hc-badge.baron{--badge:var(--provak)}
.hc-aside{margin:.2rem 0 1.1rem;padding:.9rem 1rem;border-left:2px solid var(--voice);background:rgba(236,230,218,.035)}
.hc-aside .hc-act{margin-bottom:.4rem;font-size:1rem}
.hc-aside p.say{font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.4;color:#f4efe6;margin:0}
.hc-charge{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.4rem);color:#f4efe6!important}
.hc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:.4rem 0 1rem;padding:0;list-style:none}
.hc-facts li{border-top:1px solid var(--line-2);padding-top:.5rem;font-size:.9rem;color:var(--bone);line-height:1.4}
.hc-facts span{display:block;font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--dust);margin-bottom:.2rem}
.hc-signoff{font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--voice);margin:0 0 .2rem}
.hc-coda{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.hc-coda p{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--ash);margin:0 0 .6rem}
.hc-coda .tease{font-style:normal;font-family:var(--hud);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--violet-2)}
.hc-copy{width:100%;margin-top:.6rem;background:var(--ink);color:var(--bone);border:1px solid var(--line-2);padding:.6rem;font:inherit;font-size:.85rem}
.hc-status-msg{font-size:.82rem;color:var(--ash);min-height:1.2em}

.hc-note{padding:1.4rem var(--gutter) 2.2rem;text-align:center;font-size:.8rem;color:var(--dust);line-height:1.6;position:relative;z-index:2;background:#030205}
.hc-note p{margin:0 auto .3rem;max-width:70ch}

/* ================= wide screens: the panel floats over the chamber ================= */
@media (min-width:900px) and (min-height:620px) and (orientation:landscape){
  /* the chamber fills the first screen; the panel hangs from a fixed line below the bench (so it never jumps
     as its content changes) and simply grows the page when a verdict runs long: nothing scrolls inside a box */
  .hc-stage{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(250px,34svh,360px) 0 clamp(14px,2.6vh,30px)}
  .hc-band{position:absolute;left:0;right:0;top:0;height:max(100svh,640px)}
  .hc-panel{width:min(860px,100% - 2*var(--gutter));margin:0 auto;
    background:linear-gradient(180deg,rgba(9,7,14,.74),rgba(7,5,11,.9));backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);
    box-shadow:0 30px 80px -30px #000,inset 0 0 0 1px var(--line-2);
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  .hc[data-phase="intro"] .hc-stage{justify-content:center;padding-top:clamp(150px,22svh,240px)}
  .hc[data-phase="intro"] .hc-panel{width:min(760px,100% - 2*var(--gutter))}
}

/* ================= phones, tablets in portrait, short landscape: the chamber is a band above the panel ================= */
@media not all and (min-width:900px) and (min-height:620px) and (orientation:landscape){
  .hc-stage{padding-top:var(--headh,72px)}
  .hc-band{height:clamp(230px,62vw,470px)}
  .hc-panel{background:linear-gradient(180deg,#0b0911,#07050b);border-bottom:1px solid var(--line)}
  .hc-vignette{background:linear-gradient(to bottom,rgba(3,2,5,.6) 0,rgba(3,2,5,0) 22%),linear-gradient(to top,rgba(7,5,11,1) 0,rgba(7,5,11,0) 30%)}
}
@media not all and (min-width:900px) and (min-height:620px) and (orientation:landscape){
  /* the first screen on a phone: title and the chair button above the fold */
  .hc[data-phase="intro"] .hc-band{height:clamp(190px,50vw,380px)}
  .hc[data-phase="intro"] .hc-bar,.hc[data-phase="intro"] .hc-track{display:none}
  .hc-intro h1{font-size:clamp(2.3rem,10vw,3.4rem)}
  .hc-intro .lede{font-size:.97rem;line-height:1.55}
}
@media (min-width:900px) and (min-height:620px) and (max-height:820px) and (orientation:landscape){
  .hc-stage{padding-top:clamp(210px,31svh,270px)}
  .hc-opt{min-height:0;padding:.62rem .85rem .64rem .65rem;font-size:.92rem}
  .hc-q{font-size:clamp(1.35rem,2.3vw,1.8rem);margin-bottom:.9rem}
  .hc-body{padding-top:1rem;padding-bottom:1.1rem}
  .hc-act{margin-bottom:.45rem}
}
@media (max-width:640px){
  .hc-opts{grid-template-columns:minmax(0,1fr)}
  .hc-opt{min-height:0;padding:.72rem .8rem .74rem .6rem;font-size:.94rem}
  .hc-bar{padding:.55rem .9rem;letter-spacing:.12em;gap:.35rem .8rem}
  .hc-bar .wide{display:none}
  .hc-result{display:block}
  .hc-result::after{content:"";display:table;clear:both}
  .hc-sigil{float:right;width:74px;margin:0 0 .5rem .9rem}
  .hc-facts{grid-template-columns:minmax(0,1fr)}
}
@media (orientation:landscape) and (max-height:619px){
  .hc-band,.hc[data-phase="intro"] .hc-band{height:min(52svh,62vw)}
}

/* ================= motion off ================= */
.hc.still .hc-scene,.hc.still .hc-light,.hc.still .hc-halo,.hc.still .hc-scene>img{transition:none}
.hc.still .hc-view,.hc.still .caret::after,.hc.still .hc-status::before,.hc.still .hc-sample i::after,.hc.still .hc-confer span{animation:none}
.hc.still .hc-lamp,.hc.still .hc-flashroom,.hc.still .hc-eyes{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .hc-scene,.hc-light,.hc-halo,.hc-scene>img{transition:none}
  .hc-view,.caret::after,.hc-status::before,.hc-sample i::after,.hc-confer span,.hc-lamp,.hc-flashroom,.hc-eyes{animation:none!important}
}