/* twin3 Twitter / X canvases — shared anchor logic
   Storytelling layer: mint + gold on forest backdrop. */

@import url('../../colors_and_type.css');

.t3-tw {
  position: relative;
  overflow: hidden;
  color: #E8E0C8;
  font-family: 'Inter', sans-serif;
  background: #0F1810;
  isolation: isolate;
}

/* Matrix-rain + amber orbs backdrop */
.t3-tw__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(closest-side at 78% 32%, rgba(255,214,110,0.55), rgba(255,154,60,0.18) 55%, transparent 100%),
    radial-gradient(closest-side at 22% 80%, rgba(255,154,60,0.45), rgba(255,154,60,0.10) 55%, transparent 100%),
    radial-gradient(closest-side at 55% 12%, rgba(255,214,110,0.30), transparent 70%),
    linear-gradient(135deg, #1A2E20 0%, #0F1810 100%);
}
.t3-tw__matrix {
  position: absolute; inset: 0; z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  color: #A8B87A;
  pointer-events: none;
  white-space: pre;
  line-height: 1;
  overflow: hidden;
}
.t3-tw__matrix span {
  position: absolute;
  font-size: 24px;
  opacity: 0.14;
  letter-spacing: 0.05em;
}

/* Anchored content */
.t3-tw__kicker {
  position: absolute; z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7DDC8C;
  font-weight: 500;
}
.t3-tw__kicker::before { content: '▸ '; }

.t3-tw__title {
  position: absolute; z-index: 2;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  color: #FFD66E;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

.t3-tw__body {
  position: absolute; z-index: 2;
  font-family: 'Inter', sans-serif;
  color: #C5C4B0;
  line-height: 1.45;
  margin: 0;
}

.t3-tw__mark {
  position: absolute; z-index: 2;
  opacity: 0.85;
}
.t3-tw__mark img { display: block; }