/* bento-skin.css : the "what I build" grid, read as two halves.
   The picture sits on white and the words sit on navy, so the eye knows which
   half is moving and which half is to be read. Loaded after hex.css.
   Daz, 26 Oct 2026. */

:root {
  /* the same lattice as the hero, drawn in a pale blue that survives on navy */
  --hx-iso-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36.95'%3E%3Cpath d='M0 0L64 36.95M64 0L0 36.95' stroke='%23A9C2FF' stroke-width='0.75'/%3E%3C/svg%3E");
}

/* ---------- 1. The navy half ---------- */
.bento_tile { background: #fff; }

.bento_caption {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hx-ink, #142853);
  padding: 1.15rem 1.25rem 1.3rem;
  flex: 1 1 auto;
}

/* the lattice, fading away from the top right corner so the words stay clean */
.bento_caption::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hx-iso-navy);
  opacity: .22;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(130% 115% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 78%);
  mask-image: radial-gradient(130% 115% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 78%);
}

/* one soft wash lifts the top right corner, so the panel is not a flat slab */
.bento_caption::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(118% 100% at 100% 0%, rgba(51, 96, 255, .26) 0%, rgba(51, 96, 255, .09) 38%, transparent 72%);
}

/* ---------- 2. Type on navy ---------- */
.bento_caption h3 { color: #fff; }
.bento_caption p { color: #D6DFFF; }

.bento_caption .bento_chip {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.bento_caption .bento_receipt { color: rgba(255, 255, 255, .68); }
.bento_caption .bento_receipt::before { background: #9DB6FF; }

/* ---------- 3. The join between the two halves ---------- */
.bento_scene { border-bottom: 0; }
.bento_tile[data-scene="web"] .bento_scene { border-left: 0; }

/* ---------- 4. Focus: the card that is moving says so, quietly ---------- */
.bento_tile { transition: border-color .25s var(--hx-ease, ease); }
.bento_tile[data-focus="true"] { border-color: var(--hx-ink, #142853); }
.bento_tile[data-focus="true"] .bento_caption::after { opacity: 1; }
.bento_caption::after { opacity: .62; transition: opacity .45s var(--hx-ease, ease); }

/* a still amber dot marks the card that is playing: a signal, not another moving part */
.bento_caption h3 { position: relative; }
.bento_caption h3::after {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-left: .5rem;
  vertical-align: .08em;
  border-radius: 50%;
  background: #FEC84B;
  opacity: 0;
  transition: opacity .35s var(--hx-ease, ease);
}
.bento_tile[data-focus="true"] .bento_caption h3::after { opacity: 1; }

/* ---------- 5. The glow that followed the pointer is retired ---------- */
.bento_fx, .bento_glow { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bento_caption h3::after { display: none; }
  .bento_caption::after, .bento_tile { transition: none; }
}