/* tanso.club -- dreamy carbon social, editorial flow */
:root {
  --sky-blue: #4a7ae8;
  --coral-red: #e8564a;
  --mint-green: #4ae87a;
  --soft-white: #f4f2f0;
  --ink-dark: #2a2a30;
  --muted-blue: #7a9ae8;
  --light-gray: #e8e4e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--soft-white);
  color: var(--ink-dark);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  overflow-x: hidden;
}

body { position: relative; }

/* ===== Bubble field (drifting atoms in background) ===== */
.bubble-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bubble {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(0.4px);
}
.bubble.b1  { width: 60px; height: 60px; left: 8%;  top: 12%; background: radial-gradient(circle at 35% 35%, rgba(122,154,232,0.42), rgba(74,122,232,0.10) 70%, transparent 80%); animation: drift1 28s ease-in-out infinite; }
.bubble.b2  { width: 36px; height: 36px; left: 22%; top: 78%; background: radial-gradient(circle at 30% 30%, rgba(232,86,74,0.32), rgba(232,86,74,0.08) 70%, transparent 80%); animation: drift2 34s ease-in-out infinite; }
.bubble.b3  { width: 48px; height: 48px; left: 80%; top: 18%; background: radial-gradient(circle at 35% 35%, rgba(74,232,122,0.32), rgba(74,232,122,0.08) 70%, transparent 80%); animation: drift3 38s ease-in-out infinite; }
.bubble.b4  { width: 24px; height: 24px; left: 60%; top: 60%; background: radial-gradient(circle at 30% 30%, rgba(122,154,232,0.36), rgba(74,122,232,0.10) 70%, transparent 80%); animation: drift1 24s ease-in-out infinite reverse; }
.bubble.b5  { width: 70px; height: 70px; left: 4%;  top: 55%; background: radial-gradient(circle at 30% 30%, rgba(232,86,74,0.22), rgba(232,86,74,0.06) 70%, transparent 80%); animation: drift2 40s ease-in-out infinite; }
.bubble.b6  { width: 28px; height: 28px; left: 70%; top: 88%; background: radial-gradient(circle at 35% 35%, rgba(74,232,122,0.30), rgba(74,232,122,0.08) 70%, transparent 80%); animation: drift3 30s ease-in-out infinite reverse; }
.bubble.b7  { width: 44px; height: 44px; left: 38%; top: 30%; background: radial-gradient(circle at 30% 30%, rgba(122,154,232,0.28), rgba(74,122,232,0.06) 70%, transparent 80%); animation: drift1 36s ease-in-out infinite; }
.bubble.b8  { width: 22px; height: 22px; left: 88%; top: 50%; background: radial-gradient(circle at 35% 35%, rgba(232,86,74,0.30), rgba(232,86,74,0.06) 70%, transparent 80%); animation: drift2 26s ease-in-out infinite reverse; }
.bubble.b9  { width: 52px; height: 52px; left: 14%; top: 35%; background: radial-gradient(circle at 35% 35%, rgba(74,232,122,0.22), rgba(74,232,122,0.06) 70%, transparent 80%); animation: drift3 32s ease-in-out infinite; }
.bubble.b10 { width: 30px; height: 30px; left: 50%; top: 92%; background: radial-gradient(circle at 30% 30%, rgba(122,154,232,0.30), rgba(74,122,232,0.06) 70%, transparent 80%); animation: drift1 30s ease-in-out infinite reverse; }

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(40px, -32px, 0); }
}
@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-30px, -42px, 0); }
}
@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(20px, 38px, 0); }
}

/* ===== Opening ===== */
.opening {
  position: relative;
  min-height: 100vh;
  padding: 8vh 6vw 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.triadic-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(74,122,232,0.20), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(232,86,74,0.16), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(74,232,122,0.18), transparent 55%),
    var(--soft-white);
}

.atom-cluster {
  position: relative;
  width: clamp(260px, 36vw, 460px);
  height: clamp(260px, 36vw, 460px);
  margin: 0 auto 18px;
  z-index: 2;
}
.atom {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 900ms cubic-bezier(.2, 1.6, .3, 1), opacity 800ms ease;
}
.atom-cluster.in .atom { opacity: 1; transform: scale(1); }
.atom-cluster.in .atom.a1 { transition-delay: 80ms; }
.atom-cluster.in .atom.a2 { transition-delay: 220ms; }
.atom-cluster.in .atom.a3 { transition-delay: 340ms; }
.atom-cluster.in .atom.a4 { transition-delay: 460ms; }
.atom-cluster.in .atom.a5 { transition-delay: 580ms; }

