/*
Theme Name: Youth Fighters
Theme URI: https://youthfighters.nl
Author: Uw Websitemaker
Description: Speels, kleurrijk thema voor het kinder-vechtsportmerk Youth Fighters. Zonder paginabouwer, te installeren via FTP. Werkt samen met de plugin "Youth Fighters Core" en Polylang (EN/NL/DE).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: youth-fighters
*/

/* ---------- Lettertype ----------
   Zet een eigen bestand in assets/fonts/ (bijv. LilitaOne-Regular.woff2, gratis via Google Fonts, SIL OFL).
   Zo wordt er geen verbinding met Google gemaakt (AVG-proof). Zonder bestand valt het terug op een dik systeemlettertype. */
@font-face {
  font-family: "YF Display";
  src: local("Lilita One"), url("assets/fonts/LilitaOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0a0a12;
  --ink-2: #14141f;
  --paper: #ffffff;
  --sky: #2f8fa0;
  --sky-2: #1c6f84;
  --sun: #ffc83d;
  --sun-2: #ff9f1c;
  --red: #e8392b;
  --monkey: #e8650f;
  --wolf: #8fb8de;
  --panda: #ff5fb5;
  --a: var(--sun);   /* dier-hoofdkleur (wordt per collectie overschreven) */
  --a2: #ffffff;
  --bg: var(--ink);
  --radius: 22px;
  --display: "YF Display", "Lilita One", "Arial Black", Impact, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 10px 0 rgba(0, 0, 0, .35);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: #f4f4f8;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0 0 .4em; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
p { margin: 0 0 1em; }

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.yf-skip { position: absolute; left: -999px; top: 8px; background: var(--sun); color: #000; padding: .6em 1em; border-radius: 8px; z-index: 100; }
.yf-skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.yf-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.yf-center { text-align: center; }
.yf-muted { color: rgba(255,255,255,.6); font-size: .9rem; }

/* ---------- Header ---------- */
.yf-header { position: sticky; top: 0; z-index: 50; background: #000; border-bottom: 4px solid var(--sun); }
.yf-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.yf-logo img { width: auto; height: 56px; }
.yf-nav { display: flex; align-items: center; gap: 28px; }
.yf-menu { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.yf-menu a {
  display: block; padding: .5em 1em; border-radius: 999px; text-decoration: none;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem;
  transition: background .2s, color .2s, transform .2s;
}
.yf-menu a:hover, .yf-menu .current-menu-item > a { background: var(--sun); color: #000; transform: translateY(-2px) rotate(-1.5deg); }
.yf-lang ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.yf-lang a { display: block; padding: .3em .65em; border: 2px solid rgba(255,255,255,.35); border-radius: 8px; font-size: .8rem; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.yf-lang .current-lang a, .yf-lang a:hover { background: #fff; color: #000; border-color: #fff; }

.yf-burger { display: none; background: var(--sun); border: 0; width: 48px; height: 48px; border-radius: 12px; cursor: pointer; position: relative; }
.yf-burger__bars, .yf-burger__bars::before, .yf-burger__bars::after { content: ""; position: absolute; left: 12px; right: 12px; height: 4px; background: #000; border-radius: 4px; transition: transform .25s, opacity .25s; }
.yf-burger__bars { top: 22px; }
.yf-burger__bars::before { left: 0; right: 0; top: -9px; }
.yf-burger__bars::after { left: 0; right: 0; top: 9px; }
.yf-burger[aria-expanded="true"] .yf-burger__bars { background: transparent; }
.yf-burger[aria-expanded="true"] .yf-burger__bars::before { transform: translateY(9px) rotate(45deg); }
.yf-burger[aria-expanded="true"] .yf-burger__bars::after { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 860px) {
  .yf-burger { display: block; }
  .yf-nav {
    position: absolute; left: 0; right: 0; top: 100%; background: #000; flex-direction: column; align-items: flex-start;
    padding: 12px 20px 24px; gap: 16px; border-bottom: 4px solid var(--sun);
    max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .2s;
  }
  .yf-nav.is-open { max-height: 80vh; visibility: visible; opacity: 1; overflow: auto; }
  .yf-menu { flex-direction: column; width: 100%; }
  .yf-menu a { font-size: 1.4rem; }
}

/* ---------- Knoppen ---------- */
.yf-btn {
  display: inline-block; background: var(--a, var(--sun)); color: #000; text-decoration: none;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem;
  padding: .7em 1.6em; border-radius: 999px; border: 4px solid #000; box-shadow: 0 6px 0 #000;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.yf-btn:hover { transform: translateY(3px) rotate(-1deg); box-shadow: 0 3px 0 #000; }
.yf-btn:active { transform: translateY(6px); box-shadow: 0 0 0 #000; }
.yf-btn--ghost { background: #fff; }
.yf-btn--small { font-size: .95rem; padding: .5em 1.1em; border-width: 3px; box-shadow: 0 4px 0 #000; }
.yf-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 1.4em; }

/* ---------- Hero ---------- */
.yf-hero { position: relative; overflow: hidden; background: var(--sky); padding: 56px 0 120px; isolation: isolate; }
.yf-hero--small { padding: 48px 0 110px; }
.yf-burst {
  position: absolute; inset: -60%; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,200,61,.55) 0deg 9deg, rgba(255,200,61,0) 9deg 22deg);
  animation: yf-spin 90s linear infinite;
}
@keyframes yf-spin { to { transform: rotate(360deg); } }
.yf-hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.yf-hero__in--center { display: block; text-align: center; max-width: 820px; }
.yf-hero__in--center .yf-lead { margin-left: auto; margin-right: auto; }
.yf-hero__title { color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,.35), -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; -webkit-text-stroke: 0; }
.yf-kicker {
  display: inline-block; background: #000; color: var(--sun); font-family: var(--display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .95rem; padding: .35em 1em; border-radius: 999px; margin-bottom: 1em; transform: rotate(-2deg);
}
.yf-lead { font-size: 1.2rem; max-width: 36em; }
.yf-hero .yf-lead { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); font-weight: 600; }
.yf-hero__media { justify-self: center; width: 100%; max-width: 480px; }
.yf-frame { border: 6px solid #000; border-radius: 28px; background: #000; overflow: hidden; transform: rotate(3deg); box-shadow: 14px 14px 0 rgba(0,0,0,.4); animation: yf-bob 5s ease-in-out infinite; }
.yf-frame img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@keyframes yf-bob { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-12px); } }

.yf-paw { width: 64px; height: 64px; fill: currentColor; }
.yf-paw--float { position: absolute; z-index: -1; color: rgba(0,0,0,.18); animation: yf-float 7s ease-in-out infinite; }
.yf-paw--1 { left: 4%; top: 12%; width: 90px; height: 90px; transform: rotate(-20deg); }
.yf-paw--2 { right: 6%; top: 8%; width: 60px; height: 60px; animation-delay: -2s; transform: rotate(25deg); }
.yf-paw--3 { left: 46%; bottom: 14%; width: 74px; height: 74px; animation-delay: -4s; }
@keyframes yf-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }

.yf-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; }
.yf-wave--dark { color: var(--ink); }
.yf-wave--top { top: -1px; bottom: auto; transform: rotate(180deg); }
.yf-wave--accent { color: var(--ink); }

@media (max-width: 860px) {
  .yf-hero__in { grid-template-columns: 1fr; }
  .yf-hero__media { max-width: 360px; }
}

/* ---------- Secties ---------- */
.yf-section { position: relative; padding: 80px 0; }
.yf-section--page { padding-top: 56px; }
.yf-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.yf-head .yf-lead { margin-left: auto; margin-right: auto; }
.yf-story { background: var(--ink); }
.yf-story__in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.yf-story h2 { color: var(--sun); }
.yf-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.yf-skill {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--bg); border: 4px solid var(--a); box-shadow: 0 6px 0 rgba(0,0,0,.5);
}
.yf-skill strong { font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; color: var(--a); font-weight: 400; }
.yf-skill span:last-child { grid-column: 2; color: #ddd; }
.yf-skill__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--a); align-self: center; }
@media (max-width: 860px) { .yf-story__in { grid-template-columns: 1fr; } }

/* ---------- Dierenkaarten ---------- */
.yf-animals { background: linear-gradient(180deg, var(--ink) 0%, #151526 100%); }
.yf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.yf-card {
  display: flex; flex-direction: column; text-decoration: none; background: var(--bg); color: #fff;
  border: 5px solid var(--a); border-radius: 28px; overflow: hidden; box-shadow: 0 10px 0 rgba(0,0,0,.5);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s;
}
.yf-card:hover { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 18px 0 rgba(0,0,0,.5); }
.yf-card:nth-child(even):hover { transform: translateY(-10px) rotate(1.2deg); }
.yf-card__img { display: block; background: #000; overflow: hidden; }
.yf-card__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s; }
.yf-card:hover .yf-card__img img { transform: scale(1.07); }
.yf-card__body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 26px; align-items: flex-start; }
.yf-card__skill { background: var(--a); color: #000; font-family: var(--display); text-transform: uppercase; font-size: .9rem; letter-spacing: .05em; padding: .25em .9em; border-radius: 999px; }
.yf-card__title { font-family: var(--display); font-weight: 400; font-size: 2.2rem; text-transform: uppercase; color: var(--a); line-height: 1; margin-top: 6px; }
.yf-card__tag { color: #d8d8e4; margin-bottom: 8px; }
.yf-card .yf-btn { background: var(--a); }

/* ---------- Film ---------- */
.yf-film { background: var(--sky-2); text-align: center; overflow: hidden; }
.yf-film::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0 8deg, transparent 8deg 20deg); }
.yf-film__in { position: relative; }
.yf-film .yf-head h2 { color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.yf-film__box { max-width: 560px; margin: 0 auto; border: 6px solid #000; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 12px 12px 0 rgba(0,0,0,.4); transform: rotate(-1.5deg); }
.yf-video, .yf-film__poster { width: 100%; }

/* ---------- Foto's ---------- */
.yf-photos { background: #151526; }
.yf-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.yf-gallery li { border-radius: 22px; overflow: hidden; border: 4px solid #000; box-shadow: 0 8px 0 rgba(0,0,0,.5); }
.yf-gallery li:nth-child(3n+1) { border-color: var(--monkey); }
.yf-gallery li:nth-child(3n+2) { border-color: var(--panda); }
.yf-gallery li:nth-child(3n) { border-color: var(--wolf); }
.yf-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s; }
.yf-gallery li:hover img { transform: scale(1.06); }
.yf-content .wp-block-gallery { gap: 16px; }
.yf-content .wp-block-gallery img { border-radius: 20px; border: 4px solid #000; }
.yf-content img { border-radius: 16px; }

/* ---------- Waar te koop ---------- */
.yf-buy { background: linear-gradient(135deg, var(--a, var(--sun)), var(--sun-2)); color: #000; padding-top: 120px; }
.yf-buy .yf-wave { color: #151526; }
.yf-buy h2 { color: #000; }
.yf-buy .yf-lead { color: #111; }
.yf-buy .yf-muted { color: rgba(0,0,0,.65); }
.yf-themed-wrap .yf-buy { background: linear-gradient(135deg, var(--a), var(--a2)); }
.yf-retailers { list-style: none; margin: 0 auto 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.yf-retailer {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; color: #000;
  background: #fff; border: 5px solid #000; border-radius: 26px; padding: 24px 28px; min-width: 260px; box-shadow: 0 8px 0 #000;
  transition: transform .2s, box-shadow .2s;
}
.yf-retailer:hover { transform: translateY(4px) rotate(-1deg); box-shadow: 0 4px 0 #000; }
.yf-retailer__logo { max-height: 70px; width: auto; }
.yf-retailer__name { font-family: var(--display); font-size: 2rem; text-transform: uppercase; }
.yf-retailer .yf-btn { background: var(--sun); }
.yf-callout { margin: 56px auto 0; max-width: 640px; text-align: center; background: #000; color: #fff; border-radius: 26px; padding: 32px; border: 5px solid #fff; }
.yf-callout h3 { color: var(--sun); }

/* ---------- Dierpagina ---------- */
.yf-themed-wrap .yf-hero { background: var(--bg); }
.yf-themed-wrap .yf-burst { background: repeating-conic-gradient(from 0deg at 50% 55%, color-mix(in srgb, var(--a) 40%, transparent) 0deg 9deg, transparent 9deg 22deg); }
.yf-themed-wrap .yf-kicker { color: var(--a); }
.yf-themed-wrap .yf-hero__title { color: var(--a); text-shadow: 0 5px 0 rgba(0,0,0,.6); }
.yf-themed-wrap .yf-frame { border-color: var(--a); }
.yf-themed-wrap .yf-paw--float { color: color-mix(in srgb, var(--a) 25%, transparent); }
.yf-themed-wrap .yf-btn { background: var(--a); }
.yf-themed-wrap .yf-btn--ghost { background: #fff; }
.yf-themed-wrap .yf-section h2 { color: var(--a); }
.yf-themed-wrap .yf-buy h2 { color: #000; }
.yf-themed-wrap .yf-film { background: var(--bg); }
.yf-themed-wrap .yf-film::before { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--a) 15%, transparent) 0 8deg, transparent 8deg 20deg); }
.yf-themed-wrap .yf-film__box { border-color: var(--a); }

/* ---------- Tekst ---------- */
.yf-prose { max-width: 820px; }
.yf-prose h2, .yf-prose h3 { margin-top: 1.4em; }
.yf-prose a { color: var(--sun); }
.yf-title { color: var(--sun); }

/* ---------- Formulier ---------- */
.yf-form-wrap { max-width: 720px; }
.yf-form { display: grid; gap: 20px; background: #151526; border: 5px solid var(--sun); border-radius: 28px; padding: 32px; box-shadow: 0 10px 0 rgba(0,0,0,.5); }
.yf-field { display: grid; gap: 6px; }
.yf-field label { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--sun); }
.yf-field input, .yf-field select, .yf-field textarea {
  width: 100%; font: inherit; color: #000; background: #fff; border: 4px solid #000; border-radius: 14px; padding: .75em 1em;
}
.yf-field input:focus, .yf-field select:focus, .yf-field textarea:focus { border-color: var(--sun); outline: none; }
.yf-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: #ddd; }
.yf-check input { margin-top: .35em; width: 20px; height: 20px; accent-color: var(--sun); flex: none; }
.yf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yf-notice { padding: 18px 22px; border-radius: 16px; margin-bottom: 24px; font-weight: 700; border: 4px solid #000; }
.yf-notice--ok { background: #7bd88f; color: #000; }
.yf-notice--err { background: #ff8a80; color: #000; }

/* ---------- Footer ---------- */
.yf-footer { position: relative; background: #000; padding: 90px 0 24px; margin-top: -1px; border-top: 4px solid var(--sun); }
.yf-footer .yf-wave { display: none; }
.yf-footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.yf-footer__brand { display: flex; align-items: center; gap: 20px; }
.yf-footer__brand img { height: 56px; width: auto; }
.yf-footer__brand p { margin: 0; color: #aaa; }
.yf-menu--footer a { font-size: .95rem; }
.yf-footer__copy { text-align: center; color: #777; font-size: .85rem; margin: 32px 0 0; }

/* ---------- Animatie bij scrollen ---------- */
.yf-reveal { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2,1.2,.4,1); }
.yf-reveal.is-in { opacity: 1; transform: none; }
.yf-card.yf-reveal.is-in:hover { transform: translateY(-10px) rotate(-1.2deg); }
.no-js .yf-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .yf-reveal { opacity: 1; transform: none; }
}

/* ---------- Vrijgestelde dier-illustraties ---------- */
.yf-mascot { width: 100%; max-height: 560px; object-fit: contain; filter: drop-shadow(0 14px 0 rgba(0,0,0,.28)); animation: yf-mascot 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes yf-mascot { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-16px); } }
.yf-card__img--mascot { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--a) 55%, #fff) 0, var(--a) 70%); }
.yf-card__img--mascot img { object-fit: contain; padding: 18px 18px 0; filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); }
@media (prefers-reduced-motion: reduce) { .yf-mascot { animation: none; } }
@media (max-width: 860px) { .yf-mascot { max-height: 420px; } }

/* ---------- Homepage: de drie dieren samen, elk met eigen pose en beweging ---------- */
.yf-hero__media:has(.yf-trio) { max-width: 560px; }
.yf-trio { position: relative; width: 100%; aspect-ratio: 1 / 1.05; }
.yf-trio__a { position: absolute; height: auto; filter: drop-shadow(0 12px 0 rgba(0,0,0,.28)); }
/* Monkey: links, schopt omhoog (kantelt naar achteren en springt) */
.yf-trio__monkey { left: -2%; bottom: 14%; width: 44%; z-index: 2; rotate: -12deg; transform-origin: 50% 90%; animation: yf-kick 3.2s ease-in-out infinite; }
/* Wolf: voorin het midden, groter, doet uitvallen en weer terug (counter) */
.yf-trio__wolf { left: 25%; bottom: 0; width: 52%; z-index: 3; transform-origin: 50% 100%; animation: yf-counter 2.8s ease-in-out infinite; }
/* Queen Panda: rechts, gespiegeld zodat ze de andere kant op kijkt, danst/wiegt */
.yf-trio__panda { right: -2%; bottom: 18%; width: 43%; z-index: 1; scale: -1 1; rotate: 9deg; transform-origin: 50% 90%; animation: yf-sway 3.8s ease-in-out infinite; }
@keyframes yf-kick { 0%,100% { translate: 0 0; rotate: -12deg; } 35% { translate: 4% -9%; rotate: -4deg; } 55% { translate: 6% -4%; rotate: -16deg; } }
@keyframes yf-counter { 0%,100% { translate: 0 0; scale: 1; } 30% { translate: -6% 1%; scale: .97; } 55% { translate: 5% -3%; scale: 1.05; } }
@keyframes yf-sway { 0%,100% { translate: 0 0; rotate: 9deg; } 50% { translate: 0 -7%; rotate: 15deg; } }
@media (prefers-reduced-motion: reduce) { .yf-trio__a { animation: none; } }
@media (max-width: 860px) { .yf-hero__media:has(.yf-trio) { max-width: 400px; } }

/* ---------- Eiland-hero: strand met beweging ---------- */
.yf-hero--island { background: #7cc8ee; }
.yf-island { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.yf-island__bg { position: absolute; inset: -3%; background-size: cover; background-position: 50% 62%; transform-origin: 50% 70%; animation: yf-drift 36s ease-in-out infinite alternate; will-change: transform; }
.yf-island::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,28,52,.55) 0%, rgba(4,28,52,.25) 45%, rgba(4,28,52,0) 75%); }
@keyframes yf-drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }

.yf-cloud { position: absolute; left: 0; width: 190px; height: 54px; background: #fff; border-radius: 999px; opacity: .92; z-index: 1; animation: yf-cloud 70s linear infinite; }
.yf-cloud::before, .yf-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.yf-cloud::before { width: 80px; height: 80px; left: 28px; top: -38px; }
.yf-cloud::after { width: 58px; height: 58px; left: 92px; top: -26px; }
.yf-cloud--1 { top: 9%; animation-duration: 75s; animation-delay: -20s; }
.yf-cloud--2 { top: 24%; transform-origin: left; scale: .7; animation-duration: 95s; animation-delay: -62s; opacity: .8; }
.yf-cloud--3 { top: 4%; scale: 1.25; animation-duration: 120s; animation-delay: -90s; opacity: .85; }
@keyframes yf-cloud { from { translate: -260px 0; } to { translate: calc(100vw + 60px) 0; } }

.yf-bird { position: absolute; left: 0; width: 34px; z-index: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); animation: yf-fly 26s linear infinite, yf-flap .7s ease-in-out infinite alternate; }
.yf-bird--1 { top: 16%; }
.yf-bird--2 { top: 27%; width: 24px; animation-duration: 34s, .55s; animation-delay: -12s, 0s; }
@keyframes yf-fly { from { translate: -60px 0; } 50% { translate: 50vw -26px; } to { translate: calc(100vw + 60px) 6px; } }
@keyframes yf-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

.yf-surf { position: absolute; left: 0; width: 200%; height: 26px; z-index: 1; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .6; }
.yf-surf { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 20%, #000 45%); mask-image: linear-gradient(90deg, transparent 0, transparent 20%, #000 45%); }
.yf-surf--1 { top: 62%; animation: yf-surf 11s linear infinite; }
.yf-surf--2 { top: 69%; opacity: .4; stroke-width: 4; animation: yf-surf 17s linear infinite reverse; }
@keyframes yf-surf { from { translate: 0 0; } to { translate: -50% 0; } }

.yf-glint { position: absolute; z-index: 1; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: yf-twinkle 3.4s ease-in-out infinite; }
.yf-glint--1 { left: 34%; top: 64%; }
.yf-glint--2 { left: 47%; top: 67%; animation-delay: -1.1s; scale: 1.4; }
.yf-glint--3 { left: 58%; top: 63%; animation-delay: -2.2s; }
.yf-glint--4 { left: 70%; top: 68%; animation-delay: -.6s; scale: 1.2; }
.yf-glint--5 { left: 81%; top: 64%; animation-delay: -1.7s; }
.yf-glint--6 { left: 41%; top: 72%; animation-delay: -2.8s; scale: .8; }
.yf-glint--7 { left: 64%; top: 73%; animation-delay: -.2s; scale: 1.5; }
@keyframes yf-twinkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(25deg); } }

@media (max-width: 860px) {
  .yf-island::after { background: linear-gradient(180deg, rgba(4,28,52,.45), rgba(4,28,52,.2) 60%, rgba(4,28,52,0)); }
  .yf-cloud { width: 130px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .yf-island__bg, .yf-cloud, .yf-bird, .yf-surf, .yf-glint { animation: none; }
  .yf-glint { opacity: .8; }
  .yf-cloud--1 { translate: 12vw 0; } .yf-cloud--2 { translate: 55vw 0; } .yf-cloud--3 { translate: 80vw 0; }
  .yf-bird--1 { translate: 30vw 0; } .yf-bird--2 { translate: 60vw 0; }
}

/* ---------- Menu met dieren-submenu ---------- */
.yf-menu li { position: relative; }
.yf-menu .menu-item-has-children > a { padding-right: .4em; }
.yf-sub-toggle { background: transparent; border: 0; color: inherit; width: 30px; height: 30px; margin-left: -6px; cursor: pointer; border-radius: 50%; vertical-align: middle; display: none; }
.yf-menu .menu-item-has-children > .yf-sub-toggle { display: inline-block; }
.yf-sub-toggle::before { content: ""; display: block; width: 9px; height: 9px; margin: 0 auto; border: solid currentColor; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.yf-menu li.is-open > .yf-sub-toggle::before { transform: translateY(2px) rotate(-135deg); }
.yf-menu .menu-item-has-children { display: flex; align-items: center; flex-wrap: wrap; }
.yf-menu .sub-menu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; z-index: 60;
  background: #000; border: 4px solid var(--sun); border-radius: 20px; box-shadow: 0 10px 0 rgba(0,0,0,.4);
  display: none; flex-direction: column; gap: 4px;
}
.yf-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.yf-menu li:hover > .sub-menu, .yf-menu li:focus-within > .sub-menu, .yf-menu li.is-open > .sub-menu { display: flex; }
.yf-menu .sub-menu a { display: flex; align-items: center; gap: 10px; border-radius: 14px; font-size: 1.05rem; white-space: nowrap; }
.yf-menu .sub-menu a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--sun)); border: 2px solid #000; box-shadow: 0 0 0 2px var(--dot, var(--sun)); flex: none; }
.yf-menu .sub-menu a:hover, .yf-menu .sub-menu .current-menu-item > a { background: var(--dot, var(--sun)); color: #000; transform: none; }
.yf-menu .sub-menu a:hover::before, .yf-menu .sub-menu .current-menu-item > a::before { background: #000; box-shadow: 0 0 0 2px #000; }
.yf-menu .yf-animal-monkey { --dot: #E8650F; }
.yf-menu .yf-animal-wolves { --dot: #8FB8DE; }
.yf-menu .yf-animal-queen-panda { --dot: #FF5FB5; }
.yf-menu .current-menu-ancestor > a { background: var(--sun); color: #000; }
@media (max-width: 860px) {
  .yf-menu .menu-item-has-children { display: block; }
  .yf-menu .menu-item-has-children > .yf-sub-toggle { display: none; }
  .yf-menu .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 6px 18px; min-width: 0; background: transparent; }
  .yf-menu .sub-menu::before { display: none; }
  .yf-menu .sub-menu a { font-size: 1.15rem; }
}

/* ---------- Producten-pillen ---------- */
.yf-products { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.yf-products li { background: rgba(255,255,255,.1); border: 2px solid var(--a); color: #fff; font-weight: 700; font-size: .9rem; padding: .3em .9em; border-radius: 999px; }
.yf-products--big { flex-direction: column; align-items: stretch; gap: 12px; }
.yf-products--big li { background: var(--a); color: #000; border: 4px solid #000; box-shadow: 0 5px 0 #000; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.25rem; padding: .55em 1.1em; border-radius: 18px; }
.yf-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.yf-intro .yf-content { font-size: 1.2rem; }
@media (max-width: 860px) { .yf-intro { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Collectie-overzicht: grote dierrijen ---------- */
.yf-animal-row {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; padding: 36px;
  border: 5px solid var(--a); border-radius: 40px; margin-bottom: 44px; box-shadow: 0 14px 0 rgba(0,0,0,.45);
  background: linear-gradient(135deg, var(--bg) 35%, color-mix(in srgb, var(--a) 30%, var(--bg)));
  position: relative; overflow: hidden; isolation: isolate;
}
.yf-animal-row::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg at 28% 50%, color-mix(in srgb, var(--a) 28%, transparent) 0 8deg, transparent 8deg 20deg); animation: yf-spin 120s linear infinite; }
.yf-animal-row.is-flip::before { background-position: 100% 0; transform-origin: 72% 50%; }
.yf-animal-row.is-flip .yf-animal-row__fig { order: 2; }
.yf-animal-row__fig { display: block; text-align: center; }
.yf-animal-row__mascot { width: 100%; max-width: 330px; max-height: 470px; object-fit: contain; filter: drop-shadow(0 12px 0 rgba(0,0,0,.35)); transition: transform .3s; }
.yf-animal-row:hover .yf-animal-row__mascot { transform: rotate(-3deg) scale(1.04); }
.yf-animal-row h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--a); text-shadow: 0 4px 0 rgba(0,0,0,.5); margin-top: .3em; }
.yf-animal-row h2 a { text-decoration: none; }
.yf-animal-row .yf-btn { background: var(--a); }
.yf-strip { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; }
.yf-strip li { border: 3px solid var(--a); border-radius: 16px; overflow: hidden; background: #000; transition: transform .25s; }
.yf-strip li:nth-child(odd) { transform: rotate(-2deg); }
.yf-strip li:nth-child(even) { transform: rotate(2deg); }
.yf-animal-row:hover .yf-strip li { transform: none; }
.yf-strip img { aspect-ratio: 1/1; width: 100%; object-fit: cover; object-position: 50% 25%; }
@media (max-width: 860px) {
  .yf-animal-row { grid-template-columns: 1fr; padding: 24px; gap: 20px; text-align: center; }
  .yf-animal-row.is-flip .yf-animal-row__fig { order: 0; }
  .yf-animal-row__mascot { max-width: 240px; }
  .yf-animal-row .yf-products, .yf-animal-row .yf-strip { justify-content: center; margin-left: auto; margin-right: auto; }
  .yf-animal-row .yf-lead { margin-left: auto; margin-right: auto; }
}

/* ---------- Dierpagina: fotogalerij + lightbox ---------- */
.yf-animal-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; grid-auto-flow: dense; }
.yf-animal-gallery li { border: 4px solid var(--a); border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 8px 0 rgba(0,0,0,.5); }
.yf-animal-gallery li:first-child { grid-column: span 2; grid-row: span 2; }
.yf-animal-gallery a { display: block; height: 100%; cursor: zoom-in; }
.yf-animal-gallery img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 28%; transition: transform .4s; }
.yf-animal-gallery a:hover img { transform: scale(1.06); }
@media (max-width: 560px) { .yf-animal-gallery { grid-template-columns: repeat(2, 1fr); } }

.yf-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.yf-lightbox::backdrop { background: rgba(0,0,0,.88); }
.yf-lightbox__img { display: block; max-width: 92vw; max-height: 86vh; border: 5px solid var(--sun); border-radius: 22px; background: #000; }
.yf-lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 4px solid #000; background: var(--sun); color: #000; font-family: var(--display); font-size: 1.7rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 #000; }
.yf-lightbox__close { top: -18px; right: -12px; }
.yf-lightbox__prev { left: -14px; top: 50%; translate: 0 -50%; }
.yf-lightbox__next { right: -14px; top: 50%; translate: 0 -50%; }
@media (max-width: 600px) { .yf-lightbox__prev { left: 4px; } .yf-lightbox__next { right: 4px; } .yf-lightbox__close { top: 6px; right: 6px; } }
@media (prefers-reduced-motion: reduce) { .yf-animal-row::before { animation: none; } }

.yf-skill-title { color: var(--a); text-shadow: 0 4px 0 rgba(0,0,0,.5); }
.yf-intro .yf-btn { margin-top: .6em; }
.yf-hero--small .yf-surf, .yf-hero--small .yf-glint { display: none; }
.yf-prose .yf-btn, .yf-content .yf-btn { color: #000; text-decoration: none; }

/* ---- Black & Pink set (wat oudere kids) ---- */
.yf-menu .yf-animal-black-set { --dot: #fff; }
.yf-menu .yf-animal-pink-set { --dot: #F58FC2; }
.yf-menu .sub-menu .yf-first-set { margin-top: 6px; padding-top: 6px; border-top: 2px dashed rgba(255,255,255,.25); }
.yf-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #FFB703; color: #000; font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; padding: .3em .9em; border-radius: 999px; border: 3px solid #000; transform: rotate(-6deg); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.yf-card__img { position: relative; }
.yf-animal-row__fig { position: relative; }
.yf-animal-row.is-set .yf-animal-row__mascot { max-width: 380px; max-height: 480px; object-fit: cover; border-radius: 28px; border: 6px solid #fff; transform: rotate(-2deg); filter: none; box-shadow: 0 12px 0 rgba(0,0,0,.35); }
.yf-animal-row.is-set.is-flip .yf-animal-row__mascot { transform: rotate(2deg); }
.yf-animal-row.is-set:hover .yf-animal-row__mascot { transform: rotate(0) scale(1.03); }
.yf-sets { background: linear-gradient(180deg, #14141f 0%, #0b0b12 100%); }
.yf-cards--sets { max-width: 820px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ============================================================
   Eiland-gevoel op de hele site: zee, palmen, schuimrand, pootjes
   ============================================================ */
:root { --sea-1: #0b3a4d; --sea-2: #082a3b; }
body { background: var(--sea-1); }
.yf-wave--dark { color: var(--sea-1); }
.yf-story { background: var(--sea-1); }
.yf-animals { background: linear-gradient(180deg, var(--sea-1) 0%, var(--sea-2) 100%); }
.yf-sets { background: var(--sea-2); }
.yf-photos { background: var(--sea-2); }
.yf-buy .yf-wave { color: var(--sea-2); }
.yf-animal-rows { background: var(--sea-1); }
.yf-animal-rows + .yf-buy .yf-wave { color: var(--sea-1); }
.yf-themed-wrap { background: linear-gradient(180deg, var(--sea-1) 0%, color-mix(in srgb, var(--a) 14%, var(--sea-2)) 100%); }
.yf-themed-wrap .yf-animal-photos { background: color-mix(in srgb, var(--a) 10%, var(--sea-2)); }
.yf-animals + .yf-sets, .yf-sets { background: var(--sea-2); }

/* Palmbladeren in de hoeken van de secties */
.yf-story, .yf-animals, .yf-sets, .yf-photos, .yf-animal-rows, .yf-animal-photos, #contact, .yf-section:has(.yf-intro) { overflow: clip; }
.yf-story::before, .yf-story::after, .yf-animals::before, .yf-animals::after, .yf-sets::before, .yf-sets::after,
.yf-photos::before, .yf-photos::after, .yf-animal-rows::before, .yf-animal-rows::after,
.yf-animal-photos::before, .yf-animal-photos::after, #contact::before, #contact::after,
.yf-section:has(.yf-intro)::before, .yf-section:has(.yf-intro)::after {
  content: ""; position: absolute; top: -6px; width: clamp(110px, 21vw, 330px); aspect-ratio: 1; pointer-events: none; z-index: 0;
  background: url("assets/img/palm.svg") no-repeat center / contain; transform-origin: 0 0; opacity: .95;
  animation: yf-palm 7s ease-in-out infinite alternate;
}
.yf-story::before, .yf-animals::before, .yf-sets::before, .yf-photos::before, .yf-animal-rows::before,
.yf-animal-photos::before, #contact::before, .yf-section:has(.yf-intro)::before { left: -8px; }
.yf-story::after, .yf-animals::after, .yf-sets::after, .yf-photos::after, .yf-animal-rows::after,
.yf-animal-photos::after, #contact::after, .yf-section:has(.yf-intro)::after { right: -8px; scale: -1 1; transform-origin: 50% 0; animation-delay: -3.5s; }
@keyframes yf-palm { from { rotate: -2.5deg; } to { rotate: 3deg; } }
.yf-story > .yf-wrap, .yf-animals > .yf-wrap, .yf-sets > .yf-wrap, .yf-photos > .yf-wrap, .yf-animal-rows > .yf-wrap,
.yf-animal-photos > .yf-wrap, #contact > .yf-wrap, .yf-section:has(.yf-intro) > .yf-wrap { position: relative; z-index: 1; }
@media (max-width: 700px) { .yf-story::after, .yf-animals::after, .yf-sets::after, .yf-photos::after, .yf-animal-rows::after, .yf-animal-photos::after, #contact::after, .yf-section:has(.yf-intro)::after { display: none; } }

/* Footer: schuimrand van de golven */
.yf-footer { background: linear-gradient(180deg, var(--sea-2) 0%, #000 70%); border-top: 0; }
.yf-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: radial-gradient(circle at 14px 0, #fff 13px, transparent 14px) 0 0 / 28px 18px repeat-x; opacity: .92; animation: yf-foam 6s ease-in-out infinite alternate; }
@keyframes yf-foam { from { background-position-x: 0; } to { background-position-x: 28px; } }

/* Dierpagina: strand-hero in de kleur van het dier */
.yf-hero--animal .yf-island::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 55%, color-mix(in srgb, var(--a) 40%, transparent) 100%); }
.yf-hero--animal .yf-burst { opacity: .55; mix-blend-mode: soft-light; }
.yf-hero--animal .yf-island__bg { filter: saturate(.9); }

/* Pootjes op de collectiepagina */
.yf-hero--small .yf-paw--float { color: rgba(255,255,255,.35); z-index: 0; }
.yf-animal-row { position: relative; overflow: hidden; }
.yf-row-paw { position: absolute; width: 230px; height: 230px; right: -30px; bottom: -40px; color: var(--a); opacity: .13; transform: rotate(-18deg); pointer-events: none; z-index: 0; }
.yf-animal-row.is-flip .yf-row-paw { right: auto; left: -30px; transform: rotate(18deg); }
.yf-animal-row > *:not(.yf-row-paw) { position: relative; z-index: 1; }
.yf-trail { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 4vw, 44px); padding: 6px 0 14px; }
.yf-trail__paw { width: 44px; height: 44px; color: var(--a); opacity: 0; transform: rotate(180deg); animation: yf-step 4.5s ease-in-out infinite; }
.yf-trail__paw:nth-child(even) { translate: 0 14px; rotate: 12deg; }
.yf-trail__paw:nth-child(odd) { rotate: -12deg; }
.yf-trail.is-flip .yf-trail__paw:nth-child(even) { rotate: -12deg; }
.yf-trail.is-flip .yf-trail__paw:nth-child(odd) { rotate: 12deg; }
.yf-trail__paw--2 { animation-delay: .5s; } .yf-trail__paw--3 { animation-delay: 1s; } .yf-trail__paw--4 { animation-delay: 1.5s; } .yf-trail__paw--5 { animation-delay: 2s; }
@keyframes yf-step { 0%, 8% { opacity: 0; } 22%, 60% { opacity: .9; } 85%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .yf-story::before, .yf-story::after, .yf-animals::before, .yf-animals::after, .yf-sets::before, .yf-sets::after, .yf-photos::before, .yf-photos::after,
  .yf-animal-rows::before, .yf-animal-rows::after, .yf-animal-photos::before, .yf-animal-photos::after, #contact::before, #contact::after,
  .yf-section:has(.yf-intro)::before, .yf-section:has(.yf-intro)::after, .yf-footer::before { animation: none; }
  .yf-trail__paw { animation: none; opacity: .8; }
}

/* ============================================================
   Dieren-slider op de homepage (zandkleurig, zoals de Angry Birds-slider)
   ============================================================ */
.yf-story__in--solo { display: block; max-width: 760px; text-align: center; }
.yf-story__in--solo .yf-lead { margin-inline: auto; }
.yf-slider-sec { background: radial-gradient(circle at 18% 12%, #fff8e8 0%, #f8e6c2 60%, #f1d6a3 100%); color: #1a1206; padding: 120px 0 130px; }
.yf-slider-sec::before, .yf-slider-sec::after { display: none; }
.yf-slider-sec .yf-wave--prev { color: var(--sea-1); }
.yf-slider-sec .yf-wave--next { color: var(--sea-2); }
.yf-slider { position: relative; padding: 0 64px; }
.yf-slide { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; min-height: 440px; }
.yf-slider.is-ready .yf-slide:not(.is-active) { display: none; }
.yf-slide__txt { text-align: center; max-width: 520px; margin-inline: auto; }
.yf-slide__txt p { font-size: 1.15rem; line-height: 1.65; color: #2a1c08; margin: .6em 0 1.2em; }
.yf-slide__title { font-size: clamp(2.4rem, 5vw, 3.6rem); color: #1a1206; margin: .25em 0 0; text-shadow: 0 4px 0 color-mix(in srgb, var(--a) 70%, transparent); }
.yf-slide .yf-card__skill { display: inline-block; }
.yf-slide__fig { position: relative; display: grid; place-items: center; animation: yf-bob 5s ease-in-out infinite; }
.yf-slide__fig::before { content: ""; position: absolute; width: min(88%, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--a) 40%, #fff) 0%, var(--a) 100%); opacity: .55; }
.yf-slide__fig img { position: relative; width: auto; max-width: 100%; max-height: 440px; filter: drop-shadow(0 12px 0 rgba(0,0,0,.22)); }
.yf-slide.is-active .yf-slide__fig img { animation: yf-pop .7s cubic-bezier(.2,1.5,.4,1) both; }
.yf-slide.is-active .yf-slide__txt { animation: yf-slidein .5s ease-out both; }
@keyframes yf-pop { from { scale: .6; rotate: -8deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes yf-slidein { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes yf-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.yf-slider__arrow { position: absolute; top: 42%; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: #1a1206; font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 2; transition: transform .15s; }
.yf-slider__arrow:hover { transform: scale(1.1); }
.yf-slider__arrow--prev { left: 0; } .yf-slider__arrow--next { right: 0; }
.yf-slider__arrow span { display: block; transform: translateY(-3px); }
.yf-slider__thumbs { list-style: none; display: flex; justify-content: center; align-items: center; gap: 16px; margin: 28px 0 0; padding: 0; }
.yf-slider__thumb { width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 6px; background: rgba(255,255,255,.55); cursor: pointer; opacity: .55; transition: all .25s; display: grid; place-items: center; }
.yf-slider__thumb img { width: 100%; height: 100%; object-fit: contain; }
.yf-slider__thumb:hover { opacity: .9; }
.yf-slider__thumb.is-active { width: 76px; height: 76px; opacity: 1; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.22), 0 0 0 4px var(--a); }
@media (max-width: 760px) {
  .yf-slider { padding: 0; }
  .yf-slide { grid-template-columns: 1fr; min-height: 0; }
  .yf-slide__fig { order: -1; } .yf-slide__fig img { max-height: 300px; }
  .yf-slider__arrow { top: 120px; width: 44px; height: 44px; } .yf-slider__arrow--prev { left: -4px; } .yf-slider__arrow--next { right: -4px; }
}
@media (prefers-reduced-motion: reduce) { .yf-slide__fig, .yf-slide.is-active .yf-slide__fig img, .yf-slide.is-active .yf-slide__txt { animation: none; } }
.yf-slider__thumb { position: relative; }
.yf-slider__thumb img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; }

.yf-row-text { font-size: 1.1rem; line-height: 1.65; color: #fff; margin: .4em 0 1em; max-width: 56ch; }

/* Eigen pootafdrukken per dier (Monkey = handjes, Wolves = wolvenpoten) */
.yf-print { display: inline-block; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.yf-print--monkey-both { -webkit-mask-image: url("assets/img/prints/monkey-both.png"); mask-image: url("assets/img/prints/monkey-both.png"); }
.yf-print--monkey-l { -webkit-mask-image: url("assets/img/prints/monkey-l.png"); mask-image: url("assets/img/prints/monkey-l.png"); }
.yf-print--monkey-r { -webkit-mask-image: url("assets/img/prints/monkey-r.png"); mask-image: url("assets/img/prints/monkey-r.png"); }
.yf-print--wolves-trail { -webkit-mask-image: url("assets/img/prints/wolves-trail.png"); mask-image: url("assets/img/prints/wolves-trail.png"); }
.yf-print--wolves-paw { -webkit-mask-image: url("assets/img/prints/wolves-paw.png"); mask-image: url("assets/img/prints/wolves-paw.png"); }
.yf-row-paw.yf-print--monkey-both { width: 260px; height: 220px; }
.yf-row-paw.yf-print--wolves-trail { width: 120px; height: 260px; right: 40px; bottom: -20px; transform: rotate(8deg); }
.yf-animal-row.is-flip .yf-row-paw.yf-print--wolves-trail { right: auto; left: 40px; transform: rotate(-8deg) scaleX(-1); }
.yf-row-paw.yf-print { opacity: .2; }
/* spoor: handjes staan rechtop, wolvenpoten lopen opzij */
.yf-trail__paw.yf-print--monkey-l, .yf-trail__paw.yf-print--monkey-r { transform: none; width: 46px; height: 52px; rotate: 0deg !important; }
.yf-trail__paw.yf-print--wolves-paw { transform: rotate(90deg); width: 46px; height: 52px; rotate: 0deg !important; }
.yf-trail.is-flip .yf-trail__paw.yf-print--wolves-paw { transform: rotate(-90deg); }
.yf-hero--animal .yf-print.yf-paw--float { width: 110px; height: 120px; }
.yf-row-paw.yf-print--wolves-trail { width: 170px; height: 370px; bottom: -60px; opacity: .26; }
.yf-row-paw.yf-print--monkey-both { opacity: .24; }

/* ============================================================
   Strand en zee onderaan: zand bij "waar te koop", echt water boven de footer
   ============================================================ */
.yf-buy { position: relative; overflow: clip; padding-bottom: 150px;
  background:
    url("assets/img/starfish.svg") no-repeat 7% 86% / 64px,
    url("assets/img/shell.svg") no-repeat 93% 78% / 54px,
    url("assets/img/starfish.svg") no-repeat 86% 94% / 36px,
    radial-gradient(rgba(150,100,30,.14) 1.6px, transparent 2.2px) 0 0 / 24px 24px,
    linear-gradient(180deg, #ffe9ae 0%, #f8d78c 62%, #dfb065 100%); }
.yf-themed-wrap .yf-buy { background: linear-gradient(135deg, var(--a), var(--a2)); padding-bottom: 100px; }
.yf-buy::before, .yf-buy::after { content: ""; position: absolute; top: 40px; width: clamp(110px, 18vw, 280px); aspect-ratio: 1; pointer-events: none; z-index: 0; background: url("assets/img/palm.svg") no-repeat center / contain; transform-origin: 0 0; animation: yf-palm 7s ease-in-out infinite alternate; }
.yf-buy::before { left: -8px; }
.yf-buy::after { right: -8px; scale: -1 1; transform-origin: 50% 0; animation-delay: -3.5s; }
.yf-buy > .yf-wrap { position: relative; z-index: 1; }
@media (max-width: 700px) { .yf-buy::after { display: none; } }

.yf-footer { background: linear-gradient(180deg, #0f6f8f 0, #0a4a63 40%, #061a26 100%); padding-top: 170px; border-top: 0; overflow: hidden; }
.yf-footer::before { display: none; }
.yf-footer .yf-wave { display: none; }
.yf-sea { position: absolute; left: 0; right: 0; top: 0; height: 150px; background: var(--sea-2); overflow: hidden; }
.yf-main:has(> .yf-buy:last-child) + .yf-footer .yf-sea { background: linear-gradient(180deg, #dfb065, #c58f45); }
.yf-sea__w { position: absolute; left: 0; right: 0; height: 90px; background-repeat: repeat-x; background-size: 1440px 100%; animation: yf-tide 20s linear infinite; }
.yf-sea__w--foam  { top: 0;    background-image: url("assets/img/sea-foam.svg");  animation-duration: 28s; }
.yf-sea__w--light { top: 22px; background-image: url("assets/img/sea-light.svg"); animation-duration: 21s; animation-direction: reverse; }
.yf-sea__w--mid   { top: 46px; background-image: url("assets/img/sea-mid.svg");   animation-duration: 15s; }
.yf-sea__w--deep  { top: 70px; height: 90px; background-image: url("assets/img/sea-deep.svg"); animation-duration: 24s; animation-direction: reverse; }
@keyframes yf-tide { from { background-position-x: 0; } to { background-position-x: 1440px; } }
.yf-spark { position: absolute; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: yf-twinkle 3.6s ease-in-out infinite; }
.yf-spark--1 { left: 12%; top: 62px; } .yf-spark--2 { left: 29%; top: 96px; animation-delay: -1.2s; } .yf-spark--3 { left: 47%; top: 70px; animation-delay: -2.4s; }
.yf-spark--4 { left: 63%; top: 104px; animation-delay: -.6s; } .yf-spark--5 { left: 78%; top: 76px; animation-delay: -1.8s; } .yf-spark--6 { left: 91%; top: 98px; animation-delay: -3s; }
@keyframes yf-twinkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: .95; scale: 1.2; } }
.yf-footer__in, .yf-footer__copy { position: relative; z-index: 1; }
.yf-footer__copy a { color: var(--sun); text-decoration: none; border-bottom: 1px solid currentColor; }
.yf-footer__copy a:hover { color: #fff; }
.yf-footer__brand p { color: #cfe9f0; }
.yf-footer__copy { color: #9ec3cf; }
@media (prefers-reduced-motion: reduce) { .yf-buy::before, .yf-buy::after, .yf-sea__w, .yf-spark { animation: none; } .yf-spark { opacity: .6; } }
.yf-footer { background: linear-gradient(180deg, #0f6f8f 0, #0f6f8f 150px, #0a4a63 270px, #061a26 100%); }
.yf-footer__brand img { mix-blend-mode: screen; }
.yf-footer__in, .yf-footer__copy { z-index: auto; }

/* ============================================================
   Eiland-icoontjes: elke sectie krijgt andere voorwerpen (kokosnoten, hibiscus, ananas, krab, zeilboot, ...) */
.yf-animals { --dl: url("assets/img/hibiscus.svg"); --dr: url("assets/img/coconuts.svg"); }
.yf-sets { --dl: url("assets/img/surfboard.svg"); --dr: url("assets/img/beachball.svg"); }
.yf-photos { --dl: url("assets/img/sailboat.svg"); --dr: url("assets/img/pineapple.svg"); }
.yf-animal-rows { --dl: url("assets/img/coconuts.svg"); --dr: url("assets/img/crab.svg"); }
.yf-animal-photos { --dl: url("assets/img/pineapple.svg"); --dr: url("assets/img/hibiscus.svg"); }
#contact { --dl: url("assets/img/beachball.svg"); --dr: url("assets/img/sailboat.svg"); }
.yf-section:has(.yf-intro) { --dl: url("assets/img/hibiscus.svg"); --dr: url("assets/img/crab.svg"); }
.yf-animals::before, .yf-sets::before, .yf-photos::before, .yf-animal-rows::before, .yf-animal-photos::before, #contact::before, .yf-section:has(.yf-intro)::before { background-image: var(--dl); width: clamp(64px, 9vw, 118px); top: 34px; left: clamp(10px, 5vw, 80px); transform-origin: 50% 60%; animation: yf-ico 6s ease-in-out infinite alternate; }
.yf-animals::after, .yf-sets::after, .yf-photos::after, .yf-animal-rows::after, .yf-animal-photos::after, #contact::after, .yf-section:has(.yf-intro)::after { background-image: var(--dr); width: clamp(64px, 9vw, 118px); top: 34px; right: clamp(10px, 5vw, 80px); left: auto; scale: none; transform-origin: 50% 60%; animation: yf-ico 6s ease-in-out infinite alternate -3s; }
.yf-buy::after { background-image: url("assets/img/coconuts.svg"); width: clamp(64px, 9vw, 118px); top: auto; bottom: 170px; right: clamp(10px, 5vw, 80px); left: auto; scale: none; transform-origin: 50% 60%; animation: yf-ico 6s ease-in-out infinite alternate -3s; }
@keyframes yf-ico { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -10px; rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) { .yf-animals::before, .yf-sets::before, .yf-photos::before, .yf-animal-rows::before, .yf-animal-photos::before, #contact::before, .yf-section:has(.yf-intro)::before, .yf-animals::after, .yf-sets::after, .yf-photos::after, .yf-animal-rows::after, .yf-animal-photos::after, #contact::after, .yf-section:has(.yf-intro)::after, .yf-buy::after { animation: none; } }

/* Actiepose op het collectie-overzicht (Monkey: high kick) */
.yf-animal-row__mascot--action { max-width: 400px; max-height: 500px; transform-origin: 50% 90%; }
.yf-animal-row.is-in .yf-animal-row__mascot--action { animation: yf-kick 1.1s cubic-bezier(.2,1.4,.4,1) .3s both; }
.yf-animal-row:hover .yf-animal-row__mascot--action { transform: rotate(-4deg) scale(1.05); }
@keyframes yf-kick { 0% { rotate: -9deg; translate: -24px 0; } 55% { rotate: 5deg; translate: 14px 0; } 100% { rotate: 0deg; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .yf-animal-row.is-in .yf-animal-row__mascot--action { animation: none; } }

/* ============================================================
   Eiland-quiz
   ============================================================ */
.yf-quiz-stage { position: relative; isolation: isolate; padding: 130px 0 170px; min-height: 100vh; display: grid; align-items: center; }
.yf-quiz-stage .yf-island::after { background: linear-gradient(180deg, rgba(4,28,52,.25), rgba(4,28,52,.1) 50%, rgba(4,28,52,.45)); }
.yf-quiz { position: relative; max-width: 860px; margin: 0 auto; }
.yf-quiz__card { position: relative; background: #fff8e8; color: #1a1206; border: 5px solid #3a2410; border-radius: 34px; box-shadow: 0 14px 0 rgba(58,36,16,.5), 0 30px 60px rgba(0,0,0,.35); padding: clamp(26px, 5vw, 52px); text-align: center; animation: yf-cardin .5s cubic-bezier(.2,1.2,.4,1) both; }
.yf-quiz__card::before, .yf-quiz__card::after { content: ""; position: absolute; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: #c9a064; border: 3px solid #3a2410; }
.yf-quiz__card::before { left: 18px; } .yf-quiz__card::after { right: 18px; }
@keyframes yf-cardin { from { opacity: 0; translate: 0 24px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.yf-quiz__title { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.05; margin: .2em 0 .35em; color: #1a1206; text-shadow: 0 4px 0 #FFB703; }
.yf-quiz__text { font-size: 1.2rem; line-height: 1.65; max-width: 56ch; margin: 0 auto 1.2em; color: #2a1c08; }
.yf-quiz__mascots { display: flex; justify-content: center; gap: 22px; font-size: 3rem; margin: 6px 0 24px; }
.yf-quiz__coco { display: inline-block; animation: yf-bob 3s ease-in-out infinite; }
.yf-quiz__coco:nth-child(2) { animation-delay: -1s; } .yf-quiz__coco:nth-child(3) { animation-delay: -2s; }
.yf-quiz__go { font-size: 1.2rem; }
.yf-quiz__paws { list-style: none; display: flex; justify-content: center; gap: 10px; margin: 0 0 14px; padding: 0; }
.yf-quiz__paws .yf-paw { width: 28px; height: 28px; fill: currentColor; color: rgba(58,36,16,.2); transform: rotate(180deg); display: block; }
.yf-quiz__paws .is-done .yf-paw { color: #E8650F; }
.yf-quiz__paws .is-now .yf-paw { color: #FFB703; filter: drop-shadow(0 2px 0 #3a2410); animation: yf-bob 1.4s ease-in-out infinite; }
.yf-quiz__emoji { font-size: clamp(3.4rem, 10vw, 5.2rem); line-height: 1; margin: 6px 0 10px; animation: yf-pop .6s cubic-bezier(.2,1.5,.4,1) both; }
.yf-quiz__q { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.2; margin: 0 auto 22px; max-width: 24ch; color: #1a1206; }
.yf-quiz__answers { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.yf-ans { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit; font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.3; color: #1a1206; padding: 14px 20px; border: 4px solid #1a1206; border-radius: 22px; box-shadow: 0 6px 0 #1a1206; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.yf-ans__e { font-size: 2.1rem; line-height: 1; flex: none; }
.yf-ans--sun { background: #FFD35C; } .yf-ans--sea { background: #86DDF0; } .yf-ans--coral { background: #FFA793; }
.yf-ans:hover:not(:disabled), .yf-ans:focus-visible { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 9px 0 #1a1206; }
.yf-ans:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.yf-ans.is-picked { background: #9BE56F; transform: translateY(4px); box-shadow: 0 2px 0 #1a1206; }
.yf-ans:disabled:not(.is-picked) { opacity: .55; }
.yf-quiz__back, .yf-quiz__again { margin-top: 22px; background: none; border: 0; font: inherit; font-weight: 800; color: #6b4a1f; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.yf-quiz__back:hover, .yf-quiz__again:hover { color: #E8650F; }
.yf-quiz__spin { animation: yf-spin 1.4s linear infinite; display: inline-block; }
@keyframes yf-spin { to { rotate: 360deg; } }
.yf-quiz__dots { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.yf-quiz__dots i { width: 14px; height: 14px; border-radius: 50%; background: #E8650F; animation: yf-bob .9s ease-in-out infinite; }
.yf-quiz__dots i:nth-child(2) { animation-delay: -.3s; background: #FFB703; } .yf-quiz__dots i:nth-child(3) { animation-delay: -.6s; background: #2FA4E7; }
.yf-quiz__result-title { font-size: clamp(2.8rem, 9vw, 5rem); text-shadow: 0 5px 0 #FFB703; }
.yf-quiz__result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; text-align: left; margin-top: 10px; }
.yf-quiz__fig { position: relative; display: grid; place-items: center; animation: yf-bob 5s ease-in-out infinite; }
.yf-quiz__fig::before { content: ""; position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--a) 40%, #fff), var(--a)); opacity: .6; }
.yf-quiz__fig img { position: relative; max-height: 400px; width: auto; max-width: 100%; filter: drop-shadow(0 10px 0 rgba(0,0,0,.2)); animation: yf-pop .8s cubic-bezier(.2,1.5,.4,1) both; }
.yf-quiz__lead { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; margin: .5em 0; color: #1a1206; }
.yf-quiz__why p { line-height: 1.6; }
.yf-quiz__set { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; text-align: left; margin-top: 30px; padding: 20px; border-radius: 26px; background: var(--bg); color: #fff; border: 4px solid var(--a); }
.yf-quiz__set h3 { font-size: 2rem; color: var(--a); margin: .1em 0 .3em; }
.yf-quiz__set .yf-kicker { margin: 0; }
.yf-quiz__setfig { position: relative; }
.yf-quiz__setfig img { width: 100%; max-height: 340px; object-fit: cover; object-position: top; border-radius: 18px; border: 4px solid #fff; transform: rotate(-2deg); }
.yf-quiz__set .yf-btn { background: var(--a); color: #000; }
.yf-quiz__other { margin-top: 14px; font-size: .95rem; }
.yf-quiz__other a { color: var(--a2, #fff); }
.yf-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.yf-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: yf-fall linear forwards; }
@keyframes yf-fall { to { translate: var(--dx) 110vh; rotate: 720deg; opacity: .9; } }
@media (max-width: 720px) {
  .yf-quiz-stage { padding: 100px 0 150px; }
  .yf-quiz__result, .yf-quiz__set { grid-template-columns: 1fr; text-align: center; }
  .yf-quiz__fig img { max-height: 300px; }
  .yf-ans { padding: 12px 14px; gap: 12px; } .yf-ans__e { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { .yf-quiz__card, .yf-quiz__emoji, .yf-quiz__coco, .yf-quiz__spin, .yf-quiz__dots i, .yf-quiz__fig, .yf-quiz__fig img, .yf-quiz__paws .is-now .yf-paw { animation: none; } .yf-confetti { display: none; } }
.yf-main:has(> .yf-quiz-stage:last-child) + .yf-footer .yf-sea { background: #4fc3d9; }

/* Quiz-teaser op de homepage */
.yf-quiz-teaser { background: var(--sea-2); text-align: center; padding: 70px 0 80px; overflow: clip; }
.yf-quiz-teaser .yf-lead { margin-inline: auto; max-width: 52ch; }
.yf-quiz-teaser::before, .yf-quiz-teaser::after { content: ""; position: absolute; top: 50%; width: clamp(60px, 9vw, 110px); aspect-ratio: 1; margin-top: -50px; background: url("assets/img/beachball.svg") no-repeat center / contain; animation: yf-ico 6s ease-in-out infinite alternate; pointer-events: none; }
.yf-quiz-teaser::before { left: clamp(10px, 8vw, 140px); background-image: url("assets/img/hibiscus.svg"); }
.yf-quiz-teaser::after { right: clamp(10px, 8vw, 140px); animation-delay: -3s; }
@media (max-width: 700px) { .yf-quiz-teaser::before, .yf-quiz-teaser::after { display: none; } }

/* Fotogalerij homepage: 8 foto's, 4 per rij (2 per rij op telefoon) */
@media (min-width: 901px) { .yf-photos .yf-gallery { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .yf-photos .yf-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Plaats onder de winkelnaam */
.yf-retailer__city { display: inline-flex; align-items: center; gap: 6px; margin-top: -8px; font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: #3a3a3a; }
.yf-retailer__city::before { content: ""; width: 14px; height: 18px; background: #e5384b; clip-path: path('M7 0C3.1 0 0 3.1 0 7c0 5.2 7 11 7 11s7-5.8 7-11C14 3.1 10.9 0 7 0zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z'); }