/* ==========================================================================
   Redraft — homepage headline animation (isolated module; loaded on / only)
   Idea: the headline arrives as a raw draft and is set into type.
     1. Three Dusty Rose guide rules are ruled across the empty page, one per baseline.
     2. Every letter rises from its rule as a tall, narrow, Dusty Rose sliver (the rough draft).
     3. A wave relaxes the slivers into the real letterforms and the real ink colour.
     4. The full stop drops in last and is "stamped" onto the final baseline.
     5. The guides fade; the DOM is restored to the original markup. Nothing remains.
   Colour: only --rose and --ink from site.css. Motion: transform + colour on ~30 spans, once.
   Gating: js/redraft.js. html.rd-hold (set in <head>) hides the h1 for at most ~1.1s while the
   webfont loads; if anything fails the original line-rise animation plays instead.
   Reduced motion: html.rd-hold is never set, so none of this runs.
   ========================================================================== */

/* While waiting for the font, and once this module owns the headline, the original rise is off. */
.rd-hold .hero h1 .line>span,
.rd-run  .hero h1 .line>span{animation:none}
.rd-hold #hero-title{visibility:hidden}

/* guide rules, one per baseline */
.rd-on .line{position:relative;isolation:isolate}
.rd-on .line::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--rd-b,.3em);height:2px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;z-index:-1;
  animation:rd-rule 2.5s var(--ease) both;animation-delay:calc(var(--i,0)*.12s)}
@keyframes rd-rule{
  0%  {transform:scaleX(0);opacity:1}
  24% {transform:scaleX(1);opacity:1}
  76% {transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

/* words keep their original wrapping; letters carry the motion */
.rd-on .rd-w{display:inline-block;white-space:nowrap}
.rd-on .rd-c{
  display:inline-block;transform-origin:50% 100%;will-change:transform,color;
  animation:rd-set 1.6s linear both;animation-delay:calc(.38s + var(--dl,0s))}
/* --dx puts each letter exactly where the original text sets it, so the final swap back is invisible */
@keyframes rd-set{
  0%  {transform:translate(calc(var(--dx) + var(--sx)),270%) scale(.5,2.5);color:var(--rose);
       animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  34% {transform:translate(calc(var(--dx) + var(--sx)*.8),0%) scale(.56,2.2);color:var(--rose);
       animation-timing-function:linear}
  50% {transform:translate(calc(var(--dx) + var(--sx)*.8),0%) scale(.56,2.2);color:var(--rose);
       animation-timing-function:cubic-bezier(.34,1.25,.5,1)}
  100%{transform:translate(var(--dx),0%) scale(1,1);color:var(--ink)}
}

/* the full stop */
.rd-on .rd-stop{animation-name:rd-stop;animation-duration:1.5s;animation-timing-function:linear;
  animation-delay:calc(.38s + var(--dl,0s) + .6s)}
@keyframes rd-stop{
  0%  {transform:translate(var(--dx),-190%) scale(2.2,2.2);color:var(--rose);animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  44% {transform:translate(var(--dx),0%) scale(1.55,.55);color:var(--rose);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  60% {transform:translate(var(--dx),-12%) scale(1.1,1.22);color:var(--rose);animation-timing-function:ease-in-out}
  74% {transform:translate(var(--dx),0%) scale(1,1);color:var(--rose);animation-timing-function:ease-in-out}
  100%{transform:translate(var(--dx),0%) scale(1,1);color:var(--ink)}
}