/* =====================================
   wide-outer-frame.css — SPLIT OUTER OUTLINE (v2 stronger)
   ===================================== */

.wof-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;

  /* Tunables */
  --wof-gap: 11px;              /* ↑ gap so spacing stays the same after thicker border */
  --wof-radius: 18px;           /* ↑ roundness for clearer visual */
  --wof-border: 8px;            /* ↑ thickness so it’s clearly visible */

  --wof-color-left:  #9c8cff;   /* lavender */
  --wof-color-right: #ff66e0;   /* pink */

  --wof-glow-outer: 0.88;
  --wof-glow-inner: 0.55;
  --wof-base-border: 2.25px;

  --wof-clip-margin: 200px;     /* keep wide relaxed margins for glow */
}

.wof-frame {
  position: absolute;
  left: 0; top: 0;
  box-sizing: border-box;
  border: var(--wof-border) solid currentColor !important !important;
  border-radius: var(--wof-radius) !important !important;
  background: transparent;
  pointer-events: none;
  will-change: transform, width, height;
  transform: translate3d(0,0,0);
  contain: layout paint;
  box-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    inset 0 0 1px currentColor;

  outline: 1px solid currentColor;
  outline-offset: 0;
}

.wof-frame.wof-left {
  color: var(--wof-color-left);
  clip-path: inset(calc(-1 * var(--wof-clip-margin)) 50% calc(-1 * var(--wof-clip-margin)) calc(-1 * var(--wof-clip-margin)));
  -webkit-clip-path: inset(calc(-1 * var(--wof-clip-margin)) 50% calc(-1 * var(--wof-clip-margin)) calc(-1 * var(--wof-clip-margin)));
}

.wof-frame.wof-right {
  color: var(--wof-color-right);
  clip-path: inset(calc(-1 * var(--wof-clip-margin)) calc(-1 * var(--wof-clip-margin)) calc(-1 * var(--wof-clip-margin)) 50%);
  -webkit-clip-path: inset(calc(-1 * var(--wof-clip-margin)) calc(-1 * var(--wof-clip-margin)) calc(-1 * var(--wof-clip-margin)) 50%);
}

@media (max-width: 700px){
  .wof-root{ --wof-gap: 12px; --wof-radius: 14px; }
}