/* BATPIG landing page, laid out from the drawn mock: a flat dark grey page, the big logo in the
   middle with the handwritten words on it, and a white Vista-style email bar across its lower edge.
   Every position below is a share of the logo's size (measured off the mock), so the whole picture
   scales together on any screen. */

:root {
  --dark-grey: #242424;
  --lavender: #a683e2;
  --off-white: #e8e1e1;
  --ink: #000;
  --font-secondary: "Special Elite", "True Typewriter", "American Typewriter", "Courier New", monospace;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* The logo is 66% of the screen width in the mock, but never taller than about 65% of the height. */
  --hero-w: min(66vw, 118vh);
  /* The email bar: where it starts down the logo, and how tall it is (never under 52px to tap). */
  --bar-top: 69.37%;
  --bar-h: max(14.33%, 52px);
}
@supports (height: 1svh) {
  :root { --hero-w: min(66vw, 118svh); }
}

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

html, body { height: 100%; margin: 0; background: var(--dark-grey); }

body {
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Big pixel arrow cursor (hotspot at its tip). Lavender over things you can click. */
html, body, .stage, .hero, .drawn, .status { cursor: url("/assets/pointer.svg") 3 3, auto; }
.signup button { cursor: url("/assets/pointer-lavender.svg") 3 3, pointer; }
.signup input[type="email"] { cursor: text; }

.trail {
  position: fixed;
  inset: 0;
  /* A canvas ignores inset: 0 and shows at its pixel size, which is 2x the screen on
     Retina displays. Pin it to the viewport so drawing lines up with the mouse. */
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* trail.js draws the arrow itself (in step with the trail) once the mouse moves. */
.snout {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  width: 39px;
  height: 60px;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.snout.is-visible { opacity: 1; }

html.pixel-cursor, html.pixel-cursor * { cursor: none !important; }
html.pixel-cursor .signup input[type="email"] { cursor: text !important; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* The picture. Its box is exactly the logo's, centred on the screen. */
.hero {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hero-w);
  aspect-ratio: 1135 / 623;
  transform: translate(-50%, -50%);
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* The handwriting, placed where it is in the mock. The picture has 40px of spare room round
   the writing (877 x 174 of writing in a 957 x 254 picture), so it sits a little further out. */
.drawn {
  position: absolute;
  left: 9.87%;
  top: 7.01%;
  width: 80.09%;
  margin: 0;
}
.drawn img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* The email form: a bit wider than the logo, across its lower edge, as in the mock. */
.signup {
  position: absolute;
  left: -2.59%;
  width: 105.44%;
  top: var(--bar-top);
  height: var(--bar-h);
  margin: 0;
}

/* The email bar, in the Windows Vista "Start Search" style (the earlier version): a glossy dark glass
   frame, an inset purple field, and a glossy purple button with the pixel mail icon. Its size and
   position come from the drawn mock. */
.bar {
  display: flex;
  gap: clamp(3px, 0.17vw, 6px);
  width: 100%;
  height: 100%;
  padding: clamp(3px, 0.17vw, 6px);
  border: 0;
  border-top: 1px solid #000;
  border-radius: 0;
  background: linear-gradient(#5a5a5a 0%, #2c2c2c 48%, #0c0c0c 52%, #1d1d1d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.45);
}

.signup input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 clamp(10px, 1.1vw, 22px);
  border: 1px solid #3a2a63;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(#8e6ad0 0, var(--lavender) 6px, var(--lavender) 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
  color: #1b1230;
  font: 400 clamp(14px, 1.2vw, 24px) var(--font-secondary);
}

/* The example email is a faded version of the text colour, so it reads as an example, not as typed text. */
.signup input[type="email"]::placeholder { color: rgba(27, 18, 48, 0.55); opacity: 1; }
.signup input[type="email"]:focus { outline: 0; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--off-white); }
.signup input[type="email"]:focus::placeholder { opacity: 0.6; }

.signup button {
  flex: 0 0 clamp(60px, 10.6%, 190px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #4b3b66;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#e3d7f6 0%, #c6b0ec 48%, var(--lavender) 52%, #9072c5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  color: #211a2d;
}

.signup button:hover { background: linear-gradient(#f3eefb 0%, #dacbf3 48%, #b79be8 52%, #9c7bd4 100%); }
.signup button:active { background: linear-gradient(#9072c5, var(--lavender)); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }

/* The mail icon is 10 art pixels wide; it is sized from the button's height. */
.signup button svg {
  height: 72%;
  width: auto;
  aspect-ratio: 10 / 8;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
  transition: transform 0.15s steps(3);
}
.signup button:hover svg, .signup button:focus-visible svg { transform: translateY(-3px); } /* the envelope hops */
.signup button:focus-visible { outline: 2px solid var(--off-white); outline-offset: -4px; }
.signup button:disabled { cursor: progress; opacity: 0.6; }

/* Messages (a typo in the email, a signup that worked) sit just under the bar. */
.status {
  position: absolute;
  left: 50%;
  top: calc(var(--bar-top) + var(--bar-h) + 14px);
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 5px 12px;
  background: var(--off-white);
  font-family: var(--font-secondary);
  font-size: 17px;
  text-align: center;
}
.status:empty { display: none; }
.status.is-error { color: #8a0000; }

/* After a successful signup the form goes away and the message takes its place. */
.signup.is-done { display: none; }
.signup.is-done ~ .status { top: calc(var(--bar-top) + 4px); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .signup button svg { transition: none; }
}

/* Phones: the picture fills the width, with a thumb-sized bar. The input text is 16px so iPhones
   don't zoom in when you tap it. Kept at the end so it overrides the rules above. */
@media (max-width: 799px) {
  :root {
    /* The wing tips reach the very edges of the logo picture, so this is about as big as it can go. */
    --hero-w: min(99vw, 118vh);
    --bar-h: max(14.33%, 56px);
  }
  @supports (height: 1svh) {
    :root { --hero-w: min(99vw, 118svh); }
  }
  html { -webkit-tap-highlight-color: transparent; }
  html, body { overscroll-behavior: none; }

  /* On a phone the bar sits in from the screen edges instead of running into them. */
  .signup {
    left: 50%;
    width: calc(100vw - 32px);
    transform: translateX(-50%);
  }

  .signup input[type="email"] { padding: 0 10px; font-size: 16px; }
  .signup button { flex-basis: 56px; }
  .status { font-size: 15px; }
}