/*
 * LEGIBILITY DEMO — "The page that refuses to be read"
 *
 * Lives on agent.html only. Initial state shows scattered, dimmed,
 * partly-strike-through fragments representing a broken page. Click
 * MAKE IT LEGIBLE → fragments fade, structured signals slide in,
 * final verdict line appears. RESET SIGNAL returns to the chaos.
 *
 * The chaos is decorative (aria-hidden). The structured signals
 * are the real text; both states stay in DOM so screen readers
 * always get the resolved content.
 */

/*
 * Hidden by default — only revealed when Agent Vision Mode is on.
 * This makes the demo a "secret layer" the agent unlocks.
 */
.legibility-demo {
  position: relative;
  display: none;
}

body.agent-vision-active .legibility-demo {
  display: block;
}

/*
 * Special highlight when the agent traveler arrives at this section.
 * Overrides the generic .av-target-active treatment with a much
 * more dramatic "HIDDEN SECTION FOUND" reveal — bright outline,
 * intense pulsing glow, custom badge label.
 */
.legibility-demo.av-target-active {
  outline: 2px solid #e8ffe8 !important;
  outline-offset: 8px !important;
  animation: ldHiddenPulse 1.1s ease-in-out 2;
}

.legibility-demo.av-target-active::after {
  content: "HIDDEN SECTION FOUND" !important;
  background: #e8ffe8 !important;
  color: #010c05 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  padding: 0.3rem 0.85rem !important;
  top: -34px !important;
  box-shadow: 0 0 24px rgba(232, 255, 232, 0.7) !important;
  animation: ldHiddenBadge 1.1s ease-out 2 !important;
}

.legibility-demo.av-target-captured {
  outline: 2px solid rgba(0, 255, 102, 0.6) !important;
  outline-offset: 6px !important;
  box-shadow: 0 0 24px rgba(0, 255, 102, 0.35);
}

@keyframes ldHiddenPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(0, 255, 102, 0);
  }
  50% {
    box-shadow:
      0 0 80px rgba(232, 255, 232, 0.6),
      0 0 160px rgba(0, 255, 102, 0.45);
  }
}

@keyframes ldHiddenBadge {
  0%, 100% { transform: scale(1) translate(2px, -100%); }
  50% { transform: scale(1.12) translate(2px, -100%); }
}

@media (prefers-reduced-motion: reduce) {
  .legibility-demo.av-target-active,
  .legibility-demo.av-target-active::after {
    animation: none !important;
  }
}

