/* ============================================================
   Hairy Melon — Playful animation styles
   Powers playful-anim.js (squish, magnetic, burst, cycle, tilt, scrawl)
   ============================================================ */

/* --- 01 · Squish letters ---------------------------------- */
[data-squish] .sq-word {
  display: inline-block;
  white-space: nowrap; /* letters stay together; lines break only at spaces */
}
[data-squish] .ch {
  display: inline-block;
  transition: transform .55s cubic-bezier(.34,1.7,.4,.96), color .35s;
  transform-origin: 50% 100%;
  will-change: transform;
}
/* squish hover removed — animation rationing */
[data-squish] .ch.is-space { display: inline; }

/* --- 02 · Magnetic button -------------------------------- */
[data-magnetic] {
  transition: transform .35s cubic-bezier(.34,1.5,.5,1), background .2s, color .2s, border-color .2s;
  will-change: transform;
}

/* --- 03 · Seed burst (confetti) -------------------------- */
.burst-bit {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}

/* --- 04 · Word cycle ------------------------------------- */
.cycle-slot {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  text-align: center;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  /* width is set by JS to the current word */
}
.cycle-slot .word {
  display: inline-block;
  white-space: nowrap;
  transition:
    transform .45s cubic-bezier(.34,1.56,.64,1),
    opacity   .35s ease;
  will-change: transform, opacity;
}
.cycle-slot .word.out   { transform: translateY(-22%) rotate(-4deg); opacity: 0; position: absolute; left: 0; right: 0; text-align: center; }
.cycle-slot .word.enter { transform: translateY(22%)  rotate(4deg);  opacity: 0; position: absolute; left: 0; right: 0; text-align: center; }
.cycle-slot .word.in    { transform: translateY(0)    rotate(0);     opacity: 1; }

/* tilt removed — animation rationing */

/* --- 07 · Scrawl underline (draw-in) --------------------- */
.scrawl {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scrawl > svg.scrawl-svg {
  position: absolute;
  left: -4%;
  right: -4%;
  width: 108%;
  bottom: -0.18em;
  height: 0.32em;
  overflow: visible;
  pointer-events: none;
}
.scrawl > svg.scrawl-svg path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.1s cubic-bezier(.5,.1,.3,1);
}
.scrawl.is-drawn > svg.scrawl-svg path { stroke-dashoffset: 0; }
.scrawl.scrawl-cream > svg.scrawl-svg path { stroke: var(--coral-soft); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-squish] .ch,
  [data-magnetic],
  [data-tilt],
  .cycle-slot .word,
  .scrawl > svg.scrawl-svg path { transition: none !important; }
  .cycle-slot .word.out, .cycle-slot .word.enter { opacity: 1; transform: none; position: static; }
  .scrawl.is-drawn > svg.scrawl-svg path { stroke-dashoffset: 0; }
}