/* bogil.app - the home page.
 *
 * Rebuilt because the first two passes made a calm page, and calm is the job
 * of an app screen, not of the page that has to sell it. Everything was a pale
 * card with a hairline border on an almost-white ground: no contrast, no
 * change of scale, and a brand whose whole identity is a fat purple letter
 * showing up only as a 46px logo.
 *
 * So: one dark band that commits to the colour, one very large line of type,
 * and the playable canvas sitting across the edge of the band so the thing you
 * can actually do is the centre of the composition rather than the fourth item
 * in a list.
 */

:root {
  --ink: #16181D;
  --muted: #7A8092;
  --faded: #A8AEBC;
  --brand: #7A53FC;
  --brand-deep: #5B34D8;
  --brand-soft: #F3EEFF;
  --plum: #2E1065;
  --plum-mid: #4C1D95;
  --green: #00C27A;
  --green-deep: #00A165;
  --green-soft: #E9F8F1;
  --you: #3B82F6;
  --you-soft: #EEF4FF;
  --peer: #FF6B4A;
  --peer-soft: #FFF0EC;
  --tint: #F3F4F8;
  --line: #ECEEF2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------------ band */

/* Paper, not a product hero.
 *
 * The previous pass put a big slab of saturated indigo here on the theory that
 * a landing page needs contrast. It does, but not that kind: this is a drawing
 * app, the app itself is light and pastel, and a dark corporate band both
 * clashed with it and left the brand's own purple looking washed out on top of
 * its own background.
 *
 * So the page looks like a sheet somebody has been doodling on. The contrast
 * comes from scale - one very large line of type - and from the white game
 * card casting a real shadow on the paper. */
.band {
  position: relative;
  padding: 40px 22px 130px;
  text-align: center;
  background:
    radial-gradient(680px 420px at 50% -12%, #F4EFFF 0%, rgba(244, 239, 255, 0) 70%),
    #FCFBFF;
  overflow: hidden;
}

.band .mark { width: 64px; height: 64px; display: block; margin: 0 auto 26px; position: relative; }

.band h1 {
  position: relative;
  margin: 0 auto; max-width: 13ch;
  font-size: clamp(38px, 8.5vw, 64px); font-weight: 800;
  letter-spacing: -2px; line-height: 1.04; color: var(--ink);
}
.band h1 .you { color: var(--you); }
.band h1 .peer { color: var(--peer); }

.band .lead {
  position: relative;
  margin: 18px auto 0; max-width: 40ch;
  font-size: clamp(15.5px, 2.6vw, 17.5px); font-weight: 600; color: var(--muted);
}

/* --------------------------------------------------------------- doodles */

.doodles { position: absolute; inset: 0; pointer-events: none; }
.d {
  position: absolute; width: 54px; height: 54px;
  fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: .5;
}
/* Scattered the way a margin gets scattered - different sizes, none level,
   all of them clear of the column the text sits in. */
.d1 { left: 6%;  top: 12%; transform: rotate(-12deg); }
.d2 { left: 14%; top: 46%; width: 34px; height: 34px; transform: rotate(18deg); }
.d3 { left: 4%;  top: 70%; width: 44px; height: 44px; transform: rotate(-6deg); }
.d4 { right: 7%; top: 10%; width: 60px; height: 60px; transform: rotate(10deg); }
.d5 { right: 13%; top: 44%; width: 38px; height: 38px; transform: rotate(-14deg); }
.d6 { right: 5%; top: 68%; width: 50px; height: 50px; transform: rotate(8deg); }
.d7 { left: 24%; top: 6%;  width: 26px; height: 26px; transform: rotate(-20deg); opacity: .38; }
.d8 { right: 25%; top: 76%; width: 30px; height: 30px; transform: rotate(14deg); opacity: .38; }

/* Below this width there is no margin to doodle in; the text would have to
   share the space, which is worse than a plain page. */
@media (max-width: 860px) {
  .d1, .d3, .d5, .d7, .d8 { display: none; }
  .d2 { left: 3%; top: 8%; }
  .d4 { right: 3%; top: 8%; }
  .d6 { right: 4%; top: 78%; }
}
@media (max-width: 560px) {
  .doodles { display: none; }
}

/* ---------------------------------------------------------------- stores */

.soon { position: relative; margin-top: 28px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.soon span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: #fff; border: 2px solid var(--line);
  font-size: 13.5px; font-weight: 800; color: var(--muted);
}
.soon svg { width: 16px; height: 16px; flex: none; fill: var(--muted); }
.soon-note { position: relative; margin: 14px 0 0; font-size: 12.5px; font-weight: 700; color: var(--faded); }

/* --------------------------------------------------------------- the game */

/* Kopya Yarışı, playable. A screenshot cannot tell somebody what this app is
   like; three minutes of failing to copy a sunset can. It is pulled up over
   the band's edge so it reads as the subject of the page. */
.game {
  position: relative;
  margin: -100px auto 0; max-width: 460px;
  background: #fff; border-radius: 28px; padding: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -26px rgba(46, 16, 101, .35);
}

/* The picture you are copying.
 *
 * It used to be 92px wide, tucked beside the title at the size of an avatar,
 * which is the wrong size for the one thing the game asks you to look at: it
 * read as a fragment of a picture rather than a picture. It is matted and
 * framed now, and it opens - copying from a stamp is a different, worse game,
 * and the app lets you open it too. */
.target { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.shot {
  position: relative; flex: none; line-height: 0; cursor: zoom-in;
  padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 15px; box-shadow: 0 8px 16px -12px rgba(46, 16, 101, .55);
}
.shot img {
  display: block; width: 150px; height: 113px; border-radius: 9px;
  background: var(--tint); object-fit: cover;
}
.shot .zoom {
  position: absolute; right: 12px; bottom: 12px;
  padding: 3px 7px; border-radius: 999px; background: rgba(22, 24, 29, .55);
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .6px;
  line-height: 1.2; text-transform: uppercase;
}
.target-label {
  margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand);
}
.target-title { margin: 2px 0 0; font-size: 18px; font-weight: 800; }
.target-sub {
  margin: 4px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.35;
  color: var(--faded);
}

.lightbox {
  position: fixed; inset: 0; z-index: 50; padding: 24px; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 24, 29, .74);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  width: min(560px, 90vw); border-radius: 16px;
  border: 9px solid #fff; background: #fff;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .7);
}
.lightbox-close {
  position: absolute; top: 18px; right: 20px; width: 42px; height: 42px;
  border: 0; border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 24px; font-weight: 700; line-height: 1; color: var(--ink);
}

/* On a phone the frame gives back the width the title needs. This has to sit
   after the rules it overrides, not up with the other narrow-screen rules:
   same specificity, so the last one wins. */
@media (max-width: 560px) {
  .shot img { width: 118px; height: 89px; }
  .shot .zoom { right: 10px; bottom: 10px; }
}

.paper {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  overflow: hidden;
}
.paper canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair; display: block;
}
.hint { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--brand); }

