/* Kuyog marketing + legal site.
   Deliberately self-contained: no CDNs, no fonts, no trackers, no analytics.
   A privacy page that loads third-party resources is a contradiction. */

:root {
  --ink: #3b2a17;
  --ink-soft: #5c4630;
  --parchment: #e8d5ac;
  --parchment-edge: #c4a875;
  --sea: #1d4e6f;
  --gold: #f2c14e;
  --leaf: #2f7d4f;
  --max: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #0e2233;
  line-height: 1.65;
  font-size: 17px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
  background-image: url("assets/island.jpg");
  background-size: cover;
  background-position: center 38%;
  text-align: center;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,34,51,0) 55%, rgba(14,34,51,0.55) 88%, #0e2233 100%);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.banner {
  width: min(560px, 88vw);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.42));
}

/* Full-bleed scrim behind the hero lines. The island art is bright and busy in
   places, and white-on-photo legibility should not depend on where the artwork
   happens to be light. align-self:stretch fills the hero's content box and the
   negative inline margin bleeds it through the 20px padding to both edges --
   using 100vw instead would overflow by the scrollbar width. */
.hero-band {
  align-self: stretch;
  margin: 22px -20px 0;
  padding: 16px 20px 18px;
  background: rgba(6, 16, 26, 0.46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.hero-band .hero-tag { margin-top: 0; }

.hero-tag {
  margin: 0 auto;
  max-width: 34ch;
  color: #fffaf0;
  font-size: clamp(19px, 2.7vw, 25px);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 3px rgba(0,0,0,0.5);
}

.hero-sub {
  margin: 10px auto 0;
  max-width: 40ch;
  color: #e7f2fb;
  font-size: clamp(15px, 2vw, 18px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.soon {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(14,34,51,0.62);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

/* ---------- parchment panels ---------- */

main { max-width: var(--max); margin: 0 auto; padding: 0 18px 80px; }

.panel {
  background: var(--parchment);
  border: 3px solid var(--parchment-edge);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.28);
  padding: clamp(22px, 4vw, 40px);
  margin: 0 0 26px;
}

/* Only the landing page's first panel laps over the hero art. On the legal
   pages there is no hero, so an unconditional negative margin pulled the
   panel up over the nav and hid it. */
.hero + main > .panel:first-child { margin-top: -44px; }

.panel + .panel { margin-top: 26px; }

h1, h2, h3 { line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 6px; }
h2 { font-size: clamp(21px, 3vw, 26px); margin: 34px 0 10px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 18px; margin: 22px 0 6px; }

p { margin: 0 0 15px; }
.lede { font-size: 19px; font-weight: 600; }

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

/* the "no" list — the product's spine, so it gets to look like a statement */
.nolist {
  list-style: none;
  padding: 0;
  margin: 18px 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.nolist li {
  margin: 0;
  padding: 9px 13px;
  background: rgba(255,255,255,0.42);
  border-left: 4px solid var(--leaf);
  border-radius: 7px;
  font-weight: 650;
}

.callout {
  margin: 20px 0;
  padding: 16px 18px;
  background: rgba(255,255,255,0.5);
  border-left: 5px solid var(--gold);
  border-radius: 9px;
}
.callout p:last-child { margin-bottom: 0; }

a { color: #1c5f8c; text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: #10425f; }

hr { border: none; border-top: 2px dashed var(--parchment-edge); margin: 30px 0; }

/* ---------- nav + footer ---------- */

.navbar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 18px;
}
.navbar a {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(232,213,172,0.14);
  border: 2px solid rgba(232,213,172,0.34);
  color: var(--parchment);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.navbar a:hover { background: rgba(232,213,172,0.26); color: #fff; }
.navbar a[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: #2b1f0e; }

footer {
  text-align: center;
  color: #9fb6c9;
  font-size: 14px;
  padding: 8px 18px 52px;
}
footer a { color: #bcd6e8; }

.meta {
  font-size: 14px;
  color: var(--ink-soft);
  border-top: 2px dashed var(--parchment-edge);
  padding-top: 14px;
  margin-top: 26px;
}

.draft {
  background: #fff3cd;
  border: 2px solid #d9a406;
  border-radius: 10px;
  padding: 13px 16px;
  margin: 0 0 24px;
  font-size: 15px;
  color: #5c4a06;
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .panel { margin-left: -2px; margin-right: -2px; }
}

/* ---------- etymology ---------- */
/* The name means "to accompany, to go along with, to join someone" in Cebuano.
   That is the entire product in one word, so it gets its own quiet moment
   rather than being buried in a paragraph. */

.etym {
  margin: 26px 0 4px;
  padding: 20px 22px;
  text-align: center;
  background: rgba(255,255,255,0.42);
  border: 2px dashed var(--parchment-edge);
  border-radius: 12px;
}

.etym-word {
  margin: 0 0 6px;
  font-size: clamp(23px, 3.4vw, 29px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.etym-word span {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.etym-def {
  margin: 0;
  font-size: clamp(15px, 2vw, 17.5px);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ============================================================================
   SCROLL EFFECTS

   Pure CSS — no JavaScript at all. That is a hard constraint, not a
   preference: _headers ships `default-src 'none'` with no script-src, so a
   single <script> would break the page's own policy. A site whose argument is
   "we don't run trackers" should not need JS to fade a panel in.

   Everything below is progressive. Browsers without scroll-driven animations
   simply show the content, already in its final state — nothing is hidden
   behind an effect that might not run.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Panels rise and settle as they enter. Short range so it completes well
       before the panel is centred — the effect should be over by the time you
       are actually reading. */
    .panel {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    @keyframes rise-in {
      from { opacity: 0; transform: translateY(26px) scale(0.985); }
      to   { opacity: 1; transform: none; }
    }

    /* The "no" list is the product's spine, so it gets a stagger. Each tile
       is offset by its own position rather than a fixed nth-child ladder. */
    .nolist li {
      animation: tile-in linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 55%;
    }
    .nolist li:nth-child(2n)  { animation-range: entry 12% entry 58%; }
    .nolist li:nth-child(3n)  { animation-range: entry 16% entry 62%; }

    @keyframes tile-in {
      from { opacity: 0; transform: translateX(-10px); }
      to   { opacity: 1; transform: none; }
    }

    /* The etymology is the one line worth pausing on. It holds slightly
       longer and arrives with a touch more weight than the panels around it. */
    .etym {
      animation: etym-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    @keyframes etym-in {
      from { opacity: 0; transform: scale(0.94); letter-spacing: 0.04em; }
      to   { opacity: 1; transform: none; letter-spacing: normal; }
    }

    /* Hero parallax: the island drifts slower than the page, and the banner
       lifts away as you leave. Tied to the hero's own exit range so it is
       finished exactly when the hero is gone. */
    .hero {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    @keyframes hero-drift {
      from { background-position: center 38%; }
      to   { background-position: center 58%; }
    }

    .banner {
      animation: banner-lift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 80%;
    }

    @keyframes banner-lift {
      from { opacity: 1; transform: translateY(0) scale(1); }
      to   { opacity: 0.15; transform: translateY(-38px) scale(0.94); }
    }

    /* A thin progress line along the top. Uses the document scroll timeline
       rather than a view timeline. */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 100%;
      z-index: 99;
      transform-origin: 0 50%;
      background: linear-gradient(90deg, var(--gold), var(--leaf));
      animation: scroll-progress linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes scroll-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

/* Sticky nav — no animation needed, works everywhere, and keeps the policy
   links reachable at any scroll depth. That matters more than the effects:
   a carrier reviewer should never have to hunt for them. */
.navbar {
  position: sticky;
  z-index: 50;
  background: rgba(14, 34, 51, 0.86);
  backdrop-filter: blur(8px);
}

/* Landing page: nav sits at the end, so it sticks to the bottom. */
.hero ~ .navbar {
  bottom: 0;
  border-top: 1px solid rgba(232, 213, 172, 0.16);
}

/* Legal pages: nav is the first thing on the page, so it sticks to the top
   and keeps the policy links reachable at any scroll depth. */
body > .navbar:first-child {
  top: 0;
  border-bottom: 1px solid rgba(232, 213, 172, 0.16);
}

/* Smooth in-page jumps, but never for people who asked us not to move things. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* Legal pages: main starts right under a sticky top nav, so give it room.
   Without this the first panel's entry animation begins underneath the bar. */
body > .navbar:first-child + main { padding-top: 14px; }

/* ============================================================================
   WALKABLE AVATAR + REAL GAME CONTROLS

   The same d-pad, A/B buttons and walking sprite the app ships, so the site
   demonstrates the product rather than only describing it. Driven by
   play.js — self-hosted, no dependencies, no network calls, no storage.
   ============================================================================ */

.play-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* only the controls take input */
  z-index: 40;
}

/* ---- the little guy ---- */

.play-avatar {
  position: absolute;
  bottom: 96px;
  left: 0;
  width: 54px;
  height: 90px;
  margin-left: -27px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
  will-change: transform;
}

.play-avatar[data-frame="0"] { background-image: url("assets/walk0.png"); }
.play-avatar[data-frame="1"] { background-image: url("assets/walk1.png"); }
.play-avatar[data-frame="2"] { background-image: url("assets/walk2.png"); }
.play-avatar[data-frame="3"] { background-image: url("assets/walk3.png"); }

.play-avatar.wave { animation: guy-wave 0.42s ease-in-out; }
@keyframes guy-wave {
  0%, 100% { rotate: 0deg; }
  30%      { rotate: -7deg; }
  65%      { rotate: 7deg; }
}

/* ---- d-pad: one full-frame image per state ----
   Frames were normalised at build time using the app's own atlas rules
   (trim offsets with offsetY measured from the bottom, plus rotate:90
   handling), so every state is a complete 130x136 frame and swapping them
   needs no offset maths here. */

.play-dpad {
  position: absolute;
  left: 20px;
  bottom: 78px;
  width: 130px;
  height: 136px;
  pointer-events: auto;
  background: url("assets/dpad_base.png") center/contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.45));
}

.play-dpad[data-dir="left"]  { background-image: url("assets/dpad_left.png"); }
.play-dpad[data-dir="right"] { background-image: url("assets/dpad_right.png"); }
.play-dpad[data-dir="up"]    { background-image: url("assets/dpad_topmiddle.png"); }
.play-dpad[data-dir="down"]  { background-image: url("assets/dpad_bottom.png"); }

.pd {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pd:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

.pd-up    { left: 42px; top: 0;     width: 46px; height: 52px; }
.pd-down  { left: 42px; bottom: 0;  width: 46px; height: 52px; }
.pd-left  { left: 0;    top: 44px;  width: 52px; height: 46px; }
.pd-right { right: 0;   top: 44px;  width: 52px; height: 46px; }

/* ---- A / B ---- */

.play-actions {
  position: absolute;
  right: 22px;
  bottom: 88px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.pa {
  width: 66px;
  height: 64px;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  image-rendering: pixelated;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.42));
}
.pa:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 50%; }

.pa-b    { background-image: url("assets/btn_b.png"); }
.pa-a    { background-image: url("assets/btn_a.png"); }
.pa-b.on { background-image: url("assets/btn_bpressed.png"); }
.pa-a.on { background-image: url("assets/btn_apressed.png"); }

/* ---- keep controls clear of the sticky nav, and out of the way on small screens ---- */

@media (max-width: 720px) {
  .play-dpad  { transform: scale(0.8); transform-origin: left bottom; left: 10px; }
  .play-actions { transform: scale(0.85); transform-origin: right bottom; right: 12px; }
  .play-avatar { bottom: 88px; }
}

@media (max-width: 420px) {
  .play-dpad, .play-actions { opacity: 0.85; }
}

/* Anyone who asked for reduced motion gets no avatar at all — play.js exits
   early and never inserts the layer, so this is belt-and-braces. */
@media (prefers-reduced-motion: reduce) {
  .play-layer { display: none; }
}