/* ============================================================
   A GOTHIC BEAUTY — HOME MOTION (the Plates, Heaven & Hell)
   On phones the plates and garments are dealt onto the page as they
   arrive; the word Hell burns inside its own letters. The pinned
   choreography itself lives in folio.js, the fire in hell-fire.js.
   Nothing here hides anything unless the script has said it is live.
   ============================================================ */

/* ---------- phones: each plate and garment is dealt as it arrives ---------- */
@media (max-width: 860px) {
  .is-dealing .deck-card, .is-dealing .rack-fig { transition: opacity 0.55s var(--ease-lux), transform 0.7s var(--ease-lux); }
  .is-dealing .deck-card:not(.is-dealt), .is-dealing .rack-fig:not(.is-dealt) { opacity: 0; transform: translateY(2.6rem) rotate(var(--deal-r, 1.8deg)); }
  .is-dealing .deck-card:nth-child(even), .is-dealing .rack-fig:nth-child(even) { --deal-r: -1.8deg; }
}

/* ---------- small fixes ----------
   a section that receives focus from the skip link or the index shouldn't wear a ring;
   only plates that open a study say so; on desktop the rack's own link serves, so the
   hidden list's copy leaves the tab order instead of taking an invisible focus */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }
.deck-card div.plate::after { content: none; }
@media (min-width: 861px) { .hh--live .hh__list p:has(> .more) { display: none; } }

/* ---------- the Maker portrait drifts with the scroll: no transform easing to smear it ---------- */
.plate img[data-drift] { transition: filter 0.8s var(--ease-lux); }

/* ---------- the word Hell, burning: one canvas inside each word, masked by its own letters ---------- */
.hell-word { position: relative; display: inline-block; }
/* zero-sized until the script has measured the letters, so an idle canvas never widens the page */
.hell-fire { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; pointer-events: none; }
.hell-fire__probe { display: inline-block; width: 0; height: 0; }
/* on the stage the fire sits under the oxblood outline; in the heading the fire is the letter */
.hh__word--hell .hell-fire { z-index: -1; }
.hell-word .hell-fire { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .is-dealing .deck-card, .is-dealing .rack-fig { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hell-fire { display: none; }
}
@media print {
  .hell-fire { display: none; }
  .is-dealing .deck-card, .is-dealing .rack-fig { opacity: 1 !important; transform: none !important; }
}