/**
 * JAMS profile arrow motifs — layered chevrons only (no pixel/dot fields).
 * Matches company-profile nested cyan → blue → navy arrows.
 */

:root {
  --jams-motif-cyan: #00aeef;
  --jams-motif-cyan-bright: #5fd4f8;
  --jams-motif-blue: #0078d7;
  --jams-motif-navy: #003a7a;
  --jams-motif-deep: #001f4d;
}

.jams-motif-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.jams-motif-host > *:not(.jams-motif) {
  position: relative;
  z-index: 1;
}

.jams-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ========== Nested upward chevrons (profile arrows) ========== */

.jams-motif--chevrons .jams-motif__stack {
  position: absolute;
  left: -4%;
  bottom: -8%;
  width: min(44vw, 480px);
  height: min(62%, 440px);
}

.jams-motif--chevrons.jams-motif--br .jams-motif__stack {
  left: auto;
  right: -2%;
  transform: scaleX(-1);
}

.jams-motif__arrows {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.jams-motif__arrows path {
  transform-origin: 18% 100%;
  transform-box: fill-box;
  animation: jamsArrowRise 1.05s cubic-bezier(0.22, 1, 0.36, 1) both,
    jamsArrowGlow 7s ease-in-out infinite;
}

.jams-motif__arrows .a1 {
  fill: var(--jams-motif-cyan-bright);
  animation-delay: 0s, 0.9s;
}

.jams-motif__arrows .a2 {
  fill: var(--jams-motif-cyan);
  animation-delay: 0.1s, 1.1s;
}

.jams-motif__arrows .a3 {
  fill: var(--jams-motif-blue);
  animation-delay: 0.2s, 1.3s;
}

.jams-motif__arrows .a4 {
  fill: var(--jams-motif-navy);
  animation-delay: 0.3s, 1.5s;
}

.jams-motif__arrows .a5 {
  fill: var(--jams-motif-deep);
  animation-delay: 0.4s, 1.7s;
}

@keyframes jamsArrowRise {
  from {
    opacity: 0;
    transform: translate3d(-28px, 40px, 0) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes jamsArrowGlow {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.1) saturate(1.08);
  }
}

/* ========== Corner nested arrows (top-right / top-left) ========== */

.jams-motif--corners .jams-motif__stack {
  position: absolute;
  top: -6%;
  right: -4%;
  width: min(46vw, 520px);
  height: min(46vw, 520px);
}

.jams-motif--corners.jams-motif--tl .jams-motif__stack {
  right: auto;
  left: -4%;
  transform: scaleX(-1);
}

.jams-motif__corner {
  display: block;
  width: 100%;
  height: 100%;
}

.jams-motif__corner path {
  transform-origin: 100% 0;
  transform-box: fill-box;
  animation: jamsCornerIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both,
    jamsArrowGlow 8s ease-in-out infinite;
}

.jams-motif__corner .c1 {
  fill: var(--jams-motif-cyan-bright);
  opacity: 0.88;
  animation-delay: 0s, 0.8s;
}

.jams-motif__corner .c2 {
  fill: var(--jams-motif-cyan);
  opacity: 0.9;
  animation-delay: 0.08s, 1s;
}

.jams-motif__corner .c3 {
  fill: var(--jams-motif-blue);
  opacity: 0.92;
  animation-delay: 0.16s, 1.2s;
}

.jams-motif__corner .c4 {
  fill: var(--jams-motif-navy);
  opacity: 0.95;
  animation-delay: 0.24s, 1.4s;
}

.jams-motif__corner .c5 {
  fill: var(--jams-motif-deep);
  opacity: 1;
  animation-delay: 0.32s, 1.6s;
}

@keyframes jamsCornerIn {
  from {
    opacity: 0;
    transform: translate3d(36px, -28px, 0) scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ========== Hero / slider: solid left-pointing arrows (all page heroes) ========== */

.nectar-slider-wrap .swiper-slide,
.jams-about-hero,
.jams-auth-hero,
.jams-wwd-hero,
.jams-svc-hero,
.jams-prod-hero,
#footer-outer,
#footer-outer #footer-widgets.jams-footer-widgets {
  position: relative;
  overflow: hidden;
}

.jams-motif--slider {
  z-index: 2;
  opacity: 1;
  mix-blend-mode: normal;
}

.jams-motif--slider .jams-motif__stack {
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 0.55 / 1;
  max-width: min(38vw, 420px);
  max-height: 100%;
  opacity: 1;
  transform: none;
  transition: none;
}

.jams-motif--slider .jams-motif__arrows {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.jams-motif--slider .jams-motif__arrows path {
  filter: none !important;
  opacity: 0;
  transform: translate3d(72px, 0, 0);
  transform-box: fill-box;
  transform-origin: right center;
}

.nectar-slider-wrap .swiper-slide-active .jams-motif--slider .jams-motif__arrows path,
.jams-motif--slider-static .jams-motif__arrows path {
  animation: jamsSliderArrowLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 4 layers: cyan → brand → blue → navy */
.jams-motif--slider .jams-motif__arrows .a1 {
  fill: #5fd4f8;
  --jams-arrow-op: 0.72;
}

.jams-motif--slider .jams-motif__arrows .a2 {
  fill: #00aeef;
  --jams-arrow-op: 0.66;
}

.jams-motif--slider .jams-motif__arrows .a3 {
  fill: #0078d7;
  --jams-arrow-op: 0.6;
}

.jams-motif--slider .jams-motif__arrows .a4 {
  fill: #002e5d;
  --jams-arrow-op: 0.54;
}

.nectar-slider-wrap .swiper-slide-active .jams-motif--slider .jams-motif__arrows .a1,
.jams-motif--slider-static .jams-motif__arrows .a1 {
  animation-delay: 0s;
}

.nectar-slider-wrap .swiper-slide-active .jams-motif--slider .jams-motif__arrows .a2,
.jams-motif--slider-static .jams-motif__arrows .a2 {
  animation-delay: 0.14s;
}

.nectar-slider-wrap .swiper-slide-active .jams-motif--slider .jams-motif__arrows .a3,
.jams-motif--slider-static .jams-motif__arrows .a3 {
  animation-delay: 0.28s;
}

.nectar-slider-wrap .swiper-slide-active .jams-motif--slider .jams-motif__arrows .a4,
.jams-motif--slider-static .jams-motif__arrows .a4 {
  animation-delay: 0.42s;
}

@keyframes jamsSliderArrowLeft {
  from {
    opacity: 0;
    transform: translate3d(72px, 0, 0);
  }
  to {
    opacity: var(--jams-arrow-op, 0.64);
    transform: translate3d(0, 0, 0);
  }
}

.nectar-slider-wrap .container,
.nectar-slider-wrap .content,
.jams-about-hero__copy,
.jams-about-hero__visual,
.jams-auth-hero__inner,
.jams-wwd-hero__inner,
.jams-svc-hero__inner,
.jams-prod-hero__inner,
#footer-outer .container,
#footer-outer #footer-widgets > *:not(.jams-motif--slider) {
  position: relative;
  z-index: 3;
}

/* Footer arrows: same look, no motion, more transparent */
.jams-motif--slider-footer .jams-motif__arrows .a1 {
  --jams-arrow-op: 0.28;
}

.jams-motif--slider-footer .jams-motif__arrows .a2 {
  --jams-arrow-op: 0.24;
}

.jams-motif--slider-footer .jams-motif__arrows .a3 {
  --jams-arrow-op: 0.2;
}

.jams-motif--slider-footer .jams-motif__arrows .a4 {
  --jams-arrow-op: 0.16;
}

.jams-motif--slider-footer .jams-motif__arrows path {
  animation: none !important;
  opacity: var(--jams-arrow-op, 0.22) !important;
  transform: none !important;
}

.jams-motif--slider-footer .jams-motif__stack {
  max-width: min(34vw, 380px);
  opacity: 1;
}

/* ========== Chevron photo mask (hero) — no dots ========== */

.jams-motif-photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: var(--jams-motif-navy);
  clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%);
}

.jams-motif-photo__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: jamsMotifPhotoZoom 18s ease-out forwards;
  filter: grayscale(0.12) contrast(1.06);
}

