/* Mapitam coming-soon page. Theme "drawing sheet": the page is a sheet of drawing paper,
   and the logo is drafted onto it when the page opens. */

:root {
  --sheet: #EFF2F5;     /* drawing paper */
  --ink: #151515;       /* instrument black: logo, text */
  --accent: #1A6FD0;    /* blueprint blue: the logo's pointer only */
  --graphite: #58606A;  /* second-level text, leader line */
  --m: 22px;            /* space kept clear at the screen edge */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --gu: "Noto Sans Gujarati", "Shruti", sans-serif;
}

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

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

body {
  margin: 0;
  padding: var(--m);
  min-height: 100vh;
  min-height: 100svh;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

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

/* ---------- The sheet ---------- */

.sheet {
  min-height: calc(100vh - 2 * var(--m));
  min-height: calc(100svh - 2 * var(--m));
  display: flex;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 5vh, 64px) 24px;
}

/* ---------- The mark and its drawing note ---------- */

.mark-wrap {
  position: relative;
  width: clamp(140px, min(22vw, 28vh), 240px);
  aspect-ratio: 148 / 156;
}

.mark, .leader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mark .body, .mark .ticks rect { fill: var(--ink); }
.mark .pointer { fill: var(--accent); }

/* A drawing note: leader from the pointer, up and out to the right. */
.leader path {
  fill: none;
  stroke: var(--graphite);
  stroke-width: .7;   /* drawing units: about 1px at full size */
}
.leader circle { fill: var(--graphite); }

.note {
  position: absolute;
  /* x = 196 and y = 8 in the logo's drawing units (viewBox starts at 26, 22; size 148 x 156) */
  left: calc((196 - 26) / 148 * 100% + 10px);
  top: calc((8 - 22) / 156 * 100%);
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ---------- Name and status ---------- */

.wordmark {
  margin-top: clamp(22px, 4vh, 36px);
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(30px, min(4.4vw, 6.2vh), 54px);
  line-height: 1;
  letter-spacing: .24em;
  margin-right: -.24em;   /* balance the tracking after the last letter */
  white-space: nowrap;
}

.name-gu {
  margin-top: 12px;
  font-family: var(--gu);
  font-size: 18px;
  line-height: 1.4;
  color: var(--graphite);
}

/* On wide screens the tagline is the drawing note; on narrow screens it sits under the name. */
.tagline { display: none; }

.status {
  margin-top: clamp(28px, 6vh, 72px);
  text-wrap: balance;
}

.soon {
  font-size: clamp(24px, min(2.6vw, 3.6vh), 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
}

.soon-gu {
  margin-top: 6px;
  font-family: var(--gu);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.45;
  color: var(--graphite);
}

.by {
  margin-top: 18px;
  font-size: 17px;
  color: var(--graphite);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 760px) {
  .leader, .note { display: none; }
  .tagline {
    display: block;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 500;
  }
}

@media (max-width: 600px) {
  :root { --m: 12px; }
}

/* ---------- The one moment: the logo is drafted onto the sheet ---------- */

@media (prefers-reduced-motion: no-preference) {
  .mark .body {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: draw-across .5s cubic-bezier(.2, .7, .2, 1) .15s both;
  }

  .mark .ticks rect {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: rise .5s cubic-bezier(.2, .8, .2, 1) both;
  }
  .mark .ticks rect:nth-child(1)  { animation-delay: .45s; }
  .mark .ticks rect:nth-child(2)  { animation-delay: .51s; }
  .mark .ticks rect:nth-child(3)  { animation-delay: .57s; }
  .mark .ticks rect:nth-child(4)  { animation-delay: .63s; }
  .mark .ticks rect:nth-child(5)  { animation-delay: .69s; }
  .mark .ticks rect:nth-child(6)  { animation-delay: .81s; }
  .mark .ticks rect:nth-child(7)  { animation-delay: .87s; }
  .mark .ticks rect:nth-child(8)  { animation-delay: .93s; }
  .mark .ticks rect:nth-child(9)  { animation-delay: .99s; }
  .mark .ticks rect:nth-child(10) { animation-delay: 1.05s; }

  /* The pointer drops into the gap and settles, like a needle finding its reading. */
  .mark .pointer { animation: settle .7s cubic-bezier(.3, 1.45, .5, 1) 1.45s both; }

  .leader circle { animation: appear .2s ease-out 2.15s both; }
  .leader path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw-line .55s ease-out 2.2s forwards;
  }
  .note { animation: appear .5s ease-out 2.7s both; }

  .wordmark, .name-gu, .tagline { animation: appear .7s ease-out 1.9s both; }
  .soon, .soon-gu { animation: appear .7s ease-out 2.3s both; }
  .by { animation: appear .7s ease-out 2.8s both; }
}

@keyframes draw-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes settle {
  from { transform: translateY(-48px); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }