/* The light wake is contained behind the new hero's typography and tiles. */
.creator-hero {
  --chromatic-x: 50%;
  --chromatic-shift-x: 0px;
  --chromatic-shift-y: 0px;
}
.hero-chromatic { overflow: clip; }
.hero-chromatic__wash {
  position: absolute;
  inset: -7%;
  background:
    radial-gradient(ellipse 28% 33% at 77% 36%, #8773e424, transparent 100%),
    radial-gradient(ellipse 30% 24% at 32% 58%, #5fa4e91a, transparent 100%),
    radial-gradient(ellipse 24% 28% at 91% 76%, #bc80db22, transparent 100%);
  transform: translate3d(var(--chromatic-shift-x), var(--chromatic-shift-y), 0);
}
.hero-chromatic__trail {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}
.creator-hero__title .creator-hero__script {
  color: #d4c3ff;
  background-image: linear-gradient(110deg, #aecfff, #d4c3ff 35%, #e0b8f2 65%, #aecfff);
  background-size: 190% 100%;
  background-position: var(--chromatic-x) 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Native image cursors retain exact OS positioning, with no following DOM layer. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  body.page--home { cursor: url('../cursors/tfa-arrow.svg') 5 4, auto; }
  .page--home :is(a, button, summary, label, [role="button"], input[type="radio"], input[type="checkbox"]) {
    cursor: url('../cursors/tfa-arrow-link.svg') 5 4, pointer;
  }
  .page--home :is(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
  .page--home :is(textarea, [contenteditable="true"]),
  .page--home input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]) { cursor: text; }
  .page--home :is(select, iframe, video) { cursor: auto; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-chromatic__trail { display: none; }
  .hero-chromatic__wash { transform: none; }
}
@media (forced-colors: active) {
  .hero-chromatic { display: none; }
  .creator-hero__title .creator-hero__script {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}