/* Gold ombré (Job Garden .gild) + four glitter treatments. */
.word em,
.display em,
.display:not(:has(em)),
.cinema-title,
.player-title,
.ar-now h2,
body.cinema-open .now h2 {
  background-image: linear-gradient(168deg, var(--gold-hi) 8%, var(--gold) 46%, var(--gold-lo) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.eyebrow {
  background-image: linear-gradient(168deg, var(--gold-hi) 10%, var(--gold) 50%, var(--gold-mid, #a8843f) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rail nav a[aria-current="page"],
.rail nav .nav-drop-btn[aria-current="page"],
.site-menu nav a[aria-current="page"],
.option-bar a[aria-current="true"] {
  background-image: linear-gradient(168deg, var(--gold-hi) 8%, var(--gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .word em, .display em, .display:not(:has(em)), .cinema-title, .player-title, .ar-now h2, body.cinema-open .now h2, .eyebrow,
  .rail nav a[aria-current="page"],
  .rail nav .nav-drop-btn[aria-current="page"],
  .site-menu nav a[aria-current="page"],
  .option-bar a[aria-current="true"] {
    color: var(--gold-hi);
    -webkit-text-fill-color: var(--gold-hi);
    background: none;
  }
}

/* 1. Gild — faithful ombré, slow metal sheen */
.gold-gild .word em,
.gold-gild .display em,
.gold-gild .display:not(:has(em)) {
  background-image:
    linear-gradient(110deg, transparent 36%, rgba(255, 246, 212, 0.7) 48%, transparent 58%),
    linear-gradient(168deg, var(--gold-hi) 8%, var(--gold) 46%, var(--gold-lo) 96%);
  background-size: 220% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  animation: sheen 7.5s ease-in-out infinite;
}
@keyframes sheen {
  0%, 28% { background-position: 120% 0, 0 0; }
  58% { background-position: -40% 0, 0 0; }
  100% { background-position: -40% 0, 0 0; }
}

/* 2. Leaf — ombré + drifting gold-leaf specks inside the glyphs */
.gold-leaf .word em,
.gold-leaf .display em,
.gold-leaf .display:not(:has(em)) {
  background-image:
    radial-gradient(2px 2px at 18% 28%, #fff8e4 55%, transparent 70%),
    radial-gradient(2.2px 2.2px at 72% 62%, var(--gold-hi) 50%, transparent 70%),
    radial-gradient(1.6px 1.6px at 44% 78%, #ffe9b0 50%, transparent 70%),
    radial-gradient(2px 2px at 88% 22%, #fff3c8 45%, transparent 70%),
    linear-gradient(168deg, var(--gold-hi) 8%, var(--gold) 46%, var(--gold-lo) 96%);
  background-size: 16px 16px, 20px 18px, 14px 16px, 18px 14px, 100% 100%;
  animation: leaf-drift 9s linear infinite;
}
@keyframes leaf-drift {
  to {
    background-position: 22px 18px, -20px 14px, 12px -16px, -18px 10px, 0 0;
  }
}

/* 3. Sweep — specular stripe, like light crossing metal type */
.gold-sweep .word em,
.gold-sweep .display em,
.gold-sweep .display:not(:has(em)) {
  background-image:
    linear-gradient(118deg, transparent 42%, #fff8e4 49.5%, var(--gold-hi) 51%, transparent 58%),
    linear-gradient(168deg, var(--gold-hi) 8%, var(--gold) 46%, var(--gold-lo) 96%);
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 0, 0 0;
  animation: sweep 5.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: drop-shadow(0 0 10px rgba(201, 164, 95, 0.18));
}
@keyframes sweep {
  0%, 18% { background-position: 140% 0, 0 0; }
  55% { background-position: -50% 0, 0 0; }
  100% { background-position: -50% 0, 0 0; }
}

/* 4. Dust — ombré glyphs + twinkling gold motes around the title */
.gold-dust .display,
.gold-dust .word {
  position: relative;
}
.gold-dust .display::after,
.gold-dust .word::after {
  content: "";
  position: absolute;
  inset: -0.35rem -0.6rem;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 30%, #fff8e4 60%, transparent 70%),
    radial-gradient(1.2px 1.2px at 88% 22%, var(--gold-hi) 55%, transparent 70%),
    radial-gradient(1px 1px at 70% 88%, #ffe9b0 55%, transparent 70%),
    radial-gradient(1.4px 1.4px at 28% 92%, var(--gold) 50%, transparent 70%),
    radial-gradient(1.1px 1.1px at 52% 8%, #fff8e4 55%, transparent 70%);
  animation: twinkle 2.6s ease-in-out infinite;
}
.gold-dust .word em,
.gold-dust .display em,
.gold-dust .display:not(:has(em)),
.gold-dust .lede-gold {
  filter: drop-shadow(0 0 14px rgba(201, 164, 95, 0.28));
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 0.45; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .gold-gild .word em,
  .gold-gild .display em,
  .gold-gild .display:not(:has(em)),
  .gold-leaf .word em,
  .gold-leaf .display em,
  .gold-leaf .display:not(:has(em)),
  .gold-sweep .word em,
  .gold-sweep .display em,
  .gold-sweep .display:not(:has(em)),
  .gold-dust .display::after,
  .gold-dust .word::after {
    animation: none;
    filter: none;
    background-image: linear-gradient(168deg, var(--gold-hi) 8%, var(--gold) 46%, var(--gold-lo) 96%);
    background-size: 100% 100%;
    background-position: 0 0;
  }
  .gold-dust .display::after,
  .gold-dust .word::after { opacity: 0.5; }
}