/* The notice scrolls with the page; navigation pins below it, then at the top. */
.contact-notice { position: relative; background: #000; border-top: 1px solid #ffffff1a; border-bottom: 1px solid #ffffff2a; color: #fff; }
.notice-inner { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 22px; padding-block: 12px; }
.notice-heading { display: flex; align-items: center; }
.notice-heading > strong { font-size: 19px; font-weight: 750; letter-spacing: -.4px; }
.notice-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.notice-link { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #ffffff40; border-radius: 5px; background: #000; color: #fff; transition: background .2s, border-color .2s; }
.notice-link > strong { font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.notice-link:hover { background: #191919; border-color: #fff; }
.header-anchor { position: sticky; top: 0; z-index: 30; height: 0; }
.header { position: absolute; }

/* A sharp, angled red highlight with a soft trailing glow, on the text only.
   0.5s per text, staggered by 0.25s: a 1.5s sweep, then a 2s pause. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .notice-heading > strong,
  .notice-link > strong {
    --sweep-delay: .3s;
    background-image: linear-gradient(108deg, #fff 0%, #fff 37%, #ffe3e3 43%, #ff909b 48%, #ff2538 53%, #fff5f5 54.4%, #ff3148 56%, #ffadb7 60%, #fff 63%, #fff 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    animation: notice-red-sweep 3.5s cubic-bezier(.4, 0, .2, 1) infinite both;
    animation-delay: var(--sweep-delay);
  }
  .notice-link:nth-child(1) > strong { --sweep-delay: .55s; }
  .notice-link:nth-child(2) > strong { --sweep-delay: .8s; }
  .notice-link:nth-child(3) > strong { --sweep-delay: 1.05s; }
  .notice-link:nth-child(4) > strong { --sweep-delay: 1.3s; }
}

@keyframes notice-red-sweep {
  0% { background-position: 100% 0; filter: none; }
  5% { filter: brightness(1.05) drop-shadow(0 0 1px #ff3148b3) drop-shadow(0 0 5px #ff25385c) drop-shadow(0 0 10px #ff253833); }
  9.5% { filter: drop-shadow(0 0 2px #ff314870) drop-shadow(0 0 7px #ff25382e); }
  14.285714%, 100% { background-position: 0% 0; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .notice-heading > strong,
  .notice-link > strong {
    animation: none;
    background: none;
    filter: none;
    -webkit-text-fill-color: currentColor;
  }
}

@media (forced-colors: active) {
  .notice-heading > strong,
  .notice-link > strong {
    animation: none;
    background: none;
    filter: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

@media (max-width: 900px) {
  .notice-inner { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .notice-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .notice-inner { width: calc(100% - 32px); padding-block: 12px; gap: 10px; }
  .notice-heading > strong { font-size: 18px; }
}

@media (max-width: 370px) {
  .notice-inner { width: calc(100% - 24px); }
  .notice-link { padding-inline: 6px; }
  .notice-link > strong { font-size: 16px; }
}