/**
 * Symbioz IT — Hero Animation CSS
 * Scoped to #hero section — no global resets
 */

/* ── HERO SECTION CONTAINER ─────────────────────────────────────────────── */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #F2F4F7;
  font-family: 'DM Sans', sans-serif;
  color: #0D1B2E;
}

/* ── SHARED CSS VARS (hero scope) ───────────────────────────────────────── */
#hero {
  --s:      #3796BB;
  --sl:     #2A7FA8;
  --bg:     #F2F4F7;
  --surface:#FFFFFF; --surf2:#F7F9FB; --surf3:#EEF1F5;
  --border: rgba(13,27,46,0.08); --border2:rgba(13,27,46,0.15);
  --accent: #3796BB; --accent2:#2A7FA8;
  --green:  #0D9E6E; --amber:#D97706; --rose:#E11D48;
  --purple: #6D5FCC; --cyan:#0E8FAF;
  --text:   #0D1B2E; --text2:rgba(13,27,46,0.6); --text3:rgba(13,27,46,0.35);
}

/* ── BG CANVAS (scene2 particles) ──────────────────────────────────────── */
#hero canvas#bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
  display: block;
}
#hero canvas#bg.active { opacity: 1; }

/* ── MAP CANVAS WRAP (scene1 world map) ─────────────────────────────────── */
#hero #wrap {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; transition: opacity .8s ease;
}
#hero #wrap canvas { display: block; }

/* ── FADE OVERLAYS ──────────────────────────────────────────────────────── */
#hero .hero-fade-left {
  position: absolute; top: 0; left: 0; height: 100%; width: 54%;
  background: linear-gradient(to right, #F2F4F7 62%, transparent);
  pointer-events: none; z-index: 100;
}
#hero .hero-fade-top {
  position: absolute; top: 0; left: 0; width: 100%; height: 90px;
  background: linear-gradient(to bottom, #F2F4F7, transparent);
  pointer-events: none; z-index: 100;
}
#hero .hero-fade-bot {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 90px;
  background: linear-gradient(to top, #F2F4F7, transparent);
  pointer-events: none; z-index: 100;
}

/* ── MORPH TEXT ─────────────────────────────────────────────────────────── */
.morph-text {
  display: inline-block;
  transition: filter .6s ease, opacity .6s ease;
}
.morph-out {
  filter: blur(8px);
  opacity: 0;
}
.morph-in {
  animation: morphIn .6s ease forwards;
}
@keyframes morphIn {
  from { filter: blur(8px); opacity: 0; }
  to   { filter: blur(0);   opacity: 1; }
}

/* ── PHASE DOTS ─────────────────────────────────────────────────────────── */
.hero-phases {
  position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 200; align-items: center;
}
.hero-phases .ph {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(20,40,60,.22); transition: all .35s cubic-bezier(.16,1,.3,1);
  cursor: pointer; position: relative;
}
.hero-phases .ph:hover { background: rgba(20,40,60,.45); transform: scale(1.2); }
.hero-phases .ph.on { background: var(--s); width: 26px; border-radius: 4px; }
.hero-phases .ph.on:hover { transform: none; }

/* Tooltip label on hover */
.hero-phases .ph::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(13,27,46,.82); color: #fff;
  font-size: 10px; font-weight: 600; font-family: 'Inter', sans-serif;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.hero-phases .ph:hover::after { opacity: 1; }

/* ── FAKE CURSOR (fixed — overlays full viewport during Jira) ───────────── */
#fakeCursor {
  position: fixed; z-index: 500; pointer-events: none;
  width: 20px; height: 20px; opacity: 0;
  transition: opacity .3s, left .6s cubic-bezier(.22,1,.36,1), top .6s cubic-bezier(.22,1,.36,1);
}
#fakeCursor svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
#fakeCursor.show { opacity: 1; }
#fakeCursor.clicking .cursor-inner { transform: scale(.75); transition: transform .1s; }
.cursor-inner { transform-origin: 4px 2px; transition: transform .15s; }

