/* ════════════════════════════════════════════════════════════
   TRANSFORM FX — Cybertronian assembly motion system
   PrimeCircle platform. Loaded after styles.css; overrides are
   deliberate and kept at single-class specificity.

   Vocabulary:
   - servo easing: fast approach, slight overshoot, hard lock
   - ratchet: stepped rotation, like gear teeth
   - unfold: panels start as folded slabs and expand outward
     from the view's center line, staggered, then lock with a
     clunk + cyan seam flash.
════════════════════════════════════════════════════════════ */

:root{
  --tfx-servo:cubic-bezier(.22,1.08,.18,1);
  --tfx-snap:cubic-bezier(.7,0,.2,1);
  --tfx-dur:420ms;
  --tfx-stagger:45ms;
  --tfx-seam:rgba(24,191,255,.55);
  --tfx-seam-glow:rgba(24,191,255,.26);
}

/* ── PIECE ASSEMBLY (the signature) ─────────────────────────
   JS sets --tfx-i (stagger index), --tfx-dir (-1 above center,
   1 below) and transform-origin, then adds .tfx-piece. */
.tfx-piece{
  animation:
    tfx-unfold var(--tfx-dur) var(--tfx-servo) both,
    tfx-seam 260ms linear both;
  animation-delay:
    calc(var(--tfx-i,0) * var(--tfx-stagger)),
    calc(var(--tfx-i,0) * var(--tfx-stagger) + 290ms);
  will-change:transform,opacity;
}
@keyframes tfx-unfold{
  0%{opacity:0;transform:translateY(calc(var(--tfx-dir,1) * -14px)) scaleY(.06);}
  55%{opacity:1;transform:translateY(0) scaleY(1.02);}
  78%{transform:translateY(calc(var(--tfx-dir,1) * 2px)) scaleY(1);}
  100%{opacity:1;transform:none;}
}
/* seam light: cyan edge flash at the moment the plate locks */
@keyframes tfx-seam{
  0%,100%{box-shadow:0 0 0 0 rgba(24,191,255,0);}
  45%{box-shadow:0 0 0 1px var(--tfx-seam),0 0 22px var(--tfx-seam-glow);}
}

/* ── DRAWER / MODAL DEPLOY ──────────────────────────────────
   The opened panel itself slides in with a hard-stop settle;
   its inner pieces assemble via .tfx-piece. */
.tfx-deploy{
  animation:tfx-deploy 240ms var(--tfx-servo) both;
}
@keyframes tfx-deploy{
  0%{transform:translateX(18px);opacity:.35;}
  72%{transform:translateX(-2px);opacity:1;}
  100%{transform:none;opacity:1;}
}

/* ── ROBOTIC BUTTONS ────────────────────────────────────────
   Armor-plate chamfers on primary actions; hydraulic press on
   everything. Press-down is instant (transition:none) — servos
   don't ease into a stop. */
.btn-amber,.btn-danger,.modal-save,.generate-btn,.save-btn,.add-prompt-btn{
  border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.btn-secondary,.modal-cancel{
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
.btn-amber,.btn-secondary,.btn-danger,.modal-save,.modal-cancel,
.generate-btn,.save-btn,.add-prompt-btn,.icon-btn,.text-btn,.project-mini-btn{
  transition:
    transform .12s steps(2,end),
    background .1s linear,
    border-color .1s linear,
    color .1s linear;
}
.btn-amber:hover,.btn-secondary:hover,.btn-danger:hover,.modal-save:hover,
.modal-cancel:hover,.generate-btn:hover,.save-btn:hover,.add-prompt-btn:hover{
  transform:translateY(-1px);
}
.btn-amber:active,.btn-secondary:active,.btn-danger:active,.modal-save:active,
.modal-cancel:active,.generate-btn:active,.save-btn:active,.add-prompt-btn:active,
.icon-btn:active,.project-mini-btn:active{
  transform:translateY(1px);
  transition:none;
}
/* keyboard focus stays visible inside the chamfer */
.btn-amber:focus-visible,.btn-secondary:focus-visible,.btn-danger:focus-visible,
.modal-save:focus-visible,.modal-cancel:focus-visible,.generate-btn:focus-visible,
.save-btn:focus-visible,.add-prompt-btn:focus-visible{
  outline:2px solid var(--cyan,#18BFFF);
  outline-offset:-3px;
}

/* ── RATCHET DETAILS ────────────────────────────────────────
   Small rotations move in gear-steps, not smooth arcs. */
.project-row .chevron{transition:transform .18s steps(3,end);}
.nav-item.tfx-engage svg{animation:tfx-ratchet .22s steps(3,end);}
@keyframes tfx-ratchet{
  0%{transform:rotate(-14deg) scale(.92);}
  100%{transform:rotate(0) scale(1);}
}

/* ── DECEPTICON SIGNATURES ──────────────────────────────────
   Hostile contacts read differently before you read a word:
   jagged silhouette, red-violet tint — wrong on purpose. */
.oracle-monitor-signal:has(.status-badge.priority-high),
.oracle-monitor-signal:has(.status-badge.priority-critical){
  border:1px solid rgba(190,64,90,.5);
  border-radius:0;
  clip-path:polygon(0 8px,8px 0,calc(100% - 16px) 0,100% 12px,100% calc(100% - 8px),calc(100% - 8px) 100%,12px 100%,0 calc(100% - 14px));
  background:linear-gradient(165deg,rgba(46,12,20,.5),rgba(20,6,11,.42));
  box-shadow:inset 0 0 18px rgba(190,64,90,.08);
}
.oracle-monitor-signal:has(.status-badge.priority-high):hover,
.oracle-monitor-signal:has(.status-badge.priority-critical):hover{
  border-color:rgba(190,64,90,.85);
  box-shadow:inset 0 0 24px rgba(190,64,90,.14);
}

/* ── REDUCED MOTION: plain fade, no transforms ────────────── */
@media (prefers-reduced-motion:reduce){
  .tfx-piece{animation:tfx-fade .25s ease both !important;}
  .tfx-deploy,.nav-item.tfx-engage svg{animation:none !important;}
  .btn-amber:hover,.btn-secondary:hover,.btn-danger:hover,.modal-save:hover,
  .modal-cancel:hover,.generate-btn:hover,.save-btn:hover,.add-prompt-btn:hover,
  .btn-amber:active,.btn-secondary:active,.btn-danger:active,.modal-save:active,
  .modal-cancel:active,.generate-btn:active,.save-btn:active,.add-prompt-btn:active{
    transform:none;
  }
}
@keyframes tfx-fade{from{opacity:0;}to{opacity:1;}}