/* Rainbow line under the navigation bar. */
.site-header--pride .u-header__section--light { position: relative; }
.site-header--pride .u-header__section--light::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982, #e40303) 0 0 / 50% 100% repeat-x;
  animation: pride-flow 14s linear infinite; }
@keyframes pride-flow { to { background-position: 100% 0; } }

/* The logo is a slowly flowing rainbow; darker tones keep it readable on white. */
.site-header--pride .site-header__brand-text {
  background: linear-gradient(90deg, #d1001f, #e06a00, #b38b00, #138a36, #2a52be, #7b2fa8, #d1001f) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: pride-flow-text 8s linear infinite; }
/* The gradient is twice the text width, so the loop has to move it by 200% to end where it began. */
@keyframes pride-flow-text { to { background-position: 200% 0; } }

/* A rainbow pumpkin next to the logo that hops every few seconds. It overlaps the brand's right
   margin so the already tight desktop menu does not wrap or overflow. */
.pride-pumpkin { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 0 -10px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform-origin: 50% 100%; animation: pride-hop 3.4s ease-in-out infinite; }
.pride-pumpkin:hover { background: #f4eefb; }
.pride-pumpkin:focus-visible { outline: 3px solid #732982; outline-offset: 2px; }
.pride-pumpkin svg { display: block; filter: drop-shadow(0 1px 2px #0003); }
@keyframes pride-hop { 0%, 64%, 100% { transform: translateY(0) scale(1); } 70% { transform: translateY(1px) scale(1.08, .9); }
  78% { transform: translateY(-9px) scale(.95, 1.06); } 86% { transform: translateY(0) scale(1.12, .86); } 92% { transform: translateY(-2px) scale(.97, 1.03); } }
@media (max-width: 991px) { #js-header .js-mega-menu > .container > .pride-pumpkin { order: 1; } }
/* On phones the extra icon would run under the menu toggle, so the logo text shrinks with the screen.
   `!important` is needed to beat the utility class g-font-size-24. */
@media (max-width: 575px) { .site-header--pride .site-header__brand-text { font-size: min(24px, 5.3vw) !important; } }

/* Burst overlay: coloured dots gather into a rainbow, then the message appears. */
.pride-rainbow { position: fixed; inset: 0; z-index: 10060; }
.pride-rainbow, .pride-rainbow * { box-sizing: border-box; }
.pride-rainbow__scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #1d1838e6, #0a0a16f2); opacity: 0; }
/* A soft, translucent bow whose ends fade into the horizon, closer to a real rainbow than solid stripes. */
.pride-rainbow__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: screen; }
.pride-rainbow__reveal { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pride-rainbow__dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, currentColor 45%, transparent 72%); box-shadow: 0 0 14px 3px currentColor; opacity: 0; mix-blend-mode: screen; }
/* A friendly wizard and glowing pumpkin lanterns standing on the horizon under the bow. */
.pride-rainbow__wizard, .pride-rainbow__pumpkin { position: absolute; pointer-events: none; transform-origin: 50% 100%; }
.pride-rainbow__wizard svg, .pride-rainbow__pumpkin svg { display: block; width: 100%; height: auto; overflow: visible; }
.pride-rainbow__wizard { filter: drop-shadow(0 8px 18px #0008); }
.pride-rainbow__wizard svg { transform-origin: 50% 50%; }
/* The arm turns around the shoulder, given in the wizard's viewBox units (SHOULDER in the script). */
.pride-rainbow__wand-arm { transform-box: view-box; transform-origin: 86px 100px; }
.pride-rainbow__wand-star { transform-box: fill-box; transform-origin: 50% 50%; filter: drop-shadow(0 0 6px #ffe36a); }
.pride-rainbow__pumpkin { filter: drop-shadow(0 4px 10px #0007); }
.pride-rainbow__pumpkin-body { position: relative; display: block; transform-origin: 50% 100%; }
.pride-rainbow__pumpkin svg { position: relative; transform-origin: 50% 100%; }
/* Unlit lanterns show only a faint hint of their own colour. */
.pride-rainbow__pumpkin-face { opacity: .28; filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor); }
.pride-rainbow__glow { position: absolute; left: 50%; top: 55%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0, transparent 62%); opacity: 0; mix-blend-mode: screen; }
.pride-rainbow__pumpkin-tint { opacity: 0; }
.pride-rainbow__pumpkin.is-lit .pride-rainbow__pumpkin-face { opacity: 1; }
.pride-rainbow__pumpkin.is-lit .pride-rainbow__pumpkin-tint { opacity: .92; }
.pride-rainbow__pumpkin.is-lit .pride-rainbow__glow { opacity: .75; }
.pride-rainbow__spark { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
  background: #fff6c2; box-shadow: 0 0 10px 3px #ffe36a; opacity: 0; }
.pride-rainbow__card { position: absolute; left: 50%; width: min(560px, calc(100% - 32px)); padding: 20px 22px; border-radius: 18px; background: #fffffff2;
  color: #2b2140; text-align: center; box-shadow: 0 0 0 3px #fff3, 0 16px 44px #0008; opacity: 0; transform: translateX(-50%); }
.pride-rainbow__card strong { display: block; font-size: clamp(22px, 4.2vw, 32px); line-height: 1.4;
  background: linear-gradient(90deg, #d10000, #e57a00, #b89a00, #007a24, #24408e, #732982); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
.pride-rainbow__card p { margin: 8px 0 0; font-size: 16px; font-weight: 600; line-height: 1.6; }
.pride-rainbow__card small { display: block; margin-top: 10px; color: #5d5470; font-size: 13px; line-height: 1.6; }
.pride-rainbow__close { position: absolute; top: 16px; right: 16px; padding: 10px 18px; border: 1px solid #d8cdea; border-radius: 999px; background: #fff;
  color: #3c2d5a; box-shadow: 0 3px 15px #0003; cursor: pointer; }
.pride-rainbow__close:focus-visible { outline: 3px solid #ffed00; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .site-header--pride .u-header__section--light::after,
  .site-header--pride .site-header__brand-text,
  .pride-pumpkin { animation: none; }
}