/* Fa's Roses: rozenveld bij nacht (sections/fas-rozenveld.liquid).
   Brandbook op zwart: zwart papier als nacht, crème tekst, goud alleen als dunne lijn en label. */

.fas-veld {
  --veld-night: #1A1414;     /* zwart papier */
  --veld-wine: #5E1219;      /* bordeaux */
  --veld-cream: #FFF2D8;
  --veld-gold: #C8A063;
  --veld-v: 0;
  position: relative; isolation: isolate; overflow: clip;
  height: calc(100svh - var(--fas-header-h, 6.4rem)); min-height: 52rem;
  display: grid; place-items: center;
  /* Brandbook: bordeaux gloed aan de horizon, die naar zwart papier loopt. Rood, crème en goud komen van de rozen en de tekst. */
  background:
    radial-gradient(95% 46% at 50% 46%, #7A1822 0%, var(--veld-wine) 28%, #33111500 78%),
    linear-gradient(to bottom, var(--veld-night) 0%, #2A1114 34%, #3B1116 50%, #241012 72%, var(--veld-night) 100%);
  color: var(--veld-cream);
}
.fas-veld__canvas, .fas-veld__glow, .fas-veld__rays, .fas-veld__vignette { position: absolute; inset: 0; pointer-events: none; }
.fas-veld__canvas { z-index: 0; opacity: 0; transition: opacity 1.8s ease; }
.fas-veld.is-ready .fas-veld__canvas { opacity: 1; }
.fas-veld__canvas canvas { display: block; width: 100%; height: 100%; }
/* Gloed aan de horizon, als licht achter de heuvel */
.fas-veld__glow { z-index: 1; background: radial-gradient(70% 26% at 50% 47%, rgba(214, 150, 110, 0.16), transparent 70%); mix-blend-mode: screen; }
/* Lichtstralen: warm licht dat schuin van linksboven over het veld valt en heel traag verschuift */
.fas-veld__rays {
  z-index: 1; inset: -20% -10% 0 -30%;
  background: repeating-linear-gradient(118deg, transparent 0 7%, rgba(232, 190, 120, 0.10) 9% 11%, transparent 14% 22%, rgba(232, 190, 120, 0.06) 24% 25%, transparent 28% 34%);
  -webkit-mask-image: radial-gradient(80% 90% at 22% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(80% 90% at 22% 0%, #000 0%, transparent 72%);
  filter: blur(18px); mix-blend-mode: screen; opacity: 0;
  transition: opacity 3s ease 0.6s;
  animation: fas-veld-rays 26s ease-in-out infinite alternate;
}
.fas-veld.is-ready .fas-veld__rays { opacity: 1; }
@keyframes fas-veld-rays { from { translate: -3% 0; } to { translate: 4% 0; } }
/* Vignet: trekt iets dicht als je sneller gaat */
.fas-veld__vignette {
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent calc(46% - var(--veld-v) * 14%), rgba(26, 20, 20, 0.35) 80%, rgba(26, 20, 20, 0.8) 100%),
              linear-gradient(to bottom, rgba(26, 20, 20, 0.5), transparent 22%, transparent 84%, rgba(26, 20, 20, 0.5));
}

/* Tekst en knoppen staan in de lucht boven het veld: rustig leesbaar, en de rozen blijven vrij. */
.fas-veld__inner {
  position: absolute; z-index: 3; left: 0; right: 0; top: clamp(4rem, 9vh, 9.6rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem;
  padding-inline: var(--fas-gutter, 2rem);
  pointer-events: none;
  animation: fas-veld-in 1.4s ease 0.2s both;   /* de tekst wacht niet op de 3D */
}
@keyframes fas-veld-in { from { filter: opacity(0); } to { filter: opacity(1); } }
.fas-veld__inner a { pointer-events: auto; }
.fas-veld__eyebrow { color: var(--veld-gold); letter-spacing: 0.02em; }
.fas-veld .fas-veld__title {
  font-family: var(--fas-display); font-weight: 500; color: var(--veld-cream);
  font-size: clamp(5.2rem, 9vw, 14rem); line-height: 0.96; letter-spacing: -0.01em;
  text-wrap: balance; max-width: 16ch;
  text-shadow: 0 0.2rem 4rem rgba(26, 20, 20, 0.55);
}
.fas-veld__text { max-width: 44ch; font-size: clamp(1.6rem, 1.3vw, 2rem); line-height: 1.45; color: color-mix(in srgb, var(--veld-cream) 90%, transparent); text-shadow: 0 0 2rem rgba(26, 20, 20, 0.6); }

.fas-veld__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 1.2rem; }
.fas-veld__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  min-height: 5.6rem; padding: 0 4.4rem; border-radius: 0.3rem;
  background: var(--veld-cream); color: var(--fas-brand, #A7242E) !important;
  font: 500 1.4rem/1 var(--fas-body); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 1rem 3rem rgba(26, 20, 20, 0.35);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fas-veld__btn span { display: inline-block; transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fas-veld__btn:hover { background: #fff; translate: 0 -0.2rem; }
.fas-veld__btn:hover span { translate: 0.4rem 0; }
.fas-veld__btn--ghost { background: rgba(26, 20, 20, 0.25); color: var(--veld-cream) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--veld-cream) 75%, transparent); backdrop-filter: blur(6px); }
.fas-veld__btn--ghost:hover { background: rgba(255, 242, 216, 0.14); box-shadow: inset 0 0 0 1.5px var(--veld-cream); }
.fas-veld__btn:focus-visible { outline: 2px solid var(--veld-gold); outline-offset: 4px; }

/* Onderrand: drie zekerheden links, de scrollhint rechts */
.fas-veld__foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2.4rem;
  padding: 6rem var(--fas-gutter, 2rem) 2.4rem;
  background: linear-gradient(to top, rgba(26, 20, 20, 0.78), transparent);
  pointer-events: none;
  animation: fas-veld-in 1.4s ease 0.9s both;
}
.fas-veld__usps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 3.2rem; font: var(--fas-label); letter-spacing: 0.02em; text-transform: uppercase; color: var(--veld-cream); }
.fas-veld__usps li { display: flex; align-items: center; gap: 1rem; }
.fas-veld__usps li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--veld-gold); flex: none; }
.fas-veld__hint { display: flex; align-items: center; gap: 1.4rem; margin: 0; letter-spacing: 0.02em; white-space: nowrap; color: color-mix(in srgb, var(--veld-cream) 75%, transparent); }
.fas-veld__hint::after { content: ""; width: 1px; height: 3.2rem; background: linear-gradient(var(--veld-gold), transparent); animation: fas-veld-hint 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; transform-origin: top; }
@keyframes fas-veld-hint { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

@media (max-width: 749px) {
  .fas-veld { min-height: 56rem; }
  .fas-veld__inner { top: 4rem; gap: 1.6rem; }
  .fas-veld .fas-veld__title { font-size: clamp(4.4rem, 13.5vw, 6.4rem); }
  .fas-veld__actions { flex-direction: column; align-self: stretch; }
  .fas-veld__btn { min-height: 5.2rem; }
  .fas-veld__foot { flex-direction: column; align-items: flex-start; padding-bottom: 2rem; }
  .fas-veld__usps { flex-direction: column; gap: 0.8rem; }
  .fas-veld__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fas-veld__canvas { transition: none; }
  .fas-veld__inner, .fas-veld__foot { animation: none; }
  .fas-veld__hint::after, .fas-veld__rays { animation: none; }
}

/* ------------------------------------------------------------------ Overgang naar de volgende sectie
   Het veld blijft staan en de pagina schuift er als een vel crème papier overheen, met een gouden haarlijn
   en een zachte schaduw. Ondertussen zakt het veld weg in het donker en schuift de tekst mee omhoog. */
.fas-section-veld { position: sticky; top: var(--fas-header-h, 6.4rem); z-index: 0; }
.fas-section-veld + * { overflow: clip; }
.fas-section-veld ~ * { position: relative; z-index: 1; background: var(--fas-cream); }
.fas-section-veld + * {
  border-radius: 2.4rem 2.4rem 0 0;
  box-shadow: 0 -1px 0 var(--fas-gold, #C8A063), 0 -4rem 8rem rgba(26, 20, 20, 0.45);
}
.fas-section-veld + * > :first-child { border-radius: inherit; }
.fas-veld { --veld-p: 0; }
.fas-veld::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--veld-night); opacity: calc(var(--veld-p) * 0.7);
}
.fas-veld__inner { translate: 0 calc(var(--veld-p) * -7rem); opacity: calc(1 - var(--veld-p) * 1.6); }
.fas-veld__canvas { scale: calc(1 + var(--veld-p) * 0.06); }

