/* Fabric object-letter motion. The portrait is visually above the page but
   remains pointer-transparent so the title can be explored underneath it. */
.portrait-rig { pointer-events: none; }

.hero-title--interactive {
  z-index: 6;
  top: clamp(2.75rem, 5.4svh, 5rem);
  left: 50%;
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  width: max-content;
  max-width: calc(100vw - 2.4rem);
  color: #f2e8d5;
  font-size: clamp(6rem, 10.8vw, 12rem);
  line-height: 1.02;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  transform: translate3d(-50%, .48em, 0);
  transform-origin: 50% 50%;
}

.hero-title--interactive span { margin-left: 0; }
.title-word {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.title-word--han { column-gap: .026em; }
.title-word--latin { column-gap: .014em; }

/* The base reveal clip remains, but the completed title needs room outside
   its text box for the last fabric y's leaf/branch silhouette. */
.story-hero[data-title-visible="true"] .hero-title--interactive {
  clip-path: inset(-.7em -.52em -.72em -.14em);
  transform: translate3d(-50%, 0, 0);
}

.title-glyph {
  --glyph-shift: 0px;
  position: relative;
  z-index: 1;
  display: inline-grid;
  flex: 0 0 auto;
  transform: translate3d(var(--glyph-shift), 0, 0);
  transition: transform 340ms var(--ease-out);
}
.title-glyph.is-active { z-index: 4; }

.title-glyph__ink {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: block;
  opacity: 1;
  line-height: 1;
  white-space: pre;
  text-shadow: 0 .018em .01em rgba(10, 14, 28, .55);
  transition: opacity 170ms var(--ease-out);
}
.title-glyph.is-pending .title-glyph__ink,
.title-glyph.is-active .title-glyph__ink { opacity: 0; }
.title-glyph.is-returning .title-glyph__ink {
  animation: title-ink-return 570ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes title-ink-return {
  0%, 20% { opacity: 0; transform: scale(.92); }
  65% { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

.title-glyph__sticker {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: block;
  opacity: 1;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 .065em .055em rgba(8, 13, 28, .24));
  pointer-events: none;
  will-change: transform, opacity;
}
.title-glyph__sticker img {
  display: block;
  width: auto;
  height: var(--sticker-height, 1.08em);
  max-width: var(--sticker-max-width, 1.377em);
  object-fit: contain;
}

.story-hero[data-phase="open"] .hero-title--interactive { pointer-events: auto; }
.hero-title--interactive:focus-visible {
  outline: 2px solid #e1b775;
  outline-offset: .12em;
  border-radius: .05em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .story-hero[data-phase="open"] .hero-title--interactive { cursor: default; }
}

@media (max-width: 980px) {
  .hero-title--interactive {
    gap: .16em;
    font-size: clamp(3.9rem, 10.45vw, 7.4rem);
  }
}

@media (max-width: 750px) {
  .hero-title--interactive {
    top: 8svh;
    left: 50%;
    flex-direction: row;
    align-items: baseline;
    gap: .145em;
    max-width: calc(100vw - 2rem);
    font-size: clamp(2.45rem, 12.1vw, 4.35rem);
    line-height: 1;
  }
  .title-word--han { column-gap: .016em; }
  .title-word--latin { column-gap: .008em; }
  .icon-tray { top: 13%; }
}

@media (max-width: 390px) {
  .hero-title--interactive {
    left: 50%;
    gap: .125em;
    max-width: calc(100vw - 1.6rem);
    font-size: 12.1vw;
  }
}

@media (max-width: 750px) and (max-height: 600px) {
  .portrait-rig { bottom: -25svh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title--interactive { transform: translateX(-50%) !important; }
  .title-glyph { transition: none; }
  .title-glyph__ink { transition: opacity 150ms var(--ease-out); }
  .title-glyph.is-returning .title-glyph__ink {
    animation: title-ink-fade 150ms var(--ease-out) both;
  }
  .title-glyph__sticker {
    filter: none;
    will-change: opacity;
  }
}

@keyframes title-ink-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}