/* Laneway Games: placeholder page
   Everything you're likely to tweak is a variable in :root below. */

/* Brand font ----------------------------------------------------------------
   Self-hosted web font, served from /var/www/lanewaygames/fonts/ on the Pi.
   Keep this url() in sync with the <link rel="preload"> in index.html.
   Variable font? Set font-weight to its range, e.g. 100 900.
   More weights? Copy this block and change the file name and font-weight. */
@font-face {
  font-family: "Laneway Display";
  src: url("/fonts/laneway-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours */
  --lg-navy: #222D7A;   /* text: the navy from the logo SVG */
  --lg-paper: #FAFAF7;  /* background: a barely-there off-white */

  /* Type */
  --lg-font: "Laneway Display", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --lg-title-size: clamp(2.25rem, 7vw, 3.75rem);
  --lg-tagline-size: clamp(1.05rem, 2.8vw, 1.4rem);

  /* Layout */
  --lg-top-space: clamp(3rem, 12vh, 8rem);
  --lg-logo-size: clamp(9rem, 32vw, 15rem);

  /* Fade in from the bottom up: each element rises this far, over this long,
     starting at its own delay. Swap the delays to reveal bottom-first. */
  --lg-rise-distance: 1.5rem;
  --lg-rise-duration: 900ms;
  --lg-rise-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --lg-delay-logo: 150ms;
  --lg-delay-title: 450ms;
  --lg-delay-tagline: 750ms;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--lg-paper);
  color: var(--lg-navy);
  font-family: var(--lg-font);
  font-synthesis: none; /* no faux bold/italic when only one weight is installed */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--lg-top-space) 1.5rem 4rem;
  text-align: center;
}

.hero__logo {
  display: block;
  width: var(--lg-logo-size);
  height: auto;
}

.hero__title {
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  font-size: var(--lg-title-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.hero__tagline {
  margin: 0.75rem 0 0;
  font-size: var(--lg-tagline-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* Fade in from the bottom up ------------------------------------------------ */
@keyframes lg-rise {
  from {
    opacity: 0;
    transform: translateY(var(--lg-rise-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.reveal {
  animation: lg-rise var(--lg-rise-duration) var(--lg-rise-easing) both;
}

.hero__logo.reveal {
  animation-delay: var(--lg-delay-logo);
}

.hero__title.reveal {
  animation-delay: var(--lg-delay-title);
}

.hero__tagline.reveal {
  animation-delay: var(--lg-delay-tagline);
}

/* Visitors who ask their device for reduced motion get a gentle fade with no
   movement. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation-name: lg-fade;
    animation-duration: 600ms;
  }
}