/* Home hero stage, "plotter" version (build flag HERO=plotter, the default). Loads after home-hero.css on the home page only.
   Every rule is scoped to the stage marked data-hero="plotter", so other pages that share home-hero.css keep the classic stage.
   With HERO=classic this file is not linked and not shipped. */

/* no grain on this stage (the build also leaves the grain layer out of the markup) */
.hero__stage[data-hero="plotter"] .hero__grain { display: none; }

/* the lit trigger: the row tint says it, no halo on the dot */
.hero__stage[data-hero="plotter"] .hero__trig li { transition: color 280ms var(--ease), background-color 280ms var(--ease), border-color 280ms var(--ease); }
.hero__stage[data-hero="plotter"] .hero__trig .dot { transition: opacity 280ms var(--ease); }
.hero__stage[data-hero="plotter"] .hero__trig li.is-on .dot { box-shadow: none; }

/* the card is rewritten field by field, it never fades out as a whole. An even wave, close to the pen's pace:
   the timings in hero-plotter.js (CARD_T, CARD_DONE) count on these durations, change them together */
.hero__stage[data-hero="plotter"] .sigcard__title,
.hero__stage[data-hero="plotter"] .sigcard__rows,
.hero__stage[data-hero="plotter"] .sigcard__type,
.hero__stage[data-hero="plotter"] .sigcard__time,
.hero__stage[data-hero="plotter"] .sigcard__foot { transition: none; }
.hero__stage[data-hero="plotter"] .sigcard .w-in { animation: hp-in 320ms cubic-bezier(.3, 0, .2, 1) both; }
.hero__stage[data-hero="plotter"] .sigcard .w-wipe { animation: hp-wipe 520ms cubic-bezier(.45, .05, .35, 1) both; }
/* a field still showing the previous record waits, dimmed to a texture you cannot read, for its turn (keep it at .18 or lower) */
.hero__stage[data-hero="plotter"] .sigcard .is-stale { opacity: .14; transition: opacity 160ms linear; }
@keyframes hp-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hp-in { from { opacity: .14; } to { opacity: 1; } } /* from the dimmed level, so a field is never blank */

/* until the script has drawn the market (or if it never loads), the stage looks like the no-JS stage */
.hero__stage[data-hero="plotter"]:not(.is-drawn) .hero__market {
  background-image: radial-gradient(rgba(244, 240, 232, .22) 1.1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
  mask-image: linear-gradient(90deg, #000 55%, transparent);
}
.hero__stage[data-hero="plotter"]:not(.is-drawn) .hero__pause { visibility: hidden; }
@media (max-width: 999px) {
  .hero__stage[data-hero="plotter"]:not(.is-drawn) .hero__market { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stage[data-hero="plotter"] .sigcard .w-in,
  .hero__stage[data-hero="plotter"] .sigcard .w-wipe { animation: none; }
  .hero__stage[data-hero="plotter"] .sigcard .is-stale { opacity: 1; transition: none; }
}