/* Burned by Anjelle — landingspagina
   ----------------------------------
   Alle kleuren en maten staan als variabelen bij elkaar in :root, zodat je ze
   op één plek kunt aanpassen zonder de rest van het bestand door te hoeven.

   KLEUREN
   De kleuren hieronder komen letterlijk uit huisstijl.json. Waar een kleur is
   afgeleid staat dat er bij, met de reden. Pas de huisstijlkleuren hier niet
   zomaar aan: huisstijl.json is de bron, dit bestand volgt.

   LETTERS
   Georgia voor koppen en Arial voor lopende tekst, zoals in de huisstijl. Beide
   staan standaard op vrijwel elke computer en telefoon, dus er hoeft niets van
   buitenaf geladen te worden. Dat scheelt niet alleen laadtijd: de browser van
   je bezoekers maakt daardoor geen verbinding met een externe partij, en er
   gaan dus geen gegevens over hen naar derden. */

:root {
  color-scheme: light dark;

  --koppen: Georgia, "Times New Roman", "Liberation Serif", serif;
  --tekst: Arial, Helvetica, "Liberation Sans", sans-serif;

  /* LICHT THEMA — achtergrond gebroken wit */
  --bg: #F4F1EB;            /* gebroken_wit */
  --ink: #2A2724;           /* houtskool, 13.17:1 op de achtergrond */
  --muted: #6B645A;         /* grijs_tekst, 5.18:1 */
  --ember: #B45A16;         /* amber_op_licht */
  --hairline: #D9D2C6;      /* lijn */

  /* Afgeleid: houtskool 30% richting grijs_tekst, voor de regel "by Anjelle".
     Iets zachter dan de hoofdtekst maar nog ruim leesbaar (10.13:1). */
  --ink-soft: #3E3934;

  /* Afgeleid: gebroken_wit richting wit, voor de nauwelijks zichtbare gloed
     achter de foto. Puur sfeer, draagt geen informatie. */
  --bg-glow: #F9F7F4;

  /* Afgeleid: houtskool als losse getallen, zodat de schaduw onder de foto
     doorzichtig gemaakt kan worden. */
  --shadow: 42 39 36;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* DONKER THEMA — achtergrond houtskool.
       De huisstijl geeft met amber_op_donker en amber_op_licht twee accenten,
       dus is hij op beide achtergronden bedoeld. Voor gedempte tekst en lijnen
       geeft huisstijl.json geen donkere variant; die zijn hier afgeleid uit de
       eigen kleuren, omdat grijs_tekst op houtskool maar 2.54:1 haalt en dus
       onleesbaar zou zijn. */
    --bg: #2A2724;          /* houtskool */
    --ink: #F4F1EB;         /* gebroken_wit, 13.17:1 */
    --ember: #E08A2E;       /* amber_op_donker, 5.55:1 */

    /* Afgeleid: grijs_tekst 40% richting gebroken_wit. Haalt 5.46:1 en is dus
       wel leesbaar op houtskool. */
    --muted: #A29C94;

    /* Afgeleid: gebroken_wit 25% richting houtskool, voor "by Anjelle". */
    --ink-soft: #C2BEB9;

    /* Afgeleid: houtskool 18% richting lijn. De lijnkleur zelf is op deze
       achtergrond veel te fel voor een subtiele rand. */
    --hairline: #4A4641;

    --bg-glow: #3A3734;
    --shadow: 0 0 0;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  font-family: var(--tekst);
  color: var(--ink);
  background-color: var(--bg);
  /* Zachte lichtval achter de foto, alsof er daglicht op de plank valt. */
  background-image: radial-gradient(ellipse 70% 50% at 50% 38%, var(--bg-glow), transparent 70%);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ember);
  color: var(--bg);
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 2rem);
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 4rem) clamp(1.25rem, 5vw, 2rem);
  text-align: center;
}

/* --- Logo -------------------------------------------------------------- */

.wordmark {
  margin: 0;
  max-width: min(100%, 22rem);
}

.wordmark picture {
  display: block;
}

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

/* --- Schroeilijn ------------------------------------------------------- */

