/* StringTune split + easing — aligned with skills/tutorial-10-split.html, themed for portfolio */

:root {
  --st-easing: cubic-bezier(0.86, 0, 0.31, 1);
}

/* Hero + section split headlines (StringTune adds .-splitted, .-s-char, .-inview) */
.hero h1 .hero-split-title.-splitted,
.sec-h .sec-split-title.-splitted {
  display: inline-flex;
  flex-wrap: wrap;
  overflow: hidden;
  vertical-align: baseline;
}

.hero h1 .hero-split-title.-splitted .-s-char,
.sec-h .sec-split-title.-splitted .-s-char {
  cursor: default;
  transform: translate3d(0, 120%, 0);
  will-change: transform;
}

.hero h1 .hero-split-title.-splitted.-inview .-s-char,
.sec-h .sec-split-title.-splitted.-inview .-s-char {
  transform: translate3d(0, 0, 0);
  transition: transform 0.88s var(--st-easing);
  transition-delay: calc((var(--char-start, 0) / 5) * 0.28s);
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero-split-title.-splitted .-s-char,
  .sec-h .sec-split-title.-splitted .-s-char {
    transform: none;
    transition: none;
  }
}

/* Mobile: avoid clipped split titles + tame delays on small viewports */
@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(26px, 7.2vw, 40px);
    line-height: 1.06;
    overflow-wrap: anywhere;
    hyphens: manual;
  }

  .hero h1 .hero-split-title.-splitted .-s-char {
    transition-duration: 0.68s;
    transition-delay: calc((var(--char-start, 0) / 5) * 0.15s);
  }

  .sec-h .sec-split-title.-splitted .-s-char {
    transition-duration: 0.68s;
    transition-delay: calc((var(--char-start, 0) / 5) * 0.18s);
  }
}

@media (max-width: 420px) {
  .hero-flow {
    aspect-ratio: auto;
    min-height: 200px;
  }

  .hero-flow-svg {
    min-height: 220px;
  }
}