/* Set the resting typography before JavaScript enhances the links. */
:is(.portfolio-contact-links, .portfolio-viewer-about-links) .portfolio-contact-link {
  font-style: normal;
  font-weight: 400;
}
/* Optional letter-flip treatment, inspired by dev_loop's SplittingJS demo.
   Original underline rules remain in portfolio.css; remove link-motion.js to restore. */
.link-flip .portfolio-contact-label::after { display: none; }
.portfolio-contact-links .portfolio-contact-link .portfolio-contact-label::after {
  display: block;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--link-flip-duration, 650ms) cubic-bezier(.5,0,0,1);
}
a.portfolio-inline-link.link-flip { background-image: none; }
.link-flip-word { display:inline-block; position:relative; white-space:nowrap; vertical-align:baseline; }
.link-flip-layer {
  display:inline-block;
  transition:opacity .4s cubic-bezier(.445,.05,.55,.95), transform .4s cubic-bezier(.445,.05,.55,.95);
}
.link-flip-char {
  display:inline-block;
  transform-origin:50% 50% .4em;
  backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.5,0,0,1);
  transition-delay:var(--letter-delay);
}
.link-flip-layer:first-child { font-style:normal; }
.link-flip-layer:nth-child(2) { position:absolute; left:0; top:0; font-style:normal; font-weight:600; opacity:0; }
.link-flip-layer:nth-child(2) .link-flip-char { transform:rotate3d(1,-.5,0,90deg); }
@media (hover:hover) and (pointer:fine) {
  .portfolio-contact-links .link-flip:hover .portfolio-contact-label::after { transform: scaleX(1); }
  .link-flip:hover .link-flip-layer { transform:translateX(0); }
  .link-flip:hover .link-flip-layer:first-child { opacity:0; }
  .link-flip:hover .link-flip-layer:first-child .link-flip-char { transform:rotate3d(1,.3,0,-90deg); }
  .link-flip:hover .link-flip-layer:nth-child(2) { opacity:1; }
  .link-flip:hover .link-flip-layer:nth-child(2) .link-flip-char { transform:rotate3d(1,0,0,0deg); }
}
.portfolio-contact-links .link-flip:focus-visible:where(html:not([data-focus-input="pointer"]) *) .portfolio-contact-label::after { transform: scaleX(1); }
.link-flip:focus-visible:where(html:not([data-focus-input="pointer"]) *) .link-flip-layer { transform:translateX(0); }
.link-flip:focus-visible:where(html:not([data-focus-input="pointer"]) *) .link-flip-layer:first-child { opacity:0; }
.link-flip:focus-visible:where(html:not([data-focus-input="pointer"]) *) .link-flip-layer:first-child .link-flip-char { transform:rotate3d(1,.3,0,-90deg); }
.link-flip:focus-visible:where(html:not([data-focus-input="pointer"]) *) .link-flip-layer:nth-child(2) { opacity:1; }
.link-flip:focus-visible:where(html:not([data-focus-input="pointer"]) *) .link-flip-layer:nth-child(2) .link-flip-char { transform:rotate3d(1,0,0,0deg); }
@media (prefers-reduced-motion:reduce) {
  .portfolio-contact-links .link-flip .portfolio-contact-label::after { transition: none; }
  .link-flip .link-flip-layer, .link-flip .link-flip-char { transition:none; transform:none !important; }
}