#kinpass-c .kinpass-connection {--paper:#fcf8f0;--ink:#151a31;--lime:#d9ff00}
#kinpass-c .kinpass-connection :is(.hero) { position: relative; overflow: hidden; padding-block-end: 36px; background: var(--paper); }
#kinpass-c .kinpass-connection :is(.scene) { position: relative; max-width: min(1600px, max(680px, calc((100svh - var(--hero-pin-top, 0px) - 167px) * 2.03))); margin-inline: auto; }
#kinpass-c .kinpass-connection :is(.hero h1) {
  position: absolute;
  z-index: 2;
  top: 7%;
  left: clamp(24px, 6vw, 96px);
  right: clamp(24px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: min(20%, 245px);
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 3.75vw, 4rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.055em;
  pointer-events: none;
}
#kinpass-c .kinpass-connection :is(.hero h1 span) { display: block; width: fit-content; }
#kinpass-c .kinpass-connection :is(.hero h1 span:first-child) { background: linear-gradient(transparent 84%, #78e6f480 84% 96%, transparent 96%); }
#kinpass-c .kinpass-connection :is(.hero h1 span:last-child) { justify-self: end; text-align: right; background: linear-gradient(transparent 84%, #c0a0fa73 84% 96%, transparent 96%); }
#kinpass-c .kinpass-connection :is(:lang(en) .hero h1) { font-size: clamp(1.5rem, 3.35vw, 3.55rem); letter-spacing: -.045em; }
#kinpass-c .kinpass-connection :is(:lang(th) .hero h1) { line-height: 1.26; letter-spacing: -.015em; }
#kinpass-c .kinpass-connection :is(.stage) { position: relative; aspect-ratio: 2.03; isolation: isolate; }
#kinpass-c .kinpass-connection :is(.art-crop) {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 93%, transparent 100%);
  mask-image: linear-gradient(#000 93%, transparent 100%);
  pointer-events: none;
}
#kinpass-c .kinpass-connection :is(.art) { position: absolute; inset: 0 0 auto; width: 100%; aspect-ratio: 1672 / 941; }
#kinpass-c .kinpass-connection :is(.art > :is(img, canvas, svg)) { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#kinpass-c .kinpass-connection :is(.in-motion) { visibility: hidden; }
#kinpass-c .kinpass-connection :is(.stage[data-ready] .in-motion) { visibility: visible; }
#kinpass-c .kinpass-connection :is(.surge) { visibility: hidden; overflow: visible; }
#kinpass-c .kinpass-connection :is(.stage[data-spark] .surge) { visibility: visible; }
#kinpass-c .kinpass-connection :is(.spark) { opacity: 0; transform-origin: 836px 670px; }
#kinpass-c .kinpass-connection :is(.ray) { fill: none; stroke: #ffffb4; stroke-width: 4; stroke-linecap: round; opacity: 0; }
#kinpass-c .kinpass-connection :is(.pulse) { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: .20 1; stroke-dashoffset: .20; opacity: 0; }
#kinpass-c .kinpass-connection :is(.stage[data-spark] .spark) { animation: flash .56s ease-out both; }
#kinpass-c .kinpass-connection :is(.stage[data-spark] .ray) { animation: ray .35s ease-out both; }
#kinpass-c .kinpass-connection :is(.stage[data-spark] .pulse) { animation: surge .71s 45ms ease-out both; }
#kinpass-c .kinpass-connection :is(.world-glow) { opacity: 0; }
#kinpass-c .kinpass-connection :is(.stage[data-spark] .world-glow) { animation: world-light .36s .43s ease-out both; }
@keyframes world-light { 24% { opacity: .65; } 100% { opacity: 0; } }
@keyframes flash {
  0% { opacity: 0; transform: scale(.45); }
  22% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(2); }
}
@keyframes ray { 25% { opacity: .95; } 100% { opacity: 0; } }
@keyframes surge {
  0% { opacity: 0; stroke-dashoffset: .20; }
  15% { opacity: .98; }
  78% { opacity: .9; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}
#kinpass-c .kinpass-connection :is(.invitation) { position: relative; text-align: center; margin: -4px auto 0; padding-inline: 18px; }
#kinpass-c .kinpass-connection :is(.invitation p) { max-width: 44rem; margin: 0 auto 14px; font-size: clamp(.99rem, 1.37vw, 1.17rem); font-weight: 650; line-height: 1.62; text-wrap: pretty; }
#kinpass-c .kinpass-connection :is(.consult) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  min-height: 56px;
  border: 2px solid var(--ink);
  padding: 11px 28px;
  text-decoration: none;
  background: var(--lime);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 850;
  transition: background .16s, transform .16s;
}
#kinpass-c .kinpass-connection :is(.consult:hover) { background: #e9ff71; transform: translateY(-2px); }
@media (max-width: 760px) {
  #kinpass-c .kinpass-connection :is(.masthead) { gap: 8px; padding: 6px 14px; }
  #kinpass-c .kinpass-connection :is(.brand img) { width: clamp(79px, 25vw, 114px); }
  #kinpass-c .kinpass-connection :is(.preview-nav) { gap: 8px; }
  #kinpass-c .kinpass-connection :is(.compare) { font-size: .65rem; }
  #kinpass-c .kinpass-connection :is(.preview-nav button) { padding-inline: 5px; }
  #kinpass-c .kinpass-connection :is(.hero) { padding-block-end: 34px; }
  #kinpass-c .kinpass-connection :is(.hero h1, :lang(en) .hero h1) {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 10px 10px -3px;
    font-size: clamp(1.84rem, 9vw, 2.8rem);
  }
  #kinpass-c .kinpass-connection :is(.hero h1 span:last-child) { justify-self: center; text-align: center; }
  #kinpass-c .kinpass-connection :is(:lang(en) .hero h1) { font-size: clamp(1.52rem, 7.3vw, 2.55rem); }
  #kinpass-c .kinpass-connection :is(.stage) { aspect-ratio: 1.36; }
  #kinpass-c .kinpass-connection :is(.art) { width: 144%; left: 50%; right: auto; top: -1.5%; transform: translateX(-50%); }
  #kinpass-c .kinpass-connection :is(.art-crop) {
    -webkit-mask-image: linear-gradient(transparent, #000 4% 92%, transparent);
    mask-image: linear-gradient(transparent, #000 4% 92%, transparent);
  }
  #kinpass-c .kinpass-connection :is(.invitation) { padding-inline: 17px; }
  #kinpass-c .kinpass-connection :is(.invitation p) { max-width: 29rem; margin-bottom: 12px; font-size: .98rem; }
  #kinpass-c .kinpass-connection :is(.consult) { min-height: 54px; width: min(100%, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  #kinpass-c .kinpass-connection :is(*, *::before, *::after) { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  #kinpass-c .kinpass-connection :is(.surge) { display: none !important; }
}

