/**
 * Vandrende bånd i kontakt- og nettsidesjekk-komposisjonen.
 * Brukes av contact.html og gratis-nettsidesjekk.html.
 *
 * Bygget etter referansens oppskrift (Konstruktive Grafik / swissincss):
 * fire IDENTISKE kvadrater, der kun posisjon og farge skiller dem.
 *
 *   - rect fyller SVG-en 100 % × 100 %, stroke sentreres på kanten, og
 *     ytre halvdel klippes av overflow: hidden på båndets div.
 *     Satt 80px → synlig 40px = 5,2 % av stagens bredde.
 *     (Referansen: 55 → 27,5 = 5,5 % av plakatbredden.)
 *   - stroke-dasharray = nøyaktig halve omkretsen, målt i JS.
 *   - SAMME varighet på alle fire. Det er synkroniseringen som gjør at
 *     de leser som én bevegelse — ikke formen, som aldri ses.
 *
 * Containeren er barn av .contact-form-section, ikke av stagen, så
 * båndene når det grå feltets under- og overkant. Overkanten settes av
 * --rules-top, som assets/contact-path.js måler til CTA-båndets
 * underkant. Finnes ikke noe CTA-bånd, blir den 0 og båndene starter
 * ved seksjonens overkant.
 *
 * Lagdeling: containeren ligger på z-index: -1 inne i seksjonens egen
 * stacking context (isolation: isolate på .contact-form-section). Da
 * males den over seksjonens bg-mist, men under alt innhold — inkludert
 * CTA-båndet og <h2> på gratis-nettsidesjekk.
 *
 * overflow: hidden på containeren er det som hindrer at båndene lekker
 * ut av seksjonen, oppover eller ned i footeren.
 */

.ss-contact__rules {
  position: absolute;
  top: var(--rules-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  --ss-rule-scale: 1;
  /* Referansens kurve: myk akselerasjon, og en bremsing mot null i
     vendepunktet som er det som gir pausen i rytmen. */
  --rule-ease: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  /* Halv stagebredde. Båndene er skjult under 1024px, og der er
     (100vw − 96px) / 2 alltid ≥ 464px, så dette er eksakt 24rem. */
  --stage-half: min(24rem, (100vw - 96px) / 2);
}

/* Fire identiske kvadrater. Siden er 55 % av containerhøyden — stor nok
   til at begge armer alltid forlater en klippekant, liten nok til at
   28–40 % av stien er i bildet (referansen ligger på ~30 %).
   max() er en garanti for svært brede skjermer: over ~2400px vokser
   margen forbi 55 % av høyden, og da må siden følge etter for at den
   vannrette armen fortsatt skal nå ut. */
.ss-contact__rule {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  height: max(55%, calc(50vw - var(--stage-half) + 40px));
}

.ss-contact__rule svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ss-contact__rule rect {
  fill: none;
  stroke-linejoin: miter;
  stroke-width: calc(80px * var(--ss-rule-scale));
  stroke-dasharray: 1600;
  animation: ruleTravel 7s var(--rule-ease) infinite alternate;
}

/* Referansens oppsett: én sving fram og tilbake, uten hvilefaser.
   Stoppet ligger i vendepunktet, der easing-kurven bremser til null.

   Trinnvise keyframes med hold ble prøvd og forkastet: et støt på et
   halvt mønster får strek og glippe til å bytte plass, noe som leser
   som ombytting framfor bevegelse.

   7s, ikke referansens 5s — dette ligger bak et skjema som skal fylles
   ut. Det var varigheten, ikke kurven, som avgjorde om vendepunktet
   registrerte seg som rytme. */
@keyframes ruleTravel {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: var(--rule-len, 4800);
  }
}

/* ── De fire hjørnene ─────────────────────────────────────────────────
   Venstre kvadrater strekker seg til venstre (right = stagens venstrekant),
   høyre strekker seg til høyre (left = stagens høyrekant).
   Øvre strekker seg oppover (bottom = hjørnets y), nedre nedover (top).
   Armene peker bort fra skjemaet, så y er fri — klaringen er horisontal:
   72px til venstre for skjemaet, 280px til høyre. */

/* Venstre topp — hvit, hjørne på 18 % */
.ss-contact__rule--vt {
  z-index: 0;
  right: calc(50% + var(--stage-half));
  bottom: 82%;
}
.ss-contact__rule--vt rect {
  stroke: #ffffff;
}

/* Venstre loddrett — svart, HELT RETT: ingen sving, ingen hjørne.
   Krysser den vannrette armen til det hvite båndet over.

   height 200 % med top: -50 % legger begge vannrette kanter utenfor
   containeren, så streken er ubrutt fra topp til bunn og begge ender
   klippes av containerkanten.

   width og right er valgt slik at venstre kant alltid lander på -5 % av
   containerbredden (altså garantert utenfor), mens høyre kant lander
   50 % ut i venstre marg:
     høyre kant  = 100% - (75% + SH·0.5)          = 25% - SH·0.5
     venstre kant = høyre kant - (30% - SH·0.5)   = -5%
   Rektanglet holdes smalt med vilje: et fullbreddes rektangel ville gitt
   en omkrets på ~10700 og et synlig vindu på 7 %, altså blinking. Slik
   ligger vinduet på 20-24 %. */
.ss-contact__rule--vs {
  z-index: 3;
  aspect-ratio: auto;
  top: -50%;
  height: 200%;
  width: calc(30% - var(--stage-half) * 0.5);
  right: calc(75% + var(--stage-half) * 0.5);
}
.ss-contact__rule--vs rect {
  stroke: #0a0a0a;
}

/* Høyre topp — svart, hjørne på 36 % */
.ss-contact__rule--ht {
  z-index: 1;
  left: calc(50% + var(--stage-half));
  bottom: 64%;
}
.ss-contact__rule--ht rect {
  stroke: #0a0a0a;
}

/* Høyre — rød, hjørne på 50 %. Armer ned + høyre.
   Ikke høyere enn dette uten to andre endringer: over 45 % rekker ikke
   den loddrette armen containerens underkant med kvadratside 55 %, og
   under ~44 % kommer den vannrette armen nærmere det svarte båndet
   (36 %) enn 60px. Det siste avhenger kun av prosentdifferansen mellom
   de to båndene, ikke av kvadratstørrelsen — skal rødt høyere, må svart
   flyttes samtidig. */
.ss-contact__rule--hb {
  z-index: 2;
  left: calc(50% + var(--stage-half));
  top: 50%;
}
.ss-contact__rule--hb rect {
  stroke: #ff1e3c;
}

/* ── Play/pause ───────────────────────────────────────────────────────
   Uendelige animasjoner skal ikke male når seksjonen er utenfor skjermen. */

html.js .ss-contact__rule rect {
  animation-play-state: paused;
}
html.js .contact-form-section.is-rules-running .ss-contact__rule rect {
  animation-play-state: running;
}

/* ── Under 1024px er det synlige vinduet nede i 4–7 % av stien ────────
   Det synlige vinduet er loddrett arm + marg, og margen kollapser mot
   null når stagen nærmer seg viewportbredden. Da leser båndene som
   stubber framfor som bevegelse, uansett kvadratstørrelse. */

@media (max-width: 1023px) {
  .ss-contact__rules {
    display: none;
  }
}

/* ── reduced-motion: synlige, men statiske ────────────────────────────
   Uten dash er hele kvadratet strøket, så det synlige løpet er dekket i
   hele sin lengde. Ingen ende kan da falle midt i feltet.              */

@media (prefers-reduced-motion: reduce) {
  .ss-contact__rule rect {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}