/* Brittany Signature: commercieel lettertype (Creatype Studio), persoonlijke
   licentie, staat lokaal in fonts/. Terugval op Sacramento tot het geladen is.
   font-display: swap zodat de tekst nooit onzichtbaar op het font wacht. */
@font-face {
  font-family: 'Brittany Signature';
  src: url('./fonts/BrittanySignature.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #FCF9F3; /* gelijk aan het papier: de kaart vult het hele scherm */
  --card: #FCF9F3;
  --terra: #A8552F;
  --terra-soft: #BE7C5C;
  --sage: #8E9B72;
  --rule: #E0CFBD;
  --hint: #C9BBA9;
}

* { box-sizing: border-box; margin: 0; }

html, body {
  background: var(--bg);
  /* geen pull-to-refresh en geen tekstselectie tijdens het krassen */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

html { height: 100%; }

body {
  /* Hier, buiten elke media query: wordt de kaart hoger dan het venster, dan
     moet de pagina mee kunnen groeien. Met een vaste body-hoogte plus
     align-items: center valt de bovenkant van de kaart onbereikbaar boven het
     venster — en dat gebeurt niet alleen op een groot scherm, maar juist op een
     telefoon in landschap (844x390) met een onthulde kaart. */
  height: auto;
  min-height: 100%;
  display: flex;
  /* Geen align-items: center hier. De kaart rekt zich in de basis uit tot de
     hoogte van de body en vult zo het scherm — een percentage-min-height op de
     kaart zou dat niet doen, want de body heeft geen vaste hoogte meer.
     Verticaal centreren doet de kaart zelf met zijn eigen justify-content, dus
     de inhoud staat nog precies waar hij stond. */
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--terra);
}

.card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 44px 30px 46px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Vroeger werd de kaart op een groot scherm een losse kaart met schaduw op een
   greige achtergrond. Dat is eruit: de hele achtergrond moet gevuld zijn,
   ongeacht schermgrootte. De inhoud blijft op leesbreedte via de padding.
   Op een breed scherm loopt de kaart mee met het venster. */
@media (min-width: 720px) {
  .card { padding-left: 15vw; padding-right: 15vw; }
}

.greeting { font: 400 16px/1 'Cormorant Garamond', serif; letter-spacing: .05em; color: var(--sage); }
.greeting:empty { display: none; }

.title { font: 400 46px/1.1 'Brittany Signature', Sacramento, cursive; margin-top: 30px; }

.names { font: 400 36px/1.1 'Brittany Signature', Sacramento, cursive; margin-top: 16px; }

.hint {
  font: 300 italic 13px/1 'Cormorant Garamond', serif;
  color: var(--terra-soft);
  margin-top: 12px;
  min-height: 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0;
  transition: opacity .5s ease, margin-top .5s ease, min-height .5s ease, line-height .5s ease;
}
.hint.zichtbaar { opacity: 1; }
/* Na de onthulling (of zodra er niet meer gehint hoeft te worden) mag de
   hint-regel geen ruimte meer innemen: anders blijft er een lege regel
   onderaan de kaart staan waar ooit "of tik om te openen" stond. De
   line-height moet ook mee naar 0, anders blijft de regel zijn eigen
   tekstregel-hoogte behouden ondanks min-height: 0. */
/* display:none en niet alleen hoogte 0: de pijl-svg houdt de flex-container anders
   op zijn eigen 24px, en de tekst is op dit moment toch al leeggemaakt. */
.hint.klaar { display: none; }
/* de speelse pijl naar het hart; tekent mee in de inktkleur van de hint */
/* De svg is hoger dan de tekst en de staart van de pijl staat precies op halve
   hoogte: met align-items:center ligt het begin van de pijl dan op de
   middenlijn van de tekst, en buigt de rest omhoog naar het hart. */
.hint .pijl { width: 34px; height: 36px; flex: none; overflow: visible; }
.hint .pijl path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

.reveal-only { display: none; }
.reveal-only.zichtbaar {
  display: block;
  animation: opkomen .6s ease both;
}
@keyframes opkomen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lijn { width: 158px; height: 1px; border: 0; background: var(--rule); margin: 14px auto; }

.klok { display: flex; justify-content: center; }
.cel { padding: 0 10px; position: relative; display: flex; flex-direction: column; align-items: center; }
.cel + .cel::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--rule); }
.getal {
  font: 400 22px/1 'Cormorant Garamond', serif;
  font-variant-numeric: tabular-nums;
  min-width: 36px;                    /* vaste breedte, anders wiebelt het per tik */
}
.label { font: 500 6.5px/1 'Cormorant Garamond', serif; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-soft); margin-top: 4px; }
.vandaag { font: 400 22px/1 Sacramento, cursive; }

.agenda {
  margin-top: 6px; padding: 14px 26px;
  border: 1px solid var(--terra-soft); background: none; border-radius: 0;
  font: 500 11px/1 'Cormorant Garamond', serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terra); cursor: pointer;
  touch-action: manipulation; /* geen dubbeltik-zoom, geen tikvertraging op iOS */
}
.agenda:focus-visible, .keuze a:focus-visible, .keuze button:focus-visible { outline: 2px solid var(--terra-soft); outline-offset: 3px; }
/* De keuze Apple / Google klapt uit ná een klik op de knop hierboven, die dan
   zelf verdwijnt: twee knoppen waar er eerst één stond. */