/* ------------------------------------------------------------------ Kop over het veld
   Staat het veld bovenaan de pagina, dan ligt de kop er doorzichtig overheen (logo en menu in crème)
   en loopt het veld door tot de bovenrand. Zodra het crème papier bovenaan komt, wordt de kop weer crème. */
html:not(.fas-veld-past):not(.fas-menu-open):has(#fas-main > .fas-section-veld:first-child) .fas-header { --hd: #FFF2D8; --hd-bg: transparent; --hd-line: transparent; --hd-blur: 0px; --hd-logo: brightness(0) invert(1) sepia(0.28) saturate(1.6) hue-rotate(-8deg); }
#fas-main > .fas-section-veld:first-child { margin-top: calc(-1 * var(--fas-header-h, 6.4rem)); top: 0; }
#fas-main > .fas-section-veld:first-child .fas-veld { height: 100svh; }
#fas-main > .fas-section-veld:first-child .fas-veld__inner { top: calc(var(--fas-header-h, 6.4rem) + clamp(3.2rem, 7vh, 8rem)); }
@media (max-width: 749px) { #fas-main > .fas-section-veld:first-child .fas-veld__inner { top: calc(var(--fas-header-h, 6.4rem) + 2.4rem); } }

/* Zekerheden met icoon; op mobiel een compacte glazen balk van drie kolommen, zodat ze niet wegvallen in de rozen */
.fas-veld__usps li svg { width: 2rem; height: 2rem; flex: none; fill: none; stroke: var(--veld-gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fas-veld__usps li:has(svg)::before { display: none; }
@media (max-width: 749px) {
  .fas-veld__foot { padding: 0 1.2rem 1.2rem; align-items: stretch; }
  .fas-veld__usps {
    flex-direction: row; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    padding: 1.2rem 0.4rem; border-radius: 1.4rem;
    background: rgba(26, 20, 20, 0.62); -webkit-backdrop-filter: blur(1.2rem); backdrop-filter: blur(1.2rem);
    border: 1px solid rgba(200, 160, 99, 0.35);
    font-size: 1rem; letter-spacing: 0.02em; line-height: 1.3; text-align: center;
  }
  .fas-veld__usps li { flex-direction: column; justify-content: flex-start; gap: 0.6rem; padding: 0 0.6rem; }
  .fas-veld__usps li + li { border-left: 1px solid rgba(200, 160, 99, 0.25); }
  .fas-veld__usps li svg { width: 2.2rem; height: 2.2rem; }
}
/* Met aankondigingsbalk: de hero past precies in het eerste scherm, zodat de zekerheden onderaan zichtbaar blijven */
body:has(.fas-bar) #fas-main > .fas-section-veld:first-child .fas-veld { height: calc(100svh - 4.5rem); }