/* Old Canvas Games — one screen, one painting.
   Every colour below is sampled from the CONDOTTA main menu frame or from the
   CondottaLogo prefab. Nothing brighter is introduced. */

:root {
  --canvas: #14110c;      /* burgundian black, the page ground */
  --cream:  #e9d6a3;      /* logo face colour */
  --gold:   #b98930;      /* logo rule, focus ring */
  --haze:   #d6d0c3;      /* cool atmospheric grey */

  /* ------------------------------------------------------------------
     Art direction. Move the visible centre of the painting here when the
     final hero lands — nothing else needs to change.
     ------------------------------------------------------------------ */
  --hero-position-desktop: 50% 50%;
  --hero-position-mobile:  50% 46%;

  /* Where the logo sits, so the soft shading under it follows. */
  --logo-anchor: 50% 16%;
}

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

html {
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--haze);
  font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- backdrop */

.backdrop-frame {
  position: fixed;
  inset: 0;
  z-index: -3;
  /* Both custom properties stay at their defaults unless atmosphere.js is
     running, so with JavaScript off this is an ordinary static backdrop. */
  transform: scale(var(--parallax-zoom, 1))
             translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
}

/* Only promote the painting to its own layer when the parallax is actually
   running; on a phone that is a large layer bought for nothing. */
.parallax-on .backdrop-frame {
  will-change: transform;
}

/* Drifting motes in the upper air. Created by atmosphere.js, never in markup,
   so a page without JavaScript carries no empty canvas. It covers only the band
   of sky the motes live in — compositing the whole viewport every frame is the
   one part of this effect a phone would actually feel. */
.atmosphere {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  pointer-events: none;
}

.backdrop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position-mobile);
}

/* Soft local shading — never a panel. A wide, low-contrast pool of shade under
   the logo (the painting keeps pale mist there, and the logo face is cream),
   plus a darkening at the very top and the very bottom edge. Nothing here has
   an edge you can see against the artwork. */
.veil {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* shade pool under the logo */
    radial-gradient(58% 44% at var(--logo-anchor),
      rgba(20, 17, 12, 0.46) 0%,
      rgba(20, 17, 12, 0.24) 45%,
      rgba(20, 17, 12, 0)    100%),
    /* shade pool under the service line — an ellipse hugging the text rather
       than a band, so a pale road at the bottom of the frame stays a road */
    radial-gradient(102% 34% at 50% 100%,
      rgba(20, 17, 12, 0.62) 0%,
      rgba(20, 17, 12, 0.34) 52%,
      rgba(20, 17, 12, 0)    100%),
    linear-gradient(to bottom,
      rgba(20, 17, 12, 0.34) 0%,
      rgba(20, 17, 12, 0.13) 20%,
      rgba(20, 17, 12, 0)    43%),
    linear-gradient(to top,
      rgba(20, 17, 12, 0.34) 0%,
      rgba(20, 17, 12, 0.14) 11%,
      rgba(20, 17, 12, 0)    28%);
}

/* ------------------------------------------------------------------- stage */

.stage {
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: clamp(1.75rem, 8.5dvh, 4.5rem);
  padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
}

.wordmark {
  margin: 0;
  line-height: 0;
  transform: translate3d(var(--logo-x, 0px), var(--logo-y, 0px), 0);
}

.wordmark img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78vw, 430px);
  max-height: 22dvh;
  filter: drop-shadow(0 1px 3px rgba(10, 8, 5, 0.55)) drop-shadow(0 3px 22px rgba(10, 8, 5, 0.5));
}

/* -------------------------------------------------------------------- foot */

/* One line, held to the very bottom edge so it never rides up onto the
   marching company in the lower centre of the painting. */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 1.3rem;
  text-align: center;
  padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
  padding-bottom: max(0.9rem, calc(env(safe-area-inset-bottom) + 0.4rem));
}

.mail {
  /* Padded to the same 44px row height as the icons: a text-sized hit box
     would fail the WCAG 2.2 target minimum, and this costs no layout. */
  display: inline-block;
  padding-block: 0.75rem;
  color: var(--cream);
  font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.08rem);
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(185, 137, 48, 0.5);
  text-underline-offset: 0.4em;
  text-shadow: 0 1px 3px rgba(8, 6, 4, 0.8);
  transition: text-decoration-color 0.2s ease;
}

.mail:hover {
  text-decoration-color: var(--gold);
}

.social {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pictogram stays small; the target stays 44x44. */
.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--cream);
  transition: opacity 0.2s ease;
  opacity: 0.88;
}

.social__link:hover {
  opacity: 1;
}

.social__icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(8, 6, 4, 0.9));
}

.legal {
  margin: 0;
  font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  letter-spacing: 0.09em;
  color: rgba(223, 217, 204, 0.94);
  text-shadow: 0 1px 3px rgba(8, 6, 4, 0.85);
}

/* ------------------------------------------------------------------- focus */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
  /* Dark backing keeps the ring visible over pale sky as well as dark ground. */
  box-shadow: 0 0 0 5px rgba(20, 17, 12, 0.6);
}

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

/* ------------------------------------------------------------------ motion */

/* Opt in, never out: with reduced motion the page simply renders finished. */
@media (prefers-reduced-motion: no-preference) {
  .wordmark img {
    animation: emerge 0.95s cubic-bezier(0.22, 0.61, 0.25, 1) 0.1s both;
  }

  /* The footer sits on the bottom edge, so it fades without moving — a rise
     would push it past the viewport and flash a scrollbar on a one-screen page. */
  .foot {
    animation: fade 0.95s ease 0.3s both;
  }
}

@keyframes emerge {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------- wide view */

@media (min-width: 48em) {
  :root {
    --logo-anchor: 26% 18%;
  }

  .backdrop {
    object-position: var(--hero-position-desktop);
  }

  /* The wide painting keeps its calm haze in the upper left and its fortified
     city on the right, so the logo sits left rather than centred. */
  .stage {
    justify-items: start;
    padding-top: clamp(2.5rem, 7.5dvh, 5.5rem);
    padding-inline: max(clamp(2rem, 6vw, 6rem), env(safe-area-inset-left))
                    max(1.25rem, env(safe-area-inset-right));
  }

  .wordmark img {
    max-width: min(36vw, 540px);
    max-height: 26dvh;
  }

  .foot {
    gap: 0 1.9rem;
    padding-bottom: max(1.15rem, calc(env(safe-area-inset-bottom) + 0.6rem));
  }
}