/* =========================================================================
   FVKB ontwerplaag: beweging en onderdelen een op een uit het ontwerp
   ========================================================================= */

/* ---------- Keyframes uit het ontwerp ---------- */
@keyframes zwaai { 0% { transform: rotate(0) } 25% { transform: rotate(2.4deg) } 60% { transform: rotate(-1.6deg) } 85% { transform: rotate(.6deg) } 100% { transform: rotate(0) } }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 58, .75) } 70% { box-shadow: 0 0 0 9px rgba(217, 164, 58, 0) } 100% { box-shadow: 0 0 0 0 rgba(217, 164, 58, 0) } }
@keyframes stoet { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes inzakken { 0% { opacity: 0; transform: translateY(-24px) rotate(-3deg) } 45% { opacity: 1; transform: translateY(0) rotate(2deg) } 70% { transform: rotate(-1deg) } 88% { transform: rotate(.4deg) } 100% { opacity: 1; transform: none } }
@keyframes opkomst { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes inzoom { from { transform: scale(1.06) } to { transform: none } }
@keyframes tekenen { from { transform: scaleX(0) } to { transform: none } }
@keyframes neerdalen { from { opacity: 0; transform: translateY(-20px) } to { opacity: 1; transform: none } }

/* ---------- Verschijnen bij scrollen (data-in, data-in-kids) ---------- */
.js-defile [data-in].in-beeld, .js-defile [data-in-kids].in-beeld > * { transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js-defile [data-in-kids].in-beeld > * { transition-delay: calc(var(--start, 0s) + var(--i, 0) * var(--stap, .1s)); }
.js-defile [data-in]:not(.in-beeld), .js-defile [data-in-kids]:not(.in-beeld) > * { opacity: 0; }
.js-defile [data-in="fade"]:not(.in-beeld), .js-defile [data-in-kids="fade"]:not(.in-beeld) > * { transform: translateY(18px); }
.js-defile [data-in-kids="zak"] > * { transform-origin: 50% 0; }
.js-defile [data-in-kids="zak"].in-beeld > *:not(.klaar) { animation: inzakken .9s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--start, 0s) + var(--i, 0) * var(--stap, .1s)); }
.js-defile [data-in="teken"] { transform-origin: left center; }
.js-defile [data-in="teken"].in-beeld { transition-duration: .75s; }
.js-defile [data-in="teken"]:not(.in-beeld) { opacity: 1; transform: scaleX(0); }
.js-defile [data-in="noot"].in-beeld { transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
.js-defile [data-in="noot"]:not(.in-beeld) { transform: scale(0); }
/* In de editor van Elementor alles gewoon tonen */
.elementor-editor-active [data-in], .elementor-editor-active [data-in-kids] > * { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ---------- Bij het laden: kop van de pagina ---------- */
@media (prefers-reduced-motion: no-preference) {
	.fvkb-opkomst > .elementor-element, .fvkb-opkomst > .e-con-inner > .elementor-element { animation: opkomst .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.1s + var(--i, 0) * .1s); }
	.fvkb-opkomst > :nth-child(2), .fvkb-opkomst > .e-con-inner > :nth-child(2) { --i: 1; }
	.fvkb-opkomst > :nth-child(3), .fvkb-opkomst > .e-con-inner > :nth-child(3) { --i: 2; }
	.fvkb-opkomst > :nth-child(4), .fvkb-opkomst > .e-con-inner > :nth-child(4) { --i: 3; }
	.fvkb-opkomst > :nth-child(5), .fvkb-opkomst > .e-con-inner > :nth-child(5) { --i: 4; }
	.fvkb-hero-img img { animation: inzoom 1.2s cubic-bezier(.2,.8,.2,1) both; }
	.fvkb-hero-stang.fvkb-stang::before { animation: tekenen .6s cubic-bezier(.2,.8,.2,1) .3s both; }
	.fvkb-agenda-kort .e-loop-item { animation: neerdalen .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.5s + var(--i, 0) * .1s); }
	.fvkb-agenda-kort .e-loop-item:nth-of-type(2) { --i: 1; }
	.fvkb-agenda-kort .e-loop-item:nth-of-type(3) { --i: 2; }
}

/* ---------- Hover: vaandels zwaaien, beeld zoomt ---------- */
.fvkb-o-vaandel, .fvkb-vaandel { transform-origin: 50% 0; }
a:hover .fvkb-o-vaandel, a.fvkb-o-vaandel:hover, a:hover .fvkb-vaandel, .fvkb-vaandel:hover,
.e-loop-item:hover .fvkb-vaandel, .fvkb-zwaai:hover .fvkb-vaandel, .fvkb-o-rijlink:hover .fvkb-vaandel { animation: zwaai 1s cubic-bezier(.45,0,.55,1); }
.fvkb-puls, .fvkb-label--eerst::before { animation: puls 2s ease-out 4; }

/* ---------- Gedeeld: vaandel met franje ---------- */
.fvkb-o-scroll { overflow-x: auto; scrollbar-width: thin; }
.fvkb-o-vaandel { position: relative; display: block; flex-shrink: 0; text-decoration: none; }
.fvkb-o-franje { position: absolute; inset: 0 0 -14px 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); background: repeating-linear-gradient(90deg, var(--franje, #D9A43A) 0 2px, transparent 2px 5px); }
.fvkb-o-doek { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); background: var(--kleur, #0E1240); color: var(--tekst, #FFFFFF); display: flex; flex-direction: column; align-items: center; box-sizing: border-box; text-align: center; }
.fvkb-o-stang { position: relative; height: 8px; border-radius: 4px; background: #D9A43A; }
.fvkb-o-stang > span { position: absolute; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #D9A43A; }

/* ---------- Groepen als vaandels aan de stang (home) ---------- */
.fvkb-o-vlagbaan { position: relative; padding: 0 10px; }
.fvkb-o-vlagbaan--home { min-width: 1100px; }
.fvkb-o-scroll:has(.fvkb-o-vlagbaan--home) { padding: 8px 0 24px; }
.fvkb-o-vlagrij { list-style: none; margin: 0; padding: 0 28px; display: flex; justify-content: space-between; gap: 20px; --start: .4s; --stap: .125s; }
.fvkb-o-vlagrij > li { margin: 0; }
.fvkb-o-vlagrij a { display: block; text-decoration: none; }
.fvkb-o-groepvaandel { width: 196px; height: 290px; }
.fvkb-o-groepvaandel .fvkb-o-doek { gap: 12px; padding: 24px 16px 0; }
.fvkb-o-groepvaandel img { width: 88px; height: 88px; object-fit: contain; flex: none; }
.fvkb-o-balkjes { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.fvkb-o-balkjes span { width: 52px; height: 4px; border-radius: 2px; background: var(--balk); }
.fvkb-o-naam { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2; }
.fvkb-o-sub { font-size: 14px; line-height: 1.35; }

/* ---------- Groepen als kleine vaandels met naam eronder (pagina Groepen) ---------- */
.fvkb-o-vlagbaan--groepen { min-width: 900px; }
.fvkb-o-vlagbaan--groepen .fvkb-o-vlagrij { padding: 0 24px; gap: 0; --start: .2s; --stap: .1s; }
.fvkb-o-vlagbaan--groepen .fvkb-o-vlagrij a { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #FFFFFF; }
.fvkb-o-kleinvaandel { width: 132px; height: 172px; }
.fvkb-o-kleinvaandel .fvkb-o-franje { inset: 0 0 -10px 0; }
.fvkb-o-kleinvaandel .fvkb-o-doek { padding-top: 22px; }
.fvkb-o-kleinvaandel img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.fvkb-o-onder { font-family: "Unbounded", sans-serif; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.2; color: #FFFFFF; }

@media (max-width: 1080px) {
	.fvkb-o-vlagbaan { min-width: 0 !important; padding: 0 !important; }
	.fvkb-o-vlagrij { padding: 0 4px !important; gap: 12px !important; }
	.fvkb-o-vlagrij > li { flex: 1 1 0; min-width: 0; }
	.fvkb-o-vlagrij > li > a { width: 100%; }
	.fvkb-o-groepvaandel, .fvkb-o-kleinvaandel { width: 100% !important; height: auto !important; margin: 0 auto; }
	.fvkb-o-groepvaandel { max-width: 170px; aspect-ratio: 196 / 270; }
	.fvkb-o-kleinvaandel { max-width: 132px; aspect-ratio: 132 / 172; }
	.fvkb-o-vlagrij .fvkb-o-doek img { width: 46% !important; height: auto !important; aspect-ratio: 1; }
	.fvkb-o-balkjes, .fvkb-o-sub { display: none !important; }
	.fvkb-o-naam { font-size: 14px !important; }
}
@media (max-width: 600px) {
	.fvkb-o-vlagbaan > .fvkb-o-stang { display: none; }
	.fvkb-o-vlagrij { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 16px !important; padding: 0 !important; }
	.fvkb-o-vlagrij > li { position: relative; padding-top: 6px; display: flex; flex-direction: column; }
	.fvkb-o-vlagrij > li::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 6px; border-radius: 3px; background: #D9A43A; }
	.fvkb-o-vlagrij > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.fvkb-o-vlagrij .fvkb-o-groepvaandel { max-width: min(170px, 78%); aspect-ratio: 196 / 250 !important; }
	.fvkb-o-vlagrij .fvkb-o-kleinvaandel { max-width: min(132px, 78%); }
	.fvkb-o-vlagrij > li:last-child:nth-child(odd) .fvkb-o-vaandel { max-width: calc(39% - 6px); }
	.fvkb-o-vlagrij > li:last-child:nth-child(odd)::before { left: calc(25% + 4px); right: calc(25% + 4px); }
}

/* ---------- Jaarvaandels in het fotoarchief ---------- */
.fvkb-o-scroll:has(.fvkb-o-jaarbaan) { padding: 8px 0 12px; }
.fvkb-o-jaarbaan { position: relative; padding: 0 10px; }
.fvkb-o-jaarbaan.is-vol { min-width: 1100px; }
.fvkb-o-jaarstang { height: 6px; border-radius: 3px; background: #D9A43A; }
.fvkb-o-jaarrij { display: flex; justify-content: flex-start; gap: 22px; padding: 0 12px; --start: .35s; --stap: .05s; }
.fvkb-o-jaarbaan.is-vol .fvkb-o-jaarrij { justify-content: space-between; gap: 0; }
.fvkb-o-jaarvlag { width: 62px; height: 82px; }
.fvkb-o-jaarvlag .fvkb-o-franje { inset: 0 0 -7px 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); background: repeating-linear-gradient(90deg, #D9A43A 0 2px, transparent 2px 4px); }
.fvkb-o-jaarvlag .fvkb-o-doek { clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); background: #D5D8F7; color: #0E1240; justify-content: flex-start; padding-top: 22px; font-family: "Unbounded", sans-serif; font-size: 14px; font-weight: 600; transition: background-color .25s, color .25s; }
.fvkb-o-jaarvlag:hover .fvkb-o-doek { background: #AAB1EF; }
.fvkb-o-jaarvlag.is-actief { margin-top: 10px; }
.fvkb-o-jaarvlag.is-actief .fvkb-o-doek { background: #0E1240; color: #FFFFFF; font-weight: 700; }

/* ---------- Zoeken in het fotoarchief ---------- */
.fvkb-o-zoek { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 8px 0 20px; border-radius: 6px; border: 1.5px solid #6E718C; box-sizing: border-box; background: #FFFFFF; position: relative; width: 100%; max-width: 400px; margin: 0; }
.fvkb-o-zoek:focus-within { border-color: #2B3BD6; box-shadow: 0 0 0 3px rgba(43, 59, 214, .18); }
.fvkb-o-zoek svg { flex: none; }
.fvkb-o-zoek input[type="search"] { flex: 1; min-width: 0; border: 0 !important; outline: none; background: transparent !important; font-size: 17px; color: #0E1240; padding: 0 !important; box-shadow: none !important; min-height: 0; }
.fvkb-o-zoek input::placeholder { color: #6E718C; }
.fvkb-o-zoekknop { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px !important; border: 0 !important; border-radius: 6px !important; background: #2B3BD6 !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s; }
.fvkb-o-zoekknop:hover { background: #2431B0 !important; transform: translateY(-2px); }

/* ---------- Sponsorstoet ---------- */
.fvkb-o-stoet { overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.fvkb-o-stoetbaan { list-style: none; margin: 0; padding: 0 14px 0 0; display: flex; gap: 14px; width: max-content; animation: stoet 28s linear infinite; }
.fvkb-o-stoet:hover .fvkb-o-stoetbaan, .fvkb-o-stoet:focus-within .fvkb-o-stoetbaan, .fvkb-o-stoet.gepauzeerd .fvkb-o-stoetbaan { animation-play-state: paused; }
.fvkb-o-sponsortegel { width: 200px; height: 120px; border-radius: 8px; background: #FFFFFF; border: 1px solid #DAD7CD; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 10px; flex-shrink: 0; margin: 0; transition: border-color .25s; }
.fvkb-o-sponsortegel:hover { border-color: #0E1240; }
.fvkb-o-sponsortegel a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fvkb-o-sponsortegel img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fvkb-o-stoetpauze-w { display: flex; justify-content: flex-end; margin-top: 12px; }
.fvkb-o-stoetpauze { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px !important; border: 0 !important; background: transparent !important; color: #3E4166 !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; }
.fvkb-o-stoetpauze:hover { color: #0E1240 !important; }
.fvkb-o-stoetpauze:focus-visible { outline: 2px solid #2B3BD6; outline-offset: 3px; border-radius: 6px; }
.fvkb-o-stoetpauze .speel { display: none; }
.fvkb-o-stoetpauze[aria-pressed="true"] .pauze { display: none; }
.fvkb-o-stoetpauze[aria-pressed="true"] .speel { display: block; }
@media (max-width: 760px) { .fvkb-o-sponsortegel { width: 150px; height: 96px; } }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
	.js-defile [data-in], .js-defile [data-in-kids] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
	.fvkb-o-stoetbaan { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); width: auto !important; animation: none !important; padding: 0 40px !important; }
	.fvkb-o-stoetbaan > [aria-hidden] { display: none !important; }
	.fvkb-o-stoetpauze-w { display: none !important; }
	.fvkb-o-sponsortegel { width: auto !important; }
}
@media print { .js-defile [data-in], .js-defile [data-in-kids] > * { opacity: 1 !important; transform: none !important; animation: none !important; } .fvkb-o-stoetbaan { animation: none !important; } }