/* Pip's surface, cream edition. Replaces the black glass of pip.v1.css:
   the landing is now ink on cream, so the auras and the liquid glass are
   gone and what is left is the paper, the mascot's motion, and the type.

   Versioned in the filename on purpose. /assets/* is cached for a year and
   marked immutable, so changing this file means bumping it to pip.v4.css and
   updating the link tags. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg:     #f3f2ea;   /* the paper */
  --fg:     #1a1a1a;   /* ink */
  --body:   #3a3846;   /* body copy, one step off ink */
  --muted:  #66646f;   /* fine print */
  --cream:  #faf9f2;   /* Pip's fill */
  --blush:  #d6d6ef;   /* the one accent */
}

.font-serif-instrument { font-family: 'Instrument Serif', serif; }

/* The paper: a printed dot grid with a soft blush bloom behind the mascot.
   Both are decoration and neither is allowed to eat a click. */
.pip-paper {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(26, 26, 26, .07) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
.pip-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 46% at 50% 30%, rgba(214, 214, 239, .85), rgba(214, 214, 239, 0) 70%);
}

/* Everything on this page that is a real object sits on ink: a 1.5px outline
   and a hard shadow with no blur. Nothing floats, nothing is soft. */
.pip-card {
  background: #fff;
  border: 1.5px solid var(--fg);
  box-shadow: 0 3px 0 var(--fg);
}
.pip-solid {
  background: var(--fg);
  color: var(--cream);
}
.pip-press { transition: transform .16s ease, box-shadow .16s ease; }
.pip-press:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--fg); }

/* --- the mascot ------------------------------------------------------- */
@keyframes pip-bob   { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes pip-blink { 0%, 93%, 100% { transform: scaleY(1) } 96% { transform: scaleY(.1) } }
@keyframes pip-wob   { 0%, 100% { transform: rotate(var(--r)) translateY(0) } 50% { transform: rotate(var(--r)) translateY(-5px) } }

.pip-bob { animation: pip-bob 6s ease-in-out infinite; filter: drop-shadow(0 18px 22px rgba(26, 26, 26, .16)); }
.pip-eye { transform-box: fill-box; transform-origin: center; animation: pip-blink 7s infinite; }

/* The stickers either side of him. They are the proof line, not decoration,
   so they hide rather than wrap when there is no room beside the mascot. */
.pip-stk {
  position: absolute;
  white-space: nowrap;
  transform: rotate(var(--r));
  animation: pip-wob 6s ease-in-out infinite;
  background: #fff;
  border: 1.5px solid var(--fg);
  box-shadow: 0 3px 0 var(--fg);
}
@media (max-width: 900px) { .pip-stk { display: none; } }

@keyframes pip-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pip-msg { opacity: 0; animation: pip-arrive 500ms ease-out forwards; }
.pip-msg:nth-child(1) { animation-delay: 0.35s; }
.pip-msg:nth-child(2) { animation-delay: 2.1s; }
.pip-msg:nth-child(3) { animation-delay: 3.7s; }

@media (prefers-reduced-motion: reduce) {
  .pip-msg { opacity: 1; animation: none; }
  .pip-bob, .pip-eye, .pip-stk { animation: none; }
}

/* Native dropdowns render options with OS chrome. On cream they need saying
   the other way round to how v1 said it. */
select.pip-country option { background: #faf9f2; color: #1a1a1a; }

::selection { background: var(--blush); color: var(--fg); }
:focus-visible { outline: 2px solid #4b4b8f; outline-offset: 2px; }

/* Landing waitlist only. /login reuses #phone-form, so a
   body:not(.signup-closed) hide would blank the dashboard login. */
body.signup-closed #phone-form,
body.signup-closed #status {
  display: block !important;
}
body.signup-closed #nav-cta {
  display: inline-flex !important;
}

/* The hidden attribute has to win. Tailwind's display utilities (flex, grid,
   inline-flex) are plain class rules, so they outrank the user-agent
   [hidden] { display: none } and an element carrying both paints anyway.
   #after is exactly that case: hidden in the markup, flex for its layout,
   and visible on the page with a dead href until config answers. Marked
   !important because the rules above use it too, and a plain [hidden] rule
   would lose to those. */
[hidden] {
  display: none !important;
}