/* Brand pattern accents - sparse, animated */

.mg-patterns {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.mg-patterns,
.mg-patterns__el {
  background: transparent !important;
  background-color: transparent !important;
}

.mg-patterns__el {
  position: absolute;
  display: block;
  max-width: none;
  overflow: visible;
}

.mg-patterns svg,
.mg-patterns svg * {
  box-sizing: content-box;
}

.mg-patterns__el--dots {
  mix-blend-mode: multiply;
}

.mg-patterns__el--arc-navy,
.mg-patterns__el--arc-red,
.mg-patterns__el--arc-gold {
  mix-blend-mode: multiply;
}

.mg-patterns__el--arc-navy path,
.mg-patterns__el--arc-red path,
.mg-patterns__el--arc-gold path {
  fill-rule: evenodd;
  stroke: none;
}

.mg-patterns__el--dots {
  width: 96px;
  height: auto;
  opacity: 0.5;
  animation: mg-pat-drift 16s ease-in-out infinite;
}

.mg-patterns__el--arc-navy {
  width: min(26vw, 200px);
  height: auto;
  opacity: 1;
  animation: mg-pat-sway 12s ease-in-out infinite;
}

.mg-patterns__el--arc-red {
  width: min(16vw, 128px);
  height: auto;
  opacity: 1;
  animation: mg-pat-bob 10s ease-in-out infinite;
  animation-delay: -2.5s;
}

.mg-patterns__el--arc-gold {
  width: min(20vw, 168px);
  height: auto;
  opacity: 1;
  animation: mg-pat-sway 13s ease-in-out infinite reverse;
  animation-delay: -4s;
}

/* Preset A: dots + navy arc */
.mg-patterns--a .mg-patterns__el--dots { left: 3%; top: 14%; }
.mg-patterns--a .mg-patterns__el--arc-navy { right: 4%; top: 6%; }
.mg-patterns--a .mg-patterns__el--arc-red,
.mg-patterns--a .mg-patterns__el--arc-gold { display: none; }

/* Preset B: red + gold arcs */
.mg-patterns--b .mg-patterns__el--arc-red { left: 6%; bottom: 12%; }
.mg-patterns--b .mg-patterns__el--arc-gold { right: 8%; bottom: 8%; }
.mg-patterns--b .mg-patterns__el--dots,
.mg-patterns--b .mg-patterns__el--arc-navy { display: none; }

/* Preset C: dots + navy + gold */
.mg-patterns--c .mg-patterns__el--dots { right: 5%; bottom: 18%; }
.mg-patterns--c .mg-patterns__el--arc-navy { left: 4%; top: 20%; width: min(20vw, 150px); }
.mg-patterns--c .mg-patterns__el--arc-gold { right: 12%; top: 8%; width: min(16vw, 130px); }
.mg-patterns--c .mg-patterns__el--arc-red { display: none; }

/* Preset D: dots + red (rotated) */
.mg-patterns--d .mg-patterns__el--dots { left: 8%; bottom: 10%; }
.mg-patterns--d .mg-patterns__el--arc-red { right: 5%; top: 12%; transform: rotate(90deg); animation-name: mg-pat-spin-bob; }
.mg-patterns--d .mg-patterns__el--arc-navy,
.mg-patterns--d .mg-patterns__el--arc-gold { display: none; }

/* Hero: fuller but still sparse corners */
.mg-patterns--hero .mg-patterns__el--dots { left: 4%; top: 16%; opacity: 0.55; }
.mg-patterns--hero .mg-patterns__el--arc-navy { right: 5%; top: 8%; }
.mg-patterns--hero .mg-patterns__el--arc-red { left: 36%; bottom: 12%; }
.mg-patterns--hero .mg-patterns__el--arc-gold { right: 12%; bottom: 8%; }

/* CTA band */
.mg-patterns--cta .mg-patterns__el--dots { left: 4%; top: 18%; opacity: 0.28; }
.mg-patterns--cta .mg-patterns__el--arc-gold { right: 6%; bottom: 10%; opacity: 1; }
.mg-patterns--cta .mg-patterns__el--arc-red { left: 8%; bottom: 14%; opacity: 1; }
.mg-patterns--cta .mg-patterns__el--arc-navy { display: none; }

/* Site-wide overlay is disabled so arcs do not sit on top of cards as solid slabs */
.mg-patterns--site {
  display: none !important;
}

.mg-patterns--site .mg-patterns__el--dots {
  left: 1.25rem;
  top: 7.5rem;
  opacity: 0.55;
}

.mg-patterns--site .mg-patterns__el--arc-navy {
  right: 1rem;
  top: 7rem;
  width: min(26vw, 200px);
}

.mg-patterns--site .mg-patterns__el--arc-red {
  left: 2%;
  bottom: 18%;
}

.mg-patterns--site .mg-patterns__el--arc-gold {
  right: 5.5rem;
  bottom: 7rem;
}

.section.has-mg-patterns,
.page-hero.has-mg-patterns,
.cta-band.has-mg-patterns {
  position: relative;
  overflow: hidden;
}

.section.has-mg-patterns > .container,
.cta-band.has-mg-patterns > * {
  position: relative;
  z-index: 1;
}

.page-hero.has-mg-patterns > .container {
  position: relative;
  z-index: 3;
}

.page-hero .mg-patterns {
  z-index: 2;
  pointer-events: none;
}

.section--soft .mg-patterns__el--dots { opacity: 0.4; }
.section--soft .mg-patterns__el--arc-navy,
.section--soft .mg-patterns__el--arc-red,
.section--soft .mg-patterns__el--arc-gold { opacity: 1; }

.section--navy .mg-patterns__el--arc-navy { opacity: 0.25; }
.section--navy .mg-patterns__el--dots circle,
.cta-band .mg-patterns__el--dots circle,
.page-hero .mg-patterns__el--dots circle { fill: rgba(255, 255, 255, 0.35); }
.page-hero.has-mg-patterns .mg-patterns__el--dots { opacity: 0.35; }
.page-hero.has-mg-patterns .mg-patterns__el--arc-navy,
.page-hero.has-mg-patterns .mg-patterns__el--arc-red,
.page-hero.has-mg-patterns .mg-patterns__el--arc-gold { opacity: 1; }

@keyframes mg-pat-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, -12px); }
}

@keyframes mg-pat-sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, 8px) rotate(-3deg); }
}

@keyframes mg-pat-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes mg-pat-spin-bob {
  0%, 100% { transform: rotate(90deg) translateY(0); }
  50% { transform: rotate(90deg) translateY(-10px); }
}

@keyframes mg-pat-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.7; }
}

.mg-patterns.is-inview .mg-patterns__el--dots {
  animation: mg-pat-drift 16s ease-in-out infinite, mg-pat-pulse 7s ease-in-out infinite;
}

@media (max-width: 767px) {
  .mg-patterns__el--dots { width: 72px; }
  .mg-patterns__el--arc-navy { width: min(34vw, 140px); }
  .mg-patterns__el--arc-red { width: min(24vw, 96px); }
  .mg-patterns__el--arc-gold { width: min(28vw, 120px); }
  .mg-patterns--c .mg-patterns__el--arc-gold,
  .mg-patterns--hero .mg-patterns__el--arc-red { display: none; }
  .mg-patterns--site .mg-patterns__el--arc-gold { right: 4.5rem; bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-patterns__el { animation: none !important; }
}
