/* ============================================================
   Delight — two moments below the hero.

   The hero is out of scope and untouched, and so is the header
   pill: no selector here matches inside .mast or header.

   Neither moment is invented. Both are already promised by the
   page and never delivered:

   1. The section is called Lightning Round and behaves like a
      bulleted list. The bolt strikes, and the round fires.
   2. Every "Email me" on this page is a mailto:, which does
      nothing at all for a visitor with no mail client wired up —
      on the page whose entire ask is "email me". The click now
      leaves the address on their clipboard and says so.
   ============================================================ */

/* ---------------------------------------------------------------
   The bolt strikes

   A real strike is a double flash, not a fade, so every step is a
   hard cut. It runs once, when the block is reached, and it is
   what sets the round off — the rows follow it in motion.css.
   --------------------------------------------------------------- */

.loaded main .lightning .tag .emoji.invert {
  display: inline-block;
  transform-origin: 50% 60%;
}
.loaded main .lightning.shown .tag .emoji.invert {
  animation: boltStrike .58s steps(1, end) both;
}

/* Leader flash, dark, then the longer main flash — which lands on the
   same beat the first row fires, so the bolt reads as the cause of the
   burst. Measured at 60fps: 93ms and 128ms lit, not the 3-frame blink
   the first cut produced. */
@keyframes boltStrike {
  0%   { filter: saturate(0) invert(1); transform: scale(1); }
  12%  { filter: none;                  transform: scale(1.22) rotate(-4deg); }
  28%  { filter: saturate(0) invert(1); transform: scale(1); }
  40%  { filter: none;                  transform: scale(1.34) rotate(3deg); }
  62%  { filter: saturate(0) invert(1); transform: scale(1); }
  100% { filter: saturate(0) invert(1); transform: scale(1); }
}

/* ---------------------------------------------------------------
   The address is already on your clipboard

   Confirmation is the page's own .tag material — the glass pill
   already used for "Lightning Round" and "On Screen" — pinned to
   the link that was actually clicked, rather than a toast from
   somewhere else. It carries the address itself, so if the mail
   client never opened, the answer is right there to read.

   The anchor is position:relative from the base sheet, and
   scripts.js only ever replaces .rgbsplit innerHTML, so a
   pseudo-element on the anchor survives that rewrite untouched.
   --------------------------------------------------------------- */

main p:has(a[href^="mailto:"]),
footer li:has(a[href^="mailto:"]) {
  position: relative;
}

/* Anchored to the block, not to the link: "Email me, or find me on
   Instagram or LinkedIn." wraps on a phone, and a pill hung under the
   link itself landed on the second line of its own sentence. */
main p:has(a[href^="mailto:"])::after,
footer li:has(a[href^="mailto:"])::after {
  backdrop-filter: saturate(142%) blur(20px);
  background: color-mix(in srgb, #fff, transparent 25%);
  border-radius: .43em;
  box-shadow:
    #00000012 0 0 0 1px,
    inset #ffffff1f 1px 1px,
    inset #ffffff57 0 1px 6px;
  color: var(--color-fill);
  content: attr(data-copied) " copied";
  font-size: var(--size-s);
  font-weight: 500;
  left: 0;
  opacity: 0;
  padding: .2em .6em;
  pointer-events: none;
  position: absolute;
  top: calc(100% + .55em);
  transform: translateY(-.35em);
  transition:
    opacity .2s ease,
    transform .2s var(--m-rise-ease, cubic-bezier(.16, 1, .3, 1)),
    visibility 0s .2s;
  visibility: hidden;
  white-space: nowrap;
  z-index: 120;
}
/* :has() carries the specificity of its argument, so the hidden rule
   above outranks a plain .copied — the selector has to be repeated. */
main p:has(a[href^="mailto:"]).copied::after,
footer li:has(a[href^="mailto:"]).copied::after {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
  visibility: visible;
}

/* A 21-character address does not fit beside a link on a 390px
   screen, and a phone almost certainly did open a mail client. */
@media screen and (width < 768px) {
  main p:has(a[href^="mailto:"])::after,
  footer li:has(a[href^="mailto:"])::after {
    content: "Copied";
  }
}

@media (prefers-reduced-motion: reduce) {
  .loaded main .lightning.shown .tag .emoji.invert {
    animation: none !important;
  }
}