/* =========================================================
   Automations showcase, 2026-08-27.
   Four service families, each with a visual built from HTML and CSS.
   Every animation is scoped to .is-active so it restarts each time the
   panel comes round, and every one is disabled under prefers-reduced-motion.
   ========================================================= */

.auto__layout {
  display: grid;
  grid-template-columns: minmax(230px, 320px) 1fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(38px, 5vh, 64px);
}

/* ---- Rail ---------------------------------------------------------------- */
.auto__rail { display: grid; gap: 2px; }
.auto__tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-dim);
  transition: color 0.25s ease;
}
.auto__tab:hover { color: var(--text-secondary); }
.auto__tab.is-active { color: var(--text-primary); }
.auto__tab-i {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--accent);
}
.auto__tab-t {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.auto__tab-bar {
  grid-column: 1 / -1;
  height: 2px;
  margin-top: 12px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.auto__tab-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.auto__tab.is-active .auto__tab-bar i { animation: auto-fill var(--auto-dur, 7s) linear forwards; }
@keyframes auto-fill { from { width: 0 } to { width: 100% } }

/* ---- Stage --------------------------------------------------------------- */
.auto__stage { display: grid; min-height: 420px; }
.auto__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.auto__panel.is-active { opacity: 1; visibility: visible; transform: none; }
.auto__say {
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: 28px;
}
.viz {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-card);
  padding: 26px;
  min-height: 360px;
  overflow: hidden;
}

/* ---- 01 CRM: a card crossing the board ---------------------------------- */
.viz--crm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.crm-col {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.crm-h {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.crm-card {
  display: block;
  height: 34px;
  margin-bottom: 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
}
.crm-fly {
  position: absolute;
  left: 26px;
  top: 74px;
  width: calc((100% - 52px - 32px) / 3);
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: 0 10px 26px -8px var(--accent-glow);
}
.is-active .crm-fly { animation: crm-move 6.4s ease-in-out infinite; }
@keyframes crm-move {
  0%, 12%   { transform: translate(0, 0); }
  30%, 45%  { transform: translate(calc(100% + 16px), 40px); }
  63%, 88%  { transform: translate(calc(200% + 32px), 0); }
  100%      { transform: translate(0, 0); opacity: 0; }
}

/* ---- 02 Nurture: a drip sequence writing itself ------------------------- */
.viz--nurture { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.msg {
  max-width: 78%;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0;
}
.msg b {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: 0.65;
}
.msg--out {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.msg--in {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #14251a;
  font-weight: 600;
}
.is-active .msg { animation: msg-in 0.5s ease forwards; }
.is-active .msg:nth-child(1) { animation-delay: 0.15s; }
.is-active .msg:nth-child(2) { animation-delay: 1.1s; }
.is-active .msg:nth-child(3) { animation-delay: 2.1s; }
.is-active .msg:nth-child(4) { animation-delay: 3.2s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* ---- 03 Sales: a pulse running the whole line -------------------------- */
.viz--sales { display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.rail {
  position: relative;
  display: block;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
}
.pulse {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-glow);
}
.is-active .pulse { animation: pulse-run 5.6s ease-in-out infinite; }
@keyframes pulse-run { 0% { left: 0 } 100% { left: 100% } }
.stops { display: flex; justify-content: space-between; }
.stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.stop b { width: 9px; height: 9px; border-radius: 50%; background: var(--border-mid); }
.is-active .stop b { animation: stop-lit 5.6s ease-in-out infinite; }
.is-active .stop:nth-child(1) b { animation-delay: 0s }
.is-active .stop:nth-child(2) b { animation-delay: 1.1s }
.is-active .stop:nth-child(3) b { animation-delay: 2.2s }
.is-active .stop:nth-child(4) b { animation-delay: 3.3s }
.is-active .stop:nth-child(5) b { animation-delay: 4.4s }
@keyframes stop-lit {
  0%, 8%   { background: var(--border-mid); transform: scale(1) }
  14%      { background: var(--accent); transform: scale(1.5) }
  40%,100% { background: var(--accent); transform: scale(1) }
}

/* ---- 04 Leak: money escaping, then plugged ----------------------------- */
.viz--leak { display: grid; place-items: center; }
.funnel {
  position: relative;
  width: min(340px, 70%);
  aspect-ratio: 340 / 270;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--border-mid);
  clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%);
}
.drip, .patch { position: absolute; border-radius: 50%; }
.drip { width: 13px; height: 13px; background: var(--accent); opacity: 0; }
.drip--1 { left: 8%;  top: 30% }
.drip--2 { right: 7%; top: 48% }
.drip--3 { left: 20%; top: 67% }
.is-active .drip { animation: drip-fall 3s ease-in infinite }
.is-active .drip--2 { animation-delay: .5s }
.is-active .drip--3 { animation-delay: 1s }
@keyframes drip-fall {
  0%      { opacity: 0; transform: translate(0, 0) }
  18%     { opacity: 1 }
  60%,100%{ opacity: 0; transform: translate(-26px, 96px) }
}
.patch { width: 22px; height: 22px; background: var(--accent); opacity: 0; box-shadow: 0 0 0 7px var(--accent-glow) }
.patch--1 { left: 6.5%; top: 28% }
.patch--2 { right: 5.5%; top: 46% }
.patch--3 { left: 18.5%; top: 65% }
.is-active .patch { animation: patch-in .5s ease forwards; animation-delay: 3.4s }
.is-active .patch--2 { animation-delay: 3.7s }
.is-active .patch--3 { animation-delay: 4s }
@keyframes patch-in { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: scale(1) } }
.leak-tag {
  margin-top: 28px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-pill);
  opacity: 0;
}
.is-active .leak-tag { animation: patch-in .5s ease forwards; animation-delay: 4.4s }

@media (max-width: 900px) {
  .auto__layout { grid-template-columns: 1fr; }
  .auto__rail { grid-auto-flow: row; }
  .auto__stage { min-height: 380px; }
  .viz--crm { grid-template-columns: 1fr; }
  .crm-fly { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auto__tab.is-active .auto__tab-bar i { animation: none; width: 100%; }
  .is-active .crm-fly, .is-active .msg, .is-active .pulse,
  .is-active .stop b, .is-active .drip, .is-active .patch, .is-active .leak-tag { animation: none; }
  .is-active .msg, .is-active .patch, .is-active .leak-tag { opacity: 1; }
  .is-active .drip { opacity: 0; }
}