/*
  Thema "roze kasteel": vaste scène achter de pagina (roze gloed, kasteel,
  drijvende mist) en alle blokken als kaarten met afgeronde hoeken en een
  zachte roze schaduw. De intro (intro.css) gebruikt dezelfde scène en zet
  er alleen het hek bovenop.

  Kleuren, lettertypes en maten: tokens.css.
*/

/* ------------------------------------------------------------------ */
/* Scène                                                                */
/* ------------------------------------------------------------------ */

html {
  background: var(--rose-100);
  scrollbar-gutter: stable; /* geen verspringen als er tijdens de intro even een scrollbalk is */
}

body {
  background: transparent;
  min-height: 100vh;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* het kasteel is breder dan een telefoon: niet scrollen */
  pointer-events: none;
}

/* Roze gloed: lucht van licht naar warm roze, met een lichte plek achter het kasteel. */
.scene__gloed {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgb(255 255 255 / 0.85), transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 100%, var(--rose-300), transparent 70%),
    linear-gradient(to bottom, #FFEFF5 0%, var(--rose-100) 45%, var(--rose-200) 100%);
}

.scene__kasteel {
  position: absolute;
  top: var(--castle-top);
  left: 50%;
  width: var(--castle-size);
  height: var(--castle-size);
  margin-left: calc(var(--castle-size) / -2);
  object-fit: contain;
}

/* Mist: zachte roze en witte wolken die heel langzaam heen en weer drijven. */
.scene__mist {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 45vh;
  will-change: transform; /* geen filter: blur, te zwaar voor oudere telefoons */
}

.scene__mist--achter {
  top: calc(var(--castle-top) + var(--castle-size) * 0.55);
  background:
    radial-gradient(ellipse 30% 40% at 20% 50%, rgb(255 225 236 / 0.9), transparent 70%),
    radial-gradient(ellipse 35% 45% at 55% 45%, rgb(255 240 246 / 0.85), transparent 70%),
    radial-gradient(ellipse 30% 40% at 85% 55%, rgb(250 205 222 / 0.9), transparent 70%);
  animation: mist-drijven 38s ease-in-out infinite alternate;
}

.scene__mist--voor {
  top: calc(var(--castle-top) + var(--castle-size) * 0.75);
  height: 60vh;
  background:
    radial-gradient(ellipse 40% 35% at 30% 40%, rgb(255 236 243 / 0.95), transparent 70%),
    radial-gradient(ellipse 40% 40% at 75% 45%, rgb(248 200 218 / 0.9), transparent 70%),
    linear-gradient(to bottom, transparent, var(--rose-200) 55%);
  animation: mist-drijven 46s ease-in-out infinite alternate-reverse;
}

@keyframes mist-drijven {
  from { transform: translateX(-6%); }
  to { transform: translateX(6%); }
}

/* De pagina zelf ligt boven de scène. */
.site-header,
.site-main {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Kop: namen in sierschrift over de lucht                              */
/* ------------------------------------------------------------------ */

.site-header {
  border: 0;
  align-items: flex-start;
  padding-block-start: var(--space-m);
}

.site-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--plum-700);
  text-shadow: 0 0 12px rgb(255 255 255 / 0.9), 0 0 2px rgb(255 255 255);
}

.site-header__date {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--plum-700);
}

.lang-toggle.button--secondary {
  padding: var(--space-xs) var(--space-m);
  font-size: var(--font-size-small);
  background: rgb(255 255 255 / 0.75);
}

/* ------------------------------------------------------------------ */
/* Kaarten                                                              */
/* ------------------------------------------------------------------ */

.site-main {
  padding-block-start: calc(var(--cards-start) - 6rem);
  padding-block-end: var(--space-xl);
}

.site-main > .block,
.dashboard > .block,
.phase {
  background: var(--color-surface);
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-l);
}

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

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

/* Blokken binnen een fase zijn hoofdstukjes van dezelfde kaart. */
.phase .block {
  background: none;
  border-radius: 0;
  padding: var(--space-l) 0 0;
  border-top: 1px solid var(--rose-200);
}

.loading {
  text-align: center;
  color: var(--plum-700);
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Koppen en tekst                                                      */
/* ------------------------------------------------------------------ */

.login__title,
.welcome__title,
.phase__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-display);
  line-height: 1.15;
  color: var(--plum-700);
}

.block__title,
.guests__legend,
.choice-group__legend,
.address__legend,
.timeline__label {
  color: var(--color-heading);
}

.countdown {
  font-style: italic;
  color: #A8466F; /* donker genoeg voor leesbaarheid (AA) */
}

a {
  color: var(--color-link);
}

/* ------------------------------------------------------------------ */
/* Formulieren en knoppen                                               */
/* ------------------------------------------------------------------ */

.field__input {
  border-color: var(--color-border);
}

.field__input:disabled {
  background: var(--rose-50);
}

.field__input:focus-visible,
.choice__input:focus-visible,
.button:focus-visible {
  outline-color: var(--color-focus);
}

.guest {
  background: var(--rose-50);
  border: 1px solid var(--rose-200);
  border-radius: 16px;
}

.choice__input {
  accent-color: var(--plum-700);
}

.button {
  border-radius: 999px;
}

.button--primary {
  background: var(--plum-700);
  border-color: var(--plum-700);
}

.button--primary:hover {
  background: #93306A;
}

.button--secondary {
  background: #ffffff;
  color: var(--plum-700);
  border-color: var(--plum-700);
}

.preview-banner,
.readonly-note,
.page-notice {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}