/* ---------------------------------------------------------------------------
   Flying Blue Doxie - landing page

   The one knob that matters:
     --logo-size   the logo's WIDTH.

   20vmin = one fifth of the viewport's SHORTER side, so the logo keeps the
   same visual weight on a wide desktop and on a tall phone. The clamp only
   stops the extremes: below ~140px the mark is unreadable on a small phone,
   above ~460px it swamps a large monitor. Change the 20vmin to re-scale;
   change the clamp bounds only if you disagree with those limits.
--------------------------------------------------------------------------- */

:root {
  --logo-size: clamp(140px, 20vmin, 460px);

  /* Deep blue, fixed. There is no light/dark switch: the background is a
     chosen colour rather than a theme, and the logo's white border is what
     separates its blue yarn from it, so one background serves both schemes. */
  --bg: #062B45;
  --ink: #E6F0F7;
  --ink-soft: #8FB0C8;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Full-viewport centring. 100dvh follows mobile browser chrome as it
   collapses, so the logo does not drift when the address bar hides. */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vmin, 2.25rem);
  padding: 2rem 1.5rem;
  text-align: center;
}

.logo {
  /* width + max-height means the logo fits INSIDE a --logo-size box whatever
     its aspect ratio. The mark is 600x554, so width is what binds. */
  width: var(--logo-size);
  max-height: var(--logo-size);
  height: auto;
  object-fit: contain;
  display: block;
  animation: drift 6s ease-in-out infinite;
}

.tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.6vmin, 1.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A slow hover, because the dog has wings. */
@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    animation: none;
  }
}