/* =================================
   Space Vanta Theme 1.0
   Viewport DNA: fragments on the floating screens
   Path: public/header/viewport/dna.css

   Decoration only (components/header/viewport/frag.html):
   broken metal shards in two corners, a hairline fracture, registration
   marks on the two square corners, an index label.
   Sits behind the content, clipped to the sheet's chamfered edge.
   Depth: motion.js sets --px / --py (-1..1) on the screen; each depth
   layer shifts by its own amount.
   ================================= */

.sv-frag {
  position: absolute;
  inset: 1px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  clip-path: var(--sv-sheet-poly-in);
}

.sv-frag__cluster { position: absolute; display: block; height: auto; overflow: visible; }
.sv-frag__cluster--a { top: 0; right: 0; width: clamp(200px, 34%, 340px); opacity: 0.6; }
.sv-frag__cluster--b { bottom: 0; left: 0; width: clamp(150px, 26%, 260px); opacity: 0.5; }

.sv-frag__shard { stroke: rgba(120, 112, 100, 0.32); stroke-width: 0.6; stroke-linejoin: round; }
.sv-frag__shard--mid { opacity: 0.72; }
.sv-frag__seam {
  fill: none;
  stroke: var(--sv-blue, #1d6bff);
  stroke-width: 1.2;
  stroke-linecap: round;
  filter: url(#svg-glow);
}
.sv-frag__hair { stroke: rgba(120, 104, 84, 0.38); stroke-width: 0.7; }

.sv-frag__depth {
  transform: translate(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * 1px));
  transition: transform 0.25s ease-out;
}
.sv-frag__depth--1 { --d: 6; }
.sv-frag__depth--2 { --d: 13; }

/* registration marks */
.sv-frag__mark { position: absolute; width: 10px; height: 10px; }
.sv-frag__mark--tr { top: 10px; right: 10px; border-top: 1px solid var(--sv-line, rgba(120, 104, 84, 0.3)); border-right: 1px solid var(--sv-line, rgba(120, 104, 84, 0.3)); }
.sv-frag__mark--bl { bottom: 10px; left: 10px; border-bottom: 1px solid var(--sv-line, rgba(120, 104, 84, 0.3)); border-left: 1px solid var(--sv-line, rgba(120, 104, 84, 0.3)); }
.sv-frag__mark--bl::after {
  content: "";
  position: absolute;
  left: -1px; bottom: -1px;
  width: 10px; height: 2px;
  background: var(--sv-blue, #1d6bff);
  box-shadow: 0 0 8px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
}

/* index label, text comes from the parent screen */
.sv-frag__code {
  position: absolute;
  left: 52px;
  bottom: 16px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--sv-muted, #7a7167);
  opacity: 0.75;
}
.sv-find .sv-frag__code::after { content: "SV / FIND"; }
.sv-vision .sv-frag__code::after { content: "SV / VISION"; }

/* Vision has its own art on the right: keep the top cluster quieter */
.sv-vision .sv-frag__cluster--a { opacity: 0.32; }

@media (max-width: 900px) {
  .sv-frag { inset: 0; clip-path: none; }
  .sv-frag__cluster--a { width: 62%; opacity: 0.4; }
  .sv-frag__cluster--b { width: 48%; opacity: 0.3; }
  .sv-frag__code { left: 20px; bottom: 12px; }
  .sv-frag__mark--tr { top: 70px; right: 14px; }
}