/* ============================================================
   ORBIT CHANNEL PREVIEWS
   Hovering one of VERA's six channels raises a small mock of the
   job that channel does. Panels are built by orbit-preview.js and
   live inside each .tool-in, so they inherit the card's idle float.

   One rhythm across all six: the work builds (0, 1.3s), a cursor
   comes in and clicks (1.35, 2.1s), the outcome replaces the
   button (2.15s+). Everything is gated behind .on, so nothing runs
   until a panel is looked at and re-adding the class replays it.
   ============================================================ */

.tool-in{position:relative}
/* The pill is a small target. This invisible collar means the preview opens
   when the cursor gets near the card rather than exactly on it, it pairs
   with the magnetic lean in engine.js, which brings the card the rest of the
   way. Sits behind the panel so it never eats the panel's own space. */
.tool-in::before{content:"";position:absolute;inset:-26px;border-radius:26px;z-index:0}

.tprev{
  position:absolute;z-index:8;width:262px;padding:13px 14px 12px;
  background:#fff;border:1px solid var(--rule-soft);border-radius:var(--r3);
  box-shadow:0 1px 2px rgba(13,27,31,.05),0 18px 44px rgba(13,27,31,.16);
  font-family:var(--sans);font-size:10.5px;line-height:1.45;
  letter-spacing:0;text-transform:none;color:var(--ink);
  text-align:left;white-space:normal;
  opacity:0;pointer-events:none;
  transform:translateY(6px) scale(.94);transform-origin:50% 0;
  transition:opacity .22s ease,transform .32s cubic-bezier(.33,1,.68,1);
}
.tprev-down{top:calc(100% + 14px)}
.tprev-up{bottom:calc(100% + 14px);transform-origin:50% 100%;transform:translateY(-6px) scale(.94)}
.tprev-l{left:0}
.tprev-r{right:0}
.tprev.on{opacity:1;transform:translateY(0) scale(1)}

/* top and middle rows: open outward, level with the card */
.tprev-out-l,.tprev-out-r{top:50%;transform:translateY(-50%) scale(.94)}
.tprev-out-l{right:calc(100% + 14px);transform-origin:100% 50%}
.tprev-out-r{left:calc(100% + 14px);transform-origin:0 50%}
.tprev.tprev-out-l.on,.tprev.tprev-out-r.on{transform:translateY(-50%) scale(1)}

.tool.tprev-hot{z-index:9}

.tp-search{width:278px}
.tp-ads{width:292px}
.tp-email{width:238px}
.tp-content{width:218px}

