/* Monsoon Ink · Bamboo — the deck's look (from directions/d10b-bamboo).
   The paper, washes and bamboo live in ONE persistent layer (#backdrop, index.html) behind every slide. */
:root {
  --ground: #8796a6;
  --ink: #141a24;
  --ink-soft: #252e3c;
  --pencil: #28313f;
  --navy: #1a2e50;
  --logo: #000;  /* CodeYogi logo is only ever black or white; black suits the ink theme */
  --seal: #b8321f;
  --display: Tiro, serif;
  --body: Tiro, serif;
}
html, body { background: #2e3640; color: var(--ink); font-family: Tiro, serif; }

/* The engine's stage keeps its size + scaling but becomes transparent, so the backdrop shows through. */
#stage { background: transparent; z-index: 1; }
#backdrop {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform-origin: top left; overflow: hidden; background: var(--ground); pointer-events: none;
}
#backdrop .layer, .slide .layer { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; pointer-events: none; }
#ground { will-change: transform; }
.grove-host { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.grove { position: absolute; inset: 0; will-change: transform; animation: grove 13s ease-in-out infinite alternate; }
@keyframes grove { 0% { transform: rotate(-.22deg); } 100% { transform: rotate(.32deg); } }
.pc { position: absolute; display: block; overflow: visible; will-change: transform; }
.lf { animation: lf var(--d, 7s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes lf { 0% { transform: rotate(calc(var(--a, 2deg) * -1 + var(--g))); } 100% { transform: rotate(calc(var(--a, 2deg) + var(--g))); } }
/* gusts (grove design 3) bend every spray together through --g */
@property --g { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
/* each leaf flutters on its own around its base (grove designs 1-4) */
.lfl { transform-box: view-box; animation: lfl var(--fd, 3.4s) ease-in-out infinite alternate; animation-delay: var(--fdl, 0s); }
@keyframes lfl { 0% { transform: rotate(calc(var(--fa, 5deg) * -1)); } 100% { transform: rotate(var(--fa, 5deg)); } }

/* Slides: no engine padding; every element is placed on the 1920×1080 grid. */
.slide { padding: 0; color: var(--ink); }

/* Engine chrome restyled for paper. The counter is replaced by the Devanagari folio. */
#counter { display: none; }
.folio { display: none !important;
  position: absolute; right: 160px; bottom: 118px; z-index: 2;
  font: 400 24px/1 Tiro, serif; color: var(--pencil); opacity: .62; letter-spacing: .14em;
}
#help { background: rgba(36, 44, 56, .94); color: #eef1f3; }
#help kbd { background: #e9eef2; color: var(--ink); font-family: Poppins, sans-serif; font-size: 26px; }
#error { color: #eef1f3; }

/* Logo: mark + two-line Poppins wordmark, navy. */
.logo { position: absolute; display: flex; align-items: center; color: var(--logo); }
.logo svg { display: block; width: auto; }
.logo .wm { font-family: Poppins, sans-serif; line-height: 1; display: flex; flex-direction: column; }
.logo .wm b { font-weight: 700; letter-spacing: -.012em; }
.logo .wm span { font-weight: 600; letter-spacing: .005em; }  /* each size below tracks "Foundation" out to end where "CodeYogi" ends */
.logo.lg { left: 160px; top: 136px; gap: 16px; }
.logo.lg svg { height: 70px; }
.logo.lg .wm { gap: 6px; } .logo.lg .wm b { font-size: 31px; } .logo.lg .wm span { font-size: 18px; letter-spacing: .29em; margin-right: -.29em; }
.logo.sm { left: 160px; top: 136px; gap: 13px; }
.logo.sm svg { height: 52px; }
.logo.sm .wm { gap: 4px; } .logo.sm .wm b { font-size: 23px; } .logo.sm .wm span { font-size: 13.5px; letter-spacing: .28em; margin-right: -.28em; }

/* Type: one face (Tiro Devanagari), a strict scale: 232 / 150 / 96 / 64 / 30. */
.hi { font-family: Tiro, serif; font-weight: 400; color: var(--ink); font-feature-settings: "kern"; }
.headline { position: absolute; left: 162px; color: var(--ink-soft); top: 372px; font-size: 232px; line-height: 1; letter-spacing: -.005em; filter: url(#bleed); white-space: nowrap; }
.kicker { position: absolute; font: 400 30px/1.3 Tiro, serif; color: var(--pencil); opacity: .78; letter-spacing: .02em; }
.line { position: absolute; font: 400 96px/1.2 Tiro, serif; color: var(--ink); white-space: nowrap; filter: url(#bleedSoft); }
.line.md { font-size: 64px; line-height: 1.3; }
.line.xl { font-size: 150px; line-height: 1.1; color: var(--ink-soft); filter: url(#bleed); }
.dim { color: var(--pencil); }
.seal { position: absolute; display: block; }