/* SBVora v3 · blueprint-xray: blueprint wash, numbered markers and redaction frames on the project screenshots */

/* ---------- frame: takes over the hover scale from the image ---------- */
.xray-frame{position:relative;display:block;min-width:0;transform-origin:50% 50%;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.project-card:hover .project-visual .xray-frame>img{transform:none}
.project-card:hover .xray-frame{transform:scale(1.025)}
.project-card.xray-active .xray-frame,.project-card.xray-active:hover .xray-frame{transform:none}
.tilt-card.xray-active{transform:none!important}
.project-visual .xray-frame>img{transition:transform 1.2s cubic-bezier(.16,1,.3,1),clip-path 1.3s cubic-bezier(.16,1,.3,1),filter 1s ease}
.xray-frame.is-xray>img{filter:grayscale(1) brightness(.93) contrast(1.4)}
.xray-frame [hidden],.xray-dock[hidden]{display:none!important}

/* ---------- blueprint wash ---------- */
.xray-wash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s ease}
.xray-frame.is-xray .xray-wash{opacity:1}
.xray-wash>i{position:absolute;display:block}
.xray-tint{position:absolute;inset:0;z-index:1;display:block;pointer-events:none;background:linear-gradient(140deg,#2dc5f8,#249ae6 85%);mix-blend-mode:multiply;opacity:0;transition:opacity .3s ease}
.xray-frame.is-xray .xray-tint{opacity:.9}
.xray-grid{inset:0;background-image:
  linear-gradient(rgba(6,35,90,.2) 1px,transparent 1px),
  linear-gradient(90deg,rgba(6,35,90,.2) 1px,transparent 1px),
  linear-gradient(rgba(6,35,90,.09) 1px,transparent 1px),
  linear-gradient(90deg,rgba(6,35,90,.09) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.xray-ruler-x{left:0;right:0;top:0;height:8px;background:
  repeating-linear-gradient(90deg,rgba(6,35,90,.7) 0 1px,transparent 1px 120px) 0 0/100% 8px no-repeat,
  repeating-linear-gradient(90deg,rgba(6,35,90,.5) 0 1px,transparent 1px 24px) 0 0/100% 4px no-repeat}
.xray-ruler-y{top:0;bottom:0;left:0;width:8px;background:
  repeating-linear-gradient(180deg,rgba(6,35,90,.7) 0 1px,transparent 1px 120px) 0 0/8px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(6,35,90,.5) 0 1px,transparent 1px 24px) 0 0/4px 100% no-repeat}
.xray-crop{width:14px;height:14px;border:0 solid var(--cyan)}
.xray-crop-tl{left:-7px;top:-7px;border-left-width:1px;border-top-width:1px}
.xray-crop-tr{right:-7px;top:-7px;border-right-width:1px;border-top-width:1px}
.xray-crop-bl{left:-7px;bottom:-7px;border-left-width:1px;border-bottom-width:1px}
.xray-crop-br{right:-7px;bottom:-7px;border-right-width:1px;border-bottom-width:1px}
.xray-frame.is-sweeping .xray-wash{animation:xrayWipe 1.1s cubic-bezier(.45,.05,.35,1) both}
.xray-frame.is-sweeping .xray-tint{animation:xrayWipeIn 1.1s cubic-bezier(.45,.05,.35,1) both}
@keyframes xrayWipeIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes xrayWipe{from{clip-path:inset(-12px -12px 100% -12px)}to{clip-path:inset(-12px)}}

/* drawing tag under the image: XR-01 · FUNKTIONEN · 04 */
.xray-tag{position:absolute;left:0;top:calc(100% + 7px);z-index:2;display:none;align-items:center;gap:7px;padding:5px 8px 5px 7px;border:1px solid rgba(45,197,248,.75);background:#061a36;color:#9fe3fb;font:700 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.xray-tag::before{content:"";width:6px;height:6px;background:var(--cyan)}
.xray-frame.is-xray .xray-tag{display:inline-flex}

/* existing scan line runs once across the image */
.project-card .visual-scan.xray-sweep{left:var(--xray-l,38px);right:var(--xray-r,38px);height:2px;opacity:1;background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 0 1px rgba(45,197,248,.55),0 0 22px 4px rgba(45,197,248,.85);animation:xraySweep 1.1s cubic-bezier(.45,.05,.35,1) 1 both,xraySweepFade 1.1s linear 1 both!important}
.project-card.xray-active .visual-scan:not(.xray-sweep),.project-card.xray-active:hover .visual-scan:not(.xray-sweep){animation:none;opacity:0}
@keyframes xraySweep{from{top:var(--xray-a,18%)}to{top:var(--xray-b,82%)}}
@keyframes xraySweepFade{0%{opacity:0}6%{opacity:1}94%{opacity:1}100%{opacity:0}}

/* ---------- switch in the browser bar ---------- */
.browser-bar.xray-bar{flex-wrap:wrap;height:auto;min-height:30px;row-gap:0}
.xray-switch{display:flex;margin-left:auto;border:1px solid rgba(6,35,90,.3);background:rgba(255,255,255,.55)}
.xray-mode{position:relative;display:inline-flex;align-items:center;gap:7px;height:22px;margin:0;padding:0 10px;border:0;border-radius:0;background:transparent;color:#2f4a60;font:700 8.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.xray-mode+.xray-mode{border-left:1px solid rgba(6,35,90,.3)}
.xray-mode::after{content:"";position:absolute;left:0;right:0;top:-18px;bottom:-4px}
.browser-bar .xray-mode span{display:inline;width:auto;height:auto;border-radius:0;background:none}
.xray-mode i{flex:none;width:8px;height:8px;border:1px solid currentColor}
.xray-mode-redact i{border-style:dashed}
.xray-mode:hover{background:rgba(24,104,192,.12);color:#06235a}
.xray-mode[aria-pressed="true"]{background:#061a36;color:var(--cyan)}
.xray-mode-features[aria-pressed="true"] i{background:currentColor}
.xray-mode:focus-visible{outline:2px solid #06235a;outline-offset:2px;z-index:1}

/* ---------- markers ---------- */
.xray-marks{position:absolute;inset:0;z-index:3;pointer-events:none}
.xray-spot{position:absolute;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto;touch-action:manipulation}
.xray-pin{position:relative;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--cyan);background:rgba(6,26,54,.94);color:var(--cyan);font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.02em;box-shadow:0 0 0 3px rgba(45,197,248,.2),0 8px 18px rgba(3,13,31,.35);transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.xray-pin::before,.xray-pin::after{content:"";position:absolute;pointer-events:none}
.xray-pin::before{left:-7px;right:-7px;top:50%;height:1px;background:linear-gradient(90deg,var(--cyan) 0 5px,transparent 5px calc(100% - 5px),var(--cyan) calc(100% - 5px))}
.xray-pin::after{top:-7px;bottom:-7px;left:50%;width:1px;background:linear-gradient(180deg,var(--cyan) 0 5px,transparent 5px calc(100% - 5px),var(--cyan) calc(100% - 5px))}
.xray-spot:hover .xray-pin,.xray-spot.is-open .xray-pin{background:var(--cyan);color:#061a36;box-shadow:0 0 0 4px rgba(6,26,54,.55),0 10px 22px rgba(3,13,31,.4)}
.xray-spot:focus-visible{outline:none}
.xray-spot:focus-visible .xray-pin{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #061a36}
.xray-frame.is-features .xray-pin{animation:xrayPin .34s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--xray-d,260ms)}
@keyframes xrayPin{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

/* floating callout with leader line */
.xray-callout{position:absolute;z-index:5;display:block;box-sizing:border-box;width:max-content;max-width:300px;padding:9px 12px 10px;border:1px solid var(--cyan);background:#061a36;color:#eef8fd;box-shadow:0 16px 36px rgba(3,13,31,.42);text-align:left;pointer-events:auto;transition:opacity .16s ease,translate .16s ease}
@starting-style{.xray-callout{opacity:0;translate:0 4px}}
.xray-callout-k{display:block;margin-bottom:5px;color:var(--cyan);font:700 9px/1.25 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
.xray-callout-t{display:block;font:600 13px/1.38 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:0}
.xray-leader{position:absolute;z-index:4;display:block;height:1px;background:var(--cyan);box-shadow:0 0 0 1px rgba(6,26,54,.35)}
.xray-leader::after{content:"";position:absolute;top:-2px;width:5px;height:5px;background:var(--cyan)}
.xray-leader[data-side="r"]::after{right:-3px}
.xray-leader[data-side="l"]::after{left:-3px}

/* ---------- redaction frames ---------- */
.xray-redactions{position:absolute;inset:0;z-index:2;pointer-events:none}
.xray-redact{position:absolute;box-sizing:border-box;border:1px dashed #06235a;background:repeating-linear-gradient(135deg,rgba(6,35,90,.16) 0 1px,transparent 1px 6px);outline:1px solid rgba(255,255,255,.35);outline-offset:1px}
.xray-redact-id{position:absolute;left:-1px;bottom:calc(100% + 2px);display:none;place-items:center;width:16px;height:16px;background:var(--cyan);color:#061a36;font:700 9px/1 ui-monospace,Menlo,monospace}
.xray-redact-label{position:absolute;left:-1px;bottom:calc(100% + 3px);padding:4px 7px;background:#061a36;color:#bfeefd;border:1px solid var(--cyan);font:700 8.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.xray-redact-label::before{content:attr(data-id);display:inline-block;margin-right:7px;padding-right:7px;border-right:1px solid rgba(45,197,248,.5);color:var(--cyan)}
.xray-redact.is-right .xray-redact-label{left:auto;right:-1px}
.xray-redact.is-right .xray-redact-id{left:auto;right:-1px}
.xray-redact.is-low .xray-redact-id{bottom:auto;top:calc(100% + 2px)}
.xray-redact.is-low .xray-redact-label{bottom:auto;top:calc(100% + 3px)}
.xray-frame.is-redact .xray-redact{animation:xrayFrame .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--xray-d,260ms)}
@keyframes xrayFrame{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}

/* ---------- dock: numbered list under the image (phones) / screen-reader list (desktop) ---------- */
.xray-dock{display:none;margin:0;padding:0;list-style:none}
@media (min-width:721px){
  .xray-dock.is-redact:not([hidden]){display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ---------- dark theme: ice on navy ---------- */
html[data-theme="dark"] .xray-frame.is-xray>img{filter:grayscale(1) invert(1) contrast(1.12) brightness(1.04)}
html[data-theme="dark"] .xray-tint{background:#0b3d7e;mix-blend-mode:screen}
html[data-theme="dark"] .xray-frame.is-xray .xray-tint{opacity:1}
html[data-theme="dark"] .xray-grid{background-image:
  linear-gradient(rgba(207,223,235,.17) 1px,transparent 1px),
  linear-gradient(90deg,rgba(207,223,235,.17) 1px,transparent 1px),
  linear-gradient(rgba(207,223,235,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(207,223,235,.07) 1px,transparent 1px)}
html[data-theme="dark"] .xray-ruler-x{background:
  repeating-linear-gradient(90deg,rgba(207,223,235,.75) 0 1px,transparent 1px 120px) 0 0/100% 8px no-repeat,
  repeating-linear-gradient(90deg,rgba(207,223,235,.45) 0 1px,transparent 1px 24px) 0 0/100% 4px no-repeat}
html[data-theme="dark"] .xray-ruler-y{background:
  repeating-linear-gradient(180deg,rgba(207,223,235,.75) 0 1px,transparent 1px 120px) 0 0/8px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(207,223,235,.45) 0 1px,transparent 1px 24px) 0 0/4px 100% no-repeat}
html[data-theme="dark"] .xray-redact{border-color:var(--cyan);background:repeating-linear-gradient(135deg,rgba(207,223,235,.2) 0 1px,transparent 1px 6px);outline-color:rgba(6,26,54,.5)}
html[data-theme="dark"] .xray-callout{background:#04122a;border-color:var(--cyan)}
html[data-theme="dark"] .xray-tag{background:#04122a}

/* ---------- touch and narrow: real 44px switch, docked callouts ---------- */
@media (pointer:coarse){
  .xray-mode{height:44px}
  .xray-mode::after{display:none}
  .browser-bar.xray-bar{padding-block:0}
}
@media (max-width:720px){
  .browser-bar.xray-bar{padding:0 0 0 12px}
  .browser-bar.xray-bar>b{min-height:25px;display:flex;align-items:center}
  .xray-switch{flex:1 0 100%;margin:0 0 0 -12px;border-width:1px 0 0;background:#f4f8fb}
  .xray-mode{flex:1 1 50%;justify-content:center;height:44px;font-size:9px}
  .xray-mode::after{display:none}
  .xray-callout,.xray-leader{display:none!important}
  .xray-redact-label{display:none}
  .xray-redact-id{display:grid;width:15px;height:15px;font-size:8.5px}
  .xray-spot .xray-pin{width:24px;height:24px;font-size:9.5px}
  .xray-tag{font-size:8px;padding:4px 7px 4px 6px}
  .xray-dock:not([hidden]){display:grid;gap:0;margin:38px 0 0;border:1px solid rgba(45,197,248,.55);background:#061a36;color:#eef8fd}
  .xray-dock-item{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:11px 12px;border-top:1px solid rgba(207,223,235,.14);transition:background-color .2s ease}
  .xray-dock-item:first-child{border-top:0}
  .xray-dock-item.is-open{background:rgba(45,197,248,.16);box-shadow:inset 3px 0 0 var(--cyan)}
  .xray-dock-n{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--cyan);color:var(--cyan);font:700 10px/1 ui-monospace,Menlo,monospace}
  .xray-dock-item.is-open .xray-dock-n{background:var(--cyan);color:#061a36}
  .xray-dock-n.is-letter{border-style:dashed}
  .xray-dock-body{display:block;min-width:0;padding-top:1px}
  .xray-dock-k{display:block;margin-bottom:3px;color:var(--cyan);font:700 9px/1.25 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;overflow-wrap:anywhere}
  .xray-dock-t{display:block;font:600 13.5px/1.4 Inter,"Segoe UI",Arial,sans-serif;overflow-wrap:anywhere}
  .is-redact .xray-dock-t{padding-top:4px;font:700 10px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
  html[data-theme="dark"] .xray-dock:not([hidden]){background:#04122a}
}

/* ---------- reduced motion: no wipe, no sweep, no fades ---------- */
@media (prefers-reduced-motion:reduce){
  .xray-frame,.xray-frame *,.xray-mode,.xray-dock-item{animation:none!important;transition:none!important}
  .project-card .visual-scan.xray-sweep{display:none!important;animation:none!important}
  .project-card:hover .xray-frame{transform:none}
  @starting-style{.xray-callout{opacity:1;translate:none}}
}

/* ---------- normal page print: plain screenshots, no controls ---------- */
@media print{
  html:not(.sbv-print-only) .xray-switch,
  html:not(.sbv-print-only) .xray-wash,
  html:not(.sbv-print-only) .xray-tag,
  html:not(.sbv-print-only) .xray-marks,
  html:not(.sbv-print-only) .xray-redactions,
  html:not(.sbv-print-only) .xray-dock{display:none!important}
  html:not(.sbv-print-only) .xray-frame>img{filter:none!important}
  html:not(.sbv-print-only) .xray-frame{transform:none!important}
}