/*
  EYCER SHADOWBOX REGLER
  Diese Datei ist nur für den Schatten hinter dem großen EYCER-Text.
  Hier kannst du direkt Zahlen ändern.

  width   = breiter/schmaler
  height  = höher/flacher
  x       = links/rechts, minus = links, plus = rechts
  y       = oben/unten, minus = hoch, plus = runter
  opacity = Stärke, 0 = weg, 1 = stark
  blur    = Weichheit, kleiner = härter, größer = weicher
*/

:root {
  --eycer-shadow-width: 1500px;
  --eycer-shadow-height: 400px;
  --eycer-shadow-x: 0px;
  --eycer-shadow-y: 10px;
  --eycer-shadow-opacity: 1;
  --eycer-shadow-blur: 10px;
}

.hero-copy {
  isolation: isolate !important;
}

.hero-copy::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 50% !important;
  top: 50% !important;
  width: min(var(--eycer-shadow-width), calc(100vw - 28px)) !important;
  height: var(--eycer-shadow-height) !important;
  transform: translate(
    calc(-50% + var(--eycer-shadow-x)),
    calc(-50% + var(--eycer-shadow-y))
  ) !important;
  pointer-events: none !important;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0,0,0,.56),
    rgba(0,0,0,.34) 44%,
    rgba(0,0,0,.08) 76%,
    transparent 100%
  ) !important;
  filter: blur(var(--eycer-shadow-blur)) !important;
  opacity: var(--eycer-shadow-opacity) !important;
}

.hero-copy h1,
.hero-copy .kicker,
.hero-copy .subline {
  text-shadow: none !important;
}

.hero-copy h1::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

@media (max-width: 820px), (max-device-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --eycer-shadow-width: 360px;
    --eycer-shadow-height: 110px;
    --eycer-shadow-x: 0px;
    --eycer-shadow-y: 6px;
    --eycer-shadow-opacity: .80;
    --eycer-shadow-blur: 9px;
  }
}