.jams-motif-photo__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(0, 31, 77, 0.72) 0%,
    rgba(0, 120, 215, 0.45) 48%,
    rgba(0, 174, 239, 0.55) 100%
  );
  animation: jamsMotifWashShift 10s ease-in-out infinite alternate;
}

@keyframes jamsMotifPhotoZoom {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1.02);
  }
}

@keyframes jamsMotifWashShift {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}

/* ========== Responsive ========== */

@media (max-width: 999px) {
  .jams-motif--chevrons .jams-motif__stack {
    width: min(72vw, 380px);
    height: min(52%, 320px);
    opacity: 0.9;
  }

  .jams-motif--corners .jams-motif__stack {
    width: min(56vw, 300px);
    height: min(56vw, 300px);
    top: -3%;
    right: -8%;
  }

  .jams-motif--slider .jams-motif__stack {
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    height: 100%;
    width: auto;
    aspect-ratio: 0.55 / 1;
    max-width: min(42vw, 340px);
    transform: none;
  }

  .jams-motif-photo {
    clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .jams-motif--chevrons .jams-motif__stack {
    width: min(88vw, 300px);
    height: 240px;
    opacity: 0.5;
  }

  .jams-motif--corners .jams-motif__stack {
    width: 190px;
    height: 190px;
    opacity: 0.55;
  }

  .jams-motif--slider {
    mix-blend-mode: normal;
    opacity: 1;
  }

  .jams-motif--slider .jams-motif__stack {
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 0.55 / 1;
    max-width: min(48vw, 260px);
    transform: none;
  }

  .jams-motif-photo {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jams-motif__arrows path,
  .jams-motif__corner path,
  .jams-motif-photo__img,
  .jams-motif-photo__wash {
    animation: none !important;
  }

  .jams-motif--slider .jams-motif__stack {
    transform: none !important;
    transition: none !important;
  }

  .jams-motif--slider .jams-motif__arrows path,
  .nectar-slider-wrap .swiper-slide-active .jams-motif--slider .jams-motif__arrows path,
  .jams-motif--slider-static .jams-motif__arrows path {
    animation: none !important;
    opacity: var(--jams-arrow-op, 0.64) !important;
    transform: none !important;
  }

  .jams-motif-photo__img {
    transform: scale(1.02);
  }
}