/* Opkomend logo "Samen Staan We Sterk" — gebouwd door scripts/maak_animatie.py.
   NIET met de hand wijzigen: pas varianten.json of de meting aan en draai het script opnieuw.
   De onderdelen zijn uitsneden van de echte render (logo-11); er wordt geen letter,
   geen dak en geen huisje nagetekend. Papierkleur gemeten: #F3EFE5. */

.ssw-logo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4.27;
  background: #F3EFE5;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.ssw-logo__deel {
  position: absolute;
  display: block;
  margin: 0;
  /* eindstand: precies waar het onderdeel in de render stond */
  transform: none;
  opacity: 1;
  will-change: transform, opacity;
}

.ssw-logo__deel--dak { left:0.0%; top:0.0%; width:34.1335%; height:50.0%; }
.ssw-logo__deel--huis-links { left:1.2295%; top:47.25%; width:10.8314%; height:52.75%; }
.ssw-logo__deel--huis-midden { left:11.7681%; top:30.0%; width:10.7728%; height:69.75%; }
.ssw-logo__deel--huis-rechts { left:23.2436%; top:47.25%; width:9.719%; height:52.5%; }
.ssw-logo__deel--woord-1 { left:36.8852%; top:13.5%; width:63.1148%; height:35.25%; }
.ssw-logo__deel--woord-2 { left:37.2365%; top:56.25%; width:46.1358%; height:39.75%; }

/* Zolang er niet gespeeld wordt staat het logo gewoon compleet in beeld.
   Alleen tijdens het spelen loopt er een beweging — zo is een logo dat
   niet beweegt nooit een half logo. */