/* ── PANEL TRANSITIONS ──────────────────────────────────────────────────── */
.panel {
  opacity: 0;
  transform: translateX(30px) scale(.98);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.panel.show { opacity: 1; transform: none; pointer-events: auto; }
.panel.out-left { opacity: 0; transform: translateX(-30px) scale(.98); pointer-events: none; }

/* Text panel: no card chrome, transparent over the bg canvas */
#panel-text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform-style: preserve-3d;
  perspective: 1200px;
  transform: scale(1.06);
}
#panel-text.show     { opacity: 1; transform: scale(1); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
/* Exit: rotate on Y axis — page-turn into the Jira board */
#panel-text.out-left { opacity: 0; transform: rotateY(-25deg) scale(0.92); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,1,1); pointer-events: none; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #panelsStage { left: 50%; }
}
@media (max-width: 768px) {
  #hero .hero-fade-left { display: none; }
  #panelsStage { display: none; }
  #hero #wrap { opacity: 1 !important; }
  .hero-phases { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCENE 2 STYLES — panels, jira board, saas dashboard, ticket zoom
   ═══════════════════════════════════════════════════════════════════════════ */

/* CSS vars at :root so panel components can inherit them outside #hero */
:root {
  --bg:      #F2F4F7;
  --surface: #FFFFFF;
  --surf2:   #F7F9FB;
  --surf3:   #EEF1F5;
  --border:  rgba(13,27,46,0.08);
  --border2: rgba(13,27,46,0.15);
  --accent:  #3796BB;
  --accent2: #2A7FA8;
  --green:   #0D9E6E;
  --amber:   #D97706;
  --rose:    #E11D48;
  --purple:  #6D5FCC;
  --cyan:    #0E8FAF;
  --text:    #0D1B2E;
  --text2:   rgba(13,27,46,0.6);
  --text3:   rgba(13,27,46,0.35);
}

/* ══ STAGE — right half of viewport ════════════════════════════════════════ */
#panelsStage {
  position: absolute;
  left: 44%;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
#panelsStage.active { opacity: 1; pointer-events: auto; }

/* ══ OUTER LAYOUT ════════════════════════════════════════════════════════════ */
.outer {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0 24px 0 0;
  width: 100%; max-width: 100%;
  opacity: 1;
}

/* ══ PANEL CONTAINER ════════════════════════════════════════════════════════ */
.panel-wrap {
  position: relative;
  height: 580px; width: 100%;
}
.panel {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(13,27,46,0.12), 0 2px 8px rgba(13,27,46,0.06), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Window chrome */
.win-chrome {
  height: 40px; display: flex; align-items: center; padding: 0 16px; gap: 10px;
  background: var(--surf2); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.wc-dots { display: flex; gap: 5px; }
.wc-dot { width: 9px; height: 9px; border-radius: 50%; }
.wc-title { font-size: 11px; color: var(--text3); letter-spacing: .5px; margin-left: 8px; font-family: 'JetBrains Mono', monospace; }
.wc-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.wc-pill {
  font-size: 9.5px; padding: 3px 9px; border-radius: 5px; font-weight: 500;
  background: rgba(55,150,187,.1); color: var(--accent); border: 1px solid rgba(55,150,187,.2);
}
.wc-pill.green { background: rgba(13,158,110,.1); color: var(--green); border-color: rgba(13,158,110,.2); }

/* ══ SAAS DASHBOARD ═════════════════════════════════════════════════════════ */
#panel-saas { display: flex; flex-direction: column; }

/* ── Body: sidebar + main area (side by side) ── */
.saas-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ── Left sidebar ── */
.saas-sidebar {
  width: 46px;
  background: #FAFBFC;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 10px; gap: 0; flex-shrink: 0;
}
.sb-logo {
  width: 100%; display: flex; justify-content: center;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sb-nav {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; flex: 1; padding-top: 6px; width: 100%;
}
.sb-item {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; color: #9DAFC0; cursor: pointer;
  transition: background .15s, color .15s;
}
.sb-item:hover { background: var(--surf3); color: var(--text2); }
.sb-item.sb-on { background: rgba(55,150,187,.14); color: var(--accent); }
.sb-sep {
  width: 20px; height: 1px; background: var(--border);
  margin: 6px 0;
}
.sb-avatar-wrap { margin-top: auto; padding-top: 8px; }
.sb-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #fff; cursor: pointer;
}

/* ── Main content area ── */
.saas-inner { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

/* ── Topbar (redesigned: page title + actions) ── */
.saas-topbar {
  display: flex; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--surface);
}
.tb-page-info { display: flex; align-items: baseline; gap: 8px; }
.tb-page-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
.tb-date-range { font-size: 10px; color: var(--text3); font-family: 'JetBrains Mono', monospace; }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tb-icon-btn {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); cursor: pointer; transition: background .15s; position: relative;
}
.tb-icon-btn:hover { background: var(--surf3); color: var(--text2); }
.tb-notif-dot {
  position: absolute; top: 5px; right: 5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose);
  border: 1px solid var(--surface);
}
.tb-divider { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.tb-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #fff; cursor: pointer; margin-left: 2px;
}

/* ── Saas inner padding (applied as wrapper) ── */
.saas-inner > :not(.saas-topbar) { padding-left: 14px; padding-right: 14px; }

/* KPI cards */
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding-top: 2px; }
.kpi-card {
  background: var(--surf2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s, transform .35s;
}
.kpi-card.show { opacity: 1; transform: none; }
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--kpi-col); border-radius: 12px 12px 0 0;
}
.kpi-label { font-size: 10px; color: var(--text3); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; font-weight: 500; }
.kpi-val { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 4px; }
.kpi-delta { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.kpi-delta.up { background: rgba(13,158,110,.1); color: var(--green); }
.kpi-delta.down { background: rgba(225,29,72,.08); color: var(--rose); }

/* Chart row */
.mid-row { display: grid; grid-template-columns: 1fr 170px; gap: 10px; flex: 1; min-height: 0; }
.chart-card {
  background: var(--surf2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transition: opacity .4s .3s;
}
.chart-card.show { opacity: 1; }
.chart-header { display: flex; align-items: center; justify-content: space-between; }
.chart-title { font-size: 11.5px; font-weight: 600; color: var(--text); }
.chart-legend { display: flex; gap: 12px; }
.cl-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text3); }
.cl-dot { width: 7px; height: 7px; border-radius: 2px; }
.chart-canvas-wrap { flex: 1; position: relative; min-height: 0; }
canvas.saas-chart { position: absolute; inset: 0; width: 100%; height: 100%; }

