@property --dx {
  syntax: '<length>';
  initial-value: 0rem;
  inherits: false;
}
@property --dy {
  syntax: '<length>';
  initial-value: 0rem;
  inherits: false;
}
@property --glow {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}
@property --a1 {
  syntax: '<percentage>';
  initial-value: 10%;
  inherits: false;
}
@property --a2 {
  syntax: '<percentage>';
  initial-value: 45%;
  inherits: false;
}
@property --a3 {
  syntax: '<percentage>';
  initial-value: 65%;
  inherits: false;
}
@property --a4 {
  syntax: '<percentage>';
  initial-value: 60%;
  inherits: false;
}

:root {
  --color-red: #fc3a17;

  --aura-1: rgba(252, 170, 83, 1);
  --aura-2: rgba(252, 83, 170, 1);

  --dx: 0rem;
  --dy: 0rem;
  --glow: 10;
  --a1: 30%;
  --a2: 65%;
  --a3: 85%;
  --a4: 0%;
}

html,
body {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: min(25vw, 28vh);
  background: var(--color-red);
}

.brand {
  font-family: 'Climate Crisis', sans-serif;
  line-height: 0.82rem;
  pointer-events: none;
  user-select: none;
}

.brand div:nth-child(2) {
  letter-spacing: 0.28rem;
  margin-left: 0.36rem;
}

.brand div:nth-child(4) {
  font-size: max(0.29em, 20px);
  line-height: 2.5em;
  letter-spacing: 0.23em;
  font-family: 'Noto Sans', sans-serif;
  transform: scaleY(0.8);
  transform-origin: top;
}

.brand {
  filter: drop-shadow(
      calc(var(--dx) * 0.2) calc(var(--dy) * 0.2) 1rem
        color-mix(in srgb, var(--aura-1), transparent var(--a1))
    )
    drop-shadow(
      calc(var(--dx) * -1) calc(var(--dy) * 1.2) 3.5rem
        color-mix(in srgb, var(--aura-1), transparent var(--a2))
    );
  animation: aura 14s ease-in-out infinite;
}

@keyframes aura {
  0%,
  100% {
    --dx: 0rem;
    --dy: 0rem;
    --a1: 10%;
    --a2: 45%;
    --a3: 65%;
    --a4: 60%;
  }
  20% {
    --dx: 0.5rem;
    --dy: 0.3rem;
    --a1: 24%;
    --a2: 56%;
    --a3: 52%;
    --a4: 52%;
  }
  40% {
    --dx: -0.2rem;
    --dy: -0.45rem;
    --a1: 14%;
    --a2: 38%;
    --a3: 72%;
    --a4: 66%;
  }
  60% {
    --dx: -0.6rem;
    --dy: 0.15rem;
    --a1: 20%;
    --a2: 50%;
    --a3: 58%;
    --a4: 48%;
  }
  80% {
    --dx: 0.25rem;
    --dy: -0.2rem;
    --a1: 12%;
    --a2: 48%;
    --a3: 60%;
    --a4: 58%;
  }
}

.brand > div {
  --shadow-1: rgba(255, 255, 255, 0.2);
  --shadow-2: rgba(255, 255, 255, 0.9);
  --shadow-3: rgba(255, 255, 255, 0.5);
  --shadow-4: rgba(255, 255, 255, 0.7);

  text-shadow:
    -1px -1px 0.04rem var(--shadow-1),
    1px -1px 0.07rem var(--shadow-2),
    -1px 1px 0.02rem var(--shadow-3),
    1px 1px 0.011rem var(--shadow-4);
  animation: steam 7.5s ease-in-out infinite alternate;
}

.brand div:nth-child(2) {
  animation-duration: 9s;
  animation-delay: -2.5s;
}

.brand div:nth-child(3) {
  animation-duration: 8.2s;
  animation-delay: -5s;
}

.brand div:nth-child(4) {
  animation-duration: 10s;
  animation-delay: -1.2s;
}

@keyframes steam {
  0% {
    text-shadow:
      -1px -1px 0.04rem var(--shadow-1),
      1px -1px 0.07rem var(--shadow-2),
      -1px 1px 0.02rem var(--shadow-3),
      1px 1px 0.011rem var(--shadow-4);
  }
  20% {
    text-shadow:
      -1.8px -1.2px 0.09rem var(--shadow-1),
      1.3px -1.7px 0.04rem var(--shadow-2),
      -0.9px 1.8px 0.07rem var(--shadow-3),
      1.7px 1.1px 0.025rem var(--shadow-4);
  }
  40% {
    text-shadow:
      -1.1px -1.9px 0.03rem var(--shadow-1),
      1.9px -1.1px 0.11rem var(--shadow-2),
      -1.8px 1px 0.035rem var(--shadow-3),
      1.1px 1.9px 0.075rem var(--shadow-4);
  }
  60% {
    text-shadow:
      -2px -1.6px 0.07rem var(--shadow-1),
      1.4px -0.9px 0.085rem var(--shadow-2),
      -1.1px 2px 0.018rem var(--shadow-3),
      1.6px 1.7px 0.09rem var(--shadow-4);
  }
  80% {
    text-shadow:
      -1.4px -2px 0.05rem var(--shadow-1),
      2px -1.5px 0.045rem var(--shadow-2),
      -1.6px 1.3px 0.085rem var(--shadow-3),
      1.2px 1.4px 0.02rem var(--shadow-4);
  }
  100% {
    text-shadow:
      -1.2px -1.1px 0.05rem var(--shadow-1),
      1.2px -1.9px 0.1rem var(--shadow-2),
      -1.9px 1.6px 0.055rem var(--shadow-3),
      1.9px 1.3px 0.07rem var(--shadow-4);
  }
}