/* HÆLTH · Science · Sourcing — the two-station camera (std.js v2). After Standard, Oct 27 2026.
   The camera rests on both stations; a tag, the control or a box below flies it to one. */
.pg--science .std{position:relative;z-index:1;margin:0 0 clamp(14px,2.4vw,30px);aspect-ratio:2 / 1;max-height:min(84svh,940px);width:100%;
  overflow:hidden;background:#04060b;touch-action:pan-y;user-select:none;-webkit-user-select:none;contain:layout paint;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 92%,transparent 100%)}
@media (max-width:759px){.pg--science .std{aspect-ratio:1 / 1;max-height:none}}
.pg--science .std__poster,.pg--science .std__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg--science .std__poster{object-fit:cover;transition:opacity .8s var(--ease)}
.pg--science .std__cv{opacity:0;transition:opacity .9s var(--ease)}
.pg--science [data-std].has-frames .std__cv{opacity:1}
.pg--science [data-std].has-frames .std__poster{opacity:0}
.pg--science .std::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background:url(../img/grain.png) 0 0 / 220px 220px repeat}
@media (hover:hover){.pg--science [data-at="both"] .std{cursor:zoom-in}}

/* ---------- tags on the vials: pins in the wide shot, an open card on arrival ---------- */
.pg--science .std__wires{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.pg--science .std__wires path{fill:none;stroke:rgba(236,232,223,.6);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s cubic-bezier(.7,0,.2,1) .05s,opacity .25s linear}
.pg--science .std__wires path.is-on{stroke-dashoffset:0;opacity:1}
.pg--science .std__wires circle{fill:rgba(4,6,11,.6);stroke:var(--fg);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s linear}
.pg--science .std__wires circle.is-on{opacity:1}

.pg--science .std__tag{position:absolute;left:0;top:0;z-index:5;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;row-gap:5px;
  padding:10px 12px 11px 14px;margin:0;border:1px solid rgba(236,232,223,.18);border-radius:4px;color:var(--fg);text-align:left;cursor:pointer;font:inherit;
  background:rgba(5,8,15,.5);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  opacity:0;visibility:hidden;will-change:transform;
  transition:opacity .4s var(--ease),visibility 0s linear .4s,border-color .35s,background .35s,box-shadow .45s var(--ease)}
.pg--science .std__tag.is-on{opacity:1;visibility:visible;transition:opacity .55s var(--ease) .12s,visibility 0s,border-color .35s,background .35s,box-shadow .45s var(--ease)}
.pg--science .is-flying .std__tag{transition-duration:.15s;transition-delay:0s}
.pg--science .std__tag i{grid-column:1;font:400 10px/1 var(--f-mono);letter-spacing:.12em;font-style:normal;color:var(--signal-2,#6f9bff);display:flex;align-items:center;gap:8px}
.pg--science .std__tag i::before{content:"";width:5px;height:5px;background:var(--signal);display:inline-block}
.pg--science .std__tag b{grid-column:1;font:400 15px/1.15 var(--f-sans);letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
.pg--science .std__tag-x{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(236,232,223,.28);transition:background .3s,border-color .3s,transform .5s var(--ease)}
.pg--science .std__tag-x svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.pg--science .std__tag em{display:none;grid-column:1 / -1;max-width:30ch;margin-top:4px;padding-top:9px;border-top:1px solid rgba(236,232,223,.14);
  font-size:9.5px;line-height:1.5;letter-spacing:.06em;font-style:normal;color:var(--fg-2);white-space:normal}
@media (hover:hover){
  .pg--science .std__tag:hover{border-color:rgba(107,155,255,.6);background:rgba(8,14,30,.62)}
  .pg--science .std__tag:hover .std__tag-x{background:var(--fg);color:var(--ink);border-color:var(--fg)}
}
.pg--science .std__tag:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
/* the pin breathes until the first zoom, so it reads as something to press */
.pg--science [data-std]:not(.has-zoomed) .std__tag.is-on:not(.is-focus) .std__tag-x{animation:stdping 2.4s var(--ease) 1.2s infinite}
@keyframes stdping{0%,100%{box-shadow:0 0 0 0 rgba(61,123,255,0)}35%{box-shadow:0 0 0 7px rgba(61,123,255,.22)}70%{box-shadow:0 0 0 12px rgba(61,123,255,0)}}
/* the open card: the station's rule under the name, the button now zooms back out */
.pg--science .std__tag.is-focus{padding:14px 14px 15px 16px;border-color:rgba(107,155,255,.42);box-shadow:0 18px 50px -20px rgba(0,0,0,.8)}
.pg--science .std__tag.is-focus b{font-size:clamp(17px,1.5vw,22px)}
.pg--science .std__tag.is-focus em{display:block}
.pg--science .std__tag-x .v{transition:opacity .3s,transform .4s var(--ease);transform-origin:10.5px 10.5px}
.pg--science .std__tag.is-focus .std__tag-x .v{opacity:0;transform:scaleY(0)}

/* the reticle locks onto the vial on arrival */
.pg--science .std__ret{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0}
.pg--science .std__ret b{position:absolute;width:14%;height:9%;min-width:12px;min-height:12px;border:0 solid var(--fg)}
.pg--science .std__ret b:nth-child(1){left:0;top:0;border-top-width:1px;border-left-width:1px}
.pg--science .std__ret b:nth-child(2){right:0;top:0;border-top-width:1px;border-right-width:1px}
.pg--science .std__ret b:nth-child(3){left:0;bottom:0;border-bottom-width:1px;border-left-width:1px}
.pg--science .std__ret b:nth-child(4){right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}
.pg--science .std__ret.is-lock{animation:stdlock 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes stdlock{0%{opacity:0;scale:1.45}22%{opacity:1}55%{opacity:1;scale:1}100%{opacity:.4;scale:1}}
.pg--science .is-flying .std__ret{opacity:0;animation:none}

/* ---------- the camera control under the shot ---------- */
.pg--science .std__ctl{position:absolute;z-index:6;left:50%;bottom:calc(9% + 10px);transform:translateX(-50%);display:inline-flex;width:max-content;gap:2px;padding:4px;
  border:1px solid rgba(236,232,223,.16);border-radius:999px;background:rgba(5,8,15,.48);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.pg--science .std__ctl button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 13px;border:0;border-radius:999px;background:none;
  color:rgba(236,232,223,.66);font:400 11px/1 var(--f-mono);letter-spacing:.12em;cursor:pointer;transition:color .35s}
.pg--science .std__ctl button svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg--science .std__ctl button:hover{color:var(--fg)}
.pg--science .std__ctl button[aria-pressed="true"]{color:var(--ink)}
.pg--science .std__ctl button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.pg--science .std__hl{position:absolute;z-index:0;left:0;top:4px;height:36px;width:0;border-radius:999px;background:var(--fg);
  transition:transform .6s cubic-bezier(.7,0,.2,1),width .6s cubic-bezier(.7,0,.2,1)}
@media (max-width:759px){
  .pg--science .std__ctl{bottom:calc(8% + 6px)}
  .pg--science .std__ctl button{height:34px;padding:0 13px 0 11px;font-size:10px;gap:6px}
  .pg--science .std__hl{height:34px}
  .pg--science .std__tag{padding:8px 9px 8px 10px;column-gap:10px}
  .pg--science .std__tag:not(.is-focus) b{display:none}
  .pg--science .std__tag-x{width:26px;height:26px}
  .pg--science .std__tag b{font-size:13px}
  .pg--science .std__tag.is-focus{padding:11px 11px 12px 12px}
  .pg--science .std__tag.is-focus b{font-size:15px}
  .pg--science .std__tag em{max-width:22ch;font-size:9px}
}

/* the boxes answer the camera: the one in front lights its rule */
.pg--science .srcbox[data-std-pick]{cursor:pointer;transition:border-color .5s var(--ease),opacity .5s var(--ease)}
.pg--science [data-at="A"] .srcbox[data-std-pick="A"],.pg--science [data-at="B"] .srcbox[data-std-pick="B"],
.pg--science [data-hot="A"] .srcbox[data-std-pick="A"],.pg--science [data-hot="B"] .srcbox[data-std-pick="B"]{border-color:rgba(61,123,255,.5)}
.pg--science [data-hot="A"] .std__tag[data-tag="A"],.pg--science [data-hot="B"] .std__tag[data-tag="B"]{border-color:rgba(107,155,255,.6)}

@media (prefers-reduced-motion:reduce){
  .pg--science .std__tag-x,.pg--science .std__ret.is-lock{animation:none!important}
  .pg--science .std__ret.is-lock{opacity:.5}
}