@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@500&display=swap");

/* Sitewide ticker: fixed to viewport, positioned beside the ePix sidebar.
   Hidden until sidebar/mobile-dock offsets are measured (no startup slide). */
.npc-noodle-ticker {
  position: fixed !important;
  left: var(--npc-ticker-left, 0px) !important;
  right: 0 !important;
  bottom: var(--npc-ticker-bottom, 0px) !important;
  top: auto !important;
  display: block;
  box-sizing: border-box;
  width: auto !important;
  height: var(--npce-ribbon-height, 52px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  background: var(--npce-ribbon-bg, #78BFEA);
  text-decoration: none !important;
  cursor: default;
  z-index: 999 !important;
  transform: none !important;
  isolation: isolate;
  /* Hide until the desktop sidebar offset has been measured. */
  visibility: hidden !important;
  transition: none !important;
}
.npc-noodle-ticker.npc-ticker-positioned {
  visibility: visible !important;
}
.npc-noodle-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Flicker-safe navy fade: change opacity on a separate composited layer,
   rather than changing the stroke of the SVG path rebuilt every frame. */
.npc-noodle-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--npce-ribbon-hover-bg, #00243F);
  opacity: 0;
  transition: opacity 850ms ease-out;
  will-change: opacity;
}
.npc-noodle-ticker:hover::before {
  opacity: 1;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0.2, 0.1, 0.25, 1);
}
/* The SVG path still supplies the textPath geometry, but doesn't paint
   over the composited navy layer during its fade. */
.npc-noodle-ticker .npc-noodle-band {
  stroke: none;
  pointer-events: none;
}
.npc-noodle-lettering {
  fill: var(--npce-ribbon-text, #193B64);
  color: var(--npce-ribbon-text, #193B64); /* Separate inherited color channel for hovered word. */
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  font-size: 1.16em;
  font-weight: 500;
  letter-spacing: 0.09em;
  dominant-baseline: middle;
  transition: fill 850ms ease-out, color 850ms ease-out;
}
.npc-noodle-ticker:hover .npc-noodle-lettering {
  fill: #FFFFFF;
  color: var(--npce-ribbon-bg, #78BFEA); /* Starts transitioning alongside the navy background. */
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0.2, 0.1, 0.25, 1);
}
/* Each hovered phrase uses its parent's smoothly interpolated COLOR.
   This starts navy -> baby blue at the SAME moment as the ribbon's navy fade,
   while ordinary phrases fade navy -> white through the parent's FILL.
   No transition is attached to moving tspans (prevents prior flicker). */
.npc-noodle-ticker .npc-noodle-lettering .npc-noodle-word {
  /* Inherit the parent's smoothly fading fill without a second transition.
     Animating fill on every moving tspan caused repeated color retargeting
     (visible as flashes at the start and end of ribbon hover). */
  pointer-events: visiblePainted;
}
.npc-noodle-ticker:hover .npc-noodle-lettering .npc-noodle-word:hover,
.npc-noodle-ticker:hover .npc-noodle-lettering .npc-noodle-word.npc-noodle-word-active {
  fill: currentColor; /* Inherits the continuously fading baby-blue channel. */
}
.npc-noodle-lettering .npc-noodle-dot {
  fill: #FFFFFF; /* white bullets at rest */
  transition: fill 850ms ease-out;
  font-family: Arial, sans-serif;
  font-size: 0.65317em; /* maintains existing bullet size as text grows */
  font-weight: 700;
  letter-spacing: 0;
  dominant-baseline: middle;
  baseline-shift: 2px; /* lift SVG bullets slightly on desktop */
}
.npc-noodle-ticker:hover .npc-noodle-lettering .npc-noodle-dot {
  fill: var(--npce-ribbon-bg, #78BFEA); /* brand bullets on hover */
  transition-duration: 220ms;
  transition-timing-function: ease-out;
}
.npc-noodle-fallback {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  background: transparent;
}
.npc-noodle-fallback-set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--npce-ribbon-text, #193B64);
  transition: color 850ms ease-out;
}
.npc-noodle-ticker:hover .npc-noodle-fallback-set {
  color: var(--npce-ribbon-bg, #78BFEA);
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0.2, 0.1, 0.25, 1);
}
.npc-noodle-fallback-set > span {
  display: inline-flex;
  align-items: center;
  font: 500 1.16em/1.4 "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.09em;
  color: var(--npce-ribbon-text, #193B64);
  transition: color 850ms ease-out;
}
.npc-noodle-ticker:hover .npc-noodle-fallback-set > span {
  color: #FFFFFF;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0.2, 0.1, 0.25, 1);
}
/* The fallback's hovered phrase follows the same navy -> baby-blue fade. */
.npc-noodle-ticker:hover .npc-noodle-fallback-set > span:hover {
  color: inherit;
  transition: none;
}
.npc-noodle-fallback-set > span::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.457216em;
  height: 0.457216em;
  margin: 0 24px;
  border-radius: 50%;
  background: #FFFFFF; /* white at rest */
  position: relative;
  top: -2px; /* align fallback dots with text */
  transition: background-color 850ms ease-out;
}
.npc-noodle-ticker:hover .npc-noodle-fallback-set > span::after {
  background: var(--npce-ribbon-bg, #78BFEA);
  transition-duration: 220ms;
  transition-timing-function: ease-out;
}
/* Hide fallback only after the SVG animation has initialized successfully. */
.npc-noodle-ticker.npc-noodle-ready .npc-noodle-fallback { display: none; }
/* Preserve existing mobile lift, then raise bullets 2px more. */
@media screen and (max-width: 767px) {
  .npc-noodle-lettering .npc-noodle-dot {
    baseline-shift: 6px;
  }
}
/* Hide ribbon in phone landscape, reveal again in portrait. */
@media screen and (orientation: landscape)
       and (max-width: 1024px)
       and (max-height: 500px) {
  .npc-noodle-ticker {
    display: none !important;
  }
}
/* Reduced motion still displays an accessible, scrollable static ticker. */
@media (prefers-reduced-motion: reduce) {
  .npc-noodle-ticker .npc-noodle-svg { display: none; }
  .npc-noodle-ticker .npc-noodle-fallback { display: flex !important; }
}

.npc-noodle-ticker,
  .npc-noodle-ticker * {
    cursor: pointer !important;
  }

  .npc-noodle-ticker:focus-visible {
    outline: 2px solid var(--npce-ribbon-text, #193B64);
    outline-offset: -3px;
  }