/* trust-86.css — "86'd FAKE PROFILES" neon trust banner (replaces .identity-chip) */

.trust86 {
  --t86-red: #ff2d55;
  --t86-red-glow: #ff6b81;
  --t86-core: #fff4f6;
  --t86-cyan: #67e8f9;
  --t86-lilac: #c9b8ff;
  --t86-glass: rgba(255, 255, 255, 0.14);
  --t86-mint: #3ee8a8;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.9rem, 3.2cqi, 1.5rem);

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 44rem;
  margin: 2rem 0 2.5rem;
  padding: clamp(1.4rem, 6cqi, 2.75rem) clamp(1.25rem, 6cqi, 2.75rem) clamp(1.5rem, 6cqi, 2.5rem);

  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 70% at 18% 18%, rgba(255, 45, 85, 0.16), transparent 60%),
    radial-gradient(90% 60% at 80% 55%, rgba(103, 232, 249, 0.07), transparent 65%),
    linear-gradient(180deg, #0d0c10 0%, #08080b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px -24px rgba(0, 0, 0, 0.8);
  color: #f5f4f8;
}

/* brick wall + glass sheen + vignette (decorative overlay) */
.trust86::before,
.trust86::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.trust86::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M0 .5H96M0 24.5H96M.5 0V24M48.5 0V24M24.5 24V48M72.5 24V48'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 32px;
  -webkit-mask-image: radial-gradient(130% 100% at 30% 30%, #000 20%, transparent 85%);
          mask-image: radial-gradient(130% 100% at 30% 30%, #000 20%, transparent 85%);
}
.trust86::after {
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.035) 46%, transparent 54%),
    radial-gradient(140% 120% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- neon signs ---------- */
.t86-sign { display: block; width: 100%; height: auto; overflow: visible; }
.t86-sign--86 { width: min(100%, 70cqi); }
.t86-sign--fake { width: 100%; }

.t86-sign text {
  font-family: 'Cabinet Grotesk', 'General Sans', system-ui, sans-serif;
  font-weight: 500;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke;
}

/* unlit glass tube — always present under the lit layers */
.t86-glass { stroke: var(--t86-glass); stroke-width: 2.2; }

/* lit layers */
.t86-bloom { stroke-width: 16; opacity: 0.7; }
.t86-color { stroke-width: 6.5; }
.t86-core  { stroke: var(--t86-core); stroke-width: 2.2; }

.t86-sign--86 .t86-bloom,
.t86-sign--86 .t86-color { stroke: var(--t86-red); }
.t86-sign--86 .t86-bloom { stroke: var(--t86-red-glow); }

.t86-sign--fake .t86-bloom { opacity: 0.45; }
.t86-sign--fake .t86-color { stroke-width: 6; }
.t86-sign--fake .t86-core  { stroke-width: 2.4; }
.t86-sign--fake .t86-glass { stroke: rgba(255, 255, 255, 0.22); stroke-width: 3; }
.t86-sign--86 > .t86-lit { filter: drop-shadow(0 0 10px rgba(255, 45, 85, 0.65)) drop-shadow(0 0 28px rgba(255, 45, 85, 0.35)); }

/* the strike-through tube */
.t86-strike path { fill: none; stroke-linecap: round; }
.t86-strike .t86-glass { stroke-width: 4; }
.t86-strike > .t86-lit { filter: drop-shadow(0 0 8px rgba(255, 45, 85, 0.8)); }
.t86-strike .t86-bloom { stroke: var(--t86-red-glow); stroke-width: 30; opacity: 0.7; }
.t86-strike .t86-color { stroke: var(--t86-red); stroke-width: 12; }
.t86-strike .t86-core  { stroke: var(--t86-core); stroke-width: 3.6; }

/* ---------- copy ---------- */
.t86-copy {
  margin: 0.35rem 0 0;
  max-width: 30ch;
  font-family: 'Satoshi', 'General Sans', system-ui, sans-serif;
  font-size: clamp(1.05rem, 0.9rem + 1.6cqi, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  color: #d9d7e2;
}
.t86-copy strong { color: #fff; font-weight: 700; }

/* ---------- glass chip ---------- */
.t86-chip {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f5f4f8;
  text-decoration: none;
  font-size: 0.875rem;
  transition: border-color 220ms ease, background 220ms ease;
}
.t86-chip:hover { border-color: rgba(62, 232, 168, 0.45); background: rgba(62, 232, 168, 0.07); }
.t86-chip:focus-visible { outline: 2px solid var(--t86-mint); outline-offset: 3px; }

.t86-chip__dot {
  flex: none;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--t86-mint);
  box-shadow: 0 0 0 3px rgba(62, 232, 168, 0.18), 0 0 14px var(--t86-mint);
}
.t86-chip__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a7a5b4;
}
.t86-chip__brand { font-weight: 700; letter-spacing: -0.01em; }
.t86-chip::after { /* sheen overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

.t86-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   Motion — only when JS arms it (no-JS = final lit state)
   ========================================================= */
.trust86[data-armed] .t86-sign--fake > .t86-lit,
.trust86[data-armed] .t86-sign--86 > .t86-lit { opacity: 0; }
.trust86[data-armed] .t86-strike .t86-lit path { stroke-dashoffset: 1; }
.trust86[data-armed] .t86-strike .t86-glass { opacity: 0; }
.trust86[data-armed] .t86-copy,
.trust86[data-armed] .t86-chip { opacity: 0; transform: translateY(10px); }

.t86-strike .t86-lit path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* 1. FAKE PROFILES ignites (0 – 0.6s) */
.trust86.is-lit .t86-sign--fake > .t86-lit {
  animation:
    t86-ignite 0.6s steps(1, end) forwards,
    t86-dim 0.5s 1.35s ease-out forwards;
}
/* 2. red strike draws across (0.65 – 1.15s) */
.trust86.is-lit .t86-strike .t86-glass { animation: t86-fade 0.2s 0.6s forwards; }
.trust86.is-lit .t86-strike .t86-lit path { animation: t86-draw 0.5s 0.65s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
/* 3. 86'd flickers on twice then holds (1.2 – 1.9s), buzzes forever after */
.trust86.is-lit .t86-sign--86 > .t86-lit {
  animation:
    t86-ignite-86 0.7s 1.2s steps(1, end) forwards,
    t86-buzz 7s 3s steps(1, end) infinite;
}
/* 4. copy + chip rise, chip sheen sweeps */
.trust86.is-lit .t86-copy { animation: t86-rise 0.6s 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.trust86.is-lit .t86-chip { animation: t86-rise 0.6s 1.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.trust86.is-lit .t86-chip::after { animation: t86-sheen 1.1s 2.3s ease-in-out forwards; }

@keyframes t86-ignite {
  0% { opacity: 0; } 12% { opacity: 0.8; } 20% { opacity: 0.1; }
  34% { opacity: 1; } 42% { opacity: 0.35; } 55%, 100% { opacity: 1; }
}
@keyframes t86-dim { to { opacity: 0.38; } }
@keyframes t86-ignite-86 {
  0% { opacity: 0; } 14% { opacity: 1; } 24% { opacity: 0; }
  40% { opacity: 1; } 50% { opacity: 0.15; } 64%, 100% { opacity: 1; }
}
@keyframes t86-buzz {
  0%, 93%, 100% { opacity: 1; } 93.6% { opacity: 0.45; } 94.2% { opacity: 1; } 95% { opacity: 0.7; } 95.5% { opacity: 1; }
}
@keyframes t86-draw { to { stroke-dashoffset: 0; } }
@keyframes t86-fade { to { opacity: 1; } }
@keyframes t86-rise { to { opacity: 1; transform: none; } }
@keyframes t86-sheen { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .trust86[data-armed] .t86-lit,
  .trust86[data-armed] .t86-copy,
  .trust86[data-armed] .t86-chip,
  .trust86[data-armed] .t86-strike .t86-glass { opacity: 1 !important; transform: none !important; animation: none !important; }
  .trust86[data-armed] .t86-sign--fake > .t86-lit { opacity: 0.38 !important; }
  .trust86[data-armed] .t86-strike .t86-lit path { stroke-dashoffset: 0 !important; animation: none !important; }
  .trust86 .t86-chip::after { display: none; }
}