@import "./occurrence-base.css";

.pattern-section .pattern-card {
  --card-delay: 0ms;
}

.pattern-section .pattern-card:nth-child(2) { --card-delay: 80ms; }
.pattern-section .pattern-card:nth-child(3) { --card-delay: 160ms; }
.pattern-section .pattern-card:nth-child(4) { --card-delay: 240ms; }
.pattern-section .pattern-card:nth-child(5) { --card-delay: 320ms; }
.pattern-section .pattern-card:nth-child(6) { --card-delay: 400ms; }

.pattern-section .pattern-rows > div {
  --row-delay: 0ms;
}

.pattern-section .pattern-rows > div:nth-child(2) { --row-delay: 110ms; }
.pattern-section .pattern-rows > div:nth-child(3) { --row-delay: 220ms; }

.pattern-section .pattern-rows i b {
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: transform 900ms cubic-bezier(.22, .75, .2, 1);
  transition-delay: calc(var(--card-delay) + var(--row-delay));
}

.pattern-section.is-visible .pattern-rows i b {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .pattern-section .pattern-rows i b {
    transform: scaleX(1);
    transition: none;
  }
}