/* contact.nono.my, in the same hand as the sites that link to it: the drawn
   frames, the paper fields and the cat all come from manga.nono.my and
   me.nono.my, so arriving here from any of them is not a change of scene.
   Written fresh rather than copied, because this site is two pages and the
   downloader's stylesheet is mostly rules for a downloader. */

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

:root {
  --col: 900px;

  /* His placement, in fractions of his own size, exactly as it was worked out
     by hand over on the downloader: what was placed is where his tail meets the
     right edge of the field, and that only holds if both numbers scale with him
     rather than with the box. */
  --cat: 174px;
  --cat-right: -0.207;
  --cat-top: -0.575;
  --field-h: 62px;

  --bg: #1e1c24;
  --text: #e2d4ee;
  --dim: #9d93ab;
  --field: #272430;
  --lav: #d2ace8;
}

@media (min-width: 701px) {
  :root {
    --cat: 334px;
    --cat-right: -0.203;
    --cat-top: -0.575;
  }
}

@font-face {
  font-family: 'Shantell Sans';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/fonts/shantell-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/fonts/shantell-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
input, button, textarea { font-family: inherit; }

body {
  margin: 0;
  padding: 26px 16px 100px;   /* the last value clears the fixed footer */
  background: var(--bg);
  color: var(--text);
  font-family: 'Shantell Sans', Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  margin: auto 0 74px;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--lav);
}

.main-content {
  width: 100%;
  max-width: var(--col);
  /* His slot hangs past the right edge of the field on purpose. Clipped here so
     that overhang cannot widen the document on a phone, with a few pixels of
     slack so the drawn frames, which paint 2px outside their box, keep their
     outer edge. */
  overflow-x: clip;
  overflow-clip-margin: 6px;
  margin: 0 auto auto;
  color: var(--text);
  text-align: center;
}

/* ---------- the cat asleep on the field ---------- */

.search-wrap {
  position: relative;
  /* Room for the part of him that rises above the field. Worked out from where
     he actually is rather than hardcoded: his drawing starts 34.8% down his
     frame, so the rise is that much less than his offset. */
  margin-top: calc(var(--cat) * (-1 * var(--cat-top) - 0.348));
}

.input-wrap { position: relative; }

.cat-slot {
  position: absolute;
  right: calc(var(--cat) * var(--cat-right));
  top: calc(var(--cat) * var(--cat-top));
  width: var(--cat);
  height: var(--cat);
  pointer-events: none;
  z-index: 3;
}

#cat {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

.zzz {
  position: absolute;
  left: 12%;
  top: 30%;
  font-size: 105%;
  font-weight: 700;
  color: var(--lav);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.zzz.on {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
.zzz span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1em;
  transform-origin: 50% 50%;
  animation: zzz-drift 3.6s ease-out infinite;
  opacity: 0;
}
.zzz span:nth-child(1) { animation-delay: 0s; }
.zzz span:nth-child(2) { animation-delay: 1.2s; }
.zzz span:nth-child(3) { animation-delay: 2.4s; }

@keyframes zzz-drift {
  0%   { transform: translate(0, 0) scale(.38) rotate(-10deg);           opacity: 0; }
  12%  {                                                                 opacity: .95; }
  55%  { transform: translate(-.85em, -1.1em) scale(.78) rotate(6deg);   opacity: .9; }
  100% { transform: translate(-1.7em, -2.25em) scale(1.3) rotate(-4deg); opacity: 0; }
}

/* ---------- fields ---------- */

.url-input {
  width: 100%;
  height: var(--field-h);
  border: 11px solid transparent;
  /* Ink, not lavender: the field is pale, and a lavender line on it reads at
     about 2.2:1, which is less a line than a suggestion. */
  border-image: url('/frame-ink.png') 250 stretch;
  border-image-outset: 2px;
  border-radius: 12px;
  padding: 4px 10px;
  background: #fdf7ff;
  color: #2b2a33;
  font-size: 1.1rem;
}
.url-input::placeholder { color: #9c92a8; }
.url-input:focus { outline: none; filter: brightness(1.03); }

.action-button {
  flex: 0 0 auto;
  height: var(--field-h);
  border: 11px solid transparent;
  border-image: url('/row.png') 250 stretch;
  border-image-outset: 2px;
  border-radius: 12px;
  padding: 4px 22px;
  background-color: #3f2f52;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .8s ease-in;
}
.action-button:hover {
  background-color: #784e9c;
  transition: background-color .1s ease-out;
}
/* A link wearing the button: <a> has no line box of its own to centre text in
   the way a <button> does, so it is laid out rather than padded into place. */
a.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- the form ---------- */

.contact-form {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  text-align: left;
}
/* The row already carries the gap between the fields, so its own bottom margin
   would open a gap half again as wide between these two as between anything
   else on the page. */
.contact-form .search-wrap { margin-bottom: 0; }

.contact-message {
  height: auto;
  min-height: 180px;
  padding: 8px 10px;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.contact-form .action-button {
  justify-self: center;
  min-width: 190px;
  margin-top: 4px;
}
.contact-form .action-button:disabled {
  opacity: .6;
  cursor: default;
  background-color: #3f2f52;
}

.contact-status {
  margin: 0;
  color: var(--dim);
  font-size: .95rem;
  text-align: center;
}
.contact-status.bad { color: #e0a0a0; }

/* The honeypot. Off screen rather than display:none, because some bots skip
   what is hidden and fill what is merely out of sight. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- sent ---------- */

/* The other cat sits in the flow rather than hanging off a field, so his slot is
   an ordinary block that reserves his square and centres it. No negative margin
   under him: this drawing runs to 94.5% of its own frame, so there are only
   about sixteen pixels of clear space below his feet at this size. */
.cat-sit {
  width: 300px;
  height: 300px;
  margin: 0 auto 8px;
  cursor: grab;
  touch-action: none;
}
.cat-sit:active { cursor: grabbing; }

.sent-text {
  max-width: 520px;
  margin: 0 auto 22px;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
}
#sentEmail {
  color: var(--lav);
  font-weight: 700;
  overflow-wrap: anywhere;
}

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

.donation-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 14px 20px;
  text-align: center;
  background: linear-gradient(to top,
    var(--bg) 0%, var(--bg) 62%, rgba(30, 28, 36, 0) 100%);
}
.donation-footer p {
  margin: 0;
  color: var(--dim);
  font-size: .95rem;
}
.donation-footer a {
  color: var(--lav);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .8s ease-in;
}
.donation-footer a:hover {
  color: #f0dcff;
  transition: color .1s ease-out;
}

/* ---------- narrow ---------- */

@media (max-width: 700px) {
  body { padding: 16px 12px 100px; }
  .title { font-size: 1.5rem; margin-bottom: 46px; }
  :root { --field-h: 48px; }
  .contact-form .action-button { width: 100%; min-width: 0; }
  .cat-sit { width: 220px; height: 220px; }
}