/* The stat as a sticker — scaffolding for tests/sticker.html.

   Every option is a self-contained object: it brings its own ink and surface
   rather than inheriting --fg, because a sticker's whole point is that it does
   not change when the page underneath it does. That is also why each is shown on
   two grounds — the hero's colour moves as you scroll, and a sticker tuned to
   one ground only would break halfway down the page. */

.stickbeds { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .stickbeds { grid-template-columns: 1fr 1fr; } }

.stickbed {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: var(--s-14);
  border-radius: var(--r-md, 16px);
  background: #130F0C;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.stickbed--light { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
/* option 10 needs the sticker to run off an edge, so the bed has to clip */
.stickbed--edge { place-items: center start; overflow: hidden; padding-left: 0; }

/* shared sticker tokens — the brand orange is the sticker stock */
.stick {
  --ink: #FFFFFF;
  --stock: #FF4D00;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--ink);
  /* stickers are applied by hand, so none of them sit perfectly square */
  transform: rotate(var(--rot, -2.5deg));
  transition: transform .35s var(--ease);
  user-select: none;
}
.stick:hover { transform: rotate(0deg) scale(1.03); }

.stick__num {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stick__lab {
  font-size: var(--t-micro);
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  opacity: .82;
}

/* ── 01 · die-cut roundel ───────────────────────────────────────────────── */

.stick--roundel {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--stock);
  gap: var(--s-2);
  /* the inner ring is the die-cut's printed rule, inset from the cut edge */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 20px -8px rgba(0,0,0,.5);
  padding: var(--s-6);
}
.stick--roundel::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
}
.stick--roundel .stick__num { font-size: 30px; }

/* ── 02 · arced seal ────────────────────────────────────────────────────── */

.stick--seal { width: 190px; height: 190px; --rot: 0deg; }
.stick--seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__rim { fill: var(--stock); }
.seal__rule { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1; }
.seal__text {
  fill: #FFFFFF;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: .16em;
}
.stick--seal .stick__num { position: relative; font-size: 34px; }
.stick__plus { font-size: .6em; vertical-align: .5em; }
/* a seal turns rather than tilts — the arced words make rotation legible */
.stick--seal:hover { transform: rotate(8deg) scale(1.03); }

/* ── 03 · peeling corner ────────────────────────────────────────────────── */

.stick--peel {
  width: 190px;
  padding: var(--s-8) var(--s-6);
  gap: var(--s-3);
  background: var(--stock);
  border-radius: 6px;
  /* the sheet's own thin edge, then the gap between sheet and page */
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 10px 24px -10px rgba(0,0,0,.55);
  --rot: 2deg;
}
/* the lifted corner: a triangle folded back over the label, lighter because it
   is showing the sticker's own backing */
.peel {
  position: absolute;
  right: 0; bottom: 0;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, transparent 50%, #FFD9C7 50%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-right-radius: 6px;
  transition: width .35s var(--ease), height .35s var(--ease);
}
/* the shadow the lifted corner casts back onto the label */
.peel::before {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 100%; height: 100%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: -6px -6px 12px -4px rgba(0,0,0,.45);
}
.stick--peel:hover .peel { width: 52px; height: 52px; }

/* ── 04 · bumper sticker ────────────────────────────────────────────────── */

.stick--bumper {
  display: inline-block;
  padding: var(--s-3) var(--s-6);
  background: var(--stock);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  line-height: 19.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
  --rot: -1.5deg;
}
.stick--bumper b { font-weight: 400; letter-spacing: .04em; }

/* ── 05 · postage stamp ─────────────────────────────────────────────────── */