/* ---- shared furniture ------------------------------------- */
.tprev .tp-av{width:20px;height:20px;border-radius:50%;background:var(--mist);flex-shrink:0}
.tprev .tp-av-2{background:var(--signal)}
.tprev .tp-av-you{background:var(--ink) url(assets/tom-avatar.jpg?v=202608171800) center/cover}
.tprev .tp-bars{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.tprev .tp-b{display:block;height:4px;border-radius:2px;background:var(--rule-soft)}
.tprev .tp-b.w1{width:56%}
.tprev .tp-b.w2{width:34%}
.tprev .tp-b.w3{width:78%}
.tprev .tp-note{font-family:var(--mono);font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.tprev .tp-t{display:block;white-space:nowrap;overflow:hidden;width:0;color:var(--ink-soft)}
.tprev .tp-caret{display:inline-block;width:1.5px;height:10px;background:var(--ink);
  vertical-align:-1px;opacity:0;flex-shrink:0}
@keyframes tp-blink{0%,49%{opacity:.9}50%,100%{opacity:0}}
@keyframes tp-type{to{width:100%}}
@keyframes tp-in{to{opacity:1;transform:none}}
@keyframes tp-grow{to{transform:scaleX(1)}}

/* lines that type themselves in, one after the other */
.tprev.on .tp-t{animation:tp-type .42s steps(24,end) forwards}
.tprev.on .tp-t.t1{animation-delay:.18s}
.tprev.on .tp-t.t2{animation-delay:.60s}
.tprev.on .tp-t.t3{animation-delay:1.02s}

/* ---- the click ------------------------------------------- */
.tprev .tp-end{position:relative;height:26px;margin-top:11px}
.tprev .tp-act,.tprev .tp-done{position:absolute;inset:0;display:flex;align-items:center}
.tprev .tp-act{justify-content:space-between;gap:8px}
.tprev .tp-btnwrap{position:relative;flex-shrink:0}
.tprev .tp-btn{display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 11px;border-radius:7px}
.tprev .tp-cursor{position:absolute;left:calc(50% - 3px);top:calc(50% - 1px);
  width:13px;height:17px;fill:var(--ink);stroke:#fff;stroke-width:1.1;
  opacity:0;z-index:3;pointer-events:none}
.tprev.on .tp-cursor{animation:tp-point .95s cubic-bezier(.4,0,.25,1) 1.35s forwards}
@keyframes tp-point{
  0%{opacity:0;transform:translate(30px,24px) scale(1)}
  22%{opacity:1}
  58%{opacity:1;transform:translate(0,0) scale(1)}
  68%{transform:translate(0,0) scale(.82)}
  80%{transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(0,0) scale(1)}
}
.tprev.on .tp-btn{animation:tp-press .3s ease 1.95s}
@keyframes tp-press{0%{transform:scale(1)}42%{transform:scale(.9)}100%{transform:scale(1)}}
.tprev .tp-btnwrap::after{content:"";position:absolute;inset:0;border-radius:7px;
  border:1px solid var(--signal-deep);opacity:0;pointer-events:none}
.tprev.on .tp-btnwrap::after{animation:tp-ripple .5s ease-out 1.98s}
@keyframes tp-ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

.tprev .tp-act{opacity:1}
.tprev.on .tp-act{animation:tp-actout .28s ease 2.14s forwards}
@keyframes tp-actout{to{opacity:0}}
.tprev .tp-done{opacity:0;transform:translateY(5px);gap:6px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-800)}
.tprev .tp-done .tico{width:11px;height:11px;stroke-width:2.6;color:var(--signal-deep)}
.tprev.on .tp-done{animation:tp-in .4s cubic-bezier(.33,1,.68,1) 2.22s forwards}

/* ============================================================
   1. CONTENT, a carousel post, slide by slide, then published
   ============================================================ */
.tp-content .tp-car{overflow:hidden;border-radius:8px;background:var(--abyss);
  box-shadow:inset 0 0 0 1px rgba(13,27,31,.1)}
.tp-content .tp-track{display:flex;width:400%}
.tp-content.on .tp-track{animation:tp-carousel 1.5s cubic-bezier(.65,0,.2,1) .2s forwards}
@keyframes tp-carousel{
  0%,16%{transform:translateX(0)}
  26%,44%{transform:translateX(-25%)}
  54%,72%{transform:translateX(-50%)}
  82%,100%{transform:translateX(-75%)}
}
.tp-content .tp-slide{width:25%;flex-shrink:0}
/* the slides are 4:5, so the frame is too, no cropping of Tom's artwork */
.tp-content .tp-simg{display:block;width:100%;aspect-ratio:4/5;background:var(--abyss);
  background-size:cover;background-position:center}
.tp-content .tp-dots{display:flex;gap:4px;justify-content:center;margin-top:9px}
.tp-content .tp-dots i{width:5px;height:5px;border-radius:50%;background:var(--rule-soft)}
.tp-content.on .tp-dots i{animation-duration:1.35s;animation-delay:.2s;
  animation-timing-function:step-end;animation-fill-mode:forwards}
.tp-content.on .tp-dots i:nth-child(1){animation-name:tp-dot1}
.tp-content.on .tp-dots i:nth-child(2){animation-name:tp-dot2}
.tp-content.on .tp-dots i:nth-child(3){animation-name:tp-dot3}
.tp-content.on .tp-dots i:nth-child(4){animation-name:tp-dot4}
@keyframes tp-dot1{0%{background:var(--ink)}22%{background:var(--rule-soft)}}
@keyframes tp-dot2{0%{background:var(--rule-soft)}22%{background:var(--ink)}50%{background:var(--rule-soft)}}
@keyframes tp-dot3{0%{background:var(--rule-soft)}50%{background:var(--ink)}78%{background:var(--rule-soft)}}
@keyframes tp-dot4{0%{background:var(--rule-soft)}78%{background:var(--ink)}}

/* ============================================================
   2. CONNECTIONS, a message worth answering, then the request
   ============================================================ */
.tp-conn .tp-person{display:flex;align-items:center;gap:8px;
  padding-bottom:9px;border-bottom:1px solid var(--rule-soft)}
.tp-conn .tp-bubble{margin-top:10px;padding:9px 10px;border-radius:10px 10px 10px 3px;
  background:var(--paper);display:flex;flex-direction:column;gap:2px}

/* ============================================================
   3. COMMENTS, someone's post, your line written underneath
   ============================================================ */
.tp-comment .tp-post{display:flex;align-items:center;gap:8px}
.tp-comment .tp-postbody{display:flex;flex-direction:column;gap:4px;margin:8px 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--rule-soft)}
.tp-comment .tp-input{display:flex;align-items:flex-start;gap:8px}
.tp-comment .tp-inp{flex:1;min-width:0;padding:7px 9px;border-radius:9px;
  border:1px solid var(--rule-soft);background:var(--paper);
  display:flex;flex-direction:column;gap:1px}
