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

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

   30vmin = 30% 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. All three numbers were scaled 1.5x together from the original
   20vmin/140px/460px - scaling only the middle one would have let the clamp
   silently cancel the change on small and large screens.

   Note the ceiling this asset sets: logo@2x.png is 765px wide, so a CSS width
   past ~382px is no longer pixel-exact on a 2x display. 30vmin reaches that at
   a 1275px-tall viewport, which is taller than most. Going bigger than this
   wants a higher-resolution source, not a bigger number.
--------------------------------------------------------------------------- */

:root {
  /* 30vmin, clamped - but capped so the ring stays on screen. The logo stays
     centred, so the left half of the screen must hold half the logo plus the
     ring's overhang: (2 x spread + ring) logo-widths across in all, 1.99x. On a
     desktop the clamp wins and nothing changes; on a phone the logo and ring
     shrink as one (375px: 210px -> ~164px). 48px is the stage's side padding. */
  --logo-size: min(clamp(210px, 30vmin, 690px),
                   calc((100vw - 48px) / (2 * var(--ring-spread) + var(--ring-diameter))));

  /* A patch in a white ring off the logo's lower-left corner. Every value is
     a fraction of --logo-size, so logo and ring scale as one. */
  --ring-diameter: 0.61;
  --ring-spread: 0.69;   /* the ring's centre from the logo's centre line */
  --ring-drop: 0;        /* the ring's centre vs the logo's bottom edge; + lower */
  /* 0.69/0 is 119px left of and 65px below the logo at 1440x900 - double the
     first placement, as asked - expressed as the ring's centre. A second ring
     off the lower right mirrored it with --side: 1 while both existed. */
  --ring-air: 1.0535;    /* ring / the tightest circle round a patch */
  /* Each patch is sized so its tightest enclosing circle, times --ring-air, is
     the ring: see --fit on .companion--left / --right. Re-measure --fit if an
     image is replaced. */
  --ring-width: max(2px, calc(var(--logo-size) * 0.011));

  /* The tagline hangs under the ring, centred on the companion. */
  --tagline-size: clamp(0.95rem, 1.6vmin, 1.25rem);
  --tagline-gap: 0.75rem;  /* ring to tagline */

  /* 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%;
}

/* A column: the centred stage takes whatever height is left and the footer
   sits under it at the bottom of the viewport - or below the fold only when the
   content genuinely does not fit. 100dvh follows mobile browser chrome as it
   collapses, so nothing drifts when the address bar hides. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Centres title, logo and tagline in the space above the footer. flex: 1
   replaces the old min-height: 100dvh - with a footer on the page, a stage that
   was itself a full viewport tall pushed the footer off the first screen. */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vmin, 2.25rem);
  padding: 2rem 1.5rem;
  text-align: center;
}

/* The main logo plus the two ringed patches. Only the logo drifts. */
.mark {
  --ring-radius: calc(var(--logo-size) * var(--ring-diameter) / 2);

  position: relative;
  width: var(--logo-size);
  /* The patches and the tagline are absolutely placed, so they take no room in
     the column. What hangs below the logo - down to the ring's bottom, the gap,
     one line of tagline - is reserved here; without it the stage centres as if
     they were not there and a short screen runs the tagline into the footer. */
  margin-bottom: calc(var(--logo-size) * var(--ring-drop) + var(--ring-radius)
                      + var(--tagline-gap) + var(--tagline-size) * 1.2);
}

.logo {
  /* width + max-height means the logo fits INSIDE a --logo-size box whatever
     its aspect ratio. The mark is 400x393 - very nearly square - so width
     binds by a hair. */
  width: 100%;
  max-height: var(--logo-size);
  height: auto;
  object-fit: contain;
  display: block;
  animation: drift 6s ease-in-out infinite;
}

/* Placed by the ring's CENTRE, not the image's corner: the two images differ in
   shape, the rings do not, so mirroring the centres is what makes them match. */
.companion {
  position: absolute;
  left: calc(50% + var(--logo-size) * var(--ring-spread) * var(--side));
  bottom: calc(var(--logo-size) * var(--ring-drop) * -1);
  width: calc(var(--logo-size) * var(--ring-diameter) / (var(--fit) * var(--ring-air)));
  transform: translate(-50%, 50%);
}

/* --fit is the tightest circle around the patch divided by the image's width:
   1.0636 for logo-ev.png, its true minimal circle. That circle's centre sat
   17px left and 46px below the image centre, so the image was padded until the
   two coincide - the ring is drawn on the image centre - which lets the patch
   fill the ring 5.6% larger than centring on the unpadded image would.
   Re-measure it if the image is replaced. */
.companion--left {
  --side: -1;
  --fit: 1.0636;
}

.companion img {
  width: 100%;
  height: auto;
  display: block;
}

/* The white ring, centred on the patch image. */
.companion::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--logo-size) * var(--ring-diameter));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: var(--ring-width) solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.site-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.5rem, 4.5vmin, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Under the companion, outside its ring. top: 50% is the patch's centre - the
   ring's centre too - and the ring radius plus the gap clears the circle. */
.tagline {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--ring-radius) + var(--tagline-gap));
  transform: translateX(-50%);
  white-space: nowrap;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--tagline-size);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer {
  padding: 1rem 1.5rem 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.site-footer p {
  margin: 0;
}

/* 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;
  }
}