/* ============================================================
   SITEWIDE CRAZYTIMES VIDEO HERO
   Markup is supplied by the Crazytimes Site Hero plugin/snippet.
   ============================================================ */

.crazytimes-site-hero {
  --hero-yellow: #ffe23b;
  --hero-red: #ef2b21;
  --hero-blue: #23c7ff;
  --hero-green: #83ff3e;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  max-height: min(72vh, 780px);
  overflow: hidden;
  margin: 0 0 clamp(1.5rem, 3vw, 3rem);
  border-top: 7px dashed var(--hero-yellow);
  border-bottom: 7px dashed var(--hero-yellow);
  background: #080707;
  box-shadow:
    inset 0 0 0 4px #17120f,
    0 14px 32px rgba(0,0,0,.42);
}

.crazytimes-site-hero video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.35) contrast(1.14) brightness(.78);
}

.crazytimes-site-hero::before,
.crazytimes-site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.crazytimes-site-hero::before {
  background:
    radial-gradient(circle at center, transparent 0 25%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.74) 100%),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.035) 6px 7px);
}

.crazytimes-site-hero::after {
  opacity: .19;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255,226,59,.28) 0 5deg,
      transparent 5deg 12deg
    );
  animation: crazytimesOverlaySpin 32s linear infinite;
}

.crazytimes-caption-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: clamp(1rem,4vw,4rem);
  pointer-events: none;
}

.crazytimes-caption {
  position: relative;
  max-width: min(92%, 1050px);
  padding: .35em .58em .42em;
  border: 4px solid #17120f;
  border-radius: 13px 5px 17px 8px;
  color: #17120f;
  background:
    linear-gradient(rgba(255,244,177,.96),rgba(255,220,68,.92));
  box-shadow:
    10px 11px 0 var(--hero-red),
    -8px -7px 0 var(--hero-blue),
    18px 21px 35px rgba(0,0,0,.48);
  font-family: Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size: clamp(2rem,6.3vw,6.8rem);
  font-weight: 900;
  letter-spacing: .015em;
  line-height: .88;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(255,255,255,.65),
    -2px 2px 0 rgba(255,255,255,.4);
  transform: rotate(-2deg);
  animation: crazytimesCaptionWobble 1.35s steps(2,end) infinite;
}

.crazytimes-caption::before,
.crazytimes-caption::after {
  position: absolute;
  color: var(--hero-red);
  background: transparent;
  font-family: "Comic Sans MS",cursive;
  font-size: .33em;
  letter-spacing: -.08em;
  text-shadow: 2px 2px 0 #fff;
}

.crazytimes-caption::before {
  content: "???";
  left: -.7em;
  top: -.7em;
  transform: rotate(-16deg);
}

.crazytimes-caption::after {
  content: "!!!";
  right: -.65em;
  bottom: -.65em;
  transform: rotate(15deg);
}

.crazytimes-tape {
  position: absolute;
  z-index: 4;
  width: 110px;
  height: 30px;
  opacity: .82;
  background: #b8b8aa;
  box-shadow: 0 3px 7px rgba(0,0,0,.34);
}

.crazytimes-tape--left {
  left: 8%;
  top: 14%;
  transform: rotate(-14deg);
}

.crazytimes-tape--right {
  right: 8%;
  bottom: 14%;
  transform: rotate(12deg);
}

@keyframes crazytimesOverlaySpin {
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes crazytimesCaptionWobble {
  0%,100% { transform: rotate(-2deg) translate(0,0); }
  25% { transform: rotate(-1.2deg) translate(1px,-2px); }
  50% { transform: rotate(-2.6deg) translate(-2px,1px); }
  75% { transform: rotate(-1.5deg) translate(2px,1px); }
}

@media (max-width: 782px) {
  .crazytimes-site-hero {
    min-height: 190px;
    max-height: none;
  }

  .crazytimes-caption {
    font-size: clamp(1.55rem, 9vw, 3.4rem);
    box-shadow:
      6px 7px 0 var(--hero-red),
      -5px -4px 0 var(--hero-blue);
  }

  .crazytimes-tape {
    width: 72px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crazytimes-site-hero::after,
  .crazytimes-caption {
    animation: none !important;
  }
}