.atom.a1 {
  width: 90px; height: 90px;
  left: 36%; top: 30%;
  background: radial-gradient(circle at 32% 30%, #f5fbff 0%, #6c97ee 55%, #2e57c0 100%);
  box-shadow: 0 18px 40px rgba(46,87,192,0.45), inset 0 -8px 18px rgba(46,87,192,0.4), inset 0 8px 14px rgba(255,255,255,0.4);
}
.atom.a2 {
  width: 70px; height: 70px;
  left: 8%; top: 18%;
  background: radial-gradient(circle at 32% 30%, #fff2f0 0%, #ee7e74 55%, #c33429 100%);
  box-shadow: 0 14px 32px rgba(195,52,41,0.40), inset 0 -8px 16px rgba(195,52,41,0.4), inset 0 6px 12px rgba(255,255,255,0.4);
}
.atom.a3 {
  width: 64px; height: 64px;
  right: 6%; top: 22%;
  background: radial-gradient(circle at 32% 30%, #f1fff3 0%, #6dee93 55%, #2bb55a 100%);
  box-shadow: 0 14px 30px rgba(43,181,90,0.35), inset 0 -8px 16px rgba(43,181,90,0.4), inset 0 6px 12px rgba(255,255,255,0.4);
}
.atom.a4 {
  width: 58px; height: 58px;
  left: 14%; bottom: 12%;
  background: radial-gradient(circle at 32% 30%, #fff2f0 0%, #ee7e74 55%, #c33429 100%);
  box-shadow: 0 14px 28px rgba(195,52,41,0.35), inset 0 -8px 14px rgba(195,52,41,0.4), inset 0 6px 12px rgba(255,255,255,0.4);
}
.atom.a5 {
  width: 50px; height: 50px;
  right: 14%; bottom: 16%;
  background: radial-gradient(circle at 32% 30%, #f1fff3 0%, #6dee93 55%, #2bb55a 100%);
  box-shadow: 0 12px 26px rgba(43,181,90,0.30), inset 0 -6px 12px rgba(43,181,90,0.4), inset 0 5px 10px rgba(255,255,255,0.4);
}

.bond {
  position: absolute;
  height: 4px;
  background: linear-gradient(90deg, rgba(42,42,48,0.28), rgba(42,42,48,0.10));
  border-radius: 4px;
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 700ms ease 700ms;
}
.atom-cluster.in .bond { opacity: 1; }
.bond-12 { left: 22%; top: 44%; width: 22%; transform: rotate(-22deg); }
.bond-23 { left: 52%; top: 40%; width: 22%; transform: rotate(8deg); }
.bond-34 { left: 22%; top: 60%; width: 22%; transform: rotate(46deg); }
.bond-15 { left: 52%; top: 60%; width: 22%; transform: rotate(-30deg); }

.masthead {
  position: relative;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-blue);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease 200ms, transform 700ms ease 200ms;
}
.masthead.in { opacity: 1; transform: translateY(0); }

.title {
  position: relative;
  z-index: 2;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  font-size: clamp(54px, 9vw, 128px);
  letter-spacing: -0.01em;
  color: var(--ink-dark);
  line-height: 1;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms ease 600ms, transform 900ms cubic-bezier(.2,.8,.2,1) 600ms;
}
.title.in { opacity: 1; transform: translateY(0); }

/* glitch effect (used briefly on slide-reveal of section heads) */
.glitching {
  position: relative;
  animation: glitch 380ms steps(2, end);
}
.glitching::before, .glitching::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.glitching::before { color: var(--coral-red); transform: translate(2px, 0); }
.glitching::after  { color: var(--mint-green); transform: translate(-2px, 1px); }
@keyframes glitch {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(2px, -1px); }
  60%  { transform: translate(-1px, 2px); }
  80%  { transform: translate(1px, -2px); }
  100% { transform: translate(0,0); }
}

.subtitle {
  position: relative;
  z-index: 2;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--ink-dark);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease 1000ms, transform 700ms ease 1000ms;
}
.subtitle.in { opacity: 1; transform: translateY(0); }

/* ===== Magazine ===== */
.magazine {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10vh 6vw 6vh;
}

.feature, .pull-quote, .closing-feature {
  margin: 0 0 14vh;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
}
.slide-in.in {
  opacity: 1;
  transform: translateX(0);
}

.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sky-blue);
  margin-bottom: 18px;
}

.feature-head {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink-dark);
  margin-bottom: 24px;
}

.lede {
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.7;
  color: var(--ink-dark);
  margin-bottom: 18px;
  max-width: 32em;
}

.feature p { margin-bottom: 16px; max-width: 36em; }

.feature-lede { max-width: 720px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.two-col .col p { max-width: none; }
.two-col .feature-head { font-size: clamp(22px, 2.6vw, 32px); }
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; gap: 36px; }
}

.formula {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--coral-red);
  background: var(--light-gray);
  padding: 8px 12px;
  display: inline-block;
  border-radius: 2px;
  margin-top: 6px;
}

.pull-quote {
  text-align: center;
  padding: 6vh 4vw;
}
.pull-quote blockquote {
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.35;
  color: var(--ink-dark);
  max-width: 22ch;
  margin: 0 auto 18px;
}
.pull-quote .attribution {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-blue);
}

.feature-wide {
  background: var(--light-gray);
  padding: 8vh 5vw;
  border-radius: 4px;
  max-width: none;
}
.feature-wide p { max-width: 38em; }

.notebook .almanac {
  list-style: none;
  margin-top: 6px;
}
.notebook .almanac li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--light-gray);
  font-family: "Libre Baskerville", serif;
  font-size: 17px;
}
.notebook .almanac li:last-child { border-bottom: none; }
.notebook .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--mint-green);
  flex: 0 0 28px;
}

.closing-feature .signoff {
  margin-top: 20px;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  color: var(--sky-blue);
}

/* ===== Footer ===== */
.colophon {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 8vh 6vw 12vh;
  border-top: 1px solid var(--light-gray);
}
.footer-formula {
  background: transparent;
  color: var(--ink-dark);
  font-size: 12px;
  margin-bottom: 14px;
}
.footer-meta {
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  color: var(--ink-dark);
  font-size: 14px;
  opacity: 0.7;
}