:root {
  --ink: #2a1d14;
  --ink-soft: #5b4636;
  --paper: #f4ead5;
  --paper-2: #e9dab8;
  --red: #b3202a;
  --gold: #e3a526;
  --forest: #13301f;
  --moss: #5b7f3a;
  --lake: #2f7f99;
  --wood: #6b4226;
  --wood-2: #8a5a35;
  --cream: #fff8ea;

  --font-display: "Yatra One", "Mukta", system-ui, sans-serif;
  --font-body: "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Sagun's look — tweak the outfit here */
  --hair: #141217;            /* black */
  --hair-dark: #0b0a0d;
  --hair-tips: #6b8a43;       /* olive-green ends */
  --hair-tips-dark: #445f2e;
  --bangs: #1b2c48;           /* deep black-blue front pieces */
  --bangs-dark: #0e1626;
  --pants: #6b6a48;           /* olive cargo pants */
  --pants-dark: #4f4e34;
  --skin: #c99068;
  --skin-shade: #b27a53;
  --top: #151116;             /* black smocked tube top */
  --top-smock: #2e2830;
  --shoe: #2a1a12;

  /* dhaka-weave ribbon used as a motif everywhere */
  --dhaka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23b3202a'/%3E%3Cpath d='M0 8L8 0L16 8L8 16Z' fill='%231d1a1a'/%3E%3Cpath d='M4 8L8 4L12 8L8 12Z' fill='%23e3a526'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%23fff6e4'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--forest);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.dhaka-strip {
  height: 10px;
  background: var(--dhaka);
  background-size: 10px 10px;
}

/* character animation */
.sagun {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sagun__arm-wave {
  transform-box: view-box;
  transform-origin: 131px 139px;
  animation: sagun-wave 1.4s ease-in-out infinite;
}
.sagun__head {
  transform-box: view-box;
  transform-origin: 100px 120px;
  animation: sagun-tilt 2.8s ease-in-out infinite;
}
.sagun__eyes {
  transform-box: view-box;
  transform-origin: 100px 86px;
  animation: sagun-blink 4.5s infinite;
}
@keyframes sagun-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-16deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-12deg); }
}
@keyframes sagun-tilt {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}
@keyframes sagun-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}

/* walking pose: legs scissor, arms swing, body bobs */
.sagun__leg,
.sagun__swing,
.sagun__body {
  transform-box: view-box;
}
.sagun__leg--l { transform-origin: 86px 210px; }
.sagun__leg--r { transform-origin: 114px 210px; }
.sagun__swing { transform-origin: 69px 139px; }
.sagun--walk .sagun__leg--l { animation: sagun-step 0.7s linear infinite; }
.sagun--walk .sagun__leg--r { animation: sagun-step 0.7s linear -0.35s infinite; }
.sagun--walk .sagun__swing--l { animation: sagun-swing 0.7s ease-in-out infinite; }
.sagun--walk .sagun__swing--r { animation: sagun-swing 0.7s ease-in-out -0.35s infinite; }
.sagun--walk .sagun__body { transform-origin: 100px 340px; animation: sagun-bob 0.35s ease-in-out infinite alternate; }
/* a clear stride: one leg lifts and swings forward while the other plants */
@keyframes sagun-step {
  0%, 100% { transform: rotate(-9deg) translateY(-9px); }
  25% { transform: rotate(0deg) translateY(-4px); }
  50% { transform: rotate(8deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(0); }
}
@keyframes sagun-swing {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(-14deg); }
}
@keyframes sagun-bob {
  from { transform: translateY(0) rotate(-1.5deg); }
  to { transform: translateY(-6px) rotate(1.5deg); }
}

/* a walker shows the wave pose when idle, the walk pose while moving */
.walker {
  display: block;
  aspect-ratio: 200 / 360;
}
.walker__pose {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 0.15s;
}
.walker__pose--walk,
.walker.is-walking .walker__pose--wave {
  opacity: 0;
}
.walker.is-walking .walker__pose--walk {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* the walk cycle only plays while the reader is scrolling, so keep it */
  .sagun--walk .sagun__leg,
  .sagun--walk .sagun__swing,
  .sagun--walk .sagun__body {
    animation-duration: 0.7s !important;
    animation-iteration-count: infinite !important;
  }
  .sagun--walk .sagun__body {
    animation-duration: 0.35s !important;
  }
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* sound on/off */
.sound-toggle {
  position: fixed;
  z-index: 12;
  right: 16px;
  bottom: 16px;
  padding: 8px 14px;
  border: 0;
  border-radius: 99px;
  font: 600 14px var(--font-body);
  color: var(--ink);
  background: rgba(255, 248, 234, 0.92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.sound-toggle[aria-pressed="false"] {
  animation: sound-nudge 2.4s 2s ease-in-out 3;
}
@keyframes sound-nudge {
  0%, 100% { transform: none; }
  10% { transform: rotate(-6deg) scale(1.06); }
  20% { transform: rotate(5deg) scale(1.06); }
  30% { transform: none; }
}
/* on the climb the altimeter owns the bottom-right on phones */
body.trail .sound-toggle {
  left: 16px;
  right: auto;
}

/* talking: the smile gives way to a mouth that opens and closes */
.sagun__mouth {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 30%;
}
.is-talking .sagun__smile {
  opacity: 0;
}
.is-talking .sagun__mouth {
  opacity: 1;
  animation: sagun-talk 0.26s ease-in-out infinite alternate;
}
@keyframes sagun-talk {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}
/* on the climb (seen from behind) a little head-bob while she talks */
.hiker.is-talking .hiker__fig {
  animation: hiker-nod 0.5s ease-in-out infinite alternate;
}
@keyframes hiker-nod {
  from { transform: translateY(0) rotate(-0.6deg); }
  to { transform: translateY(-1.5px) rotate(0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .is-talking .sagun__mouth { animation-duration: 0.26s !important; animation-iteration-count: infinite !important; }
}