/* ============================================================
   UwHond.be — sfeerlaag (sfeer.css)
   Subtiele, geanimeerde pootjes, categorie-iconen en ornamenten.
   Staat los van style.css; verwijderen = link + script weghalen.
   Alle beweging is kort, traag of alleen bij hover/onthulling.
   ============================================================ */

/* --- basis ------------------------------------------------- */
.sf-svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sf-svg .sf-fill { fill: currentColor; stroke: none; }

/* --- pootspoor (hero, footer, 404) ------------------------- */
.home-hero { position: relative; overflow: hidden; }
.home-hero > .container { position: relative; z-index: 1; }
.sf-trail { position: absolute; pointer-events: none; color: var(--terra); }
.sf-trail__poot { position: absolute; width: 30px; height: 30px; opacity: 0; transform: rotate(var(--r, -28deg)) scale(0.6); }
.sf-trail--hero { top: 14px; right: 3%; width: 220px; height: 260px; }
.sf-trail--hero .sf-trail__poot { --o: 0.11; animation: sf-stamp 0.55s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(0.35s + var(--i) * 0.28s); }
@media (max-width: 760px) { .sf-trail--hero { display: none; } }

.site-footer { position: relative; overflow: hidden; }
.site-footer > * { position: relative; }
.sf-trail--footer { left: max(3%, calc(50% - 530px)); bottom: 96px; width: 220px; height: 60px; color: #fff; }
@media (max-width: 760px) { .sf-trail--footer { display: none; } }
.sf-trail--footer .sf-trail__poot { width: 24px; height: 24px; --r: 62deg; --o: 0.17; animation: sf-wander 10s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }

.sf-trail--404 { position: relative; display: block; width: 300px; height: 44px; margin: 2rem auto -2.5rem; }
.sf-trail--404 .sf-trail__poot { --r: 62deg; --o: 0.35; animation: sf-stamp 0.5s ease-out forwards; animation-delay: calc(0.2s + var(--i) * 0.22s); }

@keyframes sf-stamp { to { opacity: var(--o, 0.12); transform: rotate(var(--r, -28deg)) scale(1); } }
@keyframes sf-wander {
  0%, 12% { opacity: 0; transform: rotate(var(--r)) scale(0.7); }
  22%, 58% { opacity: var(--o); transform: rotate(var(--r)) scale(1); }
  72%, 100% { opacity: 0; transform: rotate(var(--r)) scale(1); }
}

/* --- ornament bij koppen ----------------------------------- */
.section-heading { position: relative; }
.sf-orn { display: inline-block; width: 18px; height: 18px; color: var(--terra); opacity: 0; transform: translateX(10px) rotate(-20deg); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.8,.3,1.1); vertical-align: -3px; }
.sf-orn--lijn { position: absolute; right: 2px; bottom: -10px; background: var(--cream); padding: 0 4px; box-sizing: content-box; }
.home-band .sf-orn--lijn, .kijker .sf-orn--lijn, .keuzehulp .sf-orn--lijn { background: var(--cream-warm); }
.sf-orn--inline { margin-left: 9px; width: 15px; height: 15px; }
.sf-in .sf-orn { opacity: 0.6; transform: none; }

/* korte lijn die zich intekent onder artikelkoppen */
.sf-h2::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 6px; background: var(--terra); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(.2,.8,.3,1); opacity: 0.7; }
.sf-h2.sf-in::after { transform: scaleX(1); }

/* --- categorie-badges op hub-kaarten ----------------------- */
.hub-kaart__foto { position: relative; }
.sf-badge { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: #fff; color: var(--terra-dk); box-shadow: 0 2px 8px rgba(80,40,10,0.16); border: 1px solid var(--cream-mid); z-index: 1; }

/* per categorie een eigen, kleine beweging: bij hover (desktop) en één keer bij onthulling (mobiel) */
.hub-kaart:hover .sf-z, .hub-kaart.sf-in .sf-z { animation: sf-zzz 1.6s ease-in-out infinite; }
.hub-kaart.sf-in:not(:hover) .sf-z { animation-iteration-count: 2; }
.sf-z.sf-d2 { animation-delay: 0.3s; } .sf-z.sf-d3 { animation-delay: 0.6s; }
@keyframes sf-zzz { 0%, 100% { opacity: 0; transform: translateY(2px); } 40%, 70% { opacity: 1; transform: translateY(-2px); } }

.hub-kaart:hover .sf-brok, .hub-kaart.sf-in .sf-brok { animation: sf-drop 0.9s cubic-bezier(.3,1.4,.5,1) both; }
.sf-brok.sf-d2 { animation-delay: 0.12s; } .sf-brok.sf-d3 { animation-delay: 0.24s; }
@keyframes sf-drop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

.hub-kaart:hover .sf-hart, .hub-kaart.sf-in .sf-hart { animation: sf-beat 1.3s ease-in-out infinite; transform-origin: 12px 12px; }
.hub-kaart.sf-in:not(:hover) .sf-hart { animation-iteration-count: 2; }
@keyframes sf-beat { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.14); } 40% { transform: scale(1); } 58% { transform: scale(1.1); } }

.hub-kaart:hover .sf-stap, .hub-kaart.sf-in .sf-stap { animation: sf-walk 1.4s ease-in-out infinite; }
.hub-kaart.sf-in:not(:hover) .sf-stap { animation-iteration-count: 2; }
.sf-stap.sf-d2 { animation-delay: 0.7s; }
@keyframes sf-walk { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.hub-kaart:hover .sf-bot, .hub-kaart.sf-in .sf-bot { animation: sf-toss 1.2s ease-in-out infinite; transform-origin: 12px 12px; }
.hub-kaart.sf-in:not(:hover) .sf-bot { animation-iteration-count: 2; }
@keyframes sf-toss { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg) translateY(-1.5px); } }

.hub-kaart:hover .sf-pup, .hub-kaart.sf-in .sf-pup { animation: sf-wobble 0.9s ease-in-out; transform-origin: 12px 14px; }
@keyframes sf-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.06); } 60% { transform: rotate(9deg) scale(1.06); } }

/* Voeding en Puppy bewogen niet bij hover (Sam, 05-09-2026). Oorzaak: hun
   animatie speelt één keer, en bij het onthullen van de kaart (.sf-in) is ze al
   afgelopen. De browser start een animatie niet opnieuw zolang naam en duur
   gelijk blijven, dus hover deed niets. De andere vier lopen oneindig door en
   wisselen bij hover van iteration-count, en die vielen daardoor niet op.
   Oplossing: een eigen animatienaam voor de hover-variant, zodat ze herstart. */
.hub-kaart:hover .sf-brok { animation: sf-drop-hv 0.9s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes sf-drop-hv { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.hub-kaart:hover .sf-pup { animation: sf-wobble-hv 0.9s ease-in-out; }
@keyframes sf-wobble-hv { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.06); } 60% { transform: rotate(9deg) scale(1.06); } }

/* --- bestaande lijniconen: zachte wiebel bij hover ---------- */
.voed-keuze__kaart:hover .ico, .gbb__card:hover .ico { animation: sf-wiggle 0.55s ease-in-out; transform-origin: 50% 60%; }
@keyframes sf-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(7deg); } }

