.winzerrast-particle-logo {
    --mx-warm-grid-stroke: #8f3c2a;
    --mx-warm-grid-dot: #f0c58a;
    --mx-warm-scan-primary: rgba(168, 62, 36, 0.78);
    --mx-warm-scan-primary-glow: rgba(168, 62, 36, 0.4);
    --mx-warm-scan-secondary: rgba(230, 176, 108, 0.44);
    --mx-warm-scan-secondary-glow: rgba(230, 176, 108, 0.2);
    --particle-component-width: 100%;
    --particle-box-width: 560px;
    --particle-box-height: 268px;
    --particle-grid-top: -36%;
    --particle-grid-bottom: 10%;
    --particle-visual-top: -26%;
    --particle-visual-height: 96%;
    --particle-visual-max-width: 488px;
    --particle-shift-x: 0px;
    --particle-shift-y: 0px;
    --particle-logo-asset-scale: 1;
    --mx-warm-logo-solid-filter: sepia(0.78) hue-rotate(-16deg) saturate(1.34)
      brightness(1.04) contrast(1.1);
    --mx-warm-logo-particle-filter: sepia(0.72) hue-rotate(-16deg) saturate(1.32)
      brightness(1.06) contrast(1.16)
      drop-shadow(0 0 10px rgba(96, 33, 21, 0.32));
  }

  .winzerrast-particle-logo {
    width: var(--particle-component-width);
    transform: translate(var(--particle-shift-x), var(--particle-shift-y));
  }

  .particle-logo-root {
    position: relative;
    margin: 0 auto;
    display: flex;
    height: var(--particle-box-height);
    width: 100%;
    max-width: var(--particle-box-width);
    align-items: flex-start;
    justify-content: center;
  }

  .particle-grid-layer {
    pointer-events: none;
    position: absolute;
    inset-inline: 6%;
    top: var(--particle-grid-top);
    bottom: var(--particle-grid-bottom);
    z-index: 0;
    opacity: 0.74;
  }

  .particle-scan-layer {
    pointer-events: none;
    position: absolute;
    inset-inline: 6%;
    top: var(--particle-grid-top);
    bottom: var(--particle-grid-bottom);
    z-index: 10;
    overflow: hidden;
  }

  .particle-scan-line,
  .particle-scan-line-alt {
    position: absolute;
    left: 0;
    height: 1px;
    width: 100%;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  }

  .particle-scan-line {
    top: -10%;
    background: var(--mx-warm-scan-primary);
    box-shadow: 0 0 12px 2px var(--mx-warm-scan-primary-glow);
    animation: particleScanForward 6s linear infinite;
  }

  .particle-scan-line-alt {
    top: 110%;
    background: var(--mx-warm-scan-secondary);
    box-shadow: 0 0 6px 1px var(--mx-warm-scan-secondary-glow);
    mask-image: radial-gradient(circle at center, black 0%, transparent 50%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 50%);
    animation: particleScanBackward 8s linear infinite;
  }

  @keyframes particleScanForward {
    0% { top: -10%; }
    100% { top: 110%; }
  }

  @keyframes particleScanBackward {
    0% { top: 110%; }
    100% { top: -10%; }
  }

  .particle-visual-wrap {
    position: absolute;
    top: var(--particle-visual-top);
    z-index: 20;
    height: var(--particle-visual-height);
    width: 100%;
    max-width: var(--particle-visual-max-width);
  }

  .particle-logo-canvas,
  .particle-logo-solid {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .particle-logo-canvas {
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    filter: var(--mx-warm-logo-particle-filter);
  }

  .particle-logo-solid {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
  }

  .particle-logo-solid img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transform: scale(var(--particle-logo-asset-scale));
    transform-origin: center;
    filter: var(--mx-warm-logo-solid-filter);
  }

  .particle-logo--nav {
    --particle-component-width: 330px;
    --particle-box-width: 330px;
    --particle-box-height: 158px;
    --particle-grid-top: -24%;
    --particle-grid-bottom: 9%;
    --particle-visual-top: -20%;
    --particle-visual-height: 96%;
    --particle-visual-max-width: 290px;
  }

  .particle-logo--footer {
    --particle-component-width: 360px;
    --particle-box-width: 360px;
    --particle-box-height: 186px;
    --particle-grid-top: -22%;
    --particle-grid-bottom: 8%;
    --particle-visual-top: -24%;
    --particle-visual-height: 96%;
    --particle-visual-max-width: 330px;
    --mx-warm-logo-solid-filter: sepia(0.72) hue-rotate(-14deg) saturate(1.42)
      brightness(1.26) contrast(1.12);
    --mx-warm-logo-particle-filter: sepia(0.68) hue-rotate(-14deg) saturate(1.38)
      brightness(1.2) contrast(1.18)
      drop-shadow(0 0 12px rgba(148, 78, 32, 0.52));
  }

  .particle-logo--sun {
    --particle-component-width: 360px;
    --particle-box-width: 360px;
    --particle-box-height: 198px;
    --particle-grid-top: -28%;
    --particle-grid-bottom: 8%;
    --particle-visual-top: -22%;
    --particle-visual-height: 98%;
    --particle-visual-max-width: 320px;
  }

  .particle-logo-root.show-solid .particle-logo-solid {
    opacity: 1;
  }

  .particle-logo-root.show-solid .particle-logo-canvas {
    opacity: 0;
  }

  .particle-logo-root.show-particle .particle-logo-solid {
    opacity: 0;
  }

  .particle-logo-root.show-particle .particle-logo-canvas {
    opacity: 1;
  }

  @media (max-width: 639px) {
    .particle-logo--nav,
    .particle-logo--footer,
    .particle-logo--sun {
      --particle-component-width: 248px;
      --particle-box-width: 248px;
      --particle-box-height: 120px;
      --particle-grid-top: -8%;
      --particle-grid-bottom: 6%;
      --particle-visual-top: -8%;
      --particle-visual-height: 94%;
      --particle-visual-max-width: 220px;
    }
  }

  @media (min-width: 640px) and (max-width: 1023px) {
    .particle-logo-root {
      height: 200px;
    }
  }

  @media (min-width: 1024px) and (max-width: 1279px) {
    .particle-logo-root {
      height: 224px;
    }
  }