/* Inter Tight SUPER (weight 900) — declared here so every page
   that includes site-marquee.css gets the same face for the marquee.
   Without this, pages that hadn't declared their own SUPER @font-face
   fell back to whichever weight they had available (extrabold, regular,
   or system), which is why the marquee looked different across pages. */
/* Shared full-bleed marquee band — used on selections + introductions.

   Structure:
     .marquee-band
       .marquee-band__layers
         .marquee-band__blur   → heavily blurred base layer
         .marquee-band__sharp  → sharp copy revealed by a radial mask
                                 tracking the cursor (see site-marquee.js)
     Each layer contains a .marquee-track with TWO identical
     .marquee-phrase spans; translating the track by -50% loops the pair
     seamlessly since the second phrase lands exactly where the first
     one started.

   Blur is unconditional (touch devices see it too as a stylistic
   effect); the sharp overlay's cursor spotlight only fires on hover-
   capable devices via JS. */

.marquee-band {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 3.44rem 0 3.25rem;       /* top −10% (was 3.825rem), bottom kept tight */
  overflow: hidden;
  color: var(--fg);
  font-family: "Inter Tight",
               -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Matches the profile / contact pills: regular weight, editorial
     size rather than a display-super banner. Cursor spotlight still
     unblurs the sharp overlay on hover (identical mechanic to the
     pill). Reads as the same family of moving text, just full-bleed. */
  font-weight: 400;
  font-size: clamp(1.25rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.marquee-band__layers {
  position: relative;
  display: block;
}
.marquee-band__blur,
.marquee-band__sharp {
  display: block;
}
.marquee-band__blur {
  /* Softer blur to match the pill's blur(4px). Sharp cursor reveal
     cuts through cleanly without a heavy defocused base. */
  filter: blur(5px);
}
.marquee-band__sharp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Default centre off-screen — sharp overlay is invisible until the
     user actually hovers over the band. */
  --mx: -1000px;
  --my: -1000px;
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx) var(--my),
    #000 0%, #000 25%, transparent 90%);
          mask-image: radial-gradient(circle 260px at var(--mx) var(--my),
    #000 0%, #000 25%, transparent 90%);
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  /* Duration is set by site-marquee.js so every marquee scrolls at the
     same pixels-per-second regardless of phrase length. The fallback
     value keeps a reasonable pace if JS is disabled. */
  animation: marquee var(--marquee-duration, 48s) var(--ease-linear) infinite;
}
.marquee-phrase {
  display: inline-block;
  padding-right: 0.5em;
}
/* Mask + background-color renders the icon in var(--accent) — pure
   #00dede in dark mode, pure #de0000 in light mode — no hue-rotate
   fade on anti-aliased edges. The black icon PNG acts as the shape
   mask; the color comes entirely from --accent. */
.marquee-mark {
  display: inline-block;
  width: 2.295em;
  height: 2.295em;
  margin: 0 0.35em;
  vertical-align: middle;
  transform: translateY(-5%);
  background-color: var(--accent);
  -webkit-mask-image: url("ASSETS/LOGO/DEDE_FINAL%20LOGO%20STACKED_BLACK.png");
          mask-image: url("ASSETS/LOGO/DEDE_FINAL%20LOGO%20STACKED_BLACK.png");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

@keyframes marquee {
  /* Right → left motion (items enter from the right, exit at left).
     Track moves left; the duplicated second phrase lands where the
     first started, keeping the loop seamless. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}