/*
 * Subtle Rolling Dot Pattern — approved master settings.
 * Used by the Scotchtakens home hero and the Foundations reference example.
 */
.sw-dot-hero { isolation: isolate; }
.sw-dot-hero .sw-dot-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
 * Approved Streakwave dot field
 * Every dot lives in an 8 × 8px cell with a fixed 9px gutter. Column one has
 * Dot centers use a 12px pitch: 8px frames separated by a fixed 4px gutter.
 */
.sw-dot-hero .sw-dot-field {
  /* SVG rows top out at .5; .54 scales the visible base to .27. */
  opacity: .54 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='425' viewBox='0 0 17 425'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='4' cy='4' r='.5' fill-opacity='0'/%3E%3Ccircle cx='4' cy='21' r='1' fill-opacity='.021'/%3E%3Ccircle cx='4' cy='38' r='1.5' fill-opacity='.042'/%3E%3Ccircle cx='4' cy='55' r='2' fill-opacity='.063'/%3E%3Ccircle cx='4' cy='72' r='2.5' fill-opacity='.083'/%3E%3Ccircle cx='4' cy='89' r='3' fill-opacity='.104'/%3E%3Ccircle cx='4' cy='106' r='3.5' fill-opacity='.125'/%3E%3Ccircle cx='4' cy='123' r='4' fill-opacity='.146'/%3E%3Ccircle cx='4' cy='140' r='4' fill-opacity='.167'/%3E%3Ccircle cx='4' cy='157' r='4' fill-opacity='.188'/%3E%3Ccircle cx='4' cy='174' r='3.5' fill-opacity='.208'/%3E%3Ccircle cx='4' cy='191' r='3' fill-opacity='.229'/%3E%3Ccircle cx='4' cy='208' r='2.5' fill-opacity='.25'/%3E%3Ccircle cx='4' cy='225' r='2' fill-opacity='.271'/%3E%3Ccircle cx='4' cy='242' r='1.5' fill-opacity='.292'/%3E%3Ccircle cx='4' cy='259' r='1' fill-opacity='.313'/%3E%3Ccircle cx='4' cy='276' r='.5' fill-opacity='.333'/%3E%3Ccircle cx='4' cy='293' r='1' fill-opacity='.354'/%3E%3Ccircle cx='4' cy='310' r='1.5' fill-opacity='.375'/%3E%3Ccircle cx='4' cy='327' r='2' fill-opacity='.396'/%3E%3Ccircle cx='4' cy='344' r='2.5' fill-opacity='.417'/%3E%3Ccircle cx='4' cy='361' r='3' fill-opacity='.438'/%3E%3Ccircle cx='4' cy='378' r='3.5' fill-opacity='.458'/%3E%3Ccircle cx='4' cy='395' r='4' fill-opacity='.479'/%3E%3Ccircle cx='4' cy='412' r='4' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E") !important;
  /* Repeat column one across the width only; do not restart the sequence above it. */
  background-position: left bottom !important;
  background-repeat: repeat-x !important;
  background-size: 17px 425px !important;
  clip-path: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Remove the two competing layers retained by the earlier prototype. */
.sw-dot-hero .sw-dot-field--medium,
.sw-dot-hero .sw-dot-field--large { display: none !important; }

/* Ninety-five explicit dot columns from dot-pattern.txt; the complete unit repeats across the hero. */
.sw-dot-hero .sw-dot-field {
  /* The generated source carries the exact .09 → 0 ramp per row. */
  opacity: 1 !important;
  background-image: url("/assets/foundation-dot-lattice.svg?v=5.6.9") !important;
  background-size: 1140px 480px !important;
  animation: sw-dot-field-drift 14s ease-in-out infinite !important;
  will-change: transform;
}

/* Start bottom-aligned, ease down 5%, then return: no initial bottom gap. */
@keyframes sw-dot-field-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5%); }
}

@media (prefers-reduced-motion: reduce) {
  .sw-dot-hero .sw-dot-field {
    animation: none !important;
    transform: none !important;
  }
}

/* Each source column rolls after its neighbor; the parent remains bottom-aligned. */
.sw-dot-hero .sw-dot-field.sw-dot-field--rolling {
  background-image: none !important;
  animation: none !important;
  overflow: hidden;
}

/* Static counterpart for content sections; same lattice, no motion. */
.sw-dot-hero .sw-dot-field.sw-dot-field--static {
  background-image: none !important;
  animation: none !important;
  transform: none !important;
}

.sw-dot-hero .sw-dot-field--static .sw-dot-column {
  animation: none !important;
  transform: none !important;
}

.sw-dot-hero .sw-dot-column {
  position: absolute;
  inset-block: 0;
  width: 12px;
  background-image: url("/assets/foundation-dot-lattice.svg?v=5.6.9");
  background-repeat: no-repeat;
  background-size: 1140px 480px;
  opacity: var(--dot-opacity);
  animation: sw-dot-column-roll var(--dot-roll-duration, 12s) ease-in-out infinite;
  animation-delay: var(--dot-delay, calc(var(--dot-column) * .05106s));
  will-change: transform;
}

@keyframes sw-dot-column-roll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5%); }
}

@media (prefers-reduced-motion: reduce) {
  .sw-dot-hero .sw-dot-column {
    animation: none;
    transform: none;
  }
}