/* ============================================================================
 * patterns.css — how the brand's shapes get onto a page.
 *
 * The art lives in assets/brand as SVG. This file only places it: clipped into
 * a corner, tiled quietly behind a band, or drawn as a seam between sections.
 * Every placement is decorative, so every one is aria-hidden, and none of them
 * may ever carry meaning a reader needs.
 *
 * Contract: a .deco holds an <img> of the pattern, except .deco--tile, which
 * is a repeating background because it has nothing to point at.
 * ==========================================================================*/

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.deco img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Anything that is not decoration sits above it. Written as a sibling rule so
 * it holds for any container that carries a .deco, not just the ones that
 * happened to exist when this was written. A second .deco is excluded, so two
 * layers of decoration can sit side by side without one lifting above the
 * content. */
.deco ~ *:not(.deco) { position: relative; z-index: 1; }

/* A .deco may hold stacked layers, each drifting at its own rate. */
.deco__layer { position: absolute; inset: 0; }

/* --- hero art ------------------------------------------------------------*/
.deco--hero {
  top: -10%;
  right: -16%;
  width: min(760px, 80vw);
  aspect-ratio: 720 / 780;
  opacity: 0.9;
}
@media (max-width: 899px) {
  .deco--hero { top: -4%; right: -46%; width: 126vw; opacity: 0.22; }
}

/* The hero composition is drawn three times: quarters and halves behind,
 * discs in the middle, rings in front, each layer drifting at its own rate.
 * Every layer is inset by the same proportion, so they scale together and stay
 * registered, and the overhang means a drift never uncovers an edge. */
.deco--hero .deco__layer { inset: -5%; }

/* --- corner clips --------------------------------------------------------
 * A card wears one. Six variants exist so a grid never repeats itself.
 * ------------------------------------------------------------------------*/
.deco--corner {
  top: 0;
  right: 0;
  width: min(320px, 58%);
  aspect-ratio: 1;
  opacity: 0.8;
}
.deco--corner img { object-fit: cover; object-position: top right; }

/* The half turn is on the image, not on the box, so the box's own transform
 * stays free for a parallax drift. */
.deco--corner-bl {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}
.deco--corner-bl img { transform: rotate(180deg); }

/* --- quiet tile ----------------------------------------------------------*/
.deco--tile {
  inset: 0;
  width: auto;
  height: auto;
  background: url('/assets/brand/pattern-tile.svg') 0 0 / 240px 240px repeat;
  opacity: 0.05;
}
.band--dark .deco--tile { opacity: 0.08; }

/* --- glyphs --------------------------------------------------------------
 * Flat, one accent, sized by the box that holds them. No blur, no inner
 * shadow, no specular highlight: this is not glassmorphism.
 * ------------------------------------------------------------------------*/
.glyph {
  width: 48px;
  height: 48px;
  flex: none;
  background-color: var(--violet-tint);
  border-radius: var(--r);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}
.band--dark .glyph { background-color: rgba(255, 255, 255, 0.08); }
.glyph--wallets  { background-image: url('/assets/brand/glyph-wallets.svg'); }
.glyph--topup    { background-image: url('/assets/brand/glyph-topup.svg'); }
.glyph--payments { background-image: url('/assets/brand/glyph-payments.svg'); }
.glyph--transfer { background-image: url('/assets/brand/glyph-transfer.svg'); }
.glyph--withdraw { background-image: url('/assets/brand/glyph-withdraw.svg'); }
.glyph--refunds  { background-image: url('/assets/brand/glyph-refunds.svg'); }
.glyph--reports  { background-image: url('/assets/brand/glyph-reports.svg'); }
.glyph--connect  { background-image: url('/assets/brand/glyph-connect.svg'); }
.glyph--notifications { background-image: url('/assets/brand/glyph-notifications.svg'); }
.glyph--tile { background: none; overflow: hidden; }
.glyph--tile img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }