/* SKELETON BLOCK */

/* Menu */

#menu details.skeleton::after {
  content: '';
  display: block;
  height: calc(44px * 5);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 332 88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23F2F2F2' x='16' y='10' width='240' height='24' rx='8' ry='8'/%3E%3Crect fill='%23F2F2F2' x='16' y='54' width='160' height='24' rx='8' ry='8'/%3E%3C/svg%3E%0A");
  background-repeat: repeat-y;
  mask-image: linear-gradient(to bottom, black 50%, white);
  animation: skeleton-menu 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

@keyframes skeleton-menu {
  0%   { opacity: .25 }
  100% { opacity: .75 }
}


/* Section */

section.skeleton {
  height: 100%;
}
section.skeleton::before,
section.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
  background-repeat: repeat-y;
  background-size: 1080px 260px;
  background-position-x: left;
  mask-image: linear-gradient(to bottom, black 50%, white);
  animation: skeleton-section 1s -.25s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
section.skeleton::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
  background-size: 1080px 260px;
  background-position-x: right;
  animation: none;
  mask-image: none;
}

@media (min-width: 1530px) {
  section.skeleton::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='140' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
    background-size: 3468px 156px;
  }
  section.skeleton::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='120' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='3448' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='3448' y='120' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
    background-size: 3468px 156px;
  }
}

@keyframes skeleton-section {
  0%   { opacity: .50 }
  100% { opacity: 1.0 }
}
