/*
  Thema "middeleeuws manuscript": alle decoratie op één plek.
  - kasteel als vaste achtergrond met vignettering
  - perkamenten panelen: papierstructuur, gescheurde randen, rode kantlijnen,
    ranken langs de bovenkant
  - gotische koppen en grote initialen
  - marginalia: uitgeknipte figuurtjes in de marges (zie .marginalia)

  Dit bestand weghalen uit index.html geeft weer een rustige, platte site;
  kleuren en lettertypes komen uit tokens.css.

  Afbeeldingen: Wikimedia Commons, public domain (zie img/BRONNEN.md).
*/

/* ------------------------------------------------------------------ */
/* Achtergrond: kasteel van Saumur (Très Riches Heures, september)     */
/* ------------------------------------------------------------------ */

html {
  background: var(--color-page);
  overflow-x: clip; /* figuurtjes in de marge mogen nooit een scrollbalk geven */
}

body {
  background: transparent;
  min-height: 100vh;
  padding-block-end: var(--space-xl);
}

/* Vaste achtergrond via ::before, want background-attachment: fixed
   werkt niet op iPhones. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("/img/kasteel-saumur.jpg") 50% 55% / cover no-repeat;
}

/* Vignettering: randen donkerder, oog naar het midden. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgb(30 18 6 / 0.65) 100%);
}

/* ------------------------------------------------------------------ */
/* Perkamenten panelen                                                  */
/* ------------------------------------------------------------------ */

.site-header,
.site-main > .block,
.dashboard > .block,
.phase {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 2.75rem 1.75rem 1.75rem 2.5rem;
}

/* Het perkament zelf, als laag onder de inhoud, met gescheurde boven- en
   onderrand (masker). Figuurtjes die over de rand steken, worden niet
   afgeknipt omdat alleen deze laag gemaskerd is. */
.site-header::before,
.site-main > .block::before,
.dashboard > .block::before,
.phase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--pigment-parchment);
  background-image:
    /* rode kantlijnen, zoals in echte handschriften */
    linear-gradient(to right,
      transparent 1.35rem, rgb(168 50 42 / 0.55) 1.35rem, rgb(168 50 42 / 0.55) calc(1.35rem + 1px),
      transparent calc(1.35rem + 1px)),
    linear-gradient(to left,
      transparent 0.9rem, rgb(168 50 42 / 0.4) 0.9rem, rgb(168 50 42 / 0.4) calc(0.9rem + 1px),
      transparent calc(0.9rem + 1px)),
    /* vergeelde randen */
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgb(150 100 40 / 0.22) 100%),
    /* papierstructuur (vlekjes en vezels) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 .28 0 0 0 -.06'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .35 0 0 0 0 .15 .3 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='10'%3E%3Cpath d='M0 10V4l8 2 7-4 9 3 7-4 9 3 7-2 9 4 7-3 9 2 8-4 8 3 8-2 8 4 8-3 8 2 8-4 9 3 8-2 7 3 8-2v8z'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='10'%3E%3Cpath d='M0 0v5l9 3 7-4 8 4 9-3 7 4 8-2 9 3 7-4 8 3 9-2 7 4 8-3 9 2 7-4 8 3 9-2 7 4 8-3 7 2 9-2V0z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--tear-top), linear-gradient(#000, #000), var(--tear-bottom);
  mask-image: var(--tear-top), linear-gradient(#000, #000), var(--tear-bottom);
  -webkit-mask-size: 160px 10px, 100% calc(100% - 18px), 160px 10px;
  mask-size: 160px 10px, 100% calc(100% - 18px), 160px 10px;
  -webkit-mask-position: left top, left 9px, left bottom;
  mask-position: left top, left 9px, left bottom;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
  mask-repeat: repeat-x, no-repeat, repeat-x;
}

/* Ornamentele rank langs de bovenkant. */
.site-main > .block::after,
.dashboard > .block::after,
.phase::after {
  content: "";
  position: absolute;
  inset-inline: 2.5rem 1.5rem;
  top: 0.9rem;
  height: 26px;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26'%3E%3Cpath d='M0 13C8 4 16 4 24 13S40 22 48 13 64 4 72 13 88 22 96 13' fill='none' stroke='%233E6B4F' stroke-width='1.4'/%3E%3Cg fill='%23C29B2E'%3E%3Cpath transform='translate(10 8) rotate(-40)' d='M0 0q4-5 9 0q-5 4-9 0z'/%3E%3Cpath transform='translate(58 19) rotate(35)' d='M0 0q4-5 9 0q-5 4-9 0z'/%3E%3C/g%3E%3Cg fill='%233E6B4F'%3E%3Cpath transform='translate(33 17) rotate(40)' d='M0 0q4-5 9 0q-5 4-9 0z'/%3E%3Cpath transform='translate(80 9) rotate(-40)' d='M0 0q4-5 9 0q-5 4-9 0z'/%3E%3C/g%3E%3Cg fill='%23A8322A'%3E%3Ccircle cx='24' cy='5' r='1.8'/%3E%3Ccircle cx='21' cy='3.5' r='1.2'/%3E%3Ccircle cx='72' cy='21' r='1.8'/%3E%3Ccircle cx='75' cy='22.5' r='1.2'/%3E%3C/g%3E%3Cg fill='%23243C8C'%3E%3Ccircle cx='48' cy='7' r='1.5'/%3E%3Ccircle cx='0' cy='19' r='1.3'/%3E%3Ccircle cx='96' cy='19' r='1.3'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center;
  opacity: 0.9;
}

.site-header {
  margin: var(--space-m) auto 0;
  max-width: calc(var(--page-max-width) - 2 * var(--space-m));
  padding: 1rem 1.25rem 1rem 2.25rem;
}

.site-main {
  padding-block-start: var(--space-xl);
}

.dashboard {
  gap: var(--space-xl);
}

.phase {
  gap: var(--space-l);
}

/* Blokken binnen een fase zijn geen los perkament maar hoofdstukjes,
   gescheiden door een gouden lijn. */
.phase .block {
  background: none;
  border-radius: 0;
  padding: var(--space-l) 0 0;
  border-top: 1px solid var(--pigment-gold);
}

/* ------------------------------------------------------------------ */
/* Koppen en initialen                                                  */
/* ------------------------------------------------------------------ */

.site-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--pigment-vermilion);
}
.site-header__date {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--font-size-small);
}

.login__title,
.welcome__title,
.phase__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--pigment-vermilion);
}
.welcome__title {
  font-size: 2.1rem;
}
.welcome__name {
  color: var(--pigment-lapis);
}
.phase__title {
  font-size: 2.25rem;
}

.block__title,
.guests__legend,
.choice-group__legend,
.address__legend,
.timeline__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--color-heading);
}

.countdown {
  font-style: italic;
  font-size: var(--font-size-base);
  color: var(--pigment-verdigris);
}

/* Grote initiaal aan het begin van de eerste tekst van een blok. */
.login__intro::first-letter,
.site-main > .block > .text-block:first-of-type::first-letter,
.dashboard > .block > .text-block:first-of-type::first-letter,
.phase > .text-block:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.8;
  padding: 0.06em 0.1em 0 0;
  color: var(--pigment-vermilion);
}
/* Afwisselend lapis, zoals in handschriften. */
.updates > .text-block:first-of-type::first-letter,
.gift > .text-block:first-of-type::first-letter,
.phase--3 > .text-block:first-of-type::first-letter {
  color: var(--pigment-lapis);
}

/* ------------------------------------------------------------------ */
/* Formulieren en knoppen: archief, geen app                            */
/* ------------------------------------------------------------------ */

.field__input {
  background: rgb(252 247 232 / 0.75);
  border-color: var(--color-border);
}

.guest {
  background: rgb(252 247 232 / 0.55);
  border: 1px solid var(--pigment-gold);
}

.choice__input {
  accent-color: var(--pigment-vermilion);
}

.button {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-color: var(--pigment-ink);
}
.button--primary:hover {
  background: var(--pigment-lapis);
}
.button--secondary {
  background: transparent;
  color: var(--pigment-lapis);
  border-color: var(--pigment-lapis);
}
.button--link {
  color: var(--color-link);
}

.preview-banner,
.readonly-note,
.page-notice {
  border-left: 4px solid var(--pigment-vermilion);
}

/* ------------------------------------------------------------------ */
/* Marginalia: uitgeknipte figuurtjes                                   */
/* ------------------------------------------------------------------ */
/*
  <img class="marginalia marginalia--m marginalia--right marginalia--top
              marginalia--tilt-right" src="/img/marginalia/…" alt="">

  Grootte: --s / --m / --l      Kant: --left / --right
  Hoogte:  --top / --middle / --bottom
  Scheef:  --tilt-left / --tilt-right (standaard een klein beetje)

  De plaatjes zijn transparante PNG's, uitgeknipt langs de omtrek met een
  smal randje perkament (zie docs/styling.md: "Nieuwe figuurtjes").
  Op telefoons steken ze over de hoek van het paneel; op brede schermen
  staan ze in de marge naast de tekst.
*/

.marginalia {
  --tilt: -2deg;
  position: absolute;
  z-index: 2;
  width: var(--marginalia-m);
  height: auto;
  transform: rotate(var(--tilt));
  pointer-events: none;
}

.marginalia--s { width: var(--marginalia-s); }
.marginalia--m { width: var(--marginalia-m); }
.marginalia--l { width: var(--marginalia-l); }

.marginalia--left { left: -0.75rem; }
.marginalia--right { right: -0.75rem; }
.marginalia--top { top: -2.75rem; }
.marginalia--middle { top: 40%; }

/* Op telefoons zou een figuurtje halverwege over de tekst of een invulveld
   vallen; die staan alleen op brede schermen, in de marge. */
@media (max-width: 69.99rem) {
  .marginalia--middle { display: none; }
}
.marginalia--bottom { bottom: -2.25rem; }

.marginalia--tilt-left { --tilt: -7deg; }
.marginalia--tilt-right { --tilt: 6deg; }

/* Brede schermen: in de marge, naast het paneel. */
@media (min-width: 70rem) {
  .marginalia {
    pointer-events: auto;
  }
  .marginalia--left {
    left: auto;
    right: calc(100% + 1.25rem);
  }
  .marginalia--right {
    right: auto;
    left: calc(100% + 1.25rem);
  }
  .marginalia--top { top: 0.5rem; }
  .marginalia--bottom { bottom: 0.5rem; }

  /* Wiebelen bij aanwijzen, alsof het uitgeknipt papier is. */
  .marginalia:hover {
    animation: marginalia-wiebel 0.7s ease-in-out;
  }
}

@keyframes marginalia-wiebel {
  0%, 100% { transform: rotate(var(--tilt)); }
  25% { transform: rotate(calc(var(--tilt) + 4deg)); }
  60% { transform: rotate(calc(var(--tilt) - 3deg)); }
  85% { transform: rotate(calc(var(--tilt) + 1deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .marginalia:hover {
    animation: none;
  }
}