.tp-comment.on .tp-caret{animation:tp-blink .55s steps(1) .18s 3 forwards}

/* ============================================================
   4. SEARCH & AI, the answer card from section 01, with you in it
   ============================================================ */
.tp-search .tp-abar{display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-bottom:9px;border-bottom:1px solid var(--rule-soft)}
.tp-search .tp-adot{width:6px;height:6px;border-radius:50%;background:var(--signal-deep)}
.tp-search .tp-aq{display:flex;align-items:center;gap:2px;margin-top:10px;
  font-weight:600;font-size:11.5px;color:var(--ink)}
.tp-search .tp-aq .tp-t{color:var(--ink)}
.tp-search.on .tp-aq .tp-t{animation:tp-type .62s steps(30,end) .18s forwards}
.tp-search.on .tp-caret{animation:tp-blink .5s steps(1) .18s 3 forwards}
.tp-search .tp-aa{margin-top:9px;color:var(--ink-muted);opacity:0;transform:translateY(4px)}
.tp-search.on .tp-aa{animation:tp-in .34s ease .88s forwards}
.tp-search .tp-alist{list-style:none;margin:8px 0 0;display:flex;flex-direction:column;gap:5px}
.tp-search .tp-alist li{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:8px;
  opacity:0;transform:translateY(4px)}
.tp-search .tp-alist .an{font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  color:var(--ink-faint);flex-shrink:0}
.tp-search .tp-alist .am{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tp-search .tp-alist b{font-weight:600;font-size:10.5px}
.tp-search .tp-alist .ac{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
  color:var(--ink-faint)}
.tp-search .tp-alist .r1{background:rgba(184,224,232,.4);
  box-shadow:inset 0 0 0 1px rgba(74,155,170,.3)}
.tp-search .tp-alist .r1 .an{color:var(--blue-800)}
.tp-search.on .tp-alist li{animation:tp-in .36s cubic-bezier(.33,1,.68,1) forwards}
.tp-search.on .tp-alist .r1{animation-delay:1.14s}
.tp-search.on .tp-alist .r2{animation-delay:1.32s}
.tp-search.on .tp-alist .r3{animation-delay:1.50s}
.tp-search .tp-afoot{display:flex;align-items:center;gap:6px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-800);opacity:0;transform:translateY(4px)}
.tp-search .tp-afoot .tico{width:11px;height:11px;stroke-width:2.6;color:var(--signal-deep)}
.tp-search.on .tp-afoot{animation:tp-in .4s cubic-bezier(.33,1,.68,1) 1.78s forwards}

/* ============================================================
   5. EMAIL, the letter writes itself, folds down, and leaves
   ============================================================ */
.tp-email .tp-mail{position:relative;height:94px}
.tp-email .tp-sheet{position:absolute;left:50%;top:0;width:152px;height:64px;
  transform:translateX(-50%);background:var(--paper);border:1px solid var(--rule-soft);
  border-radius:7px;padding:11px 12px;display:flex;flex-direction:column;gap:6px;
  overflow:hidden;transform-origin:50% 100%}
.tp-email .tp-sb{display:block;height:4px;border-radius:2px;background:var(--rule-soft);
  transform:scaleX(0);transform-origin:0 50%}
.tp-email .tp-sb.l1{width:60%}
.tp-email .tp-sb.l2{width:100%}
.tp-email .tp-sb.l3{width:100%}
.tp-email .tp-sb.l4{width:46%}
.tp-email.on .tp-sb{animation:tp-grow .26s ease forwards}
.tp-email.on .tp-sb.l1{animation-delay:.20s}
.tp-email.on .tp-sb.l2{animation-delay:.40s}
.tp-email.on .tp-sb.l3{animation-delay:.60s}
.tp-email.on .tp-sb.l4{animation-delay:.80s}
/* on the click, the sheet folds down into the envelope waiting below it */
.tp-email.on .tp-sheet{animation:tp-fold .44s cubic-bezier(.6,0,.3,1) 2.00s forwards}
@keyframes tp-fold{
  0%{transform:translateX(-50%) scaleY(1) scaleX(1);opacity:1}
  78%{opacity:1}
  100%{transform:translateX(-50%) scaleY(.05) scaleX(.22);opacity:0}
}
.tp-email .tp-envelope{position:absolute;left:50%;bottom:0;
  width:40px;height:30px;margin-left:-20px;border-radius:7px;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;opacity:0}