#kinpass-c .kinpass-connection :is(.scroll-space) { block-size: clamp(122px, 16svh, 154px); }

#kinpass-c .kinpass-connection :is(.hero) { padding-block-end: 24px; }
#kinpass-c .kinpass-connection :is(.scene) { max-width: min(1600px, max(680px, calc((100svh - var(--hero-pin-top, 0px) - 281px) * 2.03))); }
#kinpass-c .kinpass-connection :is(.invitation) { max-width: 62rem; }
#kinpass-c .kinpass-connection :is(.invitation .hero-emphasis) {
  display: grid;
  justify-items: center;
  gap: .05em;
  max-width: none;
  margin: 0 auto .56rem;
  font-size: clamp(1.22rem, 2.3vw, 2rem);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: -.035em;
}
#kinpass-c .kinpass-connection :is(.hero-emphasis span) { display: block; }
#kinpass-c .kinpass-connection :is(.hero-emphasis span:first-child) { background: linear-gradient(transparent 81%, #78e6f46b 81% 96%, transparent 96%); }
#kinpass-c .kinpass-connection :is(.hero-emphasis span:last-child) { background: linear-gradient(transparent 81%, #c0a0fa5c 81% 96%, transparent 96%); }
#kinpass-c .kinpass-connection :is(.invitation .hero-purpose) { max-width: 54rem; margin: 0 auto .36rem; font-size: clamp(.96rem, 1.23vw, 1.12rem); font-weight: 600; line-height: 1.56; }
#kinpass-c .kinpass-connection :is(.invitation .hero-prompt) { text-wrap: balance; margin: 0 auto .8rem; font-size: clamp(.96rem, 1.28vw, 1.13rem); font-weight: 820; line-height: 1.5; }
#kinpass-c .kinpass-connection :is(.consult) { min-height: 57px; min-width: min(100%, 300px); font-size: clamp(1.06rem, 1.5vw, 1.25rem); }
#kinpass-c .kinpass-connection :is(:lang(th) .hero-emphasis) { letter-spacing: 0; line-height: 1.42; }
@media (max-width: 760px) {
  #kinpass-c .kinpass-connection :is(.hero) { padding-block-end: 28px; }
  #kinpass-c .kinpass-connection :is(.invitation) { padding-inline: 15px; }
  #kinpass-c .kinpass-connection :is(.invitation .hero-emphasis) { display: block; font-size: clamp(1rem, 5.05vw, 1.45rem); line-height: 1.38; }
  #kinpass-c .kinpass-connection :is(.hero-emphasis span) { width: fit-content; margin-inline: auto; }
  #kinpass-c .kinpass-connection :is(.invitation .hero-purpose) { max-width: 27rem; font-size: .94rem; }
  #kinpass-c .kinpass-connection :is(.invitation .hero-prompt) { font-size: .96rem; }
  #kinpass-c .kinpass-connection :is(:lang(ja) .hero-prompt) { word-break: auto-phrase; }
}
@media (min-width: 761px) {
  #kinpass-c .kinpass-connection :is(.hero h1) { left: clamp(22px, 3.7vw, 64px); right: clamp(22px, 3.7vw, 64px); }
  #kinpass-c .kinpass-connection :is(:lang(en) .hero h1) { font-size: clamp(1.5rem, 2.98vw, 3.26rem); }
}

