.jogili-scroll-companion {
  position: fixed;
  z-index: 25;
  inset: 0 14px 0 auto;
  width: 70px;
  pointer-events: none;
  user-select: none;
  contain: layout style;
}

.jogili-scroll-companion[hidden] { display: none !important; }

.jogili-scroll-thread {
  position: absolute;
  top: 0;
  left: calc(50% + 1px);
  width: 2px;
  height: var(--jogili-thread-height, 120px);
  background: linear-gradient(90deg, var(--green, #173f31) 0 50%, var(--gold, #e9b64f) 50% 100%);
  opacity: .78;
  transform-origin: 50% 0;
}

.jogili-scroll-cat {
  position: absolute;
  inset: 0 0 auto;
  width: 70px;
  height: 65px;
  transform: translate3d(0, var(--jogili-cat-y, 120px), 0);
  will-change: transform;
}

.jogili-scroll-cat img { display: block; width: 100%; height: 100%; }

.jogili-intro {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  background: var(--cream, #f3f2e9);
  color: var(--green, #173f31);
  animation: jogili-intro-exit .3s ease 2.15s forwards;
}

.jogili-intro--leaving {
  animation: jogili-intro-exit .22s ease forwards;
  pointer-events: none;
}

.jogili-intro-thread {
  position: absolute;
  top: 0;
  left: calc(50% + 1px);
  height: calc(50svh - 59px);
  width: 2px;
  background: linear-gradient(90deg, var(--green, #173f31) 0 50%, var(--gold, #e9b64f) 50% 100%);
  transform: scaleY(0);
  transform-origin: 50% 0;
  animation: jogili-rope-descend 1.2s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}

.jogili-intro-cat {
  position: absolute;
  top: calc(50svh - 65px);
  left: 50%;
  width: 140px;
  height: 130px;
  transform: translate3d(-50%, -60svh, 0);
  animation: jogili-cat-descend 1.2s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}

.jogili-intro-cat img { display: block; width: 100%; height: 100%; }

.jogili-intro-caption {
  position: absolute;
  inset: calc(50svh + 93px) 24px auto;
  text-align: center;
  opacity: 0;
  animation: jogili-caption-in .4s ease .6s forwards;
}

.jogili-intro-name {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 35px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}

.jogili-intro-breath {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .08em;
}

.jogili-intro-skip {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  padding: 12px 15px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--green, #173f31);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.jogili-intro-skip:hover { background: rgba(23,63,49,.07); }
.jogili-intro-skip:focus-visible { outline: 2px solid var(--green, #173f31); outline-offset: 3px; }

@keyframes jogili-cat-descend {
  from { transform: translate3d(-50%, -60svh, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes jogili-rope-descend {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes jogili-caption-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes jogili-intro-exit {
  0% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 700px) {
  .jogili-scroll-companion { right: 5px; width: 36px; }
  .jogili-scroll-cat { width: 36px; height: 34px; }
  .jogili-scroll-thread { width: 2px; opacity: .72; }
  .jogili-intro-cat { width: 124px; height: 115px; top: calc(50svh - 57.5px); }
  .jogili-intro-thread { height: calc(50svh - 53px); }
  .jogili-intro-caption { top: calc(50svh + 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .jogili-intro,
  .jogili-scroll-companion { display: none !important; }
}

.jogili-intro-name{font-size:64px;font-weight:400;line-height:1;margin:0 0 12px}.jogili-intro-name .brand-script{vertical-align:0}.jogili-intro-caption{top:calc(50svh + 80px)}
@media(max-width:700px){.jogili-intro-name{font-size:56px}.jogili-intro-caption{top:calc(50svh + 68px)}}

.jogili-intro-breath{font-size:clamp(30px,4.4vw,54px);font-weight:600;line-height:1.25;letter-spacing:-.025em;text-wrap:balance;margin-top:13px}.jogili-intro-caption{inset-inline:20px}.jogili-intro-name{font-size:57px}
@media(max-width:480px){.jogili-intro-breath{font-size:30px}.jogili-intro-name{font-size:50px}.jogili-intro-caption{top:calc(50svh + 60px)}}

.jogili-intro-breath{display:none}