/* ============================================================
   ORBIT — BENTO FEATURE MOSAIC  (bento-grid layer)
   M1 anchor dominance · M2 cursor-follow glow border ·
   M3 alive tiles · M4 varied aspect · M5 grid-template-areas
   ============================================================ */

.bento {
  display: grid; gap: clamp(12px, 1.2vw, 18px);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(190px, auto);
  grid-template-areas:
    "orbit orbit board board"
    "orbit orbit time  stat"
    "sync  api   api   stat";
}

.tile {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--space-820), var(--space-850));
  padding: clamp(18px, 1.5vw, 26px);
  display: flex; flex-direction: column;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--violet) 60%, transparent); }

/* §5 inner spotlight fill */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb, var(--cyan) 12%, transparent), transparent 62%);
}
.tile:hover::before { opacity: 1; }

/* M2 cursor-follow GLOW BORDER */
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb, var(--cyan) 75%, transparent), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t);
}
.tile:hover::after { opacity: 1; }

.tile > * { position: relative; z-index: 2; }

.tile__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); }
.tile__ic { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.tile__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.tile h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
.tile p { color: var(--text-muted); font-size: var(--step--1); margin-top: 6px; }

/* areas */
.t-orbit { grid-area: orbit; }
.t-board { grid-area: board; }
.t-time  { grid-area: time; }
.t-stat  { grid-area: stat; }
.t-sync  { grid-area: sync; }
.t-api   { grid-area: api; }

/* ---- ANCHOR: live orbital view (M1 dominance + M3 alive) ---- */
.t-orbit { justify-content: space-between; background: linear-gradient(180deg, var(--space-850), var(--space-820)); }
.t-orbit .tile__body { position: absolute; inset: 0; z-index: 1; }
.t-orbit canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-orbit .tile__label { margin-top: auto; }
.t-orbit h3 { font-size: var(--step-2); }

/* ---- LIVE TASK BOARD (M3: drag-free live columns) ---- */
.board-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s-4); flex: 1; align-content: start; }
.board-col { background: color-mix(in srgb, var(--space-950) 50%, transparent); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px; }
.board-col .h { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.board-col .h .d { width: 6px; height: 6px; border-radius: 50%; }
.card-mini { background: var(--space-780); border: 1px solid var(--line); border-radius: 7px; padding: 7px 8px; margin-bottom: 6px; font-size: 11px; color: var(--text-mid); transition: transform var(--t) var(--spring), border-color var(--t); }
.card-mini:last-child { margin-bottom: 0; }
.card-mini .tag { display: inline-block; font-family: var(--font-mono); font-size: 8px; padding: 2px 6px; border-radius: 5px; margin-bottom: 5px; }
.tile:hover .card-mini.flick { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); }

/* ---- TIMELINE / VELOCITY (M3: animated bars) ---- */
.spark { display: flex; align-items: flex-end; gap: 5px; height: 62px; margin-top: auto; }
.spark span { flex: 1; background: linear-gradient(180deg, var(--cyan), var(--violet)); border-radius: 4px 4px 0 0; height: 20%; transform-origin: bottom; transform: scaleY(0.15); transition: transform 0.7s var(--ease-out); }
.t-time.is-in .spark span { transform: scaleY(1); }

/* ---- STAT (count-up, tall) ---- */
.t-stat { justify-content: space-between; background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 16%, var(--space-820)), var(--space-850)); }
.t-stat .big { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: auto; }
.t-stat .big .suffix { color: var(--cyan); }
.t-stat .sub { color: var(--text-mid); font-size: var(--step--1); margin-top: 8px; }

/* ---- SYNC / STATUS (live pulse) ---- */
.t-sync .pulse-row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); position: relative; flex: none; }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ok); animation: pulsering 2s var(--ease-out) infinite; }
@keyframes pulsering { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.t-sync .pulse-row span { font-size: var(--step--1); color: var(--text-mid); }

/* ---- API / CODE tile (pre-tokenized, caret) ---- */
.t-api { background: linear-gradient(180deg, var(--space-850), var(--space-950)); }
.code { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; margin-top: var(--s-4); color: var(--text-mid); overflow: hidden; }
.code .ln { display: block; white-space: pre; }
.code .kw { color: var(--violet-hi); } .code .fn { color: var(--cyan); } .code .st { color: var(--ok); } .code .cm { color: var(--text-faint); } .code .nm { color: #f0abfc; }
.code .caret { display: inline-block; width: 7px; height: 14px; background: var(--cyan); vertical-align: -2px; animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* responsive re-compose (M5) */
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "orbit orbit"
      "board board"
      "time  stat"
      "sync  stat"
      "api   api"; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr;
    grid-template-areas: "orbit" "board" "stat" "time" "api" "sync"; grid-auto-rows: minmax(170px, auto); }
  .t-orbit { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-mini, .spark span, .tile { transition: none; }
  .spark span { transform: scaleY(1); }
}