/* The bell subscribe button: a coral button with a brass bell, and the subscriber count beside it, on a black page.
   The script swings the bell and its clapper and draws the rings of sound; the colours are here. */
:root {
  --page: #000000;          /* the page */
  --ink: #fbf6f1;           /* the count, and the ring of the focus */
  --muted: #8a7a80;         /* the word over the count, and the hint */
  --coral: #ff5a47;         /* the button before subscribing */
  --coral-deep: #d63a2a;
  --on: #2b1d26;            /* the button once subscribed */
  --brass: #f2b544;         /* the bell */
  --brass-light: #ffe1a1;
  --brass-dark: #b07418;
  --wave: #ff8a3c;          /* the rings of sound */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Onest Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

/* ---------------------------------------------------------------- the button, its count and its hint */
.subscribe {
  display: grid;
  justify-items: start;
  gap: 12px;
}

/* the count sits beside the button; on a very narrow screen it goes under it */
.subscribe__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

/* the subscribers: the word over the number, whose figures roll */
.stat {
  display: grid;
  gap: 2px;
  margin: 0;
}

.stat dt {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat dd {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* the count, figure by figure: each figure has its own slot and the figures roll through it */
.count {
  display: inline-flex;
  color: var(--ink);
}

.slot {
  position: relative;
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  line-height: 1.2;
  /* the rolling figures fade at the top and bottom of their slot, like a drum seen from the front */
  -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}

.slot > span {
  display: block;
}

.subscribe__hint {
  min-height: 1.3em;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.subscribe__hint span {
  display: inline-block;
}

/* ---------------------------------------------------------------- the button */
.sub {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 28px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 color-mix(in srgb, var(--coral-deep) 80%, transparent),
    0 12px 24px -12px color-mix(in srgb, var(--coral) 90%, transparent);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.sub[aria-pressed='true'] {
  background: var(--on);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 12px 24px -14px rgba(20, 8, 16, 0.8);
}

@media (hover: hover) and (pointer: fine) {
  .sub[aria-pressed='false']:hover {
    background: color-mix(in srgb, var(--coral) 88%, #fff);
  }

}

/* subscribed, when it offers to unsubscribe it warms towards the coral: a press will undo it */
.sub.is-offering {
  background: color-mix(in srgb, var(--on) 80%, var(--coral));
}

.sub:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 4px;
}

html[data-using='pointer'] .sub:focus-visible {
  outline: none;
}

/* the bell sits in a round well; the rings of sound can spread well past it */
.sub__bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.4s ease;
}

.sub[aria-pressed='true'] .sub__bell {
  background: rgba(255, 255, 255, 0.08);
}

.sub__icon {
  position: relative;
  width: 38px;
  height: 38px;
  overflow: visible;
}

.sub__waves {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  overflow: visible;
  pointer-events: none;
}

.wave {
  fill: none;
  stroke: var(--wave);
  stroke-linecap: round;
}

.brass-a { stop-color: var(--brass-dark); }
.brass-b { stop-color: var(--brass-light); }
.brass-c { stop-color: var(--brass); }

.bell__body {
  fill: url(#brass);
  stroke: var(--brass-dark);
  stroke-width: 0.6;
}

.bell__loop {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.bell__shine {
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.65;
}

.bell__rod {
  stroke: var(--brass-dark);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.bell__ball {
  fill: var(--brass-dark);
}

/* the bar through the silenced bell: a line in the button's colour under a white one */
.bell__slash {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* an edge in the button's own colour, so the bar cuts the bell cleanly */
  filter: drop-shadow(1.4px 0 0 var(--slash-edge, var(--coral))) drop-shadow(-1.4px 0 0 var(--slash-edge, var(--coral)));
}

.sub[aria-pressed='true'] {
  --slash-edge: var(--on);
}

/* the three words sit on top of each other: only one shows */
.sub__labels {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
}

.sub__label {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.sub__label + .sub__label {
  visibility: hidden;
}

/* schermo stretto (la casella dell'anteprima sul telefono): il conto va sotto il pulsante, così il pulsante sta nel
   mezzo e gli anelli del suono, che si aprono fino a 90 px intorno alla campana, non escono dal bordo sinistro */
@media (max-width: 380px) {
  .subscribe__row {
    flex-direction: column;
    align-items: flex-start;
  }
}