/* Every page (frame in Layout.astro). The front page's intro
   has its own styles in intro.css. */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: #010408;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", sans-serif;
  line-height: 1.55;
  color: #e6f4ff;
  background:
    radial-gradient(
      90% 420px at 50% 0%,
      rgba(0, 176, 255, 0.16) 0%,
      rgba(0, 176, 255, 0.05) 55%,
      rgba(1, 4, 8, 0) 100%
    ),
    #010408;
}

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

/* The front page: plain black, no glow, the mark in the corner. Room for
   content to come in .home-main. */
body.home {
  background: #010408;
}

.home-main {
  flex: 1;
}

.contact,
.page {
  width: min(600px, calc(100% - 32px));
  margin-inline: auto;
}

/* The docked mark on every page: cat at the top left, wordmark turned
   90deg beneath it (cat 60px tall, wordmark 20px thick, 12px apart). On
   narrow screens it lies flat along the top instead. */
.brand {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* Only the cat and the wordmark take clicks, where they're drawn: the
     link's own box keeps the wordmark's upright space even after the
     wordmark has turned away, and that empty space must not be a link. */
  pointer-events: none;
}

.brand-cat,
.brand-type {
  pointer-events: auto;
}

.brand-cat {
  width: calc(60px * 3048 / 3253);
  height: 60px;
  background: #d0efff;
  opacity: 0.6;
  -webkit-mask: var(--img-pingato-gato) center / contain no-repeat;
  mask: var(--img-pingato-gato) center / contain no-repeat;
}

/* The cat's eyes: the intro's red almonds, in the cat's eye openings
   (same artwork coordinates, so the box matches the cat's). Dark until
   site.js lights them now and then. */
.brand {
  --eyes-glow: #ff2a30;
}

.brand-eyes {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(60px * 3048 / 3253);
  height: 60px;
  pointer-events: none;
  opacity: 0;
}

.brand-eyes svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ff3b3f;
  filter: drop-shadow(0 0 1.5px var(--eyes-glow)) drop-shadow(0 0 4px var(--eyes-glow))
    drop-shadow(0 0 8px rgba(255, 42, 48, 0.6));
}

/* Light up, hold, blink, hold, go out. */
.brand-eyes.lit {
  animation: eyes-lit 2.6s ease-in-out;
}

.brand-eyes.lit.twice {
  animation: eyes-lit-blink 3.4s ease-in-out;
}

@keyframes eyes-lit {
  0% {
    opacity: 0;
  }
  18%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes eyes-lit-blink {
  0% {
    opacity: 0;
  }
  14%,
  44% {
    opacity: 1;
  }
  48% {
    opacity: 0.05;
  }
  53%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* The menu button, right of the cat and centred on it. Its shape is
   images/button_sidebar.svg (art/shared/), drawn as a mask in the cat's
   colour; the box has the drawing's proportions (162 × 127).

   Opening the menu turns the wordmark 90deg anticlockwise about the centre
   of the cat (the pivot), from below the cat to its right. At the same
   time, with the same timing and easing, the button slides right along its
   line and lands the same gap (--menu-gap) after the wordmark's end as it
   had after the cat; closing reverses both. Wide screens only; on narrow
   ones the mark already lies flat. */
.site-head {
  --mark-top: 12px;
  --mark-left: 12px;
  --cat-h: 60px;
  --cat-w: calc(60px * 3048 / 3253);
  --menu-gap: 28px;
  --menu-w: calc(22px * 162 / 127);
  --menu-h: 22px;
  --menu-turn: 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  /* The wordmark's length and its gap below the cat (.brand). Turned, it
     starts --type-gap + half the cat's height right of the cat's centre. */
  --type-len: calc(20px * 4012 / 429);
  --type-gap: 12px;
  /* How far the button slides: from after the cat to after the wordmark. */
  --menu-slide: calc(var(--type-gap) + var(--cat-h) / 2 + var(--type-len) - var(--cat-w) / 2);
}

.menu-toggle {
  position: absolute;
  top: calc(var(--mark-top) + (var(--cat-h) - var(--menu-h)) / 2);
  left: calc(var(--mark-left) + var(--cat-w) + var(--menu-gap));
  width: var(--menu-w);
  height: var(--menu-h);
  padding: 0;
  border: 0;
  background: #d0efff;
  opacity: 0.6;
  cursor: pointer;
  -webkit-mask: var(--img-button-sidebar) center / contain no-repeat;
  mask: var(--img-button-sidebar) center / contain no-repeat;
}

/* Lit by site.js on real pointer movement (not :hover, which can linger
   after the button slides). */
.menu-toggle.is-hover {
  opacity: 0.9;
}

.menu-toggle:focus-visible {
  outline: 2px solid #00b0ff;
  outline-offset: 4px;
}

@media (min-width: 761px) {
  .menu-toggle {
    transition: transform var(--menu-turn), opacity 0.2s ease;
  }

  .brand-type {
    /* The pivot, from the wordmark's own box (centred under the cat). */
    transform-origin: 50% calc(-1 * (12px + var(--cat-h) / 2));
    transition: transform var(--menu-turn);
  }

  /* .menu-was-open (on <html>, from the head script): the state the last
     page was left in, until site.js takes over. */
  .menu-open .menu-toggle,
  .menu-was-open .menu-toggle {
    transform: translateX(var(--menu-slide));
  }

  .menu-open .brand-type,
  .menu-was-open .brand-type {
    transform: rotate(-90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle,
  .brand-type {
    transition: none;
  }
}

.brand-type {
  position: relative;
  width: 20px;
  height: calc(20px * 4012 / 429);
}

.brand-type span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(20px * 4012 / 429);
  height: 20px;
  background: #00b0ff;
  transform: translate(-50%, -50%) rotate(90deg);
  -webkit-mask: var(--img-pingato-type) center / contain no-repeat;
  mask: var(--img-pingato-type) center / contain no-repeat;
}

.contact,
.page {
  flex: 1;
  padding: 48px 0 64px;
}

.contact-title {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* The app's logo stands in for its name, sitting on the text baseline. */
.title-logo {
  display: inline-block;
  height: 0.82em;
  aspect-ratio: var(--ratio);
  vertical-align: baseline;
  background: var(--color);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.contact-lede {
  margin: 0 0 32px;
  color: rgba(230, 244, 255, 0.7);
}

.contact-form {
  display: grid;
  gap: 22px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
  align-items: start;
}

.field {
  display: grid;
  gap: 6px;
}

.label {
  font-size: 0.95rem;
  font-weight: 600;
}

.optional,
.hint {
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(230, 244, 255, 0.5);
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming in on focus */
  color: inherit;
  background: rgba(230, 244, 255, 0.06);
  border: 1px solid rgba(230, 244, 255, 0.18);
  border-radius: 10px;
}

select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, #9fd8ff 50%),
    linear-gradient(-45deg, transparent 50%, #9fd8ff 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

select option {
  color: #e6f4ff;
  background: #0b1520;
}

textarea {
  resize: vertical;
  min-height: 160px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #00b0ff;
  outline-offset: 1px;
  border-color: transparent;
}

[aria-invalid="true"] {
  border-color: #ff6b6b;
}

.field-error,
.form-error {
  margin: 0;
  font-size: 0.9rem;
  color: #ff9a9a;
}

.form-error {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 107, 107, 0.1);
}

/* Filled only by bots; kept off-screen rather than display:none, which
   some bots check for. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send {
  justify-self: start;
  padding: 13px 26px;
  font: inherit;
  font-weight: 600;
  color: #010408;
  background: #00b0ff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.send:hover {
  background: #4cc8ff;
}

.send:focus-visible {
  outline: 2px solid #e6f4ff;
  outline-offset: 3px;
}

.send:disabled {
  background: #00b0ff;
  opacity: 0.6;
  cursor: progress;
}

.sent p {
  margin: 0 0 12px;
}

a {
  color: #4cc8ff;
}

/* The text pages (TextPage.astro) */
.page-title {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.page-meta {
  margin: 0 0 28px;
  font-size: 0.9rem;
  color: rgba(230, 244, 255, 0.5);
}

.page h2 {
  margin: 36px 0 10px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.page p,
.page li {
  color: rgba(230, 244, 255, 0.82);
}

.page p {
  margin: 0 0 14px;
}

.page ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
}

.page li + li {
  margin-top: 8px;
}

/* The "Effective <date>" line (paragraph class "meta"). */
.page p.meta {
  margin: -4px 0 28px;
  font-size: 0.9rem;
  color: rgba(230, 244, 255, 0.5);
}

/* ---------- Footer (same format as fbad.io's) ---------- */

.license-note {
  margin: 0;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(225, 239, 251, 0.38);
}

.license-note a {
  color: rgba(225, 239, 251, 0.55);
  text-decoration: none;
  white-space: nowrap;
}

.license-note a:hover {
  color: rgba(225, 239, 251, 0.85);
}

.license-note .footer-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 600px) {
  .license-note {
    justify-content: center;
    text-align: center;
    font-size: 0.62rem;
    padding-inline: 16px;
  }

  .license-note .license-credit {
    flex-basis: 100%;
  }

  .license-note .footer-links {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .site-head {
    padding: 12px 16px 0;
  }

  .brand {
    position: relative;
    flex-direction: row;
    width: fit-content;
  }

  .brand-type {
    width: calc(20px * 4012 / 429);
    height: 20px;
  }

  .brand-type span {
    transform: translate(-50%, -50%);
  }

  /* On narrow screens the mark lies flat; the button follows the wordmark. */
  .site-head {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .menu-toggle {
    position: static;
  }

  .contact,
  .page {
    padding-top: 28px;
  }
}

@media (max-width: 600px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .send {
    justify-self: stretch;
  }
}