/* Taken from the picture being copied, so the game is "put these colours in
   the right places" rather than "guess the colour". */
.swatches { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.swatch {
  width: 32px; height: 32px; border-radius: 999px; border: 3px solid transparent;
  padding: 0; cursor: pointer; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .08);
  transition: transform .12s;
}
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }

.paper-tools { margin-top: 10px; display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; align-items: center; }
.nib {
  width: 32px; height: 32px; border-radius: 999px; border: 2px solid var(--line);
  background: #fff; display: grid; place-items: center; padding: 0; cursor: pointer;
}
.nib i { display: block; border-radius: 999px; background: var(--muted); }
.nib[aria-pressed="true"] { border-color: var(--ink); }
.nib[aria-pressed="true"] i { background: var(--ink); }
.tool {
  padding: 0 13px; height: 32px; border: 0; border-radius: 999px;
  background: var(--tint); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.tool:hover { background: var(--line); }

.go {
  margin-top: 14px; width: 100%; padding: 16px; border: 0; border-radius: 18px;
  background: var(--green); color: #fff; font: inherit; font-size: 16.5px; font-weight: 800;
  box-shadow: 0 4px 0 var(--green-deep); cursor: pointer;
}
.go:active { transform: translateY(4px); box-shadow: none; }

.result { margin-top: 16px; padding: 20px; border-radius: 22px; background: var(--brand-soft); text-align: center; }
.result .score { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -2px; color: var(--brand); line-height: 1; }
.result .verdict { margin: 6px 0 0; font-size: 15px; font-weight: 800; }
.result-tools { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
.result-note { margin: 14px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ----------------------------------------------------------------- modes */

.eyebrow {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; color: var(--faded);
  margin: 64px 0 18px; text-transform: uppercase; text-align: center;
}

/* Blocks of colour, not bordered cards, and one short line each - the long
   paragraphs were three descriptions nobody was going to read standing up. */
.modes { display: grid; gap: 14px; grid-template-columns: 1fr; }
.mode { border-radius: 26px; padding: 24px 22px; text-align: center; }
.mode.canvas { background: var(--green-soft); }
.mode.chain  { background: var(--brand-soft); }
.mode.race   { background: var(--you-soft); }
.mode img { width: 76px; height: 76px; display: block; margin: 0 auto 12px; }
.mode h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.mode p { margin: 7px auto 0; max-width: 30ch; font-size: 14.5px; font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------------- the drift */

/* The best thing this app does is hard to describe and easy to show. Its own
   tinted band, so it reads as a chapter rather than a fourth card. */
.drift { margin: 64px 0 0; padding: 40px 0 44px; background: var(--tint); }
.drift-head { text-align: center; max-width: 540px; margin: 0 auto 26px; padding: 0 22px; }
.drift-head .eyebrow { margin: 0 0 8px; }
.drift h2 { margin: 0; font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -1px; }
.drift-lead { margin: 12px 0 0; font-size: 14.5px; font-weight: 600; color: var(--muted); }

.drift-steps {
  list-style: none; margin: 0 auto; padding: 0 22px; max-width: 1060px;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}

.step {
  position: relative;
  background: #fff; border-radius: 22px; padding: 18px 20px; min-height: 138px;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  box-shadow: 0 10px 24px -18px rgba(22, 24, 29, .5);

  /* One after another, so the eye travels the chain in the order it happened.
     Without the stagger it is four boxes; with it, it is a story.

     The resting state is visible and the animation only supplies the entrance,
     with backwards fill holding the start during the delay. Written the other
     way round - opacity:0 plus a forwards animation - the panels stay invisible
     anywhere the animation does not run, and the section becomes a heading, a
     blank gap and a punchline. */
  animation: step-in .5s ease-out backwards;
}
.step[data-step="1"] { animation-delay: .05s; }
.step[data-step="2"] { animation-delay: .45s; }
.step[data-step="3"] { animation-delay: .85s; }
.step[data-step="4"] { animation-delay: 1.25s; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }

.who { font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.who.you { color: var(--you); }
.who.peer { color: var(--peer); }
.said { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.35; }
.doodle { width: 100%; height: 80px; }

.drift-punch {
  margin: 24px auto 0; text-align: center; padding: 0 22px;
  font-size: 14.5px; font-weight: 800; color: var(--muted);
}

/* --------------------------------------------------------------- footer */

footer {
  margin-top: 0; padding: 32px 22px 44px; text-align: center;
  border-top: 1px solid var(--line);
}
footer nav { margin-bottom: 12px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
footer nav a { font-size: 13px; font-weight: 800; color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--brand); }
footer p { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--faded); }

/* ------------------------------------------------------------ wide screens */

@media (min-width: 760px) {
  .modes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .drift-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* An arrow between the panels, so it reads as a sequence and not a gallery. */
  .step + .step::before {
    content: ""; position: absolute; left: -18px; top: 50%;
    width: 11px; height: 11px; margin-top: -6px;
    border-right: 2.5px solid var(--faded); border-top: 2.5px solid var(--faded);
    transform: rotate(45deg);
  }
}

@media (min-width: 1000px) {
  .band { padding-bottom: 150px; }
  .game { max-width: 520px; margin-top: -120px; padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}