.side-cards { display: flex; flex-direction: column; gap: 10px; }
.side-card {
  background: var(--surf2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; flex: 1;
  opacity: 0; transform: translateX(10px);
  transition: opacity .35s, transform .35s;
}
.side-card.show { opacity: 1; transform: none; }
.sc-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sc-val { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; color: var(--green); }
.ring-wrap { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
svg.ring { overflow: visible; }

/* Activity feed */
.feed-card {
  background: var(--surf2); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px 12px; opacity: 0; transition: opacity .4s .5s;
  margin-bottom: 2px;
}
.feed-card.show { opacity: 1; }
.feed-title { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; }
.feed-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--border); font-size: 10.5px; color: var(--text2);
  opacity: 0; transition: opacity .3s;
}
.feed-row:last-child { border-bottom: none; }
.feed-row.show { opacity: 1; }
.feed-ico { font-size: 13px; width: 20px; text-align: center; }
.feed-time { margin-left: auto; color: var(--text3); font-size: 9.5px; font-family: 'JetBrains Mono', monospace; }

/* ══ JIRA BOARD ═════════════════════════════════════════════════════════════ */
#panel-jira { display: flex; flex-direction: column; }
.jira-inner { flex: 1; display: flex; flex-direction: column; gap: 0; overflow: hidden; }

.jira-topbar {
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border); background: var(--surf2);
}
.jt-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); }
.jt-breadcrumb b { color: var(--text); font-weight: 500; }
.jt-breadcrumb span { opacity: .4; }
.jt-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.jt-btn {
  font-size: 10.5px; padding: 4px 11px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text2); cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.jt-btn.blue { background: var(--accent); color: #fff; border-color: transparent; }

.sprint-header {
  padding: 8px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border); background: var(--surf2); font-size: 11px;
}
.sprint-name { font-weight: 600; color: var(--text); }
.sprint-dates { color: var(--text3); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.sprint-progress-wrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sprint-bar-track { width: 100px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.sprint-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--accent),var(--cyan)); transition: width 1.5s ease; }
.sprint-pct { font-size: 10px; color: var(--accent); font-weight: 600; font-family: 'JetBrains Mono', monospace; width: 32px; text-align: right; }

