/* ══════════════════════════════════════════════════════
   Split-View Comparison Slider
   ──────────────────────────────────────────────────────
   A draggable "image-diff" divider that reveals the real
   Art portfolio on one side and the real Engineering
   portfolio on the other, each loaded as an independent
   iframe (so each side keeps its own theme, scroll and
   navigation state).

   FULLY SELF-CONTAINED + EASILY REMOVABLE. To remove the
   whole feature: delete this file + js/split-view.js, drop
   the two <link>/<script> tags in index.html, and remove
   the `?pane=` block + SplitView.init() call in app.js.
   ══════════════════════════════════════════════════════ */

/* ── Inside an iframe pane: strip the mode-switch chrome ──
   Each pane is locked to a single mode, so the cd toggle
   would be meaningless (and could recursively confuse). */
body.in-pane .mode-toggle,
body.in-pane .mode-toggle-mobile { display: none !important; }

/* ── Persistent launcher (top-level page only) ──────────── */
.sv-launcher {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  /* Hardcoded — not theme-variable-dependent — so it's visible on both the
     dark engineering background and the white art background. The green
     border echoes the engineering accent and reads clearly on either. */
  color: rgba(255, 255, 255, 0.95);
  background: rgba(10, 14, 20, 0.88);
  border: 1px solid rgba(57, 211, 83, 0.55);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(57, 211, 83, 0.14), 0 4px 18px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sv-launcher:hover {
  transform: translateX(-50%) translateY(-2px);
  border-color: rgba(57, 211, 83, 0.9);
  box-shadow: 0 0 24px rgba(57, 211, 83, 0.22), 0 6px 22px rgba(0, 0, 0, 0.55);
}
.sv-launcher-ico {
  font-size: 15px;
  line-height: 1;
}
body.sv-open .sv-launcher,
body.in-pane .sv-launcher { display: none; }

/* ── Overlay + stage ────────────────────────────────────── */
.sv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  animation: sv-fade 0.28s ease;
}
@keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }

.sv-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  /* --split: pixel x-position of the divider (set by JS)
     --sv-w:  pixel width of the stage      (set by JS)   */
  --split: 50%;
  --sv-w: 100vw;
}

/* ── Panes (clip via overflow; iframe stays full-width so
      its content is never squished — true diff behavior) ── */
.sv-pane {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.sv-pane.sv-left  { left: 0;  width: var(--split); }
.sv-pane.sv-right { right: 0; width: calc(var(--sv-w) - var(--split)); }

.sv-frame {
  position: absolute;
  top: 0;
  width: var(--sv-w);
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.sv-pane.sv-left  .sv-frame { left: 0; }
.sv-pane.sv-right .sv-frame { right: 0; }

/* Drag shield: transparent layer that captures pointer moves
   over the iframes during a drag (cross-document pointermove
   would otherwise be swallowed by the iframe). Inert until
   dragging. */
.sv-shield {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  cursor: ew-resize;
}
.sv-stage.sv-dragging .sv-shield { pointer-events: auto; }
.sv-stage.sv-dragging .sv-frame { pointer-events: none; }

/* ── Divider + handle ───────────────────────────────────── */
.sv-divider {
  position: absolute;
  top: 0;
  left: var(--split);
  height: 100%;
  /* Wide, transparent grab zone (the whole strip is draggable) so the
     divider is easy to catch without accidentally clicking a pane. The
     visible hairline is drawn by ::before, centred in the zone. */
  width: 40px;
  transform: translateX(-20px);
  background: transparent;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none;
}
.sv-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.sv-divider:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; }
.sv-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  /* Grabbable: pointerdown on the circle bubbles to the divider's drag
     handler (it's a child of .sv-divider). */
  pointer-events: auto;
  cursor: ew-resize;
}

/* ── One-time "drag me" hint ─────────────────────────────────
   Shown once ever (gated on a localStorage flag in JS) when the
   split view first opens, to teach that the divider is draggable.
   The handle gently nudges left↔right and flanking ← → arrows
   pulse outward. Auto-dismisses on a timer or the first pointer
   interaction; the `.sv-hinting` class is removed in JS. */
.sv-divider.sv-hinting .sv-handle {
  animation: sv-handle-nudge 1.6s ease-in-out infinite;
}
.sv-hint-arrow {
  position: absolute;
  top: 50%;
  /* Match the handle's stacking + grabbability characteristics but stay
     decorative: arrows never capture the pointer, so the drag hit area
     (the whole 40px divider strip) is unaffected. */
  pointer-events: none;
  z-index: 6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
  opacity: 0;
}
.sv-hint-arrow-left  { left: 50%;  margin-left: -52px; }
.sv-hint-arrow-right { left: 50%;  margin-left: 36px; }
.sv-divider.sv-hinting .sv-hint-arrow-left {
  animation: sv-arrow-left 1.6s ease-in-out infinite;
}
.sv-divider.sv-hinting .sv-hint-arrow-right {
  animation: sv-arrow-right 1.6s ease-in-out infinite;
}

@keyframes sv-handle-nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  30%      { transform: translate(calc(-50% - 9px), -50%); }
  70%      { transform: translate(calc(-50% + 9px), -50%); }
}
@keyframes sv-arrow-left {
  0%, 100% { opacity: 0; transform: translate(0, -50%); }
  30%      { opacity: 0.95; transform: translate(-6px, -50%); }
  60%      { opacity: 0; transform: translate(-6px, -50%); }
}
@keyframes sv-arrow-right {
  0%, 100% { opacity: 0; transform: translate(0, -50%); }
  30%      { opacity: 0.95; transform: translate(6px, -50%); }
  60%      { opacity: 0; transform: translate(6px, -50%); }
}

/* ── Per-pane labels + "enter" controls ─────────────────── */
.sv-tag {
  position: absolute;
  bottom: 18px;
  z-index: 6;
  padding: 5px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.sv-tag.sv-tag-left  { left: 18px; }
.sv-tag.sv-tag-right { right: 18px; }

.sv-enter {
  position: absolute;
  top: 18px;
  z-index: 6;
  padding: 9px 15px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.16s ease;
}
.sv-enter:hover { background: rgba(0, 0, 0, 0.8); }
.sv-enter.sv-enter-left  { left: 18px; }
.sv-enter.sv-enter-right { right: 18px; }

.sv-close {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.sv-close:hover { background: rgba(0, 0, 0, 0.85); }

.sv-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  /* The hint is centred on the divider, so it overlaps BOTH the dark tech pane
     and the white art pane. A dark translucent pill (matching the enter/close
     controls) keeps the light text legible over either side — and over images. */
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Mobile / narrow: contained panel instead of full screen ── */
@media (max-width: 960px) {
  .sv-stage {
    width: 92vw;
    height: 82vh;
    border-radius: 12px;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
  }
  .sv-handle { width: 44px; height: 44px; font-size: 16px; }
  /* Even wider grab strip for touch. */
  .sv-divider { width: 56px; transform: translateX(-28px); }
  .sv-enter { font-size: 12px; padding: 8px 12px; }
  .sv-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-overlay { animation: none; }
  .sv-launcher { transition: none; }
  /* No animated nudge/pulse. The hint is still shown briefly, but as a
     static affordance: the handle holds its centred position and the
     flanking arrows are simply visible (no movement). JS still removes
     the `.sv-hinting` class on its timer / first interaction. */
  .sv-divider.sv-hinting .sv-handle { animation: none; }
  .sv-divider.sv-hinting .sv-hint-arrow-left,
  .sv-divider.sv-hinting .sv-hint-arrow-right {
    animation: none;
    opacity: 0.9;
  }
}