/* ─────────────────────────────────────────────────────────────────────────
   The Duke of AI — the metallic CTA

   A liquid-chrome hairline around a dark pill, for ONE call to action on a
   page. js/metallic-cta.js builds the layers; this file paints them.

   Nothing here applies on its own. Every rule is under .mcta, and that class
   is added by the script — so a page that loads this stylesheet and not the
   script, or loads both and finds no WebGL2, keeps the ordinary gold pill it
   started with. See the head of the script for why it is built that way.

   The shape, the padding and the font all come from .pill, which the
   homepage declares inline. This file adds layers behind what .pill already
   sized and shadows around it. It must not restyle .pill itself.
   ───────────────────────────────────────────────────────────────────────── */

.mcta{
  /* The knobs. A page can override any of them on the element, and
     _demo-metallic.html does exactly that to stand the variants side by
     side. --mcta-rim is how much of the chrome shows: the face is inset by
     it, so it is the ring's thickness, not a border. */
  --mcta-rim:2px;
  --mcta-radius:980px;
  --mcta-face:linear-gradient(180deg,#202020 0%,#000000 100%);
  --mcta-ink:#ffffff;
  --mcta-glow:rgba(201,162,90,.22);

  position:relative;
  display:inline-block;
  border-radius:var(--mcta-radius);
  /* isolation, not a 3D context. The original stacked its four layers with
     translateZ inside perspective:1000px, but nothing here rotates, so
     z-index draws the same picture - and keeps the label out of a 3D
     rendering context, which is where Safari blurs text. */
  isolation:isolate;

  /* The rim's drop shadow. The original stacked five blacks, which is right
     for the white page it was designed on and invisible on this near-black
     canvas. The blacks are kept - they still seat the pill and they do the
     work on the pressed state - with a gold bloom added, which is the part
     that actually reads on a dark ground. Set --mcta-glow:transparent for
     the original's behaviour. */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45),
    0 9px 9px 0 rgba(0,0,0,.28),
    0 2px 5px 0 rgba(0,0,0,.35),
    0 0 22px 0 var(--mcta-glow);
  transition:
    transform .15s cubic-bezier(.4,0,.2,1),
    box-shadow .15s cubic-bezier(.4,0,.2,1);
}

.mcta.is-hover{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 4px 4px 0 rgba(0,0,0,.3),
    0 1px 2px 0 rgba(0,0,0,.35),
    0 0 30px 0 var(--mcta-glow);
}

.mcta.is-press{
  transform:translateY(1px) scale(.98);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 1px 2px 0 rgba(0,0,0,.45),
    0 0 14px 0 var(--mcta-glow);
}

/* ---------- the layers ---------- */

/* the shader's canvas, full size, with the face laid over most of it */
.mcta-rim{
  position:absolute; inset:0; z-index:0;
  border-radius:inherit; overflow:hidden;
}
.mcta-canvas{
  position:absolute; top:0; left:0;
  width:100%; height:100%; display:block;
  border-radius:inherit;
}

/* the dark face. Inset by the rim, so the chrome shows as a ring. */
.mcta-face{
  position:absolute; inset:var(--mcta-rim); z-index:1;
  border-radius:inherit;
  background:var(--mcta-face);
  transition:box-shadow .15s cubic-bezier(.4,0,.2,1);
}
.mcta.is-press .mcta-face{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.4),
    inset 0 1px 2px rgba(0,0,0,.3);
}

/* click ripples. Their own layer rather than children of the link: .pill is
   an inline-flex with a gap, so a stray child there would be spaced like a
   word. */
.mcta-ripples{
  position:absolute; inset:0; z-index:2;
  border-radius:inherit; overflow:hidden;
  pointer-events:none;
}
.mcta-ripple{
  position:absolute; width:20px; height:20px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%);
  animation:mcta-ripple .6s ease-out forwards;
}
@keyframes mcta-ripple{
  from{ transform:translate(-50%,-50%) scale(0); opacity:.6 }
  to  { transform:translate(-50%,-50%) scale(4); opacity:0 }
}

/* ---------- the link ----------
   Still the anchor that was in the markup. The script drops .pill-fill so
   the gold ground goes, and keeps .pill so the padding, the radius and the
   17px type are the site's and not this file's invention. */
.mcta-link{
  position:relative; z-index:3;
  background:transparent;
  border-color:transparent;
  color:var(--mcta-ink);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.mcta-link:hover{ background:transparent; color:var(--mcta-ink); }

/* The original set outline:none and put nothing back, which loses the
   keyboard entirely. This is the site's ring, at the offset the project
   cards use - far enough out to clear the chrome. */
.mcta-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Someone who has asked for less movement gets the pill, the chrome and the
   shadows, and none of the animation. The script renders a single frame and
   stops; these turn off the rest. */
@media (prefers-reduced-motion:reduce){
  .mcta{ transition:none }
  .mcta.is-press{ transform:none }
  .mcta-face{ transition:none }
  .mcta-ripple{ display:none }
}