/*
 * Kirin Scroll Story: scoped styles.
 * Everything is prefixed .ks / .ks__ so nothing leaks into (or inherits unexpectedly from) the theme.
 * Override any --ks-* variable from the theme or Additional CSS, e.g.  .ks { --ks-cyan: #19d3e0; }
 */

.ks {
  --ks-bg: #01080c;
  --ks-ink: #eaf9fb;
  --ks-soft: rgba(205, 238, 243, 0.82);
  --ks-cyan: #28ebf5;
  --ks-line: rgba(40, 235, 245, 0.28);
  --ks-font: inherit;
  --ks-h: 660vh;            /* total scroll length on desktop (shortcode: height="660") */
  --ks-h-m: 550vh;          /* total scroll length on tablets/phones (shortcode: mobile_height="550") */
  --ks-offset: 0px;         /* height of a sticky site header, if any (shortcode: offset="72") */
  --ks-admin: 0px;          /* WordPress admin bar, set below */

  position: relative;
  box-sizing: border-box;
  height: var(--ks-h);
  margin: 0;
  padding: 0;
  background: var(--ks-bg);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.ks *, .ks *::before, .ks *::after { box-sizing: border-box; }

/* full-bleed: breaks out of a constrained content column without using transforms (transforms can break sticky) */
.ks.ks--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
html.ks-on { overflow-x: clip; }

.admin-bar .ks { --ks-admin: 32px; }
@media (max-width: 782px) { .admin-bar .ks { --ks-admin: 46px; } }

.ks .ks__stage {
  position: sticky;
  top: calc(var(--ks-offset) + var(--ks-admin));
  height: calc(100vh - var(--ks-offset) - var(--ks-admin));
  height: calc(100svh - var(--ks-offset) - var(--ks-admin));
  overflow: hidden;
  background: radial-gradient(ellipse at 62% 50%, #06303c 0%, #031a23 55%, #01080c 100%);
}
.ks .ks__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ks .ks__progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(40, 235, 245, 0.08); z-index: 5; }
.ks .ks__progress span { display: block; height: 100%; width: 100%; background: var(--ks-cyan); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px var(--ks-cyan); }

/* captions */
.ks .ks__captions { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ks .ks__cap {
  position: absolute; opacity: 0; will-change: opacity, transform;
  left: clamp(22px, 6vw, 96px); width: min(440px, 34vw); top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0;
}
.ks .ks__kicker { margin: 0 0 14px; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ks-cyan); }
.ks .ks__title { margin: 0 0 16px; padding: 0; font-family: inherit; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; color: var(--ks-ink); text-transform: none; }
.ks .ks__title em { font-style: normal; color: var(--ks-cyan); }
.ks .ks__text { margin: 0; padding: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: var(--ks-soft); }
.ks .ks__cap--end .ks__title { font-size: clamp(30px, 3.6vw, 54px); }
.ks .ks__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.ks .ks__cap--end.is-on .ks__actions { pointer-events: auto; }

/* buttons */
.ks a.ks__btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 22px; border-radius: 999px; border: 1px solid var(--ks-line);
  font: 600 14px/1 var(--ks-font); text-decoration: none; letter-spacing: normal; text-transform: none;
  color: var(--ks-ink); background: rgba(3, 26, 35, 0.6);
  transition: background .2s, border-color .2s;
}
.ks a.ks__btn:hover { border-color: var(--ks-cyan); background: rgba(8, 60, 76, 0.7); color: var(--ks-ink); }
.ks a.ks__btn--primary { background: var(--ks-cyan); color: #012128; border-color: var(--ks-cyan); box-shadow: 0 0 28px rgba(40, 235, 245, 0.35); }
.ks a.ks__btn--primary:hover { background: #7ff6fc; color: #012128; }
.ks a.ks__btn:focus-visible, .ks .ks__rail button:focus-visible, .ks a.ks__skip:focus-visible { outline: 2px solid var(--ks-cyan); outline-offset: 3px; }

/* chapter rail */
.ks .ks__rail { position: absolute; right: clamp(14px, 2.4vw, 36px); top: auto; bottom: clamp(28px, 7vh, 72px); transform: none; z-index: 6; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; }
.ks .ks__rail button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  font: 600 11px/1 var(--ks-font); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(205, 238, 243, 0.45); transition: color .25s;
}
.ks .ks__rail button i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; display: block; transition: background .25s, box-shadow .25s; }
.ks .ks__rail button.is-active { color: var(--ks-cyan); }
.ks .ks__rail button.is-active i { background: var(--ks-cyan); box-shadow: 0 0 12px var(--ks-cyan); }

/* scroll cue */
.ks .ks__cue {
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(205, 238, 243, 0.7); pointer-events: none;
}
.ks .ks__cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--ks-cyan), transparent); animation: ks-cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes ks-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* accessibility helpers */
.ks .ks__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks a.ks__skip {
  position: absolute; left: 12px; top: 12px; z-index: 50; padding: 10px 16px; border-radius: 8px;
  background: #031a23; color: var(--ks-ink); font: 600 14px/1 var(--ks-font); text-decoration: none;
  transform: translateY(-300%);
}
.ks a.ks__skip:focus { transform: none; }

/* plain-text version: used if the logo images fail to load */
.ks.ks--static { height: auto; }
.ks.ks--static .ks__stage { position: static; height: auto; overflow: visible; padding: 56px 22px; }
.ks.ks--static .ks__captions { position: static; pointer-events: auto; }
.ks.ks--static .ks__cap { position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; width: auto; max-width: 640px; margin: 0 auto 40px; }
.ks.ks--static .ks__canvas, .ks.ks--static .ks__rail, .ks.ks--static .ks__cue, .ks.ks--static .ks__progress { display: none; }

/* tablets and phones: graphic on top, captions below it */
@media (max-width: 1099px) {
  .ks { height: var(--ks-h-m); }
  .ks .ks__cap { left: 22px; right: 22px; width: auto; top: auto; bottom: calc(5.5vh + env(safe-area-inset-bottom)); transform: none; }
  .ks .ks__title { font-size: clamp(24px, 6.4vw, 38px); }
  .ks .ks__text { font-size: 15px; }
  .ks .ks__rail { right: 12px; top: 22%; bottom: auto; gap: 16px; }
  .ks .ks__rail button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ks .ks__cue { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* narrow desktops: dots only (the long chapter name would crowd the globe) */
@media (min-width: 1100px) and (max-width: 1279px) {
  .ks .ks__rail button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1099px) and (max-height: 640px) {
  .ks .ks__kicker { margin-bottom: 8px; }
  .ks .ks__text { display: none; }
  .ks .ks__cap--end .ks__text { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .ks .ks__cue::after { animation: none; transform: none; }
  .ks a.ks__btn { transition: none; }
}

/* optional whole-site ambient backdrop ([kirin_ambient] or ambient="yes").
   Needs the theme's page sections to be transparent (or semi-transparent) to show through. */
.ks-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--ks-ambient-opacity, 0.55); }
.ks-ambient canvas { display: block; width: 100%; height: 100%; }
html.ks-has-ambient { background: #01080c; }
html.ks-has-ambient body { background: transparent; }