/* fx.css · cinematic/text-mask, a photograph pans inside a giant word · owner: Lizzy East · all rights reserved */

/* The word is decoration (aria-hidden); the real heading sits beside it. Set
   --fx-mask-image to any photograph; without one, a warm gradient fills it. */
[data-fx~="cinematic/text-mask"] { overflow: clip; }
[data-fx~="cinematic/text-mask"] [data-fx-ambient] {
  margin: 0;
  font: italic 400 clamp(5.5rem, 26vw, 24rem) / 0.84 var(--fx-mask-font, Georgia, serif);
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--fx-mask-fallback, #a63a12);
}
@supports (background-clip: text) {
  [data-fx~="cinematic/text-mask"] [data-fx-ambient] {
    color: transparent;
    background-image: var(--fx-mask-image, linear-gradient(115deg, #a63a12, #f08a4b 35%, #3b1f5c 70%, #a63a12));
    background-size: var(--fx-mask-size, 190% auto);
    background-position: 0% 45%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
html.fx-armed [data-fx~="cinematic/text-mask"] [data-fx-ambient] {
  animation: fx-text-mask var(--fx-mask-dur, 16s) ease-in-out infinite alternate;
}
@keyframes fx-text-mask {
  from { background-position: 0% 45%; }
  to { background-position: 100% 55%; }
}