/* A single silver-blue sweep on hover/focus, shared by all page-banner templates. */
[data-banner-design] {
  --banner-ink: 34, 105, 160;
  --banner-silver: 224, 237, 247;
  --banner-line: 35, 113, 174;
  --banner-shift-x: 0px;
  --banner-shift-y: 0px;
  position: relative;
  isolation: isolate;
}
:root[data-theme="dark"] [data-banner-design] {
  --banner-ink: 129, 200, 241;
  --banner-silver: 213, 237, 254;
  --banner-line: 158, 214, 248;
}
[data-banner-design] > [data-banner-content] { position: relative; z-index: 1; }
.contact-intro[data-banner-design] { padding: 24px; }
/* The homepage stays a video scene, with the shared finish only at its edge. */
.home-feature > .banner-design { z-index: 2; }
.home-feature .banner-design__lines, .home-feature .banner-design__sweep { display: none; }
.banner-design {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.banner-design__sweep {
  position: absolute;
  inset: -15% -45%;
  background: linear-gradient(112deg, transparent 36%, rgba(var(--banner-ink), .055) 42%, rgba(var(--banner-silver), .24) 47%, rgba(var(--banner-ink), .13) 50%, transparent 50.2%, rgba(var(--banner-silver), .16) 51%, transparent 58%);
  transform: translateX(-42%);
}
.banner-design__lines {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  fill: none;
  color: rgb(var(--banner-line));
  stroke: currentColor;
  stroke-width: 1.25px;
  transform: translate(var(--banner-shift-x), var(--banner-shift-y));
  -webkit-mask-image: linear-gradient(90deg, #0003 0%, #0003 42%, #000b 58%, #000 76%);
  mask-image: linear-gradient(90deg, #0003 0%, #0003 42%, #000b 58%, #000 76%);
}
.banner-design__lines path, .banner-design__lines ellipse, .banner-design__lines circle { vector-effect: non-scaling-stroke; }
.banner-design__quiet { opacity: .24; }
.banner-design__drawing { opacity: .72; stroke-width: 1.65px; }
.banner-design__drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.banner-design__nodes { fill: rgb(var(--banner-silver)); stroke-width: 1.5px; opacity: .85; }
.banner-design__frame {
  position: absolute;
  inset: 14px 20px;
  border: 1px solid rgba(var(--banner-line), .28);
  border-radius: 16px;
  color: rgba(var(--banner-line), .86);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 38px 2px,
    linear-gradient(currentColor, currentColor) 0 0 / 2px 38px,
    linear-gradient(currentColor, currentColor) 100% 0 / 38px 2px,
    linear-gradient(currentColor, currentColor) 100% 0 / 2px 38px,
    linear-gradient(currentColor, currentColor) 0 100% / 38px 2px,
    linear-gradient(currentColor, currentColor) 0 100% / 2px 38px,
    linear-gradient(currentColor, currentColor) 100% 100% / 38px 2px,
    linear-gradient(currentColor, currentColor) 100% 100% / 2px 38px;
  background-repeat: no-repeat;
}
[data-banner-design="blueprint"] .banner-design__frame { border-radius: 5px; }
[data-banner-design="shield"] .banner-design__frame { border-radius: 24px; }
[data-banner-design]:focus-within > .banner-design { opacity: 1; }
[data-banner-design]:focus-within .banner-design__drawing path { stroke-dashoffset: 0; }
[data-banner-design]:focus-within .banner-design__sweep { transform: translateX(32%); }
@media (hover: hover) and (pointer: fine) {
  [data-banner-design]:hover > .banner-design { opacity: 1; }
  [data-banner-design]:hover .banner-design__drawing path { stroke-dashoffset: 0; }
  [data-banner-design]:hover .banner-design__sweep { transform: translateX(32%); }
  :root body main [data-banner-design]:is(:hover, :focus-within) :is(.scene-frame, .international-art) {
    outline: 1px solid rgba(var(--banner-line), .76);
    outline-offset: 4px;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .banner-design { transition: opacity 250ms ease; }
  .banner-design__lines { transition: transform 180ms ease-out; }
  .banner-design__drawing path { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .65, .3, 1); }
  .banner-design__sweep { transition: transform 1.1s cubic-bezier(.2, .65, .3, 1); }
}
/* Touchscreens keep a quiet, static trace; no hover is needed to discover content. */
@media (hover: none), (pointer: coarse) {
  .banner-design { opacity: .16; }
  .banner-design__drawing path { stroke-dashoffset: 0; }
  .banner-design__sweep { display: none; }
  [data-banner-design]:focus-within > .banner-design { opacity: .16; }
}
@media (max-width: 760px) {
  .banner-design__frame { inset: 8px; border-radius: 12px; }
  .banner-design__lines { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-design__lines { transform: none; }
  .banner-design__drawing path { stroke-dashoffset: 0; }
  .banner-design__sweep { display: none; }
}
@media print { .banner-design { display: none; } }