/* ==========================================================================
   Jumaro AI — display typography layer
   --------------------------------------------------------------------------
   The large headings were static blocks of text. This gives them a line-mask
   reveal: each line rises from behind its own edge, staggered, so the heading
   assembles itself rather than simply appearing.

   Everything is gated behind html.jm-motion and the .jm-split class, both of
   which only ever come from the script. With no JS, or with reduced motion,
   the heading is ordinary fully-visible text.

   The masks carry vertical padding with matching negative margins. Spanish
   display copy is full of accents and descenders — á, é, í, ñ, g, y, j — and
   an overflow:hidden line without that padding clips them.
   ========================================================================== */

.jm-line{
  display:block;
  overflow:hidden;
  padding-top:.12em;
  padding-bottom:.18em;
  margin-top:-.12em;
  margin-bottom:-.18em;
}

.jm-line-i{
  display:block;
  will-change:transform;
}

html.jm-motion .jm-split .jm-line-i{
  transform:translate3d(0,110%,0);
  opacity:.001;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),
             opacity .5s linear;
  transition-delay:var(--jm-ld,0ms);
}

html.jm-motion .jm-split.jm-in .jm-line-i{
  transform:translate3d(0,0,0);
  opacity:1;
}

/* A split heading manages its own entrance, so suppress the block-level
   fade/blur it would otherwise inherit from the generic reveal. */
html.jm-motion .jm-split.jm-reveal,
html.jm-motion .jm-split.jm-reveal.jm-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* The accent rule under the heading waits for the last line to land. */
html.jm-motion .jm-split.jm-reveal::after{
  transition-delay:var(--jm-rule-delay,.45s);
}

/* Once split, the lines are block elements — balancing no longer applies and
   would only fight the measured line breaks. */
.jm-split{ text-wrap:initial; }

/* --------------------------------------------------------------------------
   Lede paragraphs directly under a display heading get a slightly later,
   softer entrance so the heading leads and the supporting copy follows.
   -------------------------------------------------------------------------- */
html.jm-motion .jm-lede.jm-reveal{
  transform:translate3d(0,22px,0);
  transition-duration:.9s;
}

@media (prefers-reduced-motion:reduce){
  html.jm-motion .jm-split .jm-line-i,
  html.jm-motion .jm-split.jm-in .jm-line-i{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .jm-line{ overflow:visible; }
}