/* ============================================================================
   Daedalian Quiz — hoofdwebsite (one-pager)
   ----------------------------------------------------------------------------
   Tokens, de gouden dubbele rand (.vlak) en de knopstijl zijn overgenomen uit
   de quiz-app in /beurs, zodat beide onderdelen één merk vormen. Verschil:
   de app is opgemeten op een tablet in liggende stand, deze pagina schaalt mee
   van telefoon tot breed scherm.
   ========================================================================== */

/* ── Webfonts ─────────────────────────────────────────────────────────────
   Lokaal gehost: geen externe verbinding, geen toestemmingsvraag.           */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/cinzel-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/cinzel-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Ontwerptokens ───────────────────────────────────────────────────────── */

:root {
  --goud-licht: #d0ac70;
  --goud: #c9a227;

  /* De randen zijn geen egale gouden lijn maar geslagen metaal: de kleur
     verloopt onregelmatig over de lengte. Beide verlopen zijn kleur voor kleur
     afgelezen van de knop "START DE QUIZ" in de ontwerpmockup, zodat de textuur
     echt is en niet nagebootst — en als gradient scherp blijft op elke schaal. */
  --goud-lijn-buiten: linear-gradient(90deg, #b8760d 0.0%, #a0640d 3.0%, #623f0f 5.9%, #d79c46 8.9%, #d39940 11.8%, #94661d 14.8%, #d39942 17.7%, #dcaa50 20.7%, #ffba3a 23.6%, #a27940 26.6%, #dba249 29.5%, #d39847 32.5%, #c4a06b 35.4%, #a87322 38.4%, #d2963d 41.3%, #ba8234 44.3%, #c48837 47.2%, #f6a93b 50.2%, #d49842 53.1%, #e0af52 56.1%, #cf9940 59.0%, #d49d43 62.0%, #d39b46 64.9%, #d39b42 67.9%, #ce9641 70.8%, #c68632 73.8%, #c6822a 76.7%, #b37930 79.7%, #826940 82.6%, #c98b3b 85.6%, #b97c31 88.5%, #9b621f 91.5%, #705633 94.4%, #a66e26 97.4%);
  --goud-lijn-binnen: linear-gradient(90deg,
    #573e18 0.0%, #442c0f 3.0%, #67461a 5.9%, #6e5223 8.9%,
    #745728 11.8%, #987535 14.8%, #8b6c32 17.7%, #816733 20.7%,
    #745b29 23.6%, #62491f 26.6%, #7e5f23 29.5%, #735625 32.5%,
    #846432 35.4%, #745626 38.4%, #725421 41.3%, #6c501e 44.3%,
    #795c28 47.2%, #74572d 50.2%, #6e552a 53.1%, #735928 56.1%,
    #644b23 59.0%, #7d5d2a 62.0%, #7b5e29 64.9%, #765a29 67.9%,
    #755b2e 70.8%, #6a5121 73.8%, #84591b 76.7%, #86632f 79.7%,
    #81652e 82.6%, #775524 85.6%, #6a4f21 88.5%, #856329 91.5%,
    #70501e 94.4%, #725420 97.4%
    );
  --lijn-tussen: #070604;   /* de donkere spleet tussen beide lijnen */

  --paneel: linear-gradient(180deg, #131210 0%, #0d0c0b 100%);
  --perkament-licht: #e8dcc0;   /* lopende tekst op de donkere achtergrond */

  --font-titel: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-tekst: 'EB Garamond', Garamond, 'Times New Roman', serif;

  /* Eén schaalknop voor de hele pagina: klein op een telefoon, ruim maar niet
     reusachtig op een breed scherm. */
  font-size: clamp(15px, 1.1vw + 11px, 20px);
  color-scheme: dark;
}

/* ── Basis ───────────────────────────────────────────────────────────────── */

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

html { background: #07060a; }

/* De achtergrondfoto zit op de body zelf. html krijgt een eigen kleur, anders
   zou de browser die van de body naar het hele venster doortrekken en zich niets
   van de afmetingen van de body aantrekken. */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin: 0;
  padding: calc(2rem + env(safe-area-inset-top, 0px))
           calc(1.25rem + env(safe-area-inset-right, 0px))
           calc(2rem + env(safe-area-inset-bottom, 0px))
           calc(1.25rem + env(safe-area-inset-left, 0px));
  /* Twee keer background-image: een browser zonder image-set() slaat de tweede
     regel over en houdt de PNG. In de praktijk krijgt vrijwel iedereen de WebP,
     die ruim vijftien keer lichter is. */
  background-color: #07060a;
  background-image: url('../assets/achtergrond.png');
  background-image: image-set(url('../assets/achtergrond.webp') type('image/webp'),
                              url('../assets/achtergrond.png') type('image/png'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: var(--font-tekst);
  color: var(--perkament-licht);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Sluier over de foto: houdt de randen van het kader zacht en dooft de felle
   kaarsvlammen, zodat die niet met de tekst concurreren. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(180deg, rgba(7, 6, 10, 0.35) 0%, rgba(7, 6, 10, 0.15) 40%, rgba(7, 6, 10, 0.45) 100%);
}

a { color: var(--goud-licht); }
img { display: block; max-width: 100%; height: auto; }

/* Alleen zichtbaar voor schermlezers. */
.enkel-voorlezen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Inhoud ──────────────────────────────────────────────────────────────── */

/* Het donkere kader. Krijgt via .vlak dezelfde dubbele gouden rand als de knop,
   maar met een doorschijnende vulling: de kaarsen en het kasteel blijven vaag
   zichtbaar, de tekst erboven blijft leesbaar. */
.scherm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 34rem;
  padding: 2rem 2rem 2.2rem;
  --vlak-vulling: linear-gradient(180deg, rgba(9, 8, 6, 0.8) 0%, rgba(5, 4, 4, 0.88) 100%);
}
/* Bewust geen slagschaduw op dit kader: een filter maakt er een eigen laag van
   en dan heeft de backdrop-filter hieronder niets meer om te vervagen. */

/* De onscherpte hoort bij de vulling, dus op dezelfde laag als die vulling.
   Zonder steun voor backdrop-filter blijft alleen de doorschijnende vulling
   over; dat is donker genoeg om leesbaar te blijven. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .scherm::after {
    -webkit-backdrop-filter: blur(7px) saturate(0.9);
    backdrop-filter: blur(7px) saturate(0.9);
  }
}

/* Het logo is de blikvanger, maar mag de knop niet onder de vouw duwen: vandaar
   ook een grens op de hoogte van het venster. */
.logo {
  width: min(100%, 22rem, 52vh);
  filter: drop-shadow(0 0.25rem 1.25rem rgba(0, 0, 0, 0.65));
}

/* De sierlijn uit de ontwerpmockup, als één beeld en op ware grootte:
   nagebouwde ruitjes halen de fijne krullen niet. */
.ornament {
  width: 180px;
  height: 26px;
  max-width: 60%;
  margin: 1.3rem 0 1.1rem;
  background: url('../assets/ornament-horizontaal.png') center / contain no-repeat;
}

.intro {
  max-width: 26rem;
  margin: 0 0 1.8rem;
  font-size: 1.25rem;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--perkament-licht);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ── Afgeschuinde vlakken (knop, voetbalk) ───────────────────────────────── */

/* Eén patroon voor alles met de dubbele gouden rand uit het ontwerp: 2px
   buitenlijn, 2px donkere spleet, 1,5px binnenlijn, dan de vulling. Een gewone
   border zou door de clip-path worden afgesneden, vandaar drie lagen die elk
   hun eigen clip-path krijgen. */
.vlak {
  position: relative;
  z-index: 0;
  --punt: 1.1rem;
  --vorm: polygon(var(--punt) 0, calc(100% - var(--punt)) 0, 100% 50%,
                  calc(100% - var(--punt)) 100%, var(--punt) 100%, 0 50%);
  --vlak-vulling: var(--paneel);
  clip-path: var(--vorm);
  background: var(--goud-lijn-buiten);
}

/* De donkere spleet tussen beide lijnen. */
.vlak::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--vorm);
  background: var(--lijn-tussen);
}

/* Binnenlijn én vulling in één laag: de vulling wordt door background-clip
   1,5px naar binnen geknipt, zodat de binnenlijn eromheen als ring overblijft. */
.vlak::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  padding: 1.5px;
  clip-path: var(--vorm);
  background-image: var(--vlak-vulling), var(--goud-lijn-binnen);
  background-clip: content-box, border-box;
  background-origin: border-box;
}

