/* ============================================================
   MozaikaDecor — Site Settings → CSS   (v2.1 — word roll on buttons)
   ============================================================ */

/* ---------- Word roll ----------
   Only on devices with a real mouse / trackpad. On iPad and phones
   (no hover) the links stay as normal text — no half-flipped state. */
@media (hover: hover) and (pointer: fine) {

  /* 1. The text box is the mask */
  .word-roll .tn-atom {
    overflow: hidden !important;
  }

  /* 2. The link: exactly one line tall, aligned to the top of the box.
        vertical-align: top removes the baseline gap that made the box
        taller than the link (so part of the old word stayed visible). */
  .word-roll .tn-atom a {
    display: inline-block !important;
    position: relative !important;
    vertical-align: top !important;
    line-height: inherit !important;
    text-decoration: none !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    color: inherit !important;
  }

  /* 3. The duplicate word, directly under the original */
  .word-roll .tn-atom a::after {
    content: attr(data-text) !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 100% !important;
    height: 100% !important;

    /* 🌟 HOVER COLOR 🌟 */
    color: #5c5b59 !important;
  }

  /* 4. Hover: slide up by exactly one line */
  .word-roll:hover .tn-atom a {
    transform: translateY(-100%) !important;
  }

  /* 5. BUTTON elements — the engine wraps the label in .wr-mask > .wr-in.
        The mask is exactly one line tall, so the copy is hidden until hover. */
  .word-roll .wr-mask {
    display: inline-block !important;
    overflow: hidden !important;
    vertical-align: top !important;
  }
  .word-roll .wr-in {
    display: inline-block !important;
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
  .word-roll .wr-in::after {
    content: attr(data-text) !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 100% !important;
    height: 100% !important;
    color: #5c5b59 !important;   /* 🌟 HOVER COLOR (buttons) 🌟 */
  }
  .word-roll:hover .wr-in {
    transform: translateY(-100%) !important;
  }
}
/* ---------- /Word roll ---------- */

/* The old .reveal-line-mask / .reveal-line-text styles are no longer
   needed — the text reveal is now a gradient and doesn't split lines. */
   
   
/* 1. Base hidden state using your working code structure */
.draw-on-hover svg path {
  stroke-dasharray: 1000 !important;
  stroke-dashoffset: 1000 !important;
  transition: stroke-dashoffset 1.6s ease-in-out !important; 
}

/* 2. The active drawing state (Triggered automatically instead of hover) */
.draw-on-hover.is-drawing svg path {
  stroke-dashoffset: 0 !important;
}


/* ---------- Lenis smooth scroll (engine runs it from HEAD) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
/* ---------- /Lenis ---------- */