/*
  We're doing some fancy custom CSS for the introcard.
  None of this is necessary for a basic AdventureJS 
  game. Authors are welcome to use as much or as 
  little custom CSS as they like.
*/
.cloak-title {
  display: block;
  transform: skew(-8deg);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: var(--shadow);
  font-family: "Arial Black", var(--ajs-font-family);
  margin-bottom: 0.75em;
  margin-top: 2em;
  -webkit-box-reflect: below -1rem -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(0%, transparent),
      to(rgba(255, 255, 255, 0.35))
    );
}
a.intro-link {
  color: var(--ink);
  font-weight: bold;
  font-size: 1.25em;
  line-height: 1.25em;
  margin-bottom: .25em;
  display: block;
}

.ajs-introcard {
  text-align: center;
  padding-top: 1rem;
}

/* 
  text effects from https://text-effects.colorion.co/
  --ink    main text colour (defaults to currentColor)
  --ink-2  primary accent   
  --ink-3  secondary accent 
*/
:root {
  --ink: currentColor;
  --ink-2: currentColor;
  --ink-3: currentColor;
  --ink-4: currentColor;
  --shadow:
    0 0 10px color-mix(in srgb, var(--ink-2) 40%, transparent),
    0 0 26px color-mix(in srgb, var(--ink-2) 10%, transparent);
}
html[data-theme="light"] {
  --ink: #000000;
  --ink-2: #333333;
  --ink-3: rgba(0, 0, 0, 0.5);
  --ink-4: rgba(51, 51, 51, 0.25);
  --shadow:
    0 0 10px color-mix(in srgb, var(--ink-2) 40%, transparent),
    0 0 26px color-mix(in srgb, var(--ink-2) 10%, transparent);
}
html[data-theme="dark"] {
  --ink: #ffffff;
  --ink-2: #ffffff;
  --ink-3: rgba(255, 255, 255, 0.5);
  --ink-4: rgba(255, 255, 255, 0.25);
}

/* 02 Glitchcore — RGB channel-split glitch with sliced jumps */
.fx-glitch {
  position: relative;
  color: var(--ink);
}
.fx-glitch::before,
.fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
}
.fx-glitch::before {
  color: var(--ink-2);
  clip-path: inset(0 0 55% 0);
  animation: fx-glitch-a 2.6s steps(1) infinite;
}
.fx-glitch::after {
  color: var(--ink-3);
  clip-path: inset(45% 0 0 0);
  animation: fx-glitch-b 2.6s steps(1) infinite;
}
@keyframes fx-glitch-a {
  0%,
  12%,
  20%,
  55%,
  100% {
    transform: translate(0);
    opacity: 0;
  }
  13% {
    transform: translate(-5px, -2px);
    opacity: 0.9;
  }
  16% {
    transform: translate(4px, 1px);
    opacity: 0.9;
  }
  48% {
    transform: translate(-3px, 2px);
    opacity: 0.9;
  }
  51% {
    transform: translate(2px, -1px);
    opacity: 0.9;
  }
}
@keyframes fx-glitch-b {
  0%,
  14%,
  22%,
  60%,
  100% {
    transform: translate(0);
    opacity: 0;
  }
  15% {
    transform: translate(5px, 2px);
    opacity: 0.9;
  }
  18% {
    transform: translate(-4px, -1px);
    opacity: 0.9;
  }
  52% {
    transform: translate(3px, -2px);
    opacity: 0.9;
  }
  56% {
    transform: translate(-2px, 1px);
    opacity: 0.9;
  }
}