/* --- keuzehulp: pootje-watermerk + chip-pop ----------------- */
.sf-wm { position: absolute; pointer-events: none; color: var(--terra); opacity: 0.075; }
.sf-wm--keuzehulp { top: -22px; right: -14px; width: 150px; height: 150px; transform: rotate(-22deg); animation: sf-drift 14s ease-in-out infinite alternate; }
.sf-wm--nb { top: 10px; right: 14px; width: 84px; height: 84px; transform: rotate(18deg); opacity: 0.09; }
.nb-blok { position: relative; overflow: hidden; }
@keyframes sf-drift { from { transform: rotate(-22deg) translate(0, 0); } to { transform: rotate(-16deg) translate(-8px, 8px); } }
.kh-chip[aria-pressed="true"] { animation: sf-pop 0.32s cubic-bezier(.2,1.4,.4,1); }
@keyframes sf-pop { 0% { transform: scale(0.94); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* --- nieuwsbrief: belletje dat één keer zwaait -------------- */
.sf-bel { display: inline-block; width: 22px; height: 22px; color: var(--terra); vertical-align: -4px; margin-right: 8px; transform-origin: 12px 4px; }
.sf-in .sf-bel { animation: sf-ring 1.1s ease-in-out 0.2s; }
@keyframes sf-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 35% { transform: rotate(-11deg); } 55% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }

/* --- kleine extra's (04-09, "nog een klein beetje extra") ------- */
/* logo-pootje wiebelt bij hover, hero-kicker-icoon wiebelt één keer bij laden */
.site-logo:hover .site-logo__svg { animation: sf-wiggle 0.6s ease-in-out; transform-origin: 50% 60%; }
.mag-hero__kicker .ico { animation: sf-wiggle 0.7s ease-in-out 0.6s; transform-origin: 50% 60%; }
/* hartje klopt één keer als je iets bewaart */
.fav-btn.is-fav { animation: sf-beat 0.7s ease-in-out; }
/* pootje-stempel vóór "Dit past bij ..." zodra de keuzehulp een uitslag toont */
#kh-uitslag:not([hidden]) .kh-uitslag__kop::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C1694F'%3E%3Cpath d='M12 21c-3 0-5.3-1.6-5.3-3.9 0-1.5 1-2.6 2.2-3.7.9-.8 1.6-1.9 3.1-1.9s2.2 1.1 3.1 1.9c1.2 1.1 2.2 2.2 2.2 3.7 0 2.3-2.3 3.9-5.3 3.9z'/%3E%3Cellipse cx='6.2' cy='10.4' rx='1.7' ry='2.3' transform='rotate(-18 6.2 10.4)'/%3E%3Cellipse cx='9.7' cy='6.6' rx='1.7' ry='2.4' transform='rotate(-8 9.7 6.6)'/%3E%3Cellipse cx='14.3' cy='6.6' rx='1.7' ry='2.4' transform='rotate(8 14.3 6.6)'/%3E%3Cellipse cx='17.8' cy='10.4' rx='1.7' ry='2.3' transform='rotate(18 17.8 10.4)'/%3E%3C/svg%3E") center / contain no-repeat; animation: sf-stempel 0.5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes sf-stempel { from { opacity: 0; transform: scale(0.4) rotate(-25deg); } to { opacity: 1; transform: none; } }
/* klein pootspoor naast de titel van pagina's zonder fotohero (hubs, blog, over ons, …) */
.sf-h1 { position: relative; }
.sf-trail--h1 { right: 0; top: -34px; width: 150px; height: 80px; }
.sf-trail--h1 .sf-trail__poot { width: 22px; height: 22px; --o: 0.13; --r: 40deg; animation: sf-stamp 0.5s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(0.3s + var(--i) * 0.25s); }
@media (max-width: 760px) { .sf-trail--h1 { display: none; } }

/* --- laadskeletten op productkaarten (08-09-2026) ------------
   sfeer.js zet .is-laden op een kaart met [data-bol-slot] zolang de live foto
   en prijs nog niet binnen zijn; fotovak en prijs tonen dan een langzaam
   schuivende lichtgolf in de crème-tokens. Gaat de klasse weg, dan zachten
   foto (opacity) en prijs (kleur) in ±250 ms in. Nooit langer dan 4 s. */
/* alleen op de terugweg: het skelet verschijnt meteen, foto en prijs zachten in */
.sf-kaart:not(.is-laden) img { transition: opacity 0.25s ease; }
.sf-kaart:not(.is-laden) [data-bol-price] { transition: color 0.25s ease; }
.is-laden .photo-slot, .is-laden figure, .is-laden .populair-card__img, .is-laden .aanrader-card__photo,
.is-laden [data-bol-price], .sf-skelet__regel, .sf-skelet__knop {
  background: linear-gradient(100deg, var(--cream-mid) 30%, var(--cream) 50%, var(--cream-mid) 70%);
  background-size: 200% 100%;
  animation: sf-golf 1.6s ease-in-out infinite;
}
.is-laden .photo-slot, .is-laden figure, .is-laden .aanrader-card__photo { border-radius: var(--r-lg); }
.is-laden .populair-card__img { border-radius: 8px; }
.is-laden img { opacity: 0; }
.is-laden [data-bol-price] { display: inline-block; min-width: 4.2em; min-height: 1em; border-radius: 4px; color: transparent; }
@keyframes sf-golf { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* plaatshouders in de homepage-kijker (weg zodra home.js het raster vult) */
.sf-skelet { pointer-events: none; }
.sf-skelet__regel { display: block; height: 0.8em; margin-top: 0.55rem; border-radius: 4px; }
.sf-skelet__regel--kort { width: 62%; }
.sf-skelet__knop { display: block; height: 38px; margin-top: 0.7rem; border-radius: var(--r); }

/* --- scorebalken die vollopen (08-09-2026) --------------------
   sfeer.js verplaatst de inline width naar --doel en zet .sf-balk; zodra de
   balk in beeld komt volgt .sf-balk--vol. Balken in dezelfde groep starten
   70 ms na elkaar. */
.sf-balk { width: 0; transition: width 0.9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--sf-i, 0) * 70ms); }
.sf-balk--vol { width: var(--doel); }

