/* Slant mask lines: each rendered line of a heading is drawn in behind a hard, slightly sloped mask edge while it
   slides up-left into place. Measured from Imperiale Bolgheri (o-text-reveal-lines + home slider titles).
   Hang it on any text element: class="sml" (+ data-slant-lines to auto-start), part.js splits it into lines.

   Per line (.sml__line inside an overflow-hidden .sml__mask):
     mask-image  linear-gradient(-4deg, transparent 50%, #000 50%), 140% x 300% of the line box, no-repeat
     rest        mask-position 0 200% (the mask image sits wholly above the line: nothing shows)
                 transform translate(4%, 30%) (low and to the right, clipped by the line box below)
     in (.is-in) mask-position 0 0% + transform none; transform 1s, mask 1.2s, both cubic-bezier(.23,1,.32,1),
                 each line (var(--line) = 1, 2, 3 ...) .08s after the one above
   The source writes the end as var(--line-height) (.9 / 1), a unitless number that is invalid in mask-position, so
   the browser lands on the initial 0%: measured 200% -> 0% in Chrome. We write 0% outright.
   Going back to rest has no transition (hold() snaps hidden), exactly like the source's slide titles. */
.sml {
  --sml-dur: 1s;                               /* transform (slide) duration */
  --sml-mask-dur: 1.2s;                        /* mask sweep duration (outlasts the slide by .2s) */
  --sml-ease: cubic-bezier(.23, 1, .32, 1);    /* quint-ish out */
  --sml-stagger: .08s;                         /* per-line delay */
  --sml-delay: 0s;                             /* before the first line */
  --sml-x: 4%;                                 /* start offset right, % of the line's own width */
  --sml-y: 30%;                                /* start offset down, % of the line's own height */
  --sml-angle: -4deg;                          /* slope of the mask edge */
  --sml-mask-from: 200%;                       /* mask-position-y at rest (hidden) */
  --sml-mask-to: 0%;                           /* mask-position-y when in (shown) */
}
/* presets measured on the same site */
.sml--loader { --sml-dur: 1.6s; --sml-mask-dur: 1.8s; }                       /* loader logo */
.sml--footer { --sml-dur: 1.4s; --sml-mask-dur: 1.6s; --sml-delay: .2s; }     /* footer "next page" title */

/* hidden until split (no flash of unsplit text); a failsafe shows it after 3s if the script never runs */
.sml:not(.is-split) { visibility: hidden; animation: sml-failsafe 0s linear 3s forwards; }
@keyframes sml-failsafe { to { visibility: visible; } }

.sml__mask { display: block; overflow: hidden; }
.sml__line {
  position: relative;
  display: inline-block;
  line-height: inherit;
  -webkit-mask-image: linear-gradient(var(--sml-angle), transparent 50%, #000 50%);
          mask-image: linear-gradient(var(--sml-angle), transparent 50%, #000 50%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 140% 300%; mask-size: 140% 300%;
  -webkit-mask-position: 0 var(--sml-mask-from); mask-position: 0 var(--sml-mask-from);
  transform-origin: bottom left;
  transform: translate(var(--sml-x), var(--sml-y));
}
.sml.is-in .sml__line {
  -webkit-mask-position: 0 var(--sml-mask-to); mask-position: 0 var(--sml-mask-to);
  transform: none;
  transition:
    transform var(--sml-dur) var(--sml-ease),
    -webkit-mask-position var(--sml-mask-dur) var(--sml-ease),
    mask-position var(--sml-mask-dur) var(--sml-ease);
  transition-delay: calc(var(--sml-delay) + (var(--line, 1) - 1) * var(--sml-stagger));
}

@media (prefers-reduced-motion: reduce) {
  .sml__line { -webkit-mask-image: none; mask-image: none; transform: none; transition: none !important; opacity: 0; }
  .sml.is-in .sml__line { opacity: 1; }
}