.stick--stamp {
  width: 180px;
  padding: 7px;
  background: var(--stock);
  --rot: 1.8deg;
  /* the perforation: a repeating radial mask bitten out of all four edges */
  -webkit-mask:
    radial-gradient(circle 5px at 0 0, transparent 96%, #000 100%) 0 0 / 14px 14px,
    linear-gradient(#000, #000) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
  mask:
    radial-gradient(circle 5px at 0 0, transparent 96%, #000 100%) 0 0 / 14px 14px,
    linear-gradient(#000, #000) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
}
.stamp__inner {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-6) var(--s-4);
  border: 1px solid rgba(255,255,255,.5);
}

/* ── 06 · holographic foil ──────────────────────────────────────────────── */

.stick--foil {
  --mx: 50%;
  width: 190px;
  padding: var(--s-8) var(--s-6);
  gap: var(--s-3);
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.55);
  --rot: -2deg;
  isolation: isolate;
}
/* the foil itself: a conic sweep of the brand hues, moved by the pointer */
.stick--foil::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from calc(var(--mx) * 3.6),
    #FF4D00, #FFE600, #87B3FF, #FFDAF6, #0064F3, #FF4D00);
  filter: blur(6px) saturate(140%);
  opacity: .9;
  z-index: -1;
}
/* a thin scrim so the type stays readable over the sweep */
.stick--foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  z-index: -1;
}
.stick--foil .stick__num, .stick--foil .stick__lab { position: relative; }

/* ── 07 · embroidered patch ─────────────────────────────────────────────── */

.stick--patch {
  width: 190px;
  padding: var(--s-8) var(--s-6);
  gap: var(--s-3);
  border-radius: 14px;
  --rot: 1.4deg;
  /* felt: a fine noise-ish weave from two crossed micro-gradients */
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    var(--stock);
  /* the chain stitch: a dashed rule inset from the woven edge */
  box-shadow: inset 0 0 0 3px var(--stock), 0 8px 20px -10px rgba(0,0,0,.5);
}
.stick--patch::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed rgba(255,255,255,.7);
  border-radius: 9px;
}

/* ── 08 · punched tag ───────────────────────────────────────────────────── */

.stick--tag {
  width: 200px;
  padding: var(--s-8) var(--s-6) var(--s-8) var(--s-12);
  gap: var(--s-3);
  background: var(--stock);
  --rot: -4deg;
  /* the clipped corner and the punched hole are one cut: the polygon takes the
     corner, the radial mask takes the hole, so the ground shows through both */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  -webkit-mask: radial-gradient(circle 7px at 26px 50%, transparent 96%, #000 100%);
  mask: radial-gradient(circle 7px at 26px 50%, transparent 96%, #000 100%);
}

/* ── 09 · starburst ─────────────────────────────────────────────────────── */

.stick--burst { width: 186px; height: 186px; --rot: -6deg; }
.stick--burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stick--burst polygon { fill: var(--stock); }
.burst__body { position: relative; display: grid; place-items: center; gap: 2px; }
.stick--burst .stick__num { font-size: 28px; }

/* ── 10 · edge tab ──────────────────────────────────────────────────────── */

/* applied over the page's edge: the left half is off-canvas, so only the tab
   shows and the number reads as an object placed on the site */
.stick--tab {
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-8);
  gap: 2px;
  place-items: start;
  background: var(--stock);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  margin-left: -12px;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.5);
  --rot: -1.2deg;
}
.stick--tab .stick__num { font-size: 26px; }
.stick--tab .stick__lab { text-align: left; }

/* ── 11 · in the real hero ──────────────────────────────────────────────── */

.herodemo { background: #130F0C; padding-block: var(--s-20); }
.herodemo .hero__inner { display: grid; gap: var(--s-14); align-items: center; }
@media (min-width: 900px) { .herodemo .hero__inner { grid-template-columns: 1.1fr .9fr; } }
.herodemo .display { margin-bottom: var(--s-8); max-width: 14ch; }
.herodemo .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block: var(--s-8); }
.herodemo__bumper { margin-top: var(--s-4); }
.herodemo .hero__media { position: relative; }
/* the roundel is stuck over the media panel's corner, where the hero is empty */
.herodemo__roundel { position: absolute; left: -46px; bottom: -34px; }

@media (prefers-reduced-motion: reduce) {
  .stick, .stick:hover { transform: rotate(var(--rot, -2.5deg)); transition: none; }
  .peel, .stick--peel:hover .peel { transition: none; }
}