.legibility-demo__intro {
  color: var(--text-muted, #4a8a5e);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

/* Panel that holds both chaos + order, stacked */
.legibility-demo__panel {
  position: relative;
  border: 1px solid var(--border-strong, #2a5a3a);
  background: var(--surface, #021607);
  padding: 2rem 1.5rem;
  min-height: 280px;
  overflow: hidden;
}

.legibility-demo__panel::before,
.legibility-demo__panel::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid #00ff66;
  box-shadow: 0 0 6px rgba(0, 255, 102, 0.45);
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.5s ease-out;
}
.legibility-demo__panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.legibility-demo__panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.legibility-demo.is-legible .legibility-demo__panel::before,
.legibility-demo.is-legible .legibility-demo__panel::after {
  opacity: 1;
}

/* -------------------------------------------------------------
 * Chaos state — scattered fragments
 * ------------------------------------------------------------- */
.legibility-demo__chaos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ld-fragment {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px dashed rgba(0, 255, 102, 0.25);
  color: #4a8a5e;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  background: rgba(1, 12, 5, 0.4);
  transform: rotate(var(--r, 0deg)) translate(var(--tx, 0), var(--ty, 0));
  opacity: 0.65;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out, color 0.6s;
  user-select: none;
}

.ld-fragment--strike { text-decoration: line-through; text-decoration-color: rgba(255, 48, 85, 0.6); }
.ld-fragment--dim { opacity: 0.35; }
.ld-fragment--broken { border-style: dotted; border-color: rgba(255, 48, 85, 0.4); }
.ld-fragment--shake { animation: ldShake 4s ease-in-out infinite; }

@keyframes ldShake {
  0%, 90%, 100% { transform: rotate(var(--r, 0deg)) translate(var(--tx, 0), var(--ty, 0)); }
  92% { transform: rotate(var(--r, 0deg)) translate(calc(var(--tx, 0px) + 2px), var(--ty, 0)); }
  94% { transform: rotate(var(--r, 0deg)) translate(calc(var(--tx, 0px) - 2px), var(--ty, 0)); }
  96% { transform: rotate(var(--r, 0deg)) translate(var(--tx, 0), calc(var(--ty, 0px) + 1px)); }
}

.legibility-demo.is-legible .legibility-demo__chaos {
  opacity: 0;
  pointer-events: none;
}

.legibility-demo.is-legible .ld-fragment {
  transform: rotate(0) translate(0, 0);
}

/* -------------------------------------------------------------
 * Order state — structured signals
 * ------------------------------------------------------------- */
.legibility-demo__order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease-out 0.35s, transform 0.55s ease-out 0.35s;
  pointer-events: none;
  position: absolute;
  inset: 1.5rem 1.5rem;
  justify-content: center;
}

.legibility-demo.is-legible .legibility-demo__order {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.legibility-demo__order li {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-left: 2px solid #00ff66;
  background: rgba(0, 255, 102, 0.04);
  color: var(--text-bright, #e8ffe8);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.9rem;
}

.legibility-demo__order li > span:first-child {
  color: #6dff8e;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Final verdict line */
.legibility-demo__verdict {
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border, #1a3a22);
  color: var(--text-bright, #e8ffe8);
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease-out 0.7s, transform 0.55s ease-out 0.7s;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.35);
}

.legibility-demo.is-legible .legibility-demo__verdict {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
 * Controls — MAKE IT LEGIBLE + RESET SIGNAL
 * ------------------------------------------------------------- */
.legibility-demo__controls {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.legibility-demo__make,
.legibility-demo__reset {
  padding: 0.85rem 1.4rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #00ff66;
  background: transparent;
  color: #00ff66;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.legibility-demo__make:hover,
.legibility-demo__reset:hover {
  background: #00ff66;
  color: #010c05;
  box-shadow: 0 0 24px rgba(0, 255, 102, 0.45);
  transform: translateY(-2px);
}

.legibility-demo__make:focus-visible,
.legibility-demo__reset:focus-visible {
  outline: 2px solid #e8ffe8;
  outline-offset: 3px;
}

.legibility-demo__reset {
  border-color: var(--border-strong, #2a5a3a);
  color: var(--text-muted, #4a8a5e);
}

.legibility-demo__reset:hover {
  background: var(--text-bright, #e8ffe8);
  color: #010c05;
  border-color: var(--text-bright, #e8ffe8);
}

/* -------------------------------------------------------------
 * Agent Vision active — stronger outlines + HUD intensity
 * ------------------------------------------------------------- */
body.agent-vision-active .legibility-demo__panel {
  border-color: #00ff66;
  box-shadow: 0 0 32px rgba(0, 255, 102, 0.25), inset 0 0 32px rgba(0, 255, 102, 0.05);
}

body.agent-vision-active .ld-fragment {
  border-color: rgba(0, 255, 102, 0.45);
  color: #6dff8e;
}

body.agent-vision-active .legibility-demo__order li {
  border-left-width: 3px;
  background: rgba(0, 255, 102, 0.08);
  box-shadow: -2px 0 12px rgba(0, 255, 102, 0.2);
}

/* -------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------- */
@media (max-width: 560px) {
  .legibility-demo__panel {
    padding: 1.5rem 1rem;
    min-height: 240px;
  }
  .legibility-demo__chaos {
    gap: 0.4rem;
    min-height: 180px;
  }
  .ld-fragment {
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem;
  }
  .legibility-demo__order li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    font-size: 0.85rem;
  }
}

/* -------------------------------------------------------------
 * Reduced motion — simple fade swap, no shake/rotate
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ld-fragment {
    transform: none !important;
    animation: none !important;
  }
  .legibility-demo__chaos,
  .legibility-demo__order,
  .legibility-demo__verdict {
    transition: opacity 0.2s ease-out;
    transform: none !important;
  }
}