/* Masks hold the baseline still while the type moves behind it. */
.glyph-mask {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding: .2em .025em;
  margin: -.2em -.025em;
  perspective: 900px;
}
.hero-letter, .work-letter, .contact-letter {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.hero-name { perspective: 1200px; }
.title-line {
  display: block;
  overflow: clip;
  padding: .16em .05em .23em;
  margin: -.16em -.05em -.23em;
}
.title-line + .title-line { margin-top: .06em; }
.title-line-inner { display: block; transform-origin: 0 100%; }
.reveal-word { display: inline-block; overflow: clip; vertical-align: bottom; }
.reveal-word-inner { display: inline-block; }
[data-entry="pending"] { opacity: 0; }
#about .section-word em { position: relative; display: inline-block; }
#about .section-word em::after {
  content: '';
  position: absolute;
  left: 0;
  right: -.08em;
  bottom: -.02em;
  height: .1em;
  background: var(--amber);
  clip-path: polygon(0 45%, 100% 0, 96% 55%, 2% 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.19,1,.22,1) .55s;
}
#about .section-word[data-entry="visible"] em::after { transform: scaleX(1); }
#about::before { display: none; }
#about, #work, #hello {
  border-top-left-radius: var(--section-radius, 0px);
  border-top-right-radius: var(--section-radius, 0px);
}
#about { overflow: clip; }
.proj-slide { transition: none; }
.proj-slide.active { z-index: 2; }
.proj-slide.exit { z-index: 1; }
.proj-slides { isolation: isolate; }
.slide-visual { will-change: clip-path; }
.slide-name { overflow: clip; padding-block: .07em; margin-block: -.07em; }
.slide-name .project-title-word { display: inline-block; }
.nav-link { position: relative; border-bottom: 0 !important; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -.2rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.19,1,.22,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.hero-work-link { overflow: hidden; }
.hero-work-arrow { transition: transform .5s cubic-bezier(.19,1,.22,1); }
.hero-work-link:hover .hero-work-arrow { transform: translateY(3px) rotate(-12deg); }
.work-arrow-btn svg { transition: transform .45s cubic-bezier(.19,1,.22,1); }
#work-next:hover svg { transform: translateX(4px); }
#work-prev:hover svg { transform: translateX(-4px); }
.contact-orbit.is-drawn path { transition-duration: 1.8s; }
@media (prefers-reduced-motion: reduce) {
  [data-entry="pending"] { opacity: 1; }
  #about .section-word em::after { transform: scaleX(1); }
  .hero-letter, .work-letter, .contact-letter { transform: none; }
  #about, #work, #hello { border-radius: 0; }
  .slide-visual { will-change: auto; }
}

/* Menu and image preview use the same easing, with their own pacing. */
.nav-overlay-link {
  opacity: 0;
  transform: translateY(35px) rotate(-3deg);
  transition: transform .85s cubic-bezier(.19,1,.22,1), opacity .4s ease;
}
.nav-overlay.open .nav-overlay-link { opacity: 1; transform: translateY(0) rotate(0); }
.nav-overlay.open .nav-overlay-link:nth-child(2n) { transform: translateY(0) rotate(-4deg); }
.nav-overlay.open .nav-overlay-link:nth-child(1) { transition-delay: .08s; }
.nav-overlay.open .nav-overlay-link:nth-child(2) { transition-delay: .14s; }
.nav-overlay.open .nav-overlay-link:nth-child(3) { transition-delay: .2s; }
.nav-overlay.open .nav-overlay-link:nth-child(4) { transition-delay: .26s; }
.lightbox-content {
  opacity: 0;
  transform: translateY(28px) scale(.94);
  transition: transform .7s cubic-bezier(.19,1,.22,1), opacity .35s ease;
}
.img-lightbox.active .lightbox-content { opacity: 1; transform: translateY(0) scale(1); }

/* Actual pen strokes for the final signature. */
.hello-signature .hello-word,
:lang(en) .hello-signature .hello-word {
  width: 100%;
  max-width: 530px;
  font-size: 0;
  line-height: 1;
  overflow: visible;
  transform: rotate(-9deg);
}
.handwritten-greeting { display: block; width: 100%; height: auto; overflow: visible; }
.handwritten-greeting path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hello-signature .hello-word::before { top: -5rem; right: 1rem; }
.signature-replay {
  position: absolute;
  right: 8px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #1a171350;
  background: transparent;
  color: var(--ink);
  font: 23px/1 var(--ff-sans);
  cursor: pointer;
  transition: transform .35s ease, background .25s ease;
}
.signature-replay:hover { transform: rotate(-35deg); background: #f7f2eb55; }
.signature-replay:disabled { display: none; }
@media (max-width: 860px) {
  .hello-signature .hello-word { max-width: 440px; width: 90%; }
  .hello-signature .hello-word::before { top: -3.5rem; right: 0; font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .handwritten-greeting path { stroke-dashoffset: 0; }
}

/* Keep input immediate and avoid repainting large filtered surfaces on scroll. */
body::after { display: none; }
#navbar, .nav-overlay, .img-lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-letter, .slide-visual { will-change: auto; }
.cursor-dot { transition: background-color .15s; }
.nav-overlay { transition-duration: .2s; }
.nav-overlay-link { transition-duration: .45s, .2s; }
.nav-overlay.open .nav-overlay-link:nth-child(1) { transition-delay: 0s; }
.nav-overlay.open .nav-overlay-link:nth-child(2) { transition-delay: .035s; }
.nav-overlay.open .nav-overlay-link:nth-child(3) { transition-delay: .07s; }
.nav-overlay.open .nav-overlay-link:nth-child(4) { transition-delay: .105s; }
.lightbox-content { transition-duration: .4s, .2s; }
#about .section-word em::after { transition-duration: .65s; transition-delay: .2s; }
.proj-slide:not(.active) .slide-visual::before,
.proj-slide:not(.active) .slide-visual::after { animation: none; }
@media (max-width: 860px) {
  .slide-visual::before, .slide-visual::after { animation: none; }
}

/* One shared track keeps geometry stable throughout every slide change. */
.proj-slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  overflow-anchor: none;
}
.proj-slides > .proj-slide,
.proj-slides > .proj-slide.active,
.proj-slides > .proj-slide.exit {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  display: grid;
  min-width: 0;
  width: 100%;
  transform: none;
  transition: none;
}
.proj-slides > .proj-slide { visibility: hidden; opacity: 0; pointer-events: none; }
.proj-slides > .proj-slide.active { visibility: visible; opacity: 1; pointer-events: auto; }
.proj-slides > .proj-slide.exit { visibility: visible; opacity: 0; pointer-events: none; }
.proj-slide .slide-visual { transform: none; clip-path: none; }
@media (max-width: 860px) {
  .proj-slides > .proj-slide,
  .proj-slides > .proj-slide.active,
  .proj-slides > .proj-slide.exit {
    display: flex;
    flex-direction: column-reverse;
    align-self: start;
  }
}