@media (prefers-reduced-motion: reduce) {
  #kinpass-c .kinpass-connection .hero-track .hero { position: relative !important; }
  #kinpass-c .kinpass-connection .scroll-space { display: none; }
}
#kinpass-c .kinpass-connection .hero { padding-block-end: 17px; }
#kinpass-c .kinpass-connection .scene {
  max-width: min(1600px, max(590px, calc((100svh - var(--hero-pin-top, 0px) - 292px) * 2.03)));
}
#kinpass-c .kinpass-connection .hero-purpose {
  max-inline-size: 55ch;
  margin-block: .58rem .48rem;
  font-size: clamp(1.02rem, 1.37vw, 1.19rem);
  font-weight: 630;
  line-height: 1.54;
  text-wrap: pretty;
}
#kinpass-c .kinpass-connection .hero-prompt { margin-bottom: .74rem; }
#kinpass-c .kinpass-connection .scroll-space { block-size: clamp(96px, 12svh, 120px); }
#kinpass-c .kinpass-connection + .impact-topics { padding-block-start: clamp(20px, 3vw, 38px); }
@media (min-width: 761px) and (max-width: 1120px) {
  #kinpass-c .kinpass-connection .hero h1 { inset-inline: 3%; font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
  html:lang(en) #kinpass-c .kinpass-connection .hero h1 { font-size: clamp(1.35rem, 2.7vw, 1.85rem); }
}
@media (max-width: 760px) {
  #kinpass-c .kinpass-connection .hero { padding-block-end: 22px; }
  #kinpass-c .kinpass-connection .hero-purpose { font-size: clamp(.96rem, 4.1vw, 1.06rem); }
  #kinpass-c .kinpass-connection .hero-emphasis { font-size: clamp(1rem, 4.9vw, 1.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  #kinpass-c .kinpass-connection .hero-track .hero { inset-block-start: auto !important; }
}

/* Reserve a short approach and a short view of the completed connection. */
#kinpass-c .kinpass-connection .hero-track {
  --hero-approach: clamp(92px, 12svh, 108px);
  --hero-hold: clamp(80px, 12svh, 108px);
}
#kinpass-c .kinpass-connection .scroll-space {
  block-size: calc(var(--hero-approach) + var(--hero-hold));
  padding-block-end: var(--hero-hold);
  box-sizing: border-box;
}
#kinpass-c .kinpass-connection .scene {
  max-width: min(1600px, max(590px, calc((100svh - var(--hero-pin-top, 0px) - 292px) * 2.03)), var(--hero-fit-width, 1600px));
}
@media (max-width: 760px) {
  #kinpass-c .kinpass-connection .hero-track {
    --hero-approach: clamp(76px, 12svh, 102px);
    --hero-hold: clamp(62px, 10svh, 84px);
  }
  #kinpass-c .kinpass-connection .scene { max-width: none; }
  #kinpass-c .kinpass-connection .stage {
    max-width: var(--hero-fit-width, 100%);
    margin-inline: auto;
  }
}
/* Keep the illustration and links usable when the animation never starts. */
#kinpass-c .kinpass-connection .stage[data-ready] .artwork { visibility: hidden; }
#kinpass-c .kinpass-connection :is(.scroll-space, .scene-scroll-space) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  #kinpass-c .kinpass-connection .hero-track[data-pin="full"] .hero,
  #kinpass-c .kinpass-connection .hero-track[data-pin="scene"] .scene {
    position: sticky;
    inset-block-start: var(--hero-pin-top, 0px);
  }
  #kinpass-c .kinpass-connection .hero-track[data-pin="scene"] .hero { overflow: visible; }
  #kinpass-c .kinpass-connection .hero-track[data-pin="full"] .scroll-space,
  #kinpass-c .kinpass-connection .hero-track[data-pin="scene"] .scene-scroll-space {
    display: block;
    block-size: calc(var(--hero-approach) + var(--hero-hold));
    padding-block-end: var(--hero-hold);
    box-sizing: border-box;
  }
}

/* The first visible frame is the open pose from the same connection canvas. */
#kinpass-c .kinpass-connection .art > .opening-artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#kinpass-c .kinpass-connection .opening-artwork > img {
  display: block;
  width: 100%;
  height: 100%;
}
#kinpass-c .kinpass-connection .stage[data-motion-state="static"] .artwork { visibility: hidden; }
#kinpass-c .kinpass-connection .stage[data-ready] .opening-artwork,
#kinpass-c .kinpass-connection .stage[data-motion-state="reduced"] .opening-artwork,
#kinpass-c .kinpass-connection .stage[data-motion-state="fallback"] .opening-artwork { visibility: hidden; }