/* --- zachte paginaovergang (08-09-2026) -----------------------
   Korte crossfade tussen pagina's in browsers met cross-document view
   transitions (Chromium, Safari); elders gebeurt er niets. De header krijgt
   een eigen naam zodat hij niet mee-fadet (staat één keer per pagina). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
.site-header { view-transition-name: header; }

/* --- toegankelijkheid: geen beweging als de gebruiker dat vraagt --- */

/* wandelsporen in de marges (sfeer.js sectie 10): alleen op brede schermen, buiten de 1060px-kolom */
.sf-marge { position: absolute; top: 0; pointer-events: none; z-index: 0; overflow: hidden; color: var(--terra); }
.sf-marge--l { left: 0; }
.sf-marge--r { right: 0; }
.sf-marge__poot { position: absolute; width: 24px; height: 24px; opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.5); --o: 0.13; }
.sf-marge__poot.is-gezet { animation: sf-stamp 0.5s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
@media (max-width: 1379px) { .sf-marge { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sf-marge { display: none; }
  .sf-trail__poot, .sf-z, .sf-brok, .sf-hart, .sf-stap, .sf-bot, .sf-pup, .sf-bel, .sf-wm, .kh-chip[aria-pressed="true"], .ico, .site-logo__svg, .fav-btn.is-fav, .kh-uitslag__kop::before { animation: none !important; }
  .sf-trail__poot { opacity: var(--o, 0.12); transform: rotate(var(--r, -28deg)); }
  .sf-z { opacity: 1; }
  .sf-orn, .sf-h2::after { transition: none; }
  .sf-orn { opacity: 0.6; transform: none; }
  .sf-h2::after { transform: scaleX(1); }
  /* skelet, balken en paginaovergang: meteen de eindstaat */
  .is-laden .photo-slot, .is-laden figure, .is-laden .populair-card__img, .is-laden .aanrader-card__photo,
  .is-laden [data-bol-price], .sf-skelet__regel, .sf-skelet__knop { animation: none; background: var(--cream-mid); }
  .is-laden img { opacity: 1; }
  .is-laden [data-bol-price] { color: inherit; background: none; }
  .sf-kaart:not(.is-laden) img, .sf-kaart:not(.is-laden) [data-bol-price] { transition: none; }
  .sf-balk { width: var(--doel); transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}