/* LiveScout — landingspagina.
 *
 * Eén beeldvullend scherm zonder scroll: merk, foto, kop, twee winkelknoppen.
 *
 * De foto is de achtergrond van de pagina en geen blok in de indeling. Een
 * fotoblok heeft randen, en die randen moet je ergens laten ophouden; in een
 * browservenster dat elke verhouding kan hebben valt dat altijd ergens
 * verkeerd. Als achtergrond met `cover` is er geen rand meer.
 *
 * Er zijn twee foto's: een liggende voor een liggend venster en een staande
 * voor een telefoon. Eén foto voor beide standen betekent dat je hem in de
 * andere stand zo hard aansnijdt dat de speler half wegvalt.
 *
 * De kleuren komen uit app/lib/core/theme/app_colors.dart. Wijzigt de huisstijl
 * daar, dan hoort dit bestand mee te veranderen.
 */

:root {
  --orange: #ff6b00;
  --ink: #0b0c0f;
  --ink-soft: #14161c;
  --white: #ffffff;
  --grey400: #9aa1ae;
  --grey600: #5b6472;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 92rem;
}

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

html,
body {
  height: 100%;
  margin: 0;
  /* De pagina is bewust één schermvulling: niets om naartoe te scrollen. */
  overflow: hidden;
}

body {
  background-color: var(--white);
  background-image: url("assets/hero-tall.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ink);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Een witte sluier over de foto op de plekken waar tekst staat. De foto is daar
 * al bijna wit, dus je ziet de sluier niet; hij ligt er voor het geval het
 * venster zo'n verhouding heeft dat de uitsnede toch iets donkers omhoog haalt.
 * Zo hangt de leesbaarheid niet af van de uitsnede. */
body::before {
  position: fixed;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.88) 0%,
    rgb(255 255 255 / 0) 18%,
    rgb(255 255 255 / 0) 40%,
    rgb(255 255 255 / 0.75) 62%,
    rgb(255 255 255 / 0.96) 80%,
    var(--white) 100%
  );
  content: "";
  inset: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------- geraamte */

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: var(--measure);
  height: 100dvh;
  /* Op een zeer breed scherm zou de tekst anders tegen de vensterrand plakken
   * in plaats van in de bladspiegel te staan. */
  margin-inline: auto;
  padding: clamp(1.25rem, 3.5vh, 2.75rem) var(--gutter);
  grid-template-rows: auto 1fr auto;
}

.stage__top {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
}

.logo {
  width: clamp(8rem, 30vw, 10.5rem);
  height: auto;
}

.language-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.language-nav a,
.language-nav span {
  color: var(--grey400);
  text-decoration: none;
}

.language-nav a {
  transition: color 160ms ease;
}

.language-nav a:hover,
.language-nav a:focus-visible,
.language-nav [aria-current="page"] {
  color: var(--ink);
}

/* Op een telefoon staat de tekst onderaan, over het bleke deel van de foto, met
 * de speler erboven in beeld. */
.stage__hero {
  display: flex;
  width: 100%;
  max-width: 32rem;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-self: end;
  gap: clamp(1.25rem, 3.5vh, 2rem);
}

.stage__bottom {
  padding-top: clamp(0.75rem, 2vh, 1.25rem);
  text-align: center;
}

.fineprint {
  margin: 0;
  color: var(--grey400);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------- kop */

.headline {
  margin: 0;
  font-size: clamp(1.5rem, 6.6vw, 2.3rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.headline em {
  color: var(--orange);
  font-style: inherit;
}

/* -------------------------------------------------------------- knoppen */

.release {
  width: min(100%, 27rem);
}

.availability {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--grey600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  gap: 0.75rem;
  text-transform: uppercase;
}

.availability__divider {
  width: 1px;
  height: 0.875rem;
  flex: none;
  background: var(--grey400);
}

.platforms {
  color: var(--ink);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- liggend */

/* In een liggend venster staat de speler rechts in de foto. Alle tekst schuift
 * dan naar de linkerhelft, de sluier loopt van links naar rechts en het merk
 * gaat van gecentreerd naar links: zo staat alles op één lijn. */
@media (orientation: landscape) {
  body {
    background-image: url("assets/hero-wide.jpg");
    /* De rechterrand vasthouden: daar staat de speler. Wat links wegvalt is
     * leeg beeld. */
    background-position: right center;
  }

  body::before {
    background: linear-gradient(
      to right,
      rgb(255 255 255 / 0.94) 0%,
      rgb(255 255 255 / 0.86) 26%,
      rgb(255 255 255 / 0.35) 48%,
      rgb(255 255 255 / 0) 62%
    );
  }

  .stage__top {
    justify-content: flex-start;
  }

  .logo {
    width: clamp(7.5rem, 12vw, 10.5rem);
  }

  .stage__hero {
    max-width: min(40rem, 52vw);
    align-self: center;
  }

  .stage__bottom {
    text-align: left;
  }

  .headline {
    /* Twee regels, en de langste regel moet binnen de breedte van de kolom
     * hierboven passen. Groter zetten laat "finds it." naar een derde regel
     * vallen, dus de bovengrens hangt samen met die `max-width`. */
    font-size: clamp(1.35rem, 3.1vw, 3rem);
  }

}

/* Een liggend venster dat ook laag is (telefoon op de zijkant, klein
 * browservenster) heeft geen ruimte voor grote koppen. */
@media (orientation: landscape) and (max-height: 30rem) {
  .logo {
    width: 6.5rem;
  }

  .stage__hero {
    gap: 0.875rem;
  }
}

/* Compacte telefoons houden dezelfde typografische compositie met minder
 * lucht eromheen, zodat de statusregel binnen het viewport blijft. */
@media (orientation: portrait) and (max-height: 47.5rem) {
  .stage {
    padding-block: 1rem;
  }

  .logo {
    width: clamp(6.5rem, 27vw, 8rem);
  }

  .stage__hero {
    gap: 0.875rem;
  }

  .stage__bottom {
    padding-top: 0.625rem;
  }

  .headline {
    font-size: clamp(1.35rem, 6.2vw, 1.75rem);
  }

  .availability {
    font-size: 0.625rem;
    gap: 0.5rem;
  }
}

/* ------------------------------------------------------------ binnenkomst */

/* Dezelfde gestaffelde binnenkomst als in de app: alles schuift kort omhoog en
 * in beeld, in de leesrichting. */
@media (prefers-reduced-motion: no-preference) {
  .logo,
  .headline,
  .release,
  .fineprint {
    animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .logo {
    animation-delay: 80ms;
  }

  .headline {
    animation-delay: 220ms;
  }

  .release {
    animation-delay: 340ms;
  }

  .fineprint {
    animation-delay: 460ms;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}