.rule {
  width: min(15rem, 55%);
  height: 2px;
  margin: 0;
  border: 0;
  border-radius: 2px;
  opacity: .7;
  /* Een schroeilijn in het amberaccent, die naar de randen toe vervaagt.
     Puur sier: hij draagt geen informatie, dus er geldt geen contrastnorm. */
  background: linear-gradient(90deg,
    transparent,
    var(--ember) 25%,
    var(--ink) 50%,
    var(--ember) 75%,
    transparent);
}

/* --- Foto -------------------------------------------------------------- */

.board {
  margin: 0;
  max-width: min(100%, 27rem);
}

.board__img {
  display: block;
  /* Breedte en hoogte staan op auto met een maximum, zodat elke foto past
     zonder uitgerekt te worden — staand of liggend. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(46vh, 26rem);
  margin-inline: auto;
  border-radius: 3px;
  background-color: var(--hairline);
  box-shadow:
    0 0 0 1px rgb(var(--shadow) / .10),
    0 2px 4px rgb(var(--shadow) / .08),
    0 22px 48px -18px rgb(var(--shadow) / .35);
}

@media (prefers-color-scheme: dark) {
  .board__img {
    box-shadow: 0 0 0 1px var(--hairline);
  }
}

/* --- Binnenkort meer ---------------------------------------------------- */

.soon {
  margin: 0;
  font-family: var(--koppen);
  font-size: clamp(1.3rem, 5.5vw, 1.85rem);
  letter-spacing: .05em;
  color: var(--ink);
}

.tagline {
  margin: -.75rem 0 0;
  /* Deze zin heeft 547px nodig om op één regel te passen; 35rem geeft die
     ruimte met wat marge. Past hij niet, dan breekt hij naar twee regels en
     loopt de pagina op een scherm van 900px hoog net buiten beeld. Op
     smallere schermen breekt hij sowieso af, en zorgt text-wrap dan voor
     twee ongeveer even lange regels in plaats van één los woord. */
  max-width: 35rem;
  text-wrap: balance;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--muted);
}

/* --- Instagram ---------------------------------------------------------- */

.social {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: .25rem;
  font-size: .95rem;
  letter-spacing: .02em;
  /* De linktekst staat in houtskool, niet in amber. Reden: amber_op_licht
     haalt op gebroken wit 4.22:1, net onder de norm van 4.5:1 voor gewone
     tekst. Als onderstreping en pictogram voldoet amber ruim (norm 3:1), dus
     daar komt het accent terug. Zo blijft elke kleur letterlijk die uit
     huisstijl.json en is alles goed leesbaar. */
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: var(--ember);
  transition: text-decoration-thickness .2s ease;
}

.social:hover {
  text-decoration-thickness: 2px;
}

/* Een duidelijk zichtbare rand voor wie met de tabtoets navigeert. Zonder
   dit is niet te zien waar de aandacht staat. focus-visible toont hem
   alleen bij toetsenbordgebruik, niet bij een muisklik. */
.social:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: .45rem;
  border-radius: 3px;
  text-decoration-thickness: 2px;
}

.social__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  /* Het pictogram draagt het amberaccent. Als pictogram geldt de norm van
     3:1 en die haalt amber ruim. */
  color: var(--ember);
}

/* Tekst die alleen wordt voorgelezen door een schermlezer. Zo hoort iemand
   "Instagram: @burnedbyanjelle" terwijl er op het scherm alleen het
   beeldmerk met de naam staat. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Op lage schermen (veel laptops zijn 720 tot 800 pixels hoog) wordt alles
   krapper gezet, zodat "Binnenkort meer" zonder scrollen zichtbaar blijft. */
@media (max-height: 880px) {
  .page {
    gap: clamp(.9rem, 2.5vh, 1.5rem);
    padding-block: clamp(1.25rem, 4vh, 2rem);
  }
}

/* --- Opkomen bij het laden ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .page > * {
    animation: rise .8s cubic-bezier(.22, .61, .36, 1) backwards;
  }
  .page > :nth-child(1) { animation-delay: .05s; }
  .page > :nth-child(2) { animation-delay: .18s; }
  .page > :nth-child(3) { animation-delay: .28s; }
  .page > :nth-child(4) { animation-delay: .42s; }
  .page > :nth-child(5) { animation-delay: .52s; }
  .page > :nth-child(6) { animation-delay: .62s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(.75rem); }
    to   { opacity: 1; transform: none; }
  }
}