/* AI Vision kit: a 3D physical object on a stage (driven by inspector.js).
   Markup:
     <div class="kit-stage" tabindex="0">
       <div class="kit-float"><div class="kit-enter">
         <div class="kit-object">
           <div class="kit-face kit-face--front">…</div>
           <div class="kit-face kit-face--back">…</div>
           <i class="kit-edge kit-edge--t"></i><i class="kit-edge kit-edge--b"></i>
           <i class="kit-edge kit-edge--l"></i><i class="kit-edge kit-edge--r"></i>
         </div>
       </div></div>
       <div class="kit-shadow"></div>
     </div>
   The faces are absolutely filled: put any content inside them. data-edge="dark"
   on .kit-object gives it dark edges (for dark cards). Shared from Operation
   Nightjar's evidence viewer. */

.kit-stage {
  --kit-shadow-color: rgba(18, 22, 30, .3);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  perspective: 1200px;
  cursor: grab;
  touch-action: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.kit-stage.is-grabbing { cursor: grabbing; }
.kit-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--kit-accent, #e2231a); border-radius: 14px; }
/* On touch screens a vertical swipe still scrolls the page; sideways turns the object. */
@media (pointer: coarse) { .kit-stage { touch-action: pan-y; } }

.kit-float { grid-area: 1 / 1; transform-style: preserve-3d; animation: kit-float 6.5s ease-in-out infinite; }
.kit-enter { transform-style: preserve-3d; }
.kit-enter.is-entering { animation: kit-enter .95s cubic-bezier(.2, .8, .2, 1) both; }
.kit-enter.is-leaving { animation: kit-leave .26s cubic-bezier(.5, 0, .9, .4) both; }
.kit-enter.is-leaving-back { animation: kit-leave-back .26s cubic-bezier(.5, 0, .9, .4) both; }

.kit-object {
  position: relative;
  width: var(--owpx, 240px);
  height: var(--ohpx, 160px);
  transform-style: preserve-3d;
  will-change: transform;
}
.kit-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--kit-object-radius, 6px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(calc(var(--ot, 5px) / 2));
}
.kit-face--back { transform: rotateY(180deg) translateZ(calc(var(--ot, 5px) / 2)); }
/* The gloss follows a light above and to the left as the object turns. */
.kit-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) calc(var(--shx, 50%) - 30%), rgba(255, 255, 255, .55) var(--shx, 50%), rgba(255, 255, 255, 0) calc(var(--shx, 50%) + 30%));
  opacity: var(--sho, .2);
  mix-blend-mode: screen;
}
.kit-face--back::after {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) calc(var(--shxb, 50%) - 30%), rgba(255, 255, 255, .45) var(--shxb, 50%), rgba(255, 255, 255, 0) calc(var(--shxb, 50%) + 30%));
  opacity: calc(var(--sho, .2) * .55);
}
.kit-edge { position: absolute; background: linear-gradient(90deg, #d6d5cf, #f4f3ef 50%, #cfcec8); }
.kit-object[data-edge="dark"] .kit-edge { background: linear-gradient(90deg, #222226, #3b3b41 50%, #1d1d21); }
.kit-edge--t { left: 0; top: 0; width: 100%; height: var(--ot, 5px); transform: translateY(calc(var(--ot, 5px) / -2)) rotateX(90deg); }
.kit-edge--b { left: 0; bottom: 0; width: 100%; height: var(--ot, 5px); transform: translateY(calc(var(--ot, 5px) / 2)) rotateX(-90deg); }
.kit-edge--l { left: 0; top: 0; width: var(--ot, 5px); height: 100%; transform: translateX(calc(var(--ot, 5px) / -2)) rotateY(-90deg); }
.kit-edge--r { right: 0; top: 0; width: var(--ot, 5px); height: 100%; transform: translateX(calc(var(--ot, 5px) / 2)) rotateY(90deg); }

/* Ready-made faces: a photo print with a white border, and a lined note. */
.kit-print { position: absolute; inset: 0; padding: 4.5%; background: linear-gradient(160deg, #fff, #efeee9); box-shadow: inset 0 0 0 1px rgba(5, 5, 5, .1); }
.kit-print img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; background: #1b1b1e; pointer-events: none; }
.kit-paper {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: .45em;
  padding: 7% 8%;
  background:
    repeating-linear-gradient(180deg, rgba(5, 5, 5, 0) 0 1.55em, rgba(5, 5, 5, .05) 1.55em calc(1.55em + 1px)),
    linear-gradient(160deg, #faf9f6, #efeee9);
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, .1);
  color: #0d0d0f;
  font: 500 max(12px, calc(var(--ow, 240) * .05px))/1.45 var(--kit-ui, "Inter", system-ui, sans-serif);
}
.kit-paper strong { color: #b8160f; font-size: .75em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.kit-shadow {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--ohpx, 160px) * var(--shadow-z, 1) / 2 + 18px);
  width: var(--owpx, 240px);
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--kit-shadow-color), rgba(0, 0, 0, 0));
  transform: translateX(-50%) scaleX(calc(var(--shadow-w, 1) * var(--shadow-z, 1)));
  pointer-events: none;
  animation: kit-shadow-breathe 6.5s ease-in-out infinite;
}

/* First-use coach: "drag to turn", gone after the first turn. */
.kit-coach {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(5, 5, 5, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #55585e;
  font: 500 12px/1.2 var(--kit-ui, "Inter", system-ui, sans-serif);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(18, 22, 30, .06);
  transform: translateX(-50%);
  pointer-events: none;
  animation: kit-coach-in .5s ease 1s both;
  transition: opacity .3s ease;
}
.kit-coach svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: kit-coach-drag 1.8s ease-in-out infinite; }
.kit-stage.is-used .kit-coach { opacity: 0; }

@keyframes kit-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes kit-shadow-breathe { 0%, 100% { opacity: .6; } 50% { opacity: .9; } }
@keyframes kit-enter { 0% { opacity: 0; transform: translateY(-30px) translateZ(-260px) rotateY(-150deg) rotateX(18deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes kit-leave { to { opacity: 0; transform: translateX(-70%) translateZ(-120px) rotateY(40deg) rotateZ(-10deg); } }
@keyframes kit-leave-back { to { opacity: 0; transform: translateX(70%) translateZ(-120px) rotateY(-40deg) rotateZ(10deg); } }
@keyframes kit-coach-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes kit-coach-drag { 0%, 100% { transform: translateX(-5px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
  .kit-float, .kit-shadow, .kit-coach, .kit-coach svg { animation: none; }
  .kit-enter.is-entering, .kit-enter.is-leaving, .kit-enter.is-leaving-back { animation: none; }
}