@keyframes ssw-straat-huis-links {
  from { transform: translateY(130%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--straat.is-speelt .ssw-logo__deel--huis-links { animation: ssw-straat-huis-links 0.7s cubic-bezier(.22,1.2,.36,1) 0.0s both; }
@keyframes ssw-straat-huis-midden {
  from { transform: translateY(130%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--straat.is-speelt .ssw-logo__deel--huis-midden { animation: ssw-straat-huis-midden 0.7s cubic-bezier(.22,1.2,.36,1) 0.12s both; }
@keyframes ssw-straat-huis-rechts {
  from { transform: translateY(130%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--straat.is-speelt .ssw-logo__deel--huis-rechts { animation: ssw-straat-huis-rechts 0.7s cubic-bezier(.22,1.2,.36,1) 0.24s both; }
@keyframes ssw-straat-dak {
  from { transform: translateY(-90%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--straat.is-speelt .ssw-logo__deel--dak { animation: ssw-straat-dak 0.65s cubic-bezier(.22,.9,.3,1) 0.5s both; }
@keyframes ssw-straat-woord-1 {
  from { transform: translateX(-5%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--straat.is-speelt .ssw-logo__deel--woord-1 { animation: ssw-straat-woord-1 0.6s cubic-bezier(.22,.9,.3,1) 0.8s both; }
@keyframes ssw-straat-woord-2 {
  from { transform: translateX(-5%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--straat.is-speelt .ssw-logo__deel--woord-2 { animation: ssw-straat-woord-2 0.6s cubic-bezier(.22,.9,.3,1) 0.95s both; }
@keyframes ssw-dak-eerst-dak {
  from { transform: translateY(-130%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--dak-eerst.is-speelt .ssw-logo__deel--dak { animation: ssw-dak-eerst-dak 0.65s cubic-bezier(.22,1.2,.36,1) 0.0s both; }
@keyframes ssw-dak-eerst-huis-links {
  from { transform: translateX(-70%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--dak-eerst.is-speelt .ssw-logo__deel--huis-links { animation: ssw-dak-eerst-huis-links 0.6s cubic-bezier(.22,.9,.3,1) 0.38s both; }
@keyframes ssw-dak-eerst-huis-rechts {
  from { transform: translateX(70%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--dak-eerst.is-speelt .ssw-logo__deel--huis-rechts { animation: ssw-dak-eerst-huis-rechts 0.6s cubic-bezier(.22,.9,.3,1) 0.38s both; }
@keyframes ssw-dak-eerst-huis-midden {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--dak-eerst.is-speelt .ssw-logo__deel--huis-midden { animation: ssw-dak-eerst-huis-midden 0.55s cubic-bezier(.22,1.2,.36,1) 0.56s both; }
@keyframes ssw-dak-eerst-woord-1 {
  from { transform: none; opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { transform: none; opacity: 1; clip-path: inset(0 0 0 0); }
}
.ssw-logo--dak-eerst.is-speelt .ssw-logo__deel--woord-1 { animation: ssw-dak-eerst-woord-1 0.55s cubic-bezier(.4,0,.2,1) 0.78s both; }
@keyframes ssw-dak-eerst-woord-2 {
  from { transform: none; opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { transform: none; opacity: 1; clip-path: inset(0 0 0 0); }
}
.ssw-logo--dak-eerst.is-speelt .ssw-logo__deel--woord-2 { animation: ssw-dak-eerst-woord-2 0.55s cubic-bezier(.4,0,.2,1) 0.92s both; }
@keyframes ssw-samen-huis-links {
  from { transform: translateX(-260%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--samen.is-speelt .ssw-logo__deel--huis-links { animation: ssw-samen-huis-links 0.75s cubic-bezier(.22,.9,.3,1) 0.0s both; }
@keyframes ssw-samen-huis-rechts {
  from { transform: translateX(260%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--samen.is-speelt .ssw-logo__deel--huis-rechts { animation: ssw-samen-huis-rechts 0.75s cubic-bezier(.22,.9,.3,1) 0.0s both; }
@keyframes ssw-samen-huis-midden {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--samen.is-speelt .ssw-logo__deel--huis-midden { animation: ssw-samen-huis-midden 0.55s cubic-bezier(.22,1.2,.36,1) 0.4s both; }
@keyframes ssw-samen-dak {
  from { transform: scaleX(0.05); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--samen.is-speelt .ssw-logo__deel--dak { animation: ssw-samen-dak 0.6s cubic-bezier(.22,.9,.3,1) 0.58s both; }
@keyframes ssw-samen-woord-1 {
  from { transform: translateY(45%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--samen.is-speelt .ssw-logo__deel--woord-1 { animation: ssw-samen-woord-1 0.55s cubic-bezier(.22,.9,.3,1) 0.88s both; }
@keyframes ssw-samen-woord-2 {
  from { transform: translateY(45%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--samen.is-speelt .ssw-logo__deel--woord-2 { animation: ssw-samen-woord-2 0.55s cubic-bezier(.22,.9,.3,1) 1.0s both; }
@keyframes ssw-rustig-dak {
  from { transform: translateY(-14%) scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--rustig.is-speelt .ssw-logo__deel--dak { animation: ssw-rustig-dak 0.7s cubic-bezier(.22,.9,.3,1) 0.0s both; }
@keyframes ssw-rustig-huis-links {
  from { transform: translateY(16%) scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--rustig.is-speelt .ssw-logo__deel--huis-links { animation: ssw-rustig-huis-links 0.7s cubic-bezier(.22,.9,.3,1) 0.1s both; }
@keyframes ssw-rustig-huis-midden {
  from { transform: translateY(16%) scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--rustig.is-speelt .ssw-logo__deel--huis-midden { animation: ssw-rustig-huis-midden 0.7s cubic-bezier(.22,.9,.3,1) 0.18s both; }
@keyframes ssw-rustig-huis-rechts {
  from { transform: translateY(16%) scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--rustig.is-speelt .ssw-logo__deel--huis-rechts { animation: ssw-rustig-huis-rechts 0.7s cubic-bezier(.22,.9,.3,1) 0.26s both; }
@keyframes ssw-rustig-woord-1 {
  from { transform: translateY(22%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--rustig.is-speelt .ssw-logo__deel--woord-1 { animation: ssw-rustig-woord-1 0.65s cubic-bezier(.22,.9,.3,1) 0.46s both; }
@keyframes ssw-rustig-woord-2 {
  from { transform: translateY(22%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--rustig.is-speelt .ssw-logo__deel--woord-2 { animation: ssw-rustig-woord-2 0.65s cubic-bezier(.22,.9,.3,1) 0.6s both; }
@keyframes ssw-omhoog-dak {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--omhoog.is-speelt .ssw-logo__deel--dak { animation: ssw-omhoog-dak 0.8s cubic-bezier(.22,.9,.3,1) 0.0s both; }
@keyframes ssw-omhoog-huis-links {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--omhoog.is-speelt .ssw-logo__deel--huis-links { animation: ssw-omhoog-huis-links 0.8s cubic-bezier(.22,.9,.3,1) 0.04s both; }
@keyframes ssw-omhoog-huis-midden {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--omhoog.is-speelt .ssw-logo__deel--huis-midden { animation: ssw-omhoog-huis-midden 0.8s cubic-bezier(.22,.9,.3,1) 0.04s both; }
@keyframes ssw-omhoog-huis-rechts {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--omhoog.is-speelt .ssw-logo__deel--huis-rechts { animation: ssw-omhoog-huis-rechts 0.8s cubic-bezier(.22,.9,.3,1) 0.04s both; }
@keyframes ssw-omhoog-woord-1 {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--omhoog.is-speelt .ssw-logo__deel--woord-1 { animation: ssw-omhoog-woord-1 0.6s cubic-bezier(.22,.9,.3,1) 0.62s both; }
@keyframes ssw-omhoog-woord-2 {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ssw-logo--omhoog.is-speelt .ssw-logo__deel--woord-2 { animation: ssw-omhoog-woord-2 0.6s cubic-bezier(.22,.9,.3,1) 0.74s both; }

@media (prefers-reduced-motion: reduce) {
  /* Bezoeker heeft 'minder beweging' aan staan: het logo verschijnt meteen
     compleet en er wordt niets afgespeeld. */
  .ssw-logo.is-speelt .ssw-logo__deel {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}