/**
 * BASE
 */
 body {
    line-height: 1.5;
 }

/**
 * a fancy block group
 */
.wp-block-group.fancy,
.wp-block-quote.fancy {
  border: 1px solid transparent;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-image: linear-gradient(
    to bottom right,
    var(--wp--preset--color--custom-fancy-blue) 0%,
    var(--wp--preset--color--custom-fancy-purple) 100%
  );
  border-image-slice: 100%;
  border-image-slice: 1;
  box-shadow: 0 0 10px -1px rgba(255, 255, 255, 0.3);
  padding: var(--wp--preset--spacing--50);
}

:is(h1, h2, h3, h4, h5, h6).fancy {
  font-family: var(--wp--preset--font-family--neon-tubes-2), Sans-serif;
  letter-spacing: 0.12em;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;

  /* the font-size can still be overwritten in the UI */
  font-size: var(--wp--preset--font-size--plus-8);

  &::before {
    content: " - ";
  }
  &::after {
    content: " - ";
  }
}

/* --- NEON EFFECT --- */
:root {
  /* oklch(0.6555 0.2493 2.68) */
  --__neon-primary: var(--wp--preset--color--custom-fancy-magenta);

  /* oklch(0.7268 0.2072 348.12) */
  --__neon-lighter: oklch(
    from var(--__neon-primary) calc(l + 0.233 * (0.95 - l))
      calc(0.04 + 0.762 * (c - 0.04)) calc(h - 14.5)
  );
  /* oklch(0.9524 0.0425 325.9) */
  --__neon-white: oklch(from var(--__neon-primary) 0.95 0.04 calc(h - 36.8));
}
:is(h1, h2, h3, h4, h5, h6).fancy,
.sign {
  color: var(--__neon-white);
  text-shadow:
    0 0 0.6rem var(--__neon-white),
    0 0 1.5rem var(--__neon-lighter),
    -0.2rem 0.1rem 1rem var(--__neon-lighter),
    0.2rem 0.1rem 1rem var(--__neon-lighter),
    0 -0.5rem 2rem var(--__neon-primary),
    0 0.5rem 3rem var(--__neon-primary);

  animation:
    shine 2s forwards,
    flicker 3s infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.flicker {
  animation:
    shine 2s forwards,
    blink 3s 2s infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.fast-flicker {
  animation:
    shine 2s forwards,
    blink 10s 1s infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: var(--__neon-white);
    text-shadow:
      0 0 0.6rem var(--__neon-white),
      0 0 1.5rem var(--__neon-lighter),
      -0.2rem 0.1rem 1rem var(--__neon-lighter),
      0.2rem 0.1rem 1rem var(--__neon-lighter),
      0 -0.5rem 2rem var(--__neon-primary),
      0 0.5rem 3rem var(--__neon-primary);
  }
  28%,
  33% {
    color: var(--__neon-lighter);
    text-shadow: none;
  }
  82%,
  97% {
    color: var(--__neon-primary);
    text-shadow: none;
  }
}

@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: var(--__neon-white);
    text-shadow:
      0 0 0.6rem var(--__neon-white),
      0 0 1.5rem var(--__neon-lighter),
      -0.2rem 0.1rem 1rem var(--__neon-lighter),
      0.2rem 0.1rem 1rem var(--__neon-lighter),
      0 -0.5rem 2rem var(--__neon-primary),
      0 0.5rem 3rem var(--__neon-primary);
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}

/* the h1 on pages can be overlayed on an image */
.wp-block-cover h1 {
  text-shadow: 1px 1px 3px var(--wp--preset--color--custom-background-purple);
}

/* the cover-images sometimes should be fit to "contain"  
   TODO: make it possible to add a custom class to the page settings to do this on a per-page class */
.page-id-71
  div.purpleparty-title-cover
  div.wp-block-cover
  img.wp-block-cover__image-background {
  object-fit: contain;
}


/**
 * Default style for anything input
 */
input {
  padding: 8px;
  border: 2px solid var(--wp--preset--color--custom-fancy-purple);
}