:root {
  --black: #121212;
  --beige400: #DCD8D3;
  --beige100: #F1F0EA;
  --beige300: #CFCFCF;
  --pureWhite: #FFFFFF;
  --grey: #545454;
  --red: #F95D3B;
  --enterBorder: #0D0D0D;
  --enterAlphaHover: 70%;
}

@keyframes skeletonPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.75;
  }
}
@keyframes skeletonShimmer {
  0% {
    background-position: 250% 0;
  }
  100% {
    background-position: -150% 0;
  }
}
body.ui-locked .blocks .block .block-content .image img {
  transition: opacity 700ms ease-in-out;
}
body.ui-locked .blocks .block .block-content .cache {
  transition: opacity 700ms ease-in-out, background-color 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .text .controller-tag::after {
  transition: background-color 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .text .title .name,
body.ui-locked .controller .controller-inner .text .title .details span,
body.ui-locked .controller .controller-inner .text .title .actions .action,
body.ui-locked .controller .controller-inner .buttons .knob .knob-caption {
  transition: color 700ms ease-in-out, background-color 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .buttons .knob .knob-inner {
  transition: background-color 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .buttons .knob .knob-inner::before {
  transition: opacity 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .buttons .knob .x2, body.ui-locked .controller .controller-inner .buttons .knob .x4 {
  transition: opacity 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .buttons .enter {
  transition: background 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .buttons .enter .enter-inner {
  transition: color 700ms ease-in-out;
}
body.ui-locked .controller .controller-inner .buttons .enter .enter-inner::after {
  transition: opacity 700ms ease-in-out;
}
body.ui-locked .mobile-identity .mobile-identity-inner .dot {
  transition: background-color 700ms ease-in-out;
}
body.ui-locked .mobile-identity .mobile-identity-inner .name, body.ui-locked .mobile-identity .mobile-identity-inner .details span, body.ui-locked .mobile-identity .mobile-identity-inner .actions .action {
  transition: color 700ms ease-in-out, background-color 700ms ease-in-out;
}

body.is-loading .blocks .block .block-content .image img {
  opacity: 0;
}
body.is-loading .blocks .block .block-content .cache {
  opacity: 1 !important;
  background-color: #E9E6E1 !important;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: skeletonPulse 2s ease-in-out infinite, skeletonShimmer 2s linear infinite;
}
body.is-loading .blocks .block .block-content .cache .x, body.is-loading .blocks .block .block-content .cache .caption {
  opacity: 0;
}
body.is-loading .blocks .block .block-content::after {
  box-shadow: none !important;
}
body.is-loading .controller .controller-inner .text .controller-tag::after {
  background-color: var(--beige400);
}
body.is-loading .controller .controller-inner .text .title .name,
body.is-loading .controller .controller-inner .text .title .details span,
body.is-loading .controller .controller-inner .text .title .actions .action {
  color: transparent;
  background-color: #F5F3F2;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: skeletonPulse 2s ease-in-out infinite, skeletonShimmer 2s linear infinite;
}
body.is-loading .controller .controller-inner .text .title .name,
body.is-loading .controller .controller-inner .text .title .details span {
  border-radius: 6px;
}
body.is-loading .controller .controller-inner .text .title .actions .action {
  background-color: #F5F3F2;
}
body.is-loading .controller .controller-inner .buttons .knob .knob-inner {
  background-color: #CFCFCF;
}
body.is-loading .controller .controller-inner .buttons .knob .knob-inner::before {
  opacity: 0;
}
body.is-loading .controller .controller-inner .buttons .knob .x2, body.is-loading .controller .controller-inner .buttons .knob .x4 {
  opacity: 0;
}
body.is-loading .controller .controller-inner .buttons .knob .knob-caption {
  color: transparent;
  background-color: #F5F3F2;
  border-radius: 4px;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: skeletonPulse 2s ease-in-out infinite, skeletonShimmer 2s linear infinite;
}
body.is-loading .controller .controller-inner .buttons .sound-wave {
  background-color: #CFCFCF;
}
body.is-loading .controller .controller-inner .buttons .sound-wave .sound-wave-svg, body.is-loading .controller .controller-inner .buttons .sound-wave::after {
  opacity: 0;
}
body.is-loading .controller .controller-inner .buttons .enter {
  background: #E9E6E1;
}
body.is-loading .controller .controller-inner .buttons .enter .enter-inner {
  background: transparent;
  color: transparent;
}
body.is-loading .controller .controller-inner .buttons .enter .enter-inner::after {
  opacity: 0;
}
body.is-loading .mobile-identity .mobile-identity-inner .dot {
  background-color: var(--beige400);
}
body.is-loading .mobile-identity .mobile-identity-inner .name,
body.is-loading .mobile-identity .mobile-identity-inner .details span,
body.is-loading .mobile-identity .mobile-identity-inner .actions .action {
  color: transparent;
  background-color: #F5F3F2;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: skeletonPulse 2s ease-in-out infinite, skeletonShimmer 2s linear infinite;
}
body.is-loading .mobile-identity .mobile-identity-inner .name,
body.is-loading .mobile-identity .mobile-identity-inner .details span {
  border-radius: 6px;
}
body.is-loading .mobile-identity .mobile-identity-inner .actions .action {
  background-color: #F5F3F2;
}

body.ui-locked .page-front main.main {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.is-loading * {
    animation: none !important;
  }
  body.ui-locked .blocks .block .block-content .image img,
body.ui-locked .blocks .block .block-content .cache,
body.ui-locked .controller .controller-inner .text .title .name,
body.ui-locked .controller .controller-inner .text .title .details span,
body.ui-locked .controller .controller-inner .text .title .actions .action,
body.ui-locked .controller .controller-inner .buttons .knob .knob-caption,
body.ui-locked .controller .controller-inner .buttons .knob .knob-inner,
body.ui-locked .controller .controller-inner .buttons .knob .knob-inner::before,
body.ui-locked .controller .controller-inner .buttons .knob .x2,
body.ui-locked .controller .controller-inner .buttons .knob .x4,
body.ui-locked .controller .controller-inner .buttons .enter,
body.ui-locked .controller .controller-inner .buttons .enter .enter-inner,
body.ui-locked .controller .controller-inner .buttons .enter .enter-inner::after,
body.ui-locked .controller .controller-inner .text .controller-tag::after,
body.ui-locked .mobile-identity .mobile-identity-inner .dot,
body.ui-locked .mobile-identity .mobile-identity-inner .name,
body.ui-locked .mobile-identity .mobile-identity-inner .details span,
body.ui-locked .mobile-identity .mobile-identity-inner .actions .action {
    transition-duration: 200ms !important;
  }
}