/* Tag page: the name copies the tag's link (tag-name-copy.js).
   At rest the title looks as it always did. Pointed at, the tag icon turns
   into a link and a faint line draws under the name; copied, the icon is a
   check, the line runs through in the tag's colour and a small note rises
   over the name with the link that was copied - on the title, not a toast.
   The previews (Tag Queue, review) draw the plain h1 without any of this. */

.tag-copy-h { position: relative; }

/* The icon is the button the keyboard reaches; three glyphs stacked in one
   cell, so swapping them never moves the name. */
.tag-copy {
  display: inline-grid;
  vertical-align: baseline;
  margin: 0 .5rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.tag-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.tag-copy-i {
  grid-area: 1 / 1;
  transition: opacity .18s var(--ease), transform .28s var(--ease);
}
.tag-copy-i--hover,
.tag-copy-i--done { opacity: 0; transform: scale(.6) rotate(-20deg); }

/* The name: two underline layers, the faint one for pointing, the tag's
   colour for a copy. Cloned per line, so a name that wraps is lined on
   every line. */
.tag-copy-h #tagPageTitle {
  cursor: pointer;
  background-image:
    linear-gradient(var(--tag-accent, var(--accent-bright)), var(--tag-accent, var(--accent-bright))),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
  background-repeat: no-repeat;
  background-position: 0 92%, 0 92%;
  background-size: 0% .07em, 0% .07em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .35s var(--ease);
}

@media (hover: hover) {
  .tag-copy-h:hover #tagPageTitle { background-size: 0% .07em, 100% .07em; }
  .tag-copy-h:hover .tag-copy-i:first-child { opacity: 0; transform: scale(.6) rotate(20deg); }
  .tag-copy-h:hover .tag-copy-i--hover { opacity: 1; transform: none; }
}

.tag-copy-h.is-copied #tagPageTitle { background-size: 100% .07em, 100% .07em; }
.tag-copy-h.is-copied .tag-copy-i:first-child,
.tag-copy-h.is-copied .tag-copy-i--hover { opacity: 0; transform: scale(.6) rotate(20deg); }
.tag-copy-h.is-copied .tag-copy-i--done {
  opacity: 1;
  transform: none;
  animation: tag-copy-pop .4s var(--ease);
}

/* The note: over the title's first line, in the hero's secondary type. */
.tag-copy-note {
  position: absolute;
  left: 0;
  bottom: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(.36em, .8rem);
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
}
.tag-copy-url { font-weight: 400; color: rgba(255,255,255,.82); }
.tag-copy-h.is-copied .tag-copy-note { animation: tag-copy-note 1.8s var(--ease) forwards; }

@keyframes tag-copy-pop {
  0%   { transform: scale(.5); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes tag-copy-note {
  0%   { opacity: 0; transform: translateY(.6em); }
  14%  { opacity: 1; transform: translateY(-.15em); }
  80%  { opacity: 1; transform: translateY(-.15em); }
  100% { opacity: 0; transform: translateY(-.5em); }
}

:root[data-motion="reduce"] .tag-copy-i,
:root[data-motion="reduce"] .tag-copy-h #tagPageTitle { transition: none; }
:root[data-motion="reduce"] .tag-copy-h.is-copied .tag-copy-i--done { animation: none; }
:root[data-motion="reduce"] .tag-copy-h.is-copied .tag-copy-note { animation: tag-copy-note-still 1.8s linear forwards; }
@keyframes tag-copy-note-still {
  0%, 85% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Editing the title (tag-page-edit.js): the clicks are the editor's. */
.is-editable .tag-copy { pointer-events: none; }
.is-editable .tag-copy-h #tagPageTitle { cursor: text; background-image: none; }