/* Rechthoekige variant met alleen afgeschuinde hoeken, voor het kader. */
.vlak--kaart {
  --hoek: 0.9rem;
  --vorm: polygon(var(--hoek) 0, calc(100% - var(--hoek)) 0, 100% var(--hoek),
                  100% calc(100% - var(--hoek)), calc(100% - var(--hoek)) 100%,
                  var(--hoek) 100%, 0 calc(100% - var(--hoek)), 0 var(--hoek));
}

/* ── Knop ────────────────────────────────────────────────────────────────── */

.knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.95rem 2.2rem;
  font-family: var(--font-titel);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--goud-licht);
  text-decoration: none;
  text-align: center;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.knop svg { width: 1.7rem; height: 1.7rem; fill: var(--goud-licht); flex: 0 0 auto; }
.knop:hover { filter: brightness(1.15); }
.knop:active { transform: translateY(1px); filter: brightness(1.25); }
.knop:focus-visible { outline: 3px solid var(--goud); outline-offset: 4px; }

/* De punten links en rechts lopen bij een grote knop dieper door: ongeveer 27px
   op een knophoogte van 78px. */
.knop--groot { font-size: 1.35rem; padding: 1.1rem 2.4rem; --punt: 1.7rem; }

/* ── Voetbalk ────────────────────────────────────────────────────────────── */

.voet {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  max-width: 100%;
  padding: 0.5rem 2.2rem;
  --vorm: polygon(1.4rem 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 1.4rem 100%, 0 50%);
  --vlak-vulling: linear-gradient(180deg, rgba(20, 17, 12, 0.92), rgba(8, 7, 6, 0.92));
}
.voet__tekst {
  font-family: var(--font-titel);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud-licht);
  white-space: nowrap;
}

/* Ruit-ornament in de voetbalk. */
.ruit {
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--goud);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ruit--licht { background: var(--goud-licht); }

/* ── Lage schermen ───────────────────────────────────────────────────────── */

/* Een telefoon in liggende stand heeft nauwelijks hoogte. Daar telt niet de
   breedte maar de hoogte, anders valt de knop onder de vouw. */
@media (max-height: 34rem) {
  :root { font-size: clamp(13px, 2.6vh + 4px, 17px); }

  body {
    gap: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .scherm { padding: 1.4rem 1.5rem 1.6rem; }
  .ornament { margin: 0.7rem 0 0.6rem; }
  .intro { margin-bottom: 1.1rem; font-size: 1.05rem; }
}

/* ── Smalle schermen ─────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .knop--groot { font-size: 1.1rem; padding: 0.9rem 1.5rem; --punt: 1.3rem; }
  .voet { gap: 1.2rem; padding: 0.45rem 1.5rem; }
  .voet__tekst { font-size: 0.72rem; }
}

/* ── Bewegingsvoorkeur ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}