/*!
 * geo.css — "Faceted" decorative overlay inspired by the Hi Sports Club logo.
 *
 * Drops the logo's geometric language (a diagonal palette-color triangle facet
 * + a halftone dot wedge) onto any element that already has a gradient/solid
 * background, breaking the clean gradient the way the logo tiles do.
 *
 * USAGE
 *   <link rel="stylesheet" href="app/css/geo.css" />
 *   <div class="geo rounded-full" style="background:linear-gradient(...)">…</div>
 *
 * The `.geo` class is the reusable "component". It auto-applies to the solid
 * gradient buttons and floating badges so existing markup needs no change; add
 * the class to any other coloured button/icon/badge to extend it.
 *
 * Colours come from the logo palette below. Overlays are translucent and use
 * blend modes, so they RECOLOUR the underlying gradient instead of covering it
 * (and never occlude centred text/icons — the motifs sit in the corners).
 */
:root{
  --geo-1:#ffb400; /* amber   */
  --geo-2:#ff5a00; /* orange  */
  --geo-3:#e6007e; /* magenta */
  --geo-4:#7a1fa2; /* purple  */
  --geo-5:#1e8bff; /* blue    */
  --geo-6:#12b39a; /* teal    */
  --geo-7:#3fae2c; /* green   */
}

/* Base: establish a clip + stacking context for the overlays. */
.geo,
.btn-primary,
.btn-lime,
.badge-float{ position:relative; overflow:hidden; isolation:isolate; }

/* Facet 1 — diagonal palette triangle in the top-left corner. */
.geo::before,
.btn-primary::before,
.btn-lime::before,
.badge-float::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(135deg,
    var(--geo-3) 0%, var(--geo-4) 40%, var(--geo-5) 75%, var(--geo-6) 100%);
  clip-path:polygon(0 0, 74% 0, 0 74%);
  opacity:.62; mix-blend-mode:overlay;
}

/* Facet 2 — halftone dot wedge in the bottom-right corner. */
.geo::after,
.btn-primary::after,
.btn-lime::after,
.badge-float::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,.85) 1.5px, transparent 1.9px) 0 0 / 7px 7px,
    linear-gradient(135deg, var(--geo-1), var(--geo-2));
  clip-path:polygon(100% 40%, 100% 100%, 40% 100%);
  opacity:.55; mix-blend-mode:overlay;
}