/* Focus on arrival; two fine contours supply depth behind a readable face. */
.root-intro { animation: none; }
.root-intro .root-portrait { animation: none; }
.root-intro .root-person { animation: root-enter 1.15s .32s var(--ease) both; }
.root-intro > .hero-link { animation: root-enter 1.15s .44s var(--ease) both; }

.hero-name {
  --name-x: 0;
  --name-y: 0;
  --name-depth-x: 0;
  --name-depth-y: 0;
  --name-open: 0;
  --echo-travel: 1;
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.name-given {
  display: block;
  position: relative;
  width: max-content;
  white-space: nowrap;
  isolation: isolate;
}
.name-given-stack {
  display: block;
  position: relative;
  animation: name-focus-in 1.25s .06s cubic-bezier(.2,.75,.2,1) both;
}
.root-intro .hero-name .name-surname {
  display: block;
  position: relative;
  width: max-content;
  white-space: nowrap;
  isolation: isolate;
}
.name-surname-face {
  display: block;
  position: relative;
  animation: name-focus-in 1.45s .24s cubic-bezier(.2,.75,.2,1) both;
}
.name-face {
  position: relative;
  z-index: 3;
  display: block;
  transform: translate3d(calc(var(--name-x) * 1.8px), calc(var(--name-y) * 1.2px), 0);
}
.name-echo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .7px var(--echo-color);
  transform-origin: 35% 65%;
}
.name-echo-near {
  --echo-color: #e9b7b7;
  z-index: 2;
  opacity: calc(.12 + var(--name-open) * .5);
  transform: translate3d(
    calc((1.1px + var(--name-open) * 7px + var(--name-x) * 5px) * var(--echo-travel)),
    calc((-.7px - var(--name-open) * 4px + var(--name-y) * 3px) * var(--echo-travel)), 0
  );
}
.name-echo-far {
  --echo-color: #b6cde6;
  z-index: 1;
  opacity: calc(.07 + var(--name-open) * .32);
  -webkit-text-stroke-width: .65px;
  filter: blur(.3px);
  transform: translate3d(
    calc((2.2px + var(--name-open) * 14px + var(--name-depth-x) * 9px) * var(--echo-travel)),
    calc((-1.4px - var(--name-open) * 8px + var(--name-depth-y) * 6px) * var(--echo-travel)), 0
  );
}

@keyframes name-focus-in {
  from { opacity: .08; filter: blur(9px); transform: translate3d(0,18px,0) scale(.985); }
  to { opacity: 1; filter: none; transform: none; }
}

@media (max-width:700px) {
  .hero-name { --echo-travel: .45; }
  .name-given { display: inline-block; }
  .root-intro .hero-name .name-surname { display: inline-block; margin-left: .045em; }
}
@media (prefers-reduced-motion:reduce) {
  .name-given,.name-face { transform: none; }
  .name-echo { display: none; }
  .name-given-stack,.name-surname-face { animation: none; opacity: 1; filter: none; transform: none; }
}