/* ============================================================================
 * tree-art.css — the photograph behind each capability card's root node.
 *
 * A SEPARATE FILE ON PURPOSE. homecards.js and homecards.css are a working
 * module; this needs nothing from either of them, because homecards.js already
 * stamps `data-hc="<deck id>"` on every card (homecards.js:368) and the root
 * node is `.hc-n-in`. That is enough to hang artwork on from the outside, so
 * the module is not touched and this whole feature can be removed by deleting
 * one file and one <link>.
 *
 * THE PICTURES. web/src/assets/tree/*.jpg, generated once by
 * tools/gen-tree-art.mjs and committed. Seven images, 256x256, 1-3 KB each,
 * 15 KB for the set — deliberately in the same matte-studio world as the
 * landing page's props (web/src/assets/props), because the app and the front
 * page should look like one company.
 *
 * WHY THE ROOT NODE AND NOT THE CHILDREN. Each card says "give the app THIS,
 * get THESE back". The picture belongs to the thing the school hands over — the
 * marks register, the admission form — not to the documents that come out of
 * it. A photograph on every child node would also be seven times the bytes to
 * say something the labels already say.
 *
 * LEGIBILITY FIRST. The image sits BEHIND the icon and label at low opacity,
 * never under running text at full strength. The label keeps its own colour and
 * the node keeps its own background; the photograph is a wash, not a backdrop
 * the text has to fight. If a file is missing the rule simply does nothing —
 * there is no broken-image state to design around.
 * ==========================================================================*/

/* The stacking: the wash goes on ::after so it sits over the node's own
   background, and the real content is lifted above it. Without the second rule
   the icon and label would be under the wash rather than over it. */
.hc-n-in { position: relative; overflow: hidden; }
.hc-n-in > * { position: relative; z-index: 1; }

.hc-n-in::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;                    /* never eats the tap on a root node */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;                              /* nothing until a picture is named */
  transition: opacity .45s ease;
}

/* LOADED WHEN THE NETWORK ALLOWS — the requirement this artwork was asked for
   under. On a metered or data-saver connection no background-image is ever
   declared, so the bytes are never requested; the card falls back to its icon,
   which is exactly the designed no-picture state. */
@media (prefers-reduced-data: no-preference) {
  .hc-card[data-hc="school"]    .hc-n-in::after { background-image: url('../assets/tree/school.jpg');    opacity: .15; }
  .hc-card[data-hc="admission"] .hc-n-in::after { background-image: url('../assets/tree/admission.jpg'); opacity: .15; }
  .hc-card[data-hc="marks"]     .hc-n-in::after { background-image: url('../assets/tree/marks.jpg');     opacity: .15; }
  .hc-card[data-hc="chapter"]   .hc-n-in::after { background-image: url('../assets/tree/chapter.jpg');   opacity: .15; }
  .hc-card[data-hc="staff"]     .hc-n-in::after { background-image: url('../assets/tree/staff.jpg');     opacity: .15; }
  .hc-card[data-hc="fees"]      .hc-n-in::after { background-image: url('../assets/tree/fees.jpg');      opacity: .15; }
  .hc-card[data-hc="money"]     .hc-n-in::after { background-image: url('../assets/tree/money.jpg');     opacity: .15; }
}

/* Dark themes need it fainter: the pictures are shot on a near-white ground, so
   at the light theme's strength they read as a pale patch on a dark node. */
[data-theme="dark"] .hc-n-in::after,
[data-skin="neu-dark"] .hc-n-in::after { opacity: .09; }

/* A wash is decoration. Anyone who has asked for less motion still gets the
   picture — it simply arrives without the fade. */
@media (prefers-reduced-motion: reduce) { .hc-n-in::after { transition: none; } }

/* Printed pages are ink on paper: a grey wash behind a heading is wasted toner
   and, on a laser printer, a muddy band. */
@media print { .hc-n-in::after { display: none; } }