/* ============================================================
   krimsky/prism.css
   Styles for the draggable Krimsky prism element.

   ⚠️  CRITICAL: The .dragging state MUST NOT use any CSS transform
   (scale, translate, rotate). Transforms shift the bounding-rect
   used by the drag engine, causing a "drift" between the pointer
   and the element. Visual feedback is achieved via filter + opacity
   only, which does NOT affect layout coordinates.
   ============================================================ */

/* ----------------------------------------------------------------
   Base prism element
   Position: absolute inside #examField (position:relative).
   Default placement is handled by drag.js on init via the dock
   anchor, so we only define geometry and appearance here.
   ---------------------------------------------------------------- */
.krimsky-prism {
  /* Layout */
  position:    absolute;
  width:       var(--k-prism-w);
  height:      var(--k-prism-h);
  z-index:     50;

  /* Interaction */
  cursor:      grab;
  user-select: none;
  touch-action: none;   /* required for Pointer Events on touch screens */

  /* 3-D glass appearance */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(150, 220, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-radius:    5px;
  border:           1px  solid rgba(255, 255, 255, 0.38);
  border-top:       2px  solid rgba(255, 255, 255, 0.70);
  border-left:      1.5px solid rgba(255, 255, 255, 0.50);
  box-shadow:
    5px  6px 14px rgba(0, 0, 0, 0.32),
    inset -2px -2px  6px rgba(0, 0, 0, 0.10),
    inset  2px  2px 10px rgba(255, 255, 255, 0.38);
  backdrop-filter:         blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Inner layout */
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;

  /* Smooth idle transitions (position/opacity only — NOT transform) */
  transition:
    opacity       var(--k-dur-mid) ease,
    box-shadow    var(--k-dur-mid) var(--k-ease-snap),
    border-color  var(--k-dur-mid) ease;
}

/* Diagonal refraction stripe inside the prism block */
.krimsky-prism::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to bottom right,
    transparent 48%,
    rgba(255, 255, 255, 0.55) 49%,
    rgba(255, 255, 255, 0.55) 51%,
    transparent 52%
  );
  pointer-events: none;
}

/* Faint second stripe for depth */
.krimsky-prism::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to top right,
    transparent 70%,
    rgba(255, 255, 255, 0.18) 71%,
    rgba(255, 255, 255, 0.18) 72%,
    transparent 73%
  );
  pointer-events: none;
}

/* "Prism" text label */
.krimsky-prism-label {
  font-size:    10px;
  font-family:  var(--mono, 'IBM Plex Mono', monospace);
  color:        rgba(10, 25, 50, 0.85);
  font-weight:  800;
  text-shadow:  0 0 5px rgba(255, 255, 255, 0.95);
  letter-spacing: 0.04em;
  z-index:      2;
  margin-top:   2px;
  transform:    rotate(-8deg);  /* slight tilt — cosmetic only, not on the host */
}

/* Hide old SVG child (kept in HTML for progressive-enhancement fallback) */
.krimsky-prism > svg {
  display: none;
}

/* ----------------------------------------------------------------
   Hidden / not relevant
   ---------------------------------------------------------------- */
.krimsky-prism[data-relevant="false"] {
  display: none;
}

/* ----------------------------------------------------------------
   DRAGGING STATE
   ✅ Only filter + opacity — NO transform so coords stay accurate
   ---------------------------------------------------------------- */
.krimsky-prism.is-dragging {
  cursor:     grabbing;
  opacity:    0.92;
  z-index:    200;
  box-shadow:
    10px 14px 28px rgba(0, 0, 0, 0.45),
    inset -2px -2px  6px rgba(0, 0, 0, 0.10),
    inset  2px  2px 10px rgba(255, 255, 255, 0.55);
  filter: drop-shadow(0 0 8px var(--k-accent-glow));
  /* Disable idle transitions while dragging for crisp pointer-follow */
  transition: none;
}

/* ----------------------------------------------------------------
   ACTIVE / over an eye zone
   ---------------------------------------------------------------- */
.krimsky-prism[data-eye="OD"],
.krimsky-prism[data-eye="OS"] {
  border-color: var(--k-accent);
  box-shadow:
    0 0 22px rgba(79, 195, 247, 0.55),
    inset 0 0 12px rgba(79, 195, 247, 0.35);
}

/* ----------------------------------------------------------------
   Dock / return animation
   Applied by drag.js just before re-enabling transitions
   ---------------------------------------------------------------- */
.krimsky-prism.is-returning {
  transition:
    left         var(--k-dur-slow) var(--k-ease-spring),
    top          var(--k-dur-slow) var(--k-ease-spring),
    opacity      var(--k-dur-mid)  ease,
    box-shadow   var(--k-dur-mid)  var(--k-ease-snap);
}