/* Shared card component for the Supply Chain Lab.
   Extracted verbatim from index.html so the landing page and every tool
   page render the same card. Cascade order below is the original order:
   base card, then the canvas-face rules, then the reveal and grid stagger. */

.card{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;min-height:272px;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s;}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,84,.14);border-color:transparent;}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto;}
.card-num{font-size:13px;font-weight:700;color:var(--line);transition:color .4s;}
.card:hover .card-num{color:rgba(255,255,255,.5);}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:rgba(230,0,40,.08);padding:6px 11px;border-radius:100px;transition:all .4s;}
.card-body{position:absolute;left:30px;right:30px;bottom:30px;}
.card-name{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;transition:color .4s;}
.card-arrow{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--red);transition:gap .3s,color .4s;}
.card:hover .card-arrow{gap:12px;}
/* HOVER OVERLAY */
.card-overlay{position:absolute;inset:0;background:linear-gradient(160deg,var(--navy),#000054);color:#fff;padding:24px 26px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none;overflow:hidden;}
.card:hover .card-overlay{opacity:1;transform:translateY(0);}
.ov-tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff7d92;}
.ov-name{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:6px 0 4px;}
.ov-desc{font-size:13px;line-height:1.4;color:rgba(255,255,255,.82);flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;}
.ov-launch{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#fff;margin-top:auto;padding-top:10px;}
.ov-launch .ico{width:26px;height:26px;border-radius:50%;background:var(--red);display:inline-flex;align-items:center;justify-content:center;}
/* REVEAL */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}
.grid .card{transition-delay:var(--d,0s);}
.card .face-anim{position:absolute;left:26px;right:26px;top:60px;height:98px;z-index:1;pointer-events:none;}
.card .face-anim canvas{width:100%;height:100%;display:block;}
.card .card-top{position:relative;z-index:2;}
.card .card-body{z-index:2;}
.card .card-overlay{z-index:5;}
.card{border:1px solid rgba(0,0,40,.07);border-radius:22px;
  box-shadow:0 1px 2px rgba(10,10,40,.04),0 16px 34px -18px rgba(8,8,60,.18);
  transition:transform .6s var(--spring),box-shadow .6s var(--spring),border-color .4s;}
.card:hover{transform:translateY(-10px);box-shadow:0 2px 8px rgba(10,10,40,.06),0 44px 74px -28px rgba(6,6,60,.34);}
.card-name{letter-spacing:-.025em;}
/* per-row staggered reveal (desktop 3-col) */
.grid .card:nth-child(3n+2){transition-delay:.05s;}
.grid .card:nth-child(3n){transition-delay:.1s;}
.grid .card:nth-child(2n){transition-delay:.05s;}
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);}