/* Only what Tailwind utilities cannot express. */

html {
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------------
   Infield clay: the base clay with a fine, slightly raked grain, like a
   freshly dragged infield. The grain only darkens, so chalk text contrast
   never drops below the flat-clay value (about 6:1).
--------------------------------------------------------------------------- */
.clay {
  background-color: #9a4321;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .24' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .08 0 0 0 0 .03 0 0 0 -.9 .52'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Chalk lines. main.js writes the geometry (a hand-wobbled path in real
   pixels, pathLength=1); this file draws it. A static noise mask breaks the
   stroke into chalk grain, rasterized once, so drawing stays cheap.
   - .chalk-load   draws once on page load (hero batter's box)
   - .chalk-scroll draws with scroll position via a view timeline, with an
                   IntersectionObserver fallback (.chalk-io / .is-drawn)
--------------------------------------------------------------------------- */
.chalk {
  overflow: visible;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.05'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.05'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 140px 140px;
  mask-size: 140px 140px;
}

.chalk path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 3;
  stroke-dashoffset: 1.05;
}

.chalk path + path {
  opacity: 0.5;
}

@keyframes chalk-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.chalk-load path {
  animation: chalk-draw 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.chalk-load path + path {
  animation-delay: 0.65s;
}

@supports (animation-timeline: view()) {
  .chalk-scroll {
    view-timeline-name: --chalk;
  }

  .chalk-scroll path {
    animation: chalk-draw linear both;
    animation-timeline: --chalk;
    animation-range: cover 6% cover 40%;
  }

  .chalk-scroll path + path {
    animation-range: cover 12% cover 46%;
  }
}

.chalk-io .chalk-scroll path {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.chalk-io .chalk-scroll path + path {
  transition-delay: 0.25s;
}

.chalk-io .chalk-scroll.is-drawn path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chalk path {
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
}