.jira-board { flex: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); overflow: hidden; }
.jira-col { background: var(--bg); display: flex; flex-direction: column; overflow: hidden; border-top: 2px solid transparent; }
/* ── Column header — real Jira gray style ── */
.jira-col-head {
  padding: 9px 12px 8px; display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid #DFE1E6; flex-shrink: 0;
  background: #F4F5F7; /* Jira column header gray */
}
.jch-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: #42526E; /* Jira text-subtle */
}
.jch-count {
  font-size: 10px; padding: 1px 7px; border-radius: 10px;
  font-weight: 600; background: #DFE1E6; color: #42526E;
  font-family: 'JetBrains Mono', monospace;
}
.jira-tickets { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; scrollbar-width: none; }
.jira-tickets::-webkit-scrollbar { display: none; }

/* ── Ticket card — real Jira layout ── */
.ticket {
  background: var(--surface); border: 1px solid #DFE1E6; border-radius: 6px;
  padding: 10px 10px 8px 11px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(13,27,46,.10), 0 1px 2px rgba(13,27,46,.06);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .15s, opacity .35s ease;
  opacity: 0;
  transform: translateY(14px);
}
.ticket.in { opacity: 1; transform: translateY(0); }
.ticket:hover { box-shadow: 0 4px 16px rgba(13,27,46,.14), 0 1px 4px rgba(13,27,46,.08); border-color: #B3BAC5; }
.ticket.moving { opacity: .3; }
.ticket.hovered { box-shadow: 0 0 0 2px #4C9AFF, 0 4px 12px rgba(76,154,255,.2) !important; }

/* Top row: type icon + label chip */
.t-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.t-type-icon {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.t-label {
  font-size: 9px; padding: 2px 6px; border-radius: 3px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  line-height: 1.4;
}

/* Title */
.t-title {
  font-size: 13.5px; color: #172B4D; line-height: 1.4;
  margin-bottom: 8px; font-weight: 700;
  font-family: 'Syne', sans-serif;
}

/* Footer row: id · priority · story points · avatar */
.t-footer { display: flex; align-items: center; gap: 5px; }
.t-id {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: #5E6C84; font-weight: 500; /* Jira ticket-id gray */
  margin-right: auto;
}
.t-prio {
  display: inline-flex; align-items: center; flex-shrink: 0;
  width: 14px; height: 14px; justify-content: center;
}
.t-pts {
  font-size: 9.5px; font-weight: 600;
  background: #DFE1E6; color: #42526E;
  padding: 1px 5px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  min-width: 18px; text-align: center;
}
.t-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; flex-shrink: 0;
}

/* ══ TICKET ZOOM OVERLAY ════════════════════════════════════════════════════ */
#ticketZoom {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,27,46,0);
  backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background .4s, backdrop-filter .4s;
}
#ticketZoom.show {
  background: rgba(13,27,46,.45);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
.tz-card {
  width: min(500px, calc(100% - 24px));
  background: #ffffff;
  border-radius: 20px; overflow: hidden;
  border: none;
  box-shadow: 0 32px 80px rgba(13,27,46,.30), 0 8px 24px rgba(13,27,46,.16), 0 0 0 1px rgba(13,27,46,.06);
  transform: scale(.9) translateY(20px); opacity: 0;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .35s;
  position: relative; z-index: 1;
}
#ticketZoom.show .tz-card { transform: none; opacity: 1; }

/* ── Header strip — full-width colored band ── */
.tz-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px 15px;
  border-bottom: none;
}
.tz-header-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 5px 14px; border-radius: 20px; font-family: 'Inter', sans-serif;
}
.tz-id {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: rgba(13,27,46,.4); margin-left: auto;
}
.tz-close {
  background: rgba(13,27,46,.08); border: none; color: rgba(13,27,46,.5);
  font-size: 15px; cursor: pointer; width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.tz-close:hover { background: rgba(13,27,46,.15); color: #0D1B2E; }

/* ── Body ── */
.tz-body { padding: 24px 24px 20px; }
.tz-title {
  font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800;
  line-height: 1.2; color: #0D1B2E; letter-spacing: -.5px; margin-bottom: 0;
}
.tz-divider {
  height: 3px; border-radius: 2px; margin: 16px 0 18px; opacity: .9;
  width: 48px;
}
.tz-desc {
  font-size: 15px; color: #2d3748; line-height: 1.75;
  font-weight: 400; font-family: 'Inter', sans-serif;
}

/* ── Footer ── */
.tz-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 16px;
  background: #F7F9FB;
  border-top: 1px solid rgba(13,27,46,.07);
  gap: 12px;
}
.tz-status-wrap { display: flex; align-items: center; gap: 8px; }
.tz-status-from { padding: 4px 12px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .55; font-family: 'Inter', sans-serif; }
.tz-arrow { font-size: 14px; color: #94a3b8; animation: arrowPulse .9s infinite; opacity: 0; }
.tz-arrow.show { opacity: 1; }
@keyframes arrowPulse { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
.tz-status-to { padding: 4px 12px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: 0; transform: scale(.9); transition: opacity .4s .3s, transform .4s .3s; font-family: 'Inter', sans-serif; }
.tz-status-to.show { opacity: 1; transform: none; }

.confetti-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }


/* ─────────────────────────────────────────────────────────
   TEXT INTRO PANEL — node network animation
   ───────────────────────────────────────────────────────── */
#panel-text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Field fills the panel */
.node-field {
  position: absolute;
  inset: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.node-field.nf-fade-out {
  opacity: 0;
  transform: scale(.95);
}

/* SVG overlay for lines + ring */
.nc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ── Individual node boxes ─────────────────────────────────────────────── */
.node-box {
  position: absolute;
  width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--nb-col, var(--accent));
  border-radius: 16px;
  padding: 24px 22px 22px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 12px 40px rgba(13,27,46,.12), 0 3px 12px rgba(13,27,46,.07);
  opacity: 0;
  transform: scale(.88) translateY(8px);
  transition:
    opacity    .4s ease,
    transform  .4s cubic-bezier(.16,1,.3,1),
    box-shadow .3s ease,
    left       .9s cubic-bezier(.16,1,.3,1),
    top        .9s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.node-box.nb-show {
  opacity: 1;
  transform: none;
}
.nb-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
  margin-bottom: 7px;
  white-space: nowrap;
}
.nb-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

/* ── Connection lines ──────────────────────────────────────────────────── */
.nc-line {
  stroke: var(--accent);
  stroke-width: 1.8;
  opacity: 0;
  transition: opacity .5s ease;
}
.nc-line.show { opacity: .32; }

/* ── Circle ring ───────────────────────────────────────────────────────── */
.nc-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  opacity: 0;
  transition: opacity .5s ease;
}
.nc-ring.show { opacity: .28; }

/* Ring wrapper — slow spin */
.nc-ring-wrap {
  animation: ncRingRotate 12s linear infinite;
}
@keyframes ncRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Lines — breathing pulse */
@keyframes ncLinePulse {
  0%, 100% { opacity: .32; }
  50%       { opacity: .60; }
}
.nc-line.pulsing {
  animation: ncLinePulse 2.4s ease-in-out infinite;
}

/* Centre logo badge */
.nc-logo {
  position: absolute;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1);
  z-index: 5;
  background: #fff;
  border-radius: 50%;
  padding: 18px;
  box-shadow:
    0 8px 32px rgba(13,27,46,.14),
    0 2px 10px rgba(13,27,46,.08),
    0 0 0 1px rgba(13,27,46,.06);
  pointer-events: none;
}
.nc-logo svg { width: 100%; height: 100%; display: block; }
.nc-logo.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@keyframes ncLogoPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 8px 32px rgba(13,27,46,.14), 0 2px 10px rgba(13,27,46,.08), 0 0 0 1px rgba(13,27,46,.06); }
  50%       { transform: translate(-50%,-50%) scale(1.07); box-shadow: 0 12px 40px rgba(55,150,187,.22), 0 3px 12px rgba(13,27,46,.10), 0 0 0 1px rgba(55,150,187,.2); }
}
.nc-logo.pulse { animation: ncLogoPulse 2.6s ease-in-out infinite; }

/* Ripple ring expanding outward from logo */
@keyframes ncRipple {
  0%   { r: 44; opacity: .4; }
  100% { r: 80; opacity: 0;  }
}
.nc-ripple {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0;
}
.nc-ripple.go { animation: ncRipple 2.2s ease-out infinite; }