/* A silver-and-chrome finish matching the logo, scoped to the opening headline only. */
.reference-home .backup-opening-copy h1[data-copy="backupHeadline"] {
  position: relative;
  color: #ededed;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"] {
    background-image:
      radial-gradient(circle, #fff 0 .65px, #fff9 .9px, transparent 1.7px),
      radial-gradient(circle, #f5f5f5 0 .8px, #fff6 1.1px, transparent 1.9px),
      radial-gradient(circle, #fff 0 .5px, transparent 1.3px),
      linear-gradient(110deg, #bcbcbc 0%, #f4f4f4 18%, #b2b2b2 32%, #fff 44%, #f7f7f7 49%, #a8a8a8 57%, #eeeeee 76%, #bcbcbc 100%);
    background-size: 23px 29px, 41px 37px, 59px 47px, 240% 100%;
    background-position: 0 0, 13px 19px, 31px 7px, 100% 50%;
    background-repeat: repeat, repeat, repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Fine cross-shaped glints sit close to the lettering without intercepting it. */
.reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::before,
.reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 3px #e6e6e688);
}

.reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::before,
.reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1 1.4 7.6L19 10l-7.6 1.4L10 19l-1.4-7.6L1 10l7.6-1.4Z' fill='%23f7f7f7'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1 1.4 7.6L19 10l-7.6 1.4L10 19l-1.4-7.6L1 10l7.6-1.4Z' fill='%23f7f7f7'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='white'/%3E%3C/svg%3E");
}

.reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::before {
  background-size: 15px 15px, 11px 11px;
  background-position: 18% 21%, 77% 74%;
}

.reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::after {
  background-size: 12px 12px, 16px 16px;
  background-position: 61% 16%, 36% 82%;
}

@keyframes headline-silver-shimmer {
  0% { background-position: 0 0, 13px 19px, 31px 7px, 100% 50%; }
  100% { background-position: 23px -29px, -28px 56px, 90px 54px, 0% 50%; }
}

@keyframes headline-glint {
  0%, 14%, 52%, 100% { opacity: 0; }
  31% { opacity: .95; }
}

@media (prefers-reduced-motion: no-preference) {
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"] {
    animation: headline-silver-shimmer 8s ease-in-out infinite alternate;
  }
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::before {
    animation: headline-glint 4.7s ease-in-out infinite;
  }
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::after {
    animation: headline-glint 5.9s ease-in-out -2.8s infinite;
  }
}

@media (forced-colors: active) {
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"] {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    animation: none;
  }
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::before,
  .reference-home .backup-opening-copy h1[data-copy="backupHeadline"]::after {
    display: none;
  }
}