/* Peeling-corner sticker badge (Look C: Holo).
   Markup:
     <div class="sticker" role="note">
       <span class="sticker__face">Free · Updated Oct 2026</span>
       <span class="sticker__curl" aria-hidden="true"><span></span></span>
     </div>
   Needs tokens from tokens.css (--cc-lime, --cc-ink, --cc-font-mono). Ink on lime is 14.7:1.
   Tweak with custom properties on .sticker: --peel (corner size), --tilt, --peel-max (idle/hover size). */

@property --peel { syntax: '<length>'; inherits: true; initial-value: 22px; }

.sticker {
  --peel: 22px;
  --peel-max: 34px;
  --tilt: -3deg;
  position: relative;
  display: inline-block;
  transform: rotate(var(--tilt));
  transform-origin: 20% 80%;
  /* one shadow for sticker + curl so they read as one object lifting off the page */
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
  transition: --peel .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1);
  animation: sticker-breathe 5s ease-in-out 1.2s infinite;
  margin-bottom: 20px;
}

.sticker__face {
  position: relative;
  display: block;
  padding: 7px calc(16px + var(--peel) * .35) 7px 16px;
  font: 600 .75rem/1.2 var(--cc-font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cc-ink, #0A0A1F);
  background: var(--cc-lime, #B6F24A);
  /* die-cut white border like a real vinyl sticker */
  box-shadow: 0 0 0 3px var(--cc-text, #FAF7FF);
  border-radius: var(--sticker-radius, 10px);
  /* snip the bottom-right corner exactly along the fold line (x + y = W + H - peel).
     The two ends of the cut are softened with a 3-point arc (7px tangent length) so no corner is sharp. */
  clip-path: polygon(
    -4px -4px,
    calc(100% + 4px) -4px,
    calc(100% + 4px) calc(100% - var(--peel) - 11px),                      /* leave right edge */
    calc(100% + 4px - 1.74px) calc(100% - var(--peel) - 4px - 0.71px),     /* arc mid */
    calc(100% + 4px - 4.95px) calc(100% - var(--peel) - 4px + 4.95px),     /* join the fold */
    calc(100% - var(--peel) - 4px + 4.95px) calc(100% + 4px - 4.95px),     /* leave the fold */
    calc(100% - var(--peel) - 4px - 0.71px) calc(100% + 4px - 1.74px),     /* arc mid */
    calc(100% - var(--peel) - 11px) calc(100% + 4px),                      /* join bottom edge */
    -4px calc(100% + 4px));
  overflow: hidden;
}

/* holo foil layer over the lime: static iridescent bands (no colour animation).
   Blended and kept light-ish so the ink text stays AA-legible (ink on lime 14.7:1; ink on the
   strongest band, violet, is still above 4.5:1 at this opacity). */
.sticker__face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* restrained: just cyan and lime, so the sticker stays lime with a cool shimmer */
    repeating-linear-gradient(115deg,
      #22D3EE 0%, #B6F24A 18%, #22D3EE 36%);   /* starts and ends on cyan so the repeat has no seam */
  background-size: 260% 100%;
  background-position: var(--foil-x, 0%) 0;
  mix-blend-mode: hard-light;
  opacity: .75;
  z-index: -1;              /* under the text, above the lime (face is an isolated stacking context) */
  pointer-events: none;
  --foil-x: 35%;             /* static: the foil colours do not move */
}
/* fine diffraction hatching on the lime, like real holographic foil */
.sticker__face {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.14) 2px 3px);
  background-color: var(--cc-lime, #B6F24A);
  isolation: isolate;
}

/* glossy sheen across the face */
.sticker__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* folded-back flap: the cut triangle reflected across the fold line */
.sticker__curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--peel);
  height: var(--peel);
  /* soft shadow the flap casts onto the sticker */
  filter: drop-shadow(-2px -2px 2px rgba(10, 10, 31, .38));
}
.sticker__curl span {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  /* underside of the vinyl = raw holo foil at full strength: the face's lime layer is a printed top coat,
     the back is the bare iridescent film. Three layers, top to bottom:
       1. fold shading (light catch near the free corner, darker towards the crease)
       2. fine diffraction hatching
       3. full-saturation brand-colour foil (violet/cyan/lime), static */
  background:
    linear-gradient(to bottom right, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 42%, rgba(10,10,31,.38) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(135deg, #7B5CFF 0%, #22D3EE 30%, #B6F24A 55%, #22D3EE 78%, #7B5CFF 100%);
  background-size: 100% 100%, 100% 100%, 150% 150%;   /* small enough that the whole rainbow shows on the flap */
  background-position: 0 0, 0 0, var(--foil-x, 35%) var(--foil-x, 35%);
  --foil-x: 35%;             /* static: the foil colours do not move */
  /* the flap's far corner is the sticker's original corner folded over, so it keeps the same radius */
  border-top-left-radius: var(--sticker-radius, 10px);
  /* the two tips on the fold are rounded too, so the flap has no sharp corners */
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* peel a little further on hover/focus (pointer devices only) */
@media (hover: hover) {
  .sticker:hover { --peel: var(--peel-max); transform: rotate(calc(var(--tilt) + 1.5deg)) translateY(-1px); animation-play-state: paused; }
}
.sticker:focus-visible { --peel: var(--peel-max); outline: 2px solid var(--cc-cyan, #22D3EE); outline-offset: 6px; }

/* slow idle "breathing" so the peel reads as alive on touch screens too */
@keyframes sticker-breathe {
  0%, 100% { --peel: 22px; }
  50%      { --peel: 29px; }
}

@property --foil-x { syntax: '<percentage>'; inherits: false; initial-value: 35%; }

@media (prefers-reduced-motion: reduce) {
  .sticker { animation: none; transition: none; }
}

/* very small phones: slightly smaller type and corner so it never crowds the headline */
@media (max-width: 360px) {
  .sticker { --peel: 18px; --peel-max: 26px; }
  .sticker__face { font-size: .68rem; }
}