/* A person holds the page; the resume itself remains selectable HTML. */
.hero-visual {
  isolation: isolate;
  min-height: 0;
  padding: 0 0 44px;
  align-items: flex-start;
}
.hero-resume-stack {
  position: relative;
  width: min(100%, 470px);
  flex: 0 0 auto;
  z-index: 1;
}
.hero-peeking-person {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* Follow the straight paper edges to hide stray cutout pixels. */
  clip-path: polygon(0 0, 100% 0, 100% 63%, 76.2% 63%, 80.36% 93.37%, 18.45% 98.58%, 9.98% 27.82%, 0 27.82%);
}
.hero-resume-stack .hero-resume-shell {
  position: absolute;
  left: 9.45%;
  top: 28.10%;
  width: 60.87%;
  max-width: none;
  aspect-ratio: 210 / 297;
  z-index: 1;
  transform: matrix(1, -0.1025, 0.1108, 1.024, 0, 0);
  transform-origin: top left;
  transition: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}
.hero-resume-stack #hero-resume {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
}
.hero-resume-stack .resume-inner {
  /* Keep text clear of the fingers on the top and right paper edges. */
  padding: 14% 12% 8%;
}
.hero-word-cloud {
  position: absolute;
  inset: 0 0 44px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hero-word {
  position: absolute;
  color: #91a2c2;
  font-size: calc(var(--word-size, 18px) * var(--word-scale, 1));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.4px;
  white-space: nowrap;
  transform: rotate(var(--tilt, 0deg));
}
.hero-word:nth-child(1) {
  left: 2%; top: 20%; --word-size: 24px; --tilt: -7deg;
  --duration: 24s; --delay: -4s; color: #7e93bd;
}
.hero-word:nth-child(2) {
  left: 0; top: 42%; --word-size: 21px; --tilt: -8deg;
  --duration: 19s; --delay: -10s;
}
.hero-word:nth-child(3) {
  right: -1%; top: 72%; --word-size: 17px; --tilt: 6deg;
  --duration: 23s; --delay: -15s;
}
.hero-word:nth-child(4) {
  right: 0; top: 53%; --word-size: 23px; --tilt: 7deg;
  --duration: 21s; --delay: -2s; color: #8399c0;
}
.hero-word:nth-child(5) {
  left: 0; top: 68%; --word-size: 16px; --tilt: -6deg;
  --duration: 25s; --delay: -17s;
}
.hero-word:nth-child(6) {
  left: 1%; top: 94%; --word-size: 17px; --tilt: -5deg;
  --duration: 22s; --delay: -8s;
}
.hero-word:nth-child(7) {
  right: -2%; top: 31%; --word-size: 15px; --tilt: 8deg;
  --duration: 26s; --delay: -12s;
}
.hero-word:nth-child(8) {
  left: 27%; top: 13%; --word-size: 15px; --tilt: 5deg;
  --duration: 20s; --delay: -6s; color: #a0aec8;
}
.hero-visual .label-top {
  top: 2%;
  left: -8px;
}
.hero-visual .floating-price {
  right: -6px;
  bottom: 64px;
}
.hero-visual .hero-template-picker { bottom: -8px; }
.hero-motion-toggle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: 3px;
  border-radius: 50%;
  background: transparent;
  color: #687b9e;
}
.hero-motion-toggle:hover { background: #e4eaf680; color: #334d78; }
.hero-motion-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-motion-toggle .hero-motion-play,
.hero-visual[data-motion="paused"] .hero-motion-pause { display: none; }
.hero-visual[data-motion="paused"] .hero-motion-play { display: block; }
/* Animate the artwork and HTML page together so the grip stays aligned. */
@media (prefers-reduced-motion: no-preference) {
  .hero-resume-stack {
    animation: folio-hero-enter 800ms cubic-bezier(.22, .61, .36, 1) backwards;
    transition: transform 350ms ease;
  }
  .hero-word {
    animation: folio-word-drift var(--duration, 24s) ease-in-out var(--delay, 0s) infinite;
    animation-play-state: paused;
  }
  .hero-visual[data-motion="running"] .hero-word { animation-play-state: running; }
}
@keyframes folio-word-drift {
  0%, 100% { transform: translate3d(-5px, 5px, 0) rotate(var(--tilt, 0deg)); }
  50% { transform: translate3d(7px, -7px, 0) rotate(calc(var(--tilt, 0deg) + 2deg)); }
}
@keyframes folio-hero-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-visual:hover .hero-resume-stack,
  .hero-visual:focus-within .hero-resume-stack {
    transform: translate3d(0, -4px, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word { animation: none !important; }
  .hero-motion-toggle { display: none !important; }
  .hero-resume-stack {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1;
  }
}
@media (min-width: 1500px) {
  .hero-resume-stack { width: min(100%, 490px); }
}
@media (max-width: 900px) {
  .hero-visual { padding-inline: 0; }
  .hero-word-cloud { --word-scale: .82; }
  .hero-visual .label-top { left: -5px; top: 2%; max-width: 64%; padding: 10px; gap: 8px; }
  .hero-visual .floating-price { right: -4px; bottom: 57px; }
}
@media (max-width: 680px) {
  .hero-visual { max-width: 405px; }
  .hero-word-cloud { --word-scale: .88; }
  .hero-visual .label-top { left: 0; top: 2%; }
  .hero-visual .floating-price { right: 0; bottom: 60px; }
}