/* ============================================================
   Discovery-call explainer — scene animations.
   Builds on explainer.css (vars/fonts) + site.css (layout).
   All loop; paused when the .scene is off-screen.
   ============================================================ */

body.js .scene:not(.live) *{ animation-play-state:paused !important; }

.canvas{ position:relative; width:100%; min-height:280px; display:grid; place-items:center; }

/* shared atoms ------------------------------------------------ */
.fold{ display:inline-block; width:14px; height:11px; border-radius:2px 2px 3px 3px;
  background:var(--terra-3); position:relative; flex:none; }
.fold::before{ content:""; position:absolute; top:-4px; left:0; width:7px; height:4px;
  border-radius:2px 2px 0 0; background:var(--terra-3); }

/* ============================================================
   A · INTELLIGENCE LAYER — top layer over agents over data
   ============================================================ */
.il{ min-height:320px; }
.il .stack{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:560px; }
.il .top{
  width:100%; text-align:center; padding:18px 16px; border-radius:16px;
  background:var(--terra); color:#fff; box-shadow:var(--shadow-m);
  animation:il-glow 6s ease infinite;
}
.il .top b{ font-family:'Newsreader',serif; font-weight:500; font-size:20px; display:block; }
.il .top small{ display:block; margin-top:3px; font-size:11.5px; color:#FBEFE8; letter-spacing:.02em; }
@keyframes il-glow{ 0%,100%{ box-shadow:var(--shadow-m) } 50%{ box-shadow:0 0 0 5px var(--terra-wash), var(--shadow-m) } }
.il .pipe{ width:2px; height:14px; background:var(--terra-3); }
.il .agents{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; width:100%; }
.il .ag{
  text-align:center; font-size:12px; font-weight:600; color:var(--ink); line-height:1.25;
  background:var(--panel); border:1px solid var(--terra-3); border-radius:12px; padding:12px 8px;
  box-shadow:var(--shadow-s); opacity:0; transform:translateY(8px);
}
.il .a1{ animation:il-up 6s ease infinite -.0s; }
.il .a2{ animation:il-up 6s ease infinite -.2s; }
.il .a3{ animation:il-up 6s ease infinite -.4s; }
.il .a4{ animation:il-up 6s ease infinite -.6s; }
@keyframes il-up{ 0%{ opacity:0; transform:translateY(8px) } 14%{ opacity:1; transform:none } 88%{ opacity:1 } 100%{ opacity:1 } }
.il .data{
  width:100%; text-align:center; font-family:'Spline Sans Mono',monospace; font-size:12px;
  color:var(--ink-3); background:var(--panel-2); border:1px dashed var(--line);
  border-radius:12px; padding:13px 12px;
}

/* ============================================================
   B · DATA HUB — sources feed one place to ask
   ============================================================ */
.hub .lay{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:22px; width:100%; max-width:600px; }
.hub .srcs{ display:flex; flex-direction:column; gap:8px; }
.hub .src{
  display:flex; align-items:center; gap:9px; justify-content:space-between;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 13px;
}
.hub .src em{ font-style:normal; font-family:'Spline Sans Mono',monospace; font-size:11px; color:var(--terra); }
.hub .src.big{ border-color:var(--terra-3); color:var(--ink); background:var(--panel); }
.hub .s1{ animation:hb-lit 5.4s ease infinite -0s; }
.hub .s2{ animation:hb-lit 5.4s ease infinite -.3s; }
.hub .s3{ animation:hb-lit 5.4s ease infinite -.6s; }
.hub .s4{ animation:hb-lit 5.4s ease infinite -.9s; }
.hub .s5{ animation:hb-lit 5.4s ease infinite -1.2s; }
@keyframes hb-lit{ 0%,100%{ box-shadow:none } 10%{ box-shadow:0 0 0 3px var(--terra-wash) } 26%{ box-shadow:none } }
.hub .flow{ position:relative; width:74px; height:3px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px); }
.hub .flow .dotmove{ position:absolute; top:50%; left:0; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px var(--terra-wash); animation:hb-move 1.6s linear infinite; }
@keyframes hb-move{ 0%{ left:0; opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ left:100%; opacity:0 } }
.hub .core{
  width:120px; height:120px; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:var(--terra); color:#fff; box-shadow:var(--shadow-m); padding:14px;
  font-family:'Newsreader',serif; font-size:15px; line-height:1.2;
}

/* ============================================================
   C · DISCOVERY ROUTE — folder by folder, becomes the expert
   ============================================================ */
