main.shell {
  --edge-gutter: min(180px, max(32px, calc((100vw - 1120px) / 2)));
}

.service,
.contact-block { position: relative; }

.edge-pocket {
  position: absolute;
  z-index: 3;
  width: min(230px, calc(var(--edge-gutter) + 46px));
  height: 360px;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
  --edge-duration: 15s;
  --edge-delay: -5s;
  --edge-red: #8d0a26;
  --edge-glow: #ee3456;
}

.edge-pocket-left { left: calc(-1 * var(--edge-gutter)); }
.edge-pocket-right { right: calc(-1 * var(--edge-gutter)); transform: scaleX(-1); }
.edge-hero { top: 180px; height: 400px; --edge-duration: 14s; }
.edge-google { top: -38px; --edge-delay: -4s; }
.edge-site { top: 110px; height: 420px; --edge-delay: -7s; --edge-duration: 17s; }
.edge-ads { top: -30px; --edge-duration: 16s; --edge-delay: -5s; }
.edge-content { top: 80px; --edge-delay: -6s; }
.edge-contact { top: 0; height: 320px; --edge-duration: 18s; --edge-delay: -4s; }

.edge-ribbon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  opacity: 0;
  animation: edge-pass var(--edge-duration) cubic-bezier(.4, 0, .25, 1) infinite;
  animation-delay: var(--edge-delay);
  animation-play-state: paused;
}

.edge-thread { stroke: var(--edge-red); stroke-width: 4.2; stroke-linecap: round; opacity: .8; }
.edge-thread-secondary { stroke-width: 1.8; opacity: .5; }
.edge-thread-fine { stroke-width: 1; opacity: .32; }
.edge-ads .edge-thread:not(.edge-thread-secondary):not(.edge-thread-fine) { stroke-width: 6.4; }
.edge-contact .edge-thread:not(.edge-thread-secondary):not(.edge-thread-fine) { stroke-width: 5; }
.edge-glint {
  stroke: var(--edge-glow);
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-dasharray: 38 962;
  filter: drop-shadow(0 0 2px #ee345666);
  animation: edge-light-descend 9s linear infinite;
  animation-play-state: paused;
}

.edge-pocket.is-visible .edge-ribbon,
.edge-pocket.is-visible .edge-glint { animation-play-state: running; }
.dialog-open .edge-pocket .edge-ribbon,
.dialog-open .edge-pocket .edge-glint { animation-play-state: paused; }

@keyframes edge-pass {
  0%, 8% { opacity: 0; transform: translate(-88%, -70px) rotate(-7deg); }
  22% { opacity: 1; transform: translate(-10%, -18px) rotate(-2deg); }
  40% { opacity: 1; transform: translate(0, 12px) rotate(0); }
  55% { opacity: .95; transform: translate(-8%, 42px) rotate(3deg); }
  70%, 100% { opacity: 0; transform: translate(-108%, 110px) rotate(8deg); }
}

@keyframes edge-light-descend {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 640px) {
  main.shell { --edge-gutter: 16px; }
  .edge-pocket { width: 42px; height: 270px; }
  .edge-hero { top: 520px; height: 320px; }
  .edge-site { top: 40px; }
  .edge-content { top: 20px; }
  .edge-contact { height: 270px; }
  .edge-thread { stroke-width: 3.4; }
  .edge-thread-secondary { stroke-width: 1.4; }
  .edge-thread-fine { display: none; }
  .edge-ads .edge-thread:not(.edge-thread-secondary):not(.edge-thread-fine) { stroke-width: 4.6; }
  .edge-contact .edge-thread:not(.edge-thread-secondary):not(.edge-thread-fine) { stroke-width: 4; }
  .edge-glint { stroke-width: 3.8; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .edge-pocket { display: none; }
  .edge-ribbon,
  .edge-glint { animation: none; }
}

@media print {
  .edge-pocket { display: none; }
}