/* Generated by scripts/generate-bridge.mjs. */
.brick-front { fill: #526c7c; }
.brick-side { fill: #6e8593; }
.brick-top { stroke: #e4ecea; stroke-width: .75; }
.brick-shadow { fill: #50657a; opacity: .11; }
.bridge-block { transform-box: fill-box; transform-origin: center; }
.is-animated .bridge-block { animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; }
.is-animated.is-paused .bridge-block { animation-play-state: paused; }
.is-animated .course-16 { animation-name: brick-course-16; }
@keyframes brick-course-16 {
  0%, 45% { opacity: 0; transform: translateY(-115px); }
  46% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  52% { opacity: 1; transform: translateY(2px); }
  54%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-17 { animation-name: brick-course-17; }
@keyframes brick-course-17 {
  0%, 47.5% { opacity: 0; transform: translateY(-115px); }
  48.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  54.5% { opacity: 1; transform: translateY(2px); }
  56.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-14 { animation-name: brick-course-14; }
@keyframes brick-course-14 {
  0%, 40% { opacity: 0; transform: translateY(-115px); }
  41% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  47% { opacity: 1; transform: translateY(2px); }
  49%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-15 { animation-name: brick-course-15; }
@keyframes brick-course-15 {
  0%, 42.5% { opacity: 0; transform: translateY(-115px); }
  43.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  49.5% { opacity: 1; transform: translateY(2px); }
  51.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-12 { animation-name: brick-course-12; }
@keyframes brick-course-12 {
  0%, 35% { opacity: 0; transform: translateY(-115px); }
  36% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  42% { opacity: 1; transform: translateY(2px); }
  44%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-13 { animation-name: brick-course-13; }
@keyframes brick-course-13 {
  0%, 37.5% { opacity: 0; transform: translateY(-115px); }
  38.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  44.5% { opacity: 1; transform: translateY(2px); }
  46.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-10 { animation-name: brick-course-10; }
@keyframes brick-course-10 {
  0%, 30% { opacity: 0; transform: translateY(-115px); }
  31% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  37% { opacity: 1; transform: translateY(2px); }
  39%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-11 { animation-name: brick-course-11; }
@keyframes brick-course-11 {
  0%, 32.5% { opacity: 0; transform: translateY(-115px); }
  33.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  39.5% { opacity: 1; transform: translateY(2px); }
  41.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-8 { animation-name: brick-course-8; }
@keyframes brick-course-8 {
  0%, 25% { opacity: 0; transform: translateY(-115px); }
  26% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  32% { opacity: 1; transform: translateY(2px); }
  34%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-9 { animation-name: brick-course-9; }
@keyframes brick-course-9 {
  0%, 27.5% { opacity: 0; transform: translateY(-115px); }
  28.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  34.5% { opacity: 1; transform: translateY(2px); }
  36.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-6 { animation-name: brick-course-6; }
@keyframes brick-course-6 {
  0%, 20% { opacity: 0; transform: translateY(-115px); }
  21% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  27% { opacity: 1; transform: translateY(2px); }
  29%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-7 { animation-name: brick-course-7; }
@keyframes brick-course-7 {
  0%, 22.5% { opacity: 0; transform: translateY(-115px); }
  23.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  29.5% { opacity: 1; transform: translateY(2px); }
  31.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-4 { animation-name: brick-course-4; }
@keyframes brick-course-4 {
  0%, 15% { opacity: 0; transform: translateY(-115px); }
  16% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  22% { opacity: 1; transform: translateY(2px); }
  24%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-5 { animation-name: brick-course-5; }
@keyframes brick-course-5 {
  0%, 17.5% { opacity: 0; transform: translateY(-115px); }
  18.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  24.5% { opacity: 1; transform: translateY(2px); }
  26.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-2 { animation-name: brick-course-2; }
@keyframes brick-course-2 {
  0%, 10% { opacity: 0; transform: translateY(-115px); }
  11% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  17% { opacity: 1; transform: translateY(2px); }
  19%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-3 { animation-name: brick-course-3; }
@keyframes brick-course-3 {
  0%, 12.5% { opacity: 0; transform: translateY(-115px); }
  13.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  19.5% { opacity: 1; transform: translateY(2px); }
  21.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-0 { animation-name: brick-course-0; }
@keyframes brick-course-0 {
  0%, 5% { opacity: 0; transform: translateY(-115px); }
  6% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  12% { opacity: 1; transform: translateY(2px); }
  14%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
.is-animated .course-1 { animation-name: brick-course-1; }
@keyframes brick-course-1 {
  0%, 7.5% { opacity: 0; transform: translateY(-115px); }
  8.5% { opacity: 1; transform: translateY(-115px); animation-timing-function: cubic-bezier(.28,.65,.35,1); }
  14.5% { opacity: 1; transform: translateY(2px); }
  16.5%, 80% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-animated .bridge-block { animation: none; opacity: 1; transform: none; }
}