.tp-email .tp-envelope .tico{width:17px;height:17px}
/* it takes the letter, lifts into the space the letter left, then goes */
.tp-email.on .tp-envelope{animation:tp-fly 1.15s cubic-bezier(.5,0,.25,1) 2.24s forwards}
@keyframes tp-fly{
  0%{opacity:0;transform:translateY(7px) scale(.68)}
  14%{opacity:1;transform:translateY(0) scale(1.04)}
  22%{transform:translateY(0) scale(1)}
  46%{opacity:1;transform:translateY(-30px) scale(1)}
  56%{opacity:1;transform:translateY(-33px) scale(1)}
  100%{opacity:0;transform:translate(72px,-96px) rotate(18deg) scale(.5)}
}
.tp-email .tp-trail{position:absolute;left:50%;bottom:40px;width:80px;height:1px;
  background:linear-gradient(90deg,transparent,var(--signal-deep));
  transform-origin:0 50%;transform:rotate(-46deg) scaleX(0);opacity:0}
.tp-email.on .tp-trail{animation:tp-trail .7s ease-out 2.92s forwards}
@keyframes tp-trail{
  0%{transform:rotate(-46deg) scaleX(0);opacity:0}
  40%{opacity:.7}
  100%{transform:rotate(-46deg) scaleX(1);opacity:0}
}
/* the letter is still in the air at the shared 2.22s, so this one waits */
.tp-email.on .tp-act{animation-delay:3.06s}
.tp-email.on .tp-done{animation-delay:3.14s}

/* ============================================================
   6. ADS, an ad written, priced, and pushed live
   ============================================================ */
.tp-ads .tp-adrow{display:flex;gap:10px;align-items:stretch}
.tp-ads .tp-ad{flex:1;min-width:0;padding:9px;border:1px solid var(--rule-soft);
  border-radius:9px;background:var(--paper);display:flex;flex-direction:column;gap:6px}
.tp-ads .tp-adimg{display:block;height:32px;border-radius:5px;
  background:linear-gradient(120deg,var(--mist),var(--signal));opacity:0}
.tp-ads.on .tp-adimg{animation:tp-in .34s ease .2s forwards}
.tp-ads .tp-ad .tp-b{transform:scaleX(0);transform-origin:0 50%}
.tp-ads.on .tp-ad .tp-b{animation:tp-grow .28s ease forwards}
.tp-ads.on .tp-ad .l1{animation-delay:.46s}
.tp-ads.on .tp-ad .l2{animation-delay:.66s}
.tp-ads .tp-adcta{align-self:flex-start;margin-top:1px;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-800);border:1px solid rgba(74,155,170,.4);border-radius:5px;padding:3px 6px;
  opacity:0;transform:translateY(4px)}
.tp-ads.on .tp-adcta{animation:tp-in .3s ease .88s forwards}
.tp-ads .tp-budget{width:92px;flex-shrink:0;padding:9px;border-radius:9px;
  background:rgba(184,224,232,.34);box-shadow:inset 0 0 0 1px rgba(74,155,170,.24);
  display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateX(10px)}
.tp-ads.on .tp-budget{animation:tp-in .42s cubic-bezier(.33,1,.68,1) 1.06s forwards}
.tp-ads .tp-blabel{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-800);opacity:.75}
.tp-ads .tp-bval{font-weight:600;font-size:15px;line-height:1;color:var(--ink)}
.tp-ads .tp-bbar{display:block;height:4px;border-radius:2px;background:rgba(13,27,31,.1);overflow:hidden}
.tp-ads .tp-bbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--signal-deep)}
.tp-ads.on .tp-bbar i{animation:tp-fill .8s cubic-bezier(.33,1,.68,1) 1.36s forwards}
@keyframes tp-fill{to{width:72%}}
.tp-ads .tp-breach{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
  color:var(--ink-muted)}

/* ---- small screens: the orbit is too tight for panels ---- */
@media (max-width:1100px){.tprev{display:none}}

/* ---- reduced motion: the finished state, no performance ---- */
@media (prefers-reduced-motion:reduce){
  .tprev,.tprev *{animation:none !important;transition:none !important}
  .tprev.on{opacity:1;transform:none}
  .tprev.on .tp-t{width:100%}
  .tprev .tp-cursor,.tprev .tp-act{display:none}
  .tprev.on .tp-done,.tprev.on .tp-aa,.tprev.on .tp-alist li,.tprev.on .tp-afoot,
  .tprev.on .tp-adcta,.tprev.on .tp-budget,.tprev.on .tp-adimg{opacity:1;transform:none}
  .tprev.on .tp-b,.tprev.on .tp-sb{transform:none}
  .tprev.on .tp-bbar i{width:72%}
  .tp-content .tp-track{transform:translateX(-75%)}
  .tp-email .tp-sheet{display:none}
  .tp-email .tp-envelope{opacity:1}
}