/* Festival Style Guide: smiley, tape en componenten v3
   Vereist tokens.css. Zet fsg-logo-animated.svg inline voor de animatie. */

/* ============================================================
   1. SMILEY, spuitbus
   ============================================================ */
.fsg-logo .smiley,
.fsg-smiley{transform-box:fill-box;transform-origin:center}

.fsg-logo.is-play .smiley{animation:fsg-spray .55s cubic-bezier(.2,1.4,.4,1) .15s both}
@keyframes fsg-spray{
  0%{transform:scale(.55) rotate(-14deg);opacity:0}
  60%{transform:scale(1.08) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* hover: hij kijkt scheef */
.fsg-logo:hover .smiley{animation:fsg-kantel .6s ease}
@keyframes fsg-kantel{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg) scale(1.04)}70%{transform:rotate(5deg)}}

/* laadstatus: hij draait rond */
.fsg-logo.is-loading .smiley,
.fsg-smiley.is-loading{animation:fsg-draai 1.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes fsg-draai{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ============================================================
   2. TAPE, markeerstift over één ding per scherm
   ============================================================ */
.fsg-tape{
  position:relative;display:inline;
  background-image:url("/assets/logo/fsg-tape.svg");
  background-size:100% 100%;background-repeat:no-repeat;
  padding:2px 14px 4px;margin:0 -6px;
}
.fsg-tape--blok{display:inline-block;padding:6px 20px 8px}

/* ============================================================
   3. CONDITIEKAARTEN
   ============================================================ */
.fsg-condities{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--inkt)}
.fsg-conditie{
  flex:1 1 150px;padding:14px 16px;border-right:2px solid var(--inkt);
  border-top:6px solid var(--stift,var(--lijn));background:var(--papier);
}
.fsg-conditie:last-child{border-right:0}
/* Zelfde gat als in v1: label en waarde zijn spans en de kit zet nergens
   display:block, waardoor ze op één regel plakken. Gemeld voor de volgende
   versie. */
.fsg-conditie .label,
.fsg-conditie .waarde{display:block}
.fsg-conditie .label{font-family:var(--meet);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.fsg-conditie .waarde{font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:1;margin-top:5px}
.fsg-conditie .waarde--tekst{font-family:var(--body);font-weight:700;font-size:17px;line-height:1.15}
.fsg-conditie[data-soort="weer"]{--stift:var(--m-weer)}
.fsg-conditie[data-soort="ondergrond"]{--stift:var(--m-ondergrond)}
.fsg-conditie[data-soort="terrein"]{--stift:var(--m-terrein)}
.fsg-conditie[data-soort="publiek"]{--stift:var(--m-publiek)}

/* ============================================================
   4. KNOPPEN EN CHIPS
   ============================================================ */
.fsg-btn{
  display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:19px;letter-spacing:.01em;padding:12px 26px 10px;
  border:2px solid var(--inkt);background:var(--papier);color:var(--inkt);
  cursor:pointer;text-decoration:none;transition:transform .12s ease;
}
.fsg-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--inkt)}
.fsg-btn--primair{background:var(--inkt);color:var(--papier)}
.fsg-btn--primair:hover{box-shadow:4px 4px 0 var(--lime)}
.fsg-btn--lime{background:var(--lime)}
.fsg-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.fsg-chips li{
  font-family:var(--meet);font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  padding:6px 14px;border:2px solid var(--inkt);border-radius:var(--radius-pil);
}
.fsg-chips li.actief{background:var(--lime)}

/* ============================================================
   5. LOADER, drie smileys, om de beurt
   ============================================================ */
.fsg-loader{display:flex;gap:10px;align-items:center}
.fsg-loader img{width:26px;height:26px;animation:fsg-stuiter 1.1s ease-in-out infinite}
.fsg-loader img:nth-child(2){animation-delay:.13s}
.fsg-loader img:nth-child(3){animation-delay:.26s}
@keyframes fsg-stuiter{0%,100%{transform:translateY(0) scale(.85);opacity:.5}50%{transform:translateY(-10px) scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fsg-logo *,.fsg-smiley,.fsg-loader img,.fsg-btn{animation:none!important;transition:none!important}
}