/* oobCREATIVE doodle system
   Brand rule: same hand, never the same stroke twice.
   Shared primitives for irregular ink rules and restrained hand-drawn motion.
*/
:root {
  --oob-doodle-ease: cubic-bezier(.2, .78, .22, 1);
  --oob-doodle-wiggle-duration: 3.1s;
  --oob-doodle-draw-duration: .55s;
  --oob-doodle-ink: var(--ink, #111111);
  --oob-doodle-blue: var(--ballpoint, #244aa5);
}

/* Reusable motion primitives for future inline SVG/HTML doodles. */
.oob-doodle-wiggle {
  transform-box: fill-box;
  transform-origin: center;
  animation: oob-doodle-wiggle var(--oob-doodle-wiggle-duration) ease-in-out infinite;
}

.oob-doodle-draw {
  stroke-dasharray: var(--oob-doodle-path, 1);
  stroke-dashoffset: var(--oob-doodle-path, 1);
  animation: oob-doodle-draw var(--oob-doodle-draw-duration) var(--oob-doodle-ease) var(--oob-doodle-delay, 0s) forwards;
}

@keyframes oob-doodle-wiggle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  27% { transform: translate(.45px, -.35px) rotate(.08deg); }
  58% { transform: translate(-.35px, .45px) rotate(-.07deg); }
  81% { transform: translate(.2px, .15px) rotate(.04deg); }
}

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

/* Structural ink rules. Each rule uses a different contour so the page never
   reads like one tiled image repeated over and over. */
.rough-rule {
  height: 12px;
  background: var(--oob-doodle-ink);
  transform-origin: center;
}

main > .rough-rule:nth-of-type(1) {
  clip-path: polygon(0 48%,4% 31%,9% 43%,15% 19%,21% 52%,27% 36%,34% 58%,41% 25%,48% 46%,55% 28%,63% 55%,70% 34%,77% 49%,84% 23%,91% 44%,96% 30%,100% 47%,100% 65%,95% 78%,89% 59%,82% 81%,75% 62%,68% 76%,61% 58%,54% 80%,47% 61%,39% 74%,31% 55%,24% 79%,17% 63%,10% 75%,5% 58%,0 70%);
}

main > .rough-rule:nth-of-type(2) {
  clip-path: polygon(0 38%,5% 51%,11% 24%,18% 45%,25% 29%,32% 54%,40% 34%,47% 20%,54% 48%,62% 31%,69% 57%,76% 27%,83% 50%,90% 36%,96% 55%,100% 41%,100% 72%,94% 61%,88% 80%,81% 59%,74% 74%,66% 57%,59% 79%,51% 63%,44% 77%,36% 56%,29% 71%,22% 60%,15% 82%,8% 64%,3% 76%,0 66%);
}

main > .rough-rule:nth-of-type(3) {
  clip-path: polygon(0 54%,6% 27%,13% 39%,19% 22%,26% 49%,33% 31%,39% 56%,46% 37%,52% 24%,59% 51%,65% 35%,72% 20%,79% 46%,86% 30%,93% 53%,100% 32%,100% 61%,96% 77%,90% 64%,84% 82%,77% 58%,70% 76%,63% 60%,56% 72%,49% 57%,42% 81%,35% 62%,28% 74%,21% 57%,14% 79%,8% 61%,0 73%);
}

main > .rough-rule:nth-of-type(4) {
  clip-path: polygon(0 30%,7% 46%,14% 25%,20% 55%,27% 37%,34% 19%,41% 48%,48% 33%,55% 58%,62% 26%,69% 43%,76% 31%,84% 52%,91% 22%,97% 40%,100% 35%,100% 75%,95% 62%,89% 79%,82% 59%,75% 73%,68% 55%,61% 80%,54% 64%,47% 76%,40% 58%,33% 72%,26% 61%,19% 78%,12% 57%,6% 70%,0 63%);
}

main > .rough-rule:nth-of-type(5) {
  clip-path: polygon(0 45%,5% 21%,12% 50%,19% 34%,25% 57%,32% 28%,38% 42%,45% 24%,52% 55%,58% 36%,65% 48%,72% 19%,79% 44%,86% 29%,93% 54%,100% 37%,100% 68%,93% 77%,87% 58%,80% 82%,73% 63%,66% 74%,59% 56%,52% 79%,45% 60%,38% 75%,31% 54%,24% 80%,17% 62%,10% 72%,4% 59%,0 73%);
}

main > .rough-rule:nth-of-type(6) {
  clip-path: polygon(0 34%,6% 56%,13% 29%,20% 41%,27% 18%,34% 51%,41% 35%,48% 59%,55% 27%,62% 46%,69% 25%,76% 52%,83% 38%,90% 21%,96% 49%,100% 31%,100% 70%,94% 58%,88% 81%,81% 63%,74% 77%,67% 56%,60% 73%,53% 61%,46% 83%,39% 59%,32% 74%,25% 57%,18% 79%,11% 62%,5% 75%,0 60%);
}

main > .rough-rule:nth-of-type(7) {
  clip-path: polygon(0 52%,5% 35%,12% 20%,19% 47%,26% 32%,33% 55%,40% 26%,47% 43%,54% 30%,61% 58%,68% 36%,75% 22%,82% 49%,89% 28%,95% 46%,100% 40%,100% 64%,94% 79%,87% 60%,80% 76%,73% 57%,66% 82%,59% 62%,52% 75%,45% 55%,38% 78%,31% 61%,24% 72%,17% 58%,10% 81%,4% 63%,0 70%);
}

/* The header receives its own irregular edge rather than borrowing a divider. */
.site-header::after {
  clip-path: polygon(0 42%,5% 31%,11% 46%,18% 27%,24% 48%,31% 35%,38% 51%,45% 29%,52% 44%,59% 33%,66% 49%,73% 25%,80% 43%,87% 34%,94% 50%,100% 30%,100% 67%,95% 61%,89% 76%,82% 58%,75% 72%,68% 60%,61% 77%,54% 57%,47% 73%,40% 61%,33% 75%,26% 56%,19% 70%,12% 60%,6% 74%,0 63%);
}

@media (prefers-reduced-motion: reduce) {
  .oob-doodle-wiggle,
  .oob-doodle-draw {
    animation: none !important;
  }
  .oob-doodle-draw { stroke-dashoffset: 0; }
}