.keuze { display: none; gap: 10px; margin-top: 6px; }
.keuze.open { display: flex; }
.agenda.open { display: none; }
.keuze a, .keuze button {
  padding: 12px 16px; border: 1px solid var(--rule); background: none; border-radius: 0;
  font: 500 10px/1 'Cormorant Garamond', serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terra); text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.later { font: 300 italic 13px/1 'Cormorant Garamond', serif; color: var(--terra-soft); margin-top: 14px; }

/* De aquarel-takken: twee stukken van één tekening. De bovenste hangt aan de
   linkerbovenhoek en loopt links het scherm uit, de onderste aan de
   rechteronderhoek en loopt rechts het scherm uit. Breedte relatief aan de
   kaart, met een plafond zodat ze op een groot scherm niet opblazen. */
/* Breedte ook aan de schermhoogte gebonden: op een kort venster (iPhone met
   Safari-balken is 393x659) beginnen ze kleiner, anders raken ze de tekst al
   vóór de onthulling. */
.tak { position: absolute; pointer-events: none; width: min(78vw, 360px, 46vh); height: auto;
       transition: transform .7s ease; }
.tak-boven { top: 0; left: -10%; }
.tak-onder { bottom: 0; right: -10%; }
/* Na de onthulling groeit de inhoud met de klok en de knop. De bloemen maken
   plaats: card.js meet hoeveel elke tak de tekst overlapt en schuift hem
   precies zover naar buiten (inline transform); past hij dan nog niet, dan
   faadt hij weg. Een vaste verschuiving werkte niet: op een iPhone met
   Safari-balken (393x659) is er na de onthulling simpelweg geen plek. */
/* Op een kort venster (telefoon in landschap) zouden ze over de tekst vallen. */
@media (max-height: 560px) { .tak { display: none; } }

.hartvak {
  position: relative;
  width: clamp(150px, 55vw, 200px);
  aspect-ratio: 100 / 92;
  margin-top: 26px;
}
.onder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 11%;
  /* Onzichtbaar tot de folie geschilderd is. De datum staat vanaf het parsen
     als echte tekst in de DOM (voor schermlezers), maar het canvas erboven is
     transparant tot scratch.js het beschilderd heeft — en dat gebeurt pas na
     het laden van de fonts, tot 1,5 s later. Zonder dit staat de datum dat
     hele venster in beeld. opacity in plaats van visibility: schermlezers
     lezen opacity:0-tekst gewoon voor, visibility:hidden niet. */
  opacity: 0;
}
.onder.klaar { opacity: 1; }
.onder-2 { font: 500 10px/1 'Cormorant Garamond', serif; letter-spacing: .26em; }
.onder-3 { font: 400 23px/1 'Cormorant Garamond', serif; letter-spacing: .03em; margin-top: 6px; }

.folie {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  touch-action: none;                 /* geen scroll of pull-to-refresh tijdens krassen */
  -webkit-touch-callout: none;        /* geen iOS-longpressmenu */
  cursor: grab;
}
.folie:focus-visible { outline: 2px solid var(--terra-soft); outline-offset: 4px; }

/* De preeg ligt over de folie, niet eronder: dan ligt zowel de folie als het
   weggekraste papier verzonken, en blijft de preeg staan als de folie weg is. */
.preeg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: opacity .45s ease;
}

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

/* Bij prefers-reduced-motion valt er geen deeltjesregen maar loopt er een
   zachte rosé veeg over het hart. */
.rustige-veeg {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(223,167,155,.55) 50%, transparent 70%);
  animation: veeg 1.1s ease both;
}
@keyframes veeg { from { opacity: 0; transform: translateX(-40%); } 40% { opacity: 1; } to { opacity: 0; transform: translateX(40%); } }

.alleen-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* Waarschuwing voor de eigenaar zolang het domein in config.js nog de
   placeholder is. Opvallend mag: hij is niet voor de gast bedoeld en is weg
   zodra site.origin is ingevuld. */
.domeinwaarschuwing {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  padding: 10px 14px;
  background: var(--terra); color: var(--card);
  font: 400 14px/1.35 'Cormorant Garamond', Georgia, serif;
  text-align: center;
}

/* Dit blok hoort onderaan het bestand: bij gelijke specificiteit wint de regel
   die later in de cascade staat, ook als de eerdere regel in een media query
   zit. Stond dit blok hierboven, dan zou de latere .preeg-regel de transitie
   hier alsnog overschrijven en bleef reduced motion zonder effect. */
@media (prefers-reduced-motion: reduce) {
  .reveal-only.zichtbaar { animation: none; }
  /* .hint hoort er ook bij: die transitie loopt over min-height en
     line-height, en dat is échte layout-beweging op het onthullingsmoment. */
  .preeg, .folie, .hint, .tak { transition: none; }
}