/* Reference video: one stationary title, one shared flowing colour field.
   Two identical spectra form a tile 480% as wide as the heading. The shift
   of 240% is one spectrum: 240 / (480 - 100) = 63.15789473684211% of the
   background-position travel range. The loop restores identical colours.
   Important declarations in this layer replace the older unlayered foil
   effects without changing any font, size, spacing, position or layout. */
@property --jade-ribbon-offset {
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

@layer jade-flowing-type {
  :where(h1,h2,h3,
    .qh-place-title h3,.dest-body h3,.guide-card h3,.stage-heading h3,
    .destination-body h3,.hub-card h3,.discover-grid h2,
    .fate-city-copy h3,.fate-result-photo h3,.fate-style-copy h3,
    #quizResult h3,[data-atlas-preview-title],
    .atlas-v2-title strong,.fg-season-content h3,.guide-destination-card h3,
    .city-section>.section-heading h2,.sight h3,.spot h3):not(:where(.sr-only,.source-box *,.credits-grid *,.fate-result-sights *,
      .sidebar-title,.panel-kicker,.brand *,.logo *,
        .fate-city-copy h3,.qh-hero-copy h1,.qh-atlas-title,
        .tp-timezone *,.qh-calendar-head *,.qh-inspiration-card h3,.qh-craft h3,
        .tj-empty h3,.guide-recommendations h3,.jade-guide-sight-copy h3,
        .guide-day-head h3,.jade-guide-stay h3,.jade-guide-tips h3,
        .jade-guide-seasons h3,.guide-experiences h3,.jade-guide-nearby h3,
        .map-loading-inner *,.empty-state *,.attraction-card h3,.jade-guide-sources h3)) {
    text-shadow:none!important;
    filter:none!important;
    -webkit-text-stroke:0!important;
  }

  @supports ((background-clip:text) or (-webkit-background-clip:text)) {
    :where(h1,h2,h3,
      .qh-place-title h3,.dest-body h3,.guide-card h3,.stage-heading h3,
      .destination-body h3,.hub-card h3,.discover-grid h2,
      .fate-city-copy h3,.fate-result-photo h3,.fate-style-copy h3,
      #quizResult h3,[data-atlas-preview-title],
      .atlas-v2-title strong,.fg-season-content h3,.guide-destination-card h3,
      .city-section>.section-heading h2,.sight h3,.spot h3):not(:where(.sr-only,.source-box *,.credits-grid *,.fate-result-sights *,
        .sidebar-title,.panel-kicker,.brand *,.logo *,
        .fate-city-copy h3,.qh-hero-copy h1,.qh-atlas-title,
        .tp-timezone *,.qh-calendar-head *,.qh-inspiration-card h3,.qh-craft h3,
        .tj-empty h3,.guide-recommendations h3,.jade-guide-sight-copy h3,
        .guide-day-head h3,.jade-guide-stay h3,.jade-guide-tips h3,
        .jade-guide-seasons h3,.guide-experiences h3,.jade-guide-nearby h3,
        .map-loading-inner *,.empty-state *,.attraction-card h3,.jade-guide-sources h3)) {
      background-image:linear-gradient(90deg,
        #D3444E 0%,#BB3F79 6%,#8550A5 12%,#3F75AF 18%,
        #208F91 25%,#2B996E 29.5%,#CC922F 33%,#E16B36 40%,#D3444E 50%,
        #BB3F79 56%,#8550A5 62%,#3F75AF 68%,#208F91 75%,
        #2B996E 79.5%,#CC922F 83%,#E16B36 90%,#D3444E 100%)!important;
      background-size:480% 100%!important;
      background-position:var(--jade-ribbon-offset) 50%!important;
      background-repeat:repeat-x!important;
      -webkit-background-clip:text!important;
      background-clip:text!important;
      -webkit-text-fill-color:transparent!important;
      animation:jade-ribbon-flow 7s linear infinite normal!important;
    }

    /* Children inherit the parent's transparent ink. They do not acquire
       individual gradients, so em/strong/span cannot split the colour field. */
    :where(h1,h2,h3,
      .qh-place-title h3,.dest-body h3,.guide-card h3,.stage-heading h3,
      .destination-body h3,.hub-card h3,.fate-city-copy h3,.fate-result-photo h3,
      .fate-style-copy h3,#quizResult h3,[data-atlas-preview-title],
      .atlas-v2-title strong,.fg-season-content h3,.guide-destination-card h3,
      .sight h3,.spot h3) :where(span,em,strong,b,a):not(:where(.source-box *,.credits-grid *,[aria-hidden=true],small *,
        .fate-city-copy h3 *,.qh-hero-copy h1 *,.qh-atlas-title *,
        .tp-timezone *,.qh-calendar-head *,.qh-inspiration-card h3 *,.qh-craft h3 *,
        .tj-empty h3 *,.guide-recommendations h3 *,.jade-guide-sight-copy h3 *,
        .guide-day-head h3 *,.jade-guide-stay h3 *,.jade-guide-tips h3 *,
        .jade-guide-seasons h3 *,.guide-experiences h3 *,.jade-guide-nearby h3 *,
        .map-loading-inner *,.empty-state *,.attraction-card h3 *,.jade-guide-sources h3 *)) {
      background-image:none!important;
      -webkit-text-fill-color:inherit!important;
      text-shadow:none!important;
      filter:none!important;
      -webkit-text-stroke:0!important;
      animation:none!important;
    }

    /* Small subtitles and utility marks keep their existing solid colours. */
    :where(h1 small,h2 small,h3 small,.city-hero h1>span,
      [data-atlas-preview-title]>em,h1 [aria-hidden=true],h2 [aria-hidden=true],
      h3 [aria-hidden=true]) {
      background-image:none!important;
      -webkit-text-fill-color:currentColor!important;
      animation:none!important;
    }

    @media(prefers-reduced-motion:reduce) {
      :where(h1,h2,h3,.atlas-v2-title strong) {
        animation:none!important;
        background-position:0% 50%!important;
      }
    }
    @media(forced-colors:active),print {
      :where(h1,h2,h3,.atlas-v2-title strong),
      :where(h1,h2,h3) :where(span,em,strong,b,a) {
        animation:none!important;
        background-image:none!important;
        -webkit-text-fill-color:currentColor!important;
      }
    }
  }
}

@keyframes jade-ribbon-flow {
  from {--jade-ribbon-offset:0%;}
  to {--jade-ribbon-offset:63.15789473684211%;}
}