.route .lay{ display:grid; grid-template-columns:auto auto auto; align-items:center; gap:20px; }
.route .list{ position:relative; display:flex; flex-direction:column; gap:9px; width:172px; }
.route .item{
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:11px 13px;
}
.route .i1{ animation:rt-step 6s ease infinite -.0s; }
.route .i2{ animation:rt-step 6s ease infinite -.6s; }
.route .i3{ animation:rt-step 6s ease infinite -1.2s; }
@keyframes rt-step{
  0%,18%{ border-color:var(--line); background:var(--panel-2); box-shadow:none; }
  9%{ border-color:var(--terra); background:var(--panel); box-shadow:var(--shadow-m); }
  100%{ border-color:var(--line); background:var(--panel-2); box-shadow:none; }
}
.route .arrow{ color:var(--terra); font-size:24px; animation:rt-arr 6s ease infinite; }
@keyframes rt-arr{ 0%,40%{ opacity:0; transform:translateX(-6px) } 52%{ opacity:1; transform:none } 100%{ opacity:1 } }
.route .open{
  width:158px; background:var(--panel); border:1px solid var(--terra-3); border-radius:14px;
  padding:15px 14px; display:flex; flex-direction:column; gap:9px; text-align:center; box-shadow:var(--shadow-s);
  opacity:0; animation:rt-open 6s ease infinite;
}
@keyframes rt-open{ 0%,46%{ opacity:0; transform:scale(.9) } 58%{ opacity:1; transform:none } 92%{ opacity:1 } 100%{ opacity:0 } }
.route .file{ font-family:'Spline Sans Mono',monospace; font-size:12px; font-weight:600; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
.route .becomes{ font-size:12.5px; color:var(--ink-2); line-height:1.35; }
.route .becomes b{ font-family:'Newsreader',serif; font-weight:500; font-size:16px; color:var(--terra); }

/* ============================================================
   D · FINANCE PIPELINE — inbox → rules → posted to Xero
   ============================================================ */
.pipe .lay{ display:flex; align-items:stretch; gap:0; width:100%; max-width:600px; }
.pipe .fstage{
  position:relative; inset:auto;
  flex:1; text-align:center; background:var(--panel-2); border:1px solid var(--line); border-radius:13px;
  padding:15px 12px; display:flex; flex-direction:column; gap:5px;
}
.pipe .fstage b{ font-size:13px; color:var(--ink); }
.pipe .fstage small{ font-size:11px; color:var(--ink-3); line-height:1.3; }
.pipe .s1{ animation:pp-lit 5.4s ease infinite -0s; }
.pipe .s2{ animation:pp-lit 5.4s ease infinite -1s; }
.pipe .s3{ animation:pp-lit 5.4s ease infinite -2s; }
@keyframes pp-lit{ 0%,100%{ border-color:var(--line); background:var(--panel-2); box-shadow:none; }
  10%{ border-color:var(--terra); background:var(--panel); box-shadow:var(--shadow-m); }
  30%{ border-color:var(--line); background:var(--panel-2); box-shadow:none; } }
.pipe .fstage.s3.ok{ animation:pp-ok 5.4s ease infinite -2s; }
@keyframes pp-ok{ 0%,100%{ border-color:var(--line); background:var(--panel-2); box-shadow:none; }
  10%{ border-color:var(--green); background:color-mix(in srgb,var(--green-soft) 30%,var(--panel)); box-shadow:var(--shadow-m); }
  30%{ border-color:var(--line); background:var(--panel-2); box-shadow:none; } }
.pipe .arr{ flex:none; align-self:center; width:30px; height:3px; position:relative;
  background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px); }
.pipe .arr .pk{ position:absolute; top:50%; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--terra); animation:pp-move 5.4s linear infinite; }
.pipe .a1 .pk{ animation-delay:-.4s; }
.pipe .a2 .pk{ animation-delay:-1.4s; }
@keyframes pp-move{ 0%{ left:0; opacity:0 } 4%{ opacity:1 } 14%{ left:100%; opacity:1 } 16%,100%{ opacity:0 } }

/* ============================================================
   STATIC components — agent grid, compare, timeline
   ============================================================ */
/* agent grid */
.agrid{ padding-left:calc(1.4em + 18px); margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.agrid .acard{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-s); }
.agrid .acard .at{ display:flex; align-items:center; gap:9px; font-family:'Newsreader',serif; font-size:18px; color:var(--ink); margin-bottom:6px; }
.agrid .acard .at .fold{ width:16px; height:13px; }
.agrid .acard .at .fold::before{ width:8px; }
.agrid .acard .ad{ font-size:13.5px; line-height:1.5; color:var(--ink-2); }

/* compare two-up */
.compare{ padding-left:calc(1.4em + 18px); margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compare .col{ border:1px solid var(--line); border-radius:15px; padding:18px 20px; background:var(--panel); }
.compare .col.pick{ border-color:var(--terra-3); background:color-mix(in srgb,var(--terra-wash) 22%,var(--panel)); }
.compare .col .ch{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:9px; }
.compare .col .tag-pick{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--terra); border-radius:6px; padding:3px 8px; }
.compare .col .tag-bp{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
.compare .col p{ font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0; }

/* timeline */
.timeline{ padding-left:calc(1.4em + 18px); margin-top:22px; display:flex; flex-direction:column; gap:0; }
.timeline .ph{ display:grid; grid-template-columns:auto 1fr; gap:18px; }
.timeline .rail{ display:flex; flex-direction:column; align-items:center; }
.timeline .rail .node{ width:13px; height:13px; border-radius:50%; background:var(--terra); flex:none; margin-top:4px; box-shadow:0 0 0 4px var(--terra-wash); }
.timeline .rail .stem{ width:2px; flex:1; background:var(--line); margin:5px 0; min-height:24px; }
.timeline .ph:last-child .stem{ display:none; }
.timeline .cnt{ padding-bottom:22px; }
.timeline .cnt .pt{ font-weight:700; font-size:15px; color:var(--ink); }
.timeline .cnt .pw{ font-family:'Spline Sans Mono',monospace; font-size:11.5px; color:var(--terra); margin-left:9px; }
.timeline .cnt .pd{ font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:4px; max-width:58ch; }

@media (max-width:620px){
  .agrid,.compare{ grid-template-columns:1fr; }
  .hub .lay{ grid-template-columns:1fr; gap:18px; justify-items:center; }
  .hub .flow{ transform:rotate(90deg); }
  .route .lay{ grid-template-columns:1fr; gap:14px; justify-items:center; }
  .route .arrow{ transform:rotate(90deg); }
  .il .agents{ grid-template-columns:repeat(2,1fr); }
  .pipe .lay{ flex-direction:column; align-items:stretch; }
  .pipe .fstage{ width:100%; }
  .pipe .arr{ width:3px; height:24px; align-self:center; background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 10px); }
}