@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");

/* Notalegis — one page, mobile first.
   Rules, not boxes: square corners everywhere, no shadows, no rounded
   panels. The only ornament is a 1px hairline. */

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

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

body {
  margin: 0;
  background-color: var(--color-paper);
  background-image: var(--gradient-paper);
  /* Oversized so the drift has somewhere to go. Never add
     background-attachment: fixed — it silently kills the animation. */
  background-size: 220% 220%;
  animation: paper-drift 28s ease-in-out infinite;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

@keyframes paper-drift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

p {
  margin: 0;
}

/* — Layout ————————————————————————————————————————————————
   Three rows filling the viewport: header, centre, footer.
   Everything centred — symmetry reads as couture, asymmetry as
   editorial. Nothing fixed, nothing sticky. */

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.header,
.centre,
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.centre {
  justify-content: center;
  gap: var(--space-xl);
}

.column {
  max-width: var(--measure);
}

/* — Wordmark ——————————————————————————————————————————————
   Framed by a hairline above and below, with generous side padding. */

.mark-frame {
  padding: var(--space-md) var(--space-xl);
  border-top: var(--rule) solid var(--color-rule);
  border-bottom: var(--rule) solid var(--color-rule);
}

.mark {
  font-family: var(--font-display);
  font-size: var(--size-mark);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mark);
  line-height: 1;
  color: var(--color-ink);
}

/* The sheen needs -webkit-text-fill-color: transparent, which makes the
   wordmark invisible wherever background-clip: text is unsupported.
   Gated behind @supports, and placed after the base .mark rule so the
   fallback above stays solid ink. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mark {
    background-image: var(--gradient-ink-sheen);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: mark-sheen 6s linear infinite;
  }
}

@keyframes mark-sheen {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -20% 0;
  }
}

/* — Type roles ————————————————————————————————————————————— */

.display {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: var(--weight-regular);
  font-style: normal; /* a proper noun is not a quoted phrase */
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-indent: var(--tracking-label); /* offset the trailing letter-space */
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.label-sm {
  font-size: var(--size-label-sm);
}

.mark-label {
  margin-top: var(--space-md);
}

.name-label {
  margin-top: var(--space-sm);
}

/* — Links ——————————————————————————————————————————————————
   Hover darkens the rule; the colour never changes and nothing moves. */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-xs);
  color: inherit;
  text-decoration: none;
  border-bottom: var(--rule) solid var(--color-rule);
  transition: border-color 0.2s, opacity 0.2s;
}

.contact a:hover,
.contact a:focus-visible {
  border-bottom-color: var(--color-ink);
  opacity: 0.7;
}

.contact a:focus-visible {
  outline: var(--rule) solid var(--color-ink);
  outline-offset: 6px;
}

/* — Footer ————————————————————————————————————————————————— */

.footer {
  padding-top: var(--space-lg);
  border-top: var(--rule) solid var(--color-rule);
  color: var(--color-ink-soft);
}

.footer p + p {
  margin-top: var(--space-xs);
}

/* Bank details have to be transcribable, so this sits a little above the
   label sizes rather than at them. */
.legal {
  margin-top: var(--space-sm);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* — Load reveal ———————————————————————————————————————————
   A staggered rise, ~140ms apart across the three rows. */

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  animation: rise 1.1s var(--ease-rise) forwards;
}

.header {
  animation-delay: 0.1s;
}

.centre {
  animation-delay: 0.24s;
}

.footer {
  animation-delay: 0.38s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

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

@media (min-width: 768px) {
  .page {
    padding: var(--space-2xl) var(--space-xl);
  }
}

/* All three animations stop, and the wordmark falls back to solid ink. */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    background-position: 0% 50%;
  }

  .mark {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--color-ink);
    color: var(--color-ink);
  }

  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}