/* =========================================================
   SECTION INTERLOCK
   clip paths + fine interlock reveal + brief connection glow
   ========================================================= */

/* -----------------------------------------
   CLIP PATHS
   ----------------------------------------- */

.section-clip-top {
  clip-path: polygon(
    0 35px,
    50% 0,
    100% 35px,
    100% 100%,
    0 100%
  );
  margin-top: -35px;
}

.section-clip-bottom {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    50% calc(100% - 35px),
    0 100%
  );
}

.section-clip-both {
  clip-path: polygon(
    0 35px,
    50% 0,
    100% 35px,
    100% 100%,
    50% calc(100% - 35px),
    0 100%
  );
  margin-top: -35px;
}

/* -----------------------------------------
   BASE INTERLOCK STATE
   Apply only to sections you want to animate
   ----------------------------------------- */

.section-interlock {
  position: relative;
  isolation: isolate;
  will-change: transform, opacity, filter;
  transition: none;
}

/* subtle resting offset before viewport entry */
.section-interlock--from-right {
  transform: translate3d(100px, 100px, 0);
}

.section-interlock--from-left {
  transform: translate3d(-20px, 20px, 0);
}

.section-interlock:not(.is-visible):not(.is-locking):not(.is-locked) {
  opacity: 0;
  filter: blur(1.5px);
}

/* -----------------------------------------
   PASS 1 — reveal / approach
   slow, fine, controlled
   ----------------------------------------- */

.section-interlock.is-visible {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity 480ms ease,
    filter 520ms ease,
    transform 900ms cubic-bezier(0.22, 0.72, 0.18, 1);
}

/* still not fully locked: keep a tiny gap */
.section-interlock--from-right.is-visible {
  transform: translate3d(8px, 10px, 0);
}

.section-interlock--from-left.is-visible {
  transform: translate3d(-8px, 10px, 0);
}

/* -----------------------------------------
   PASS 2 — final lock
   faster end phase / slight "clack"
   ----------------------------------------- */

.section-interlock.is-locking {
  transition:
    transform 240ms cubic-bezier(0.18, 0.9, 0.2, 1.18),
    opacity 180ms ease,
    filter 180ms ease;
}

.section-interlock--from-right.is-locking,
.section-interlock--from-left.is-locking,
.section-interlock.is-locked {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: blur(0);
}

/* -----------------------------------------
   CONNECTION GLOW
   short pulse when the section locks
   desktop only
   ----------------------------------------- */

/*.section-interlock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: min(320px, 44vw);
  height: 18px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(68, 102, 170, 0.34) 0%,
      rgba(68, 102, 170, 0.16) 35%,
      rgba(68, 102, 170, 0.05) 58%,
      rgba(68, 102, 170, 0) 78%
    );
  filter: blur(10px);
}

.section-interlock.is-locking::after {
  animation: sectionInterlockGlow 440ms ease-out 1;
}*/



@keyframes sectionInterlockGlow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.82);
  }
  28% {
    opacity: 0.92;
    transform: translateX(-50%) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(1.08);
  }
}

/* optional helpers */
.section-interlock--glow-top::after {
  top: -6px;
  bottom: auto;
}

.section-interlock--glow-bottom::after {
  top: auto;
  bottom: -6px;
}

/* -----------------------------------------
   SVG SEAM OVERLAY
   present from the beginning, moves with the section
   glow only on lock, then overlay fades out
   desktop only
   ----------------------------------------- */

.section-interlock-seam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  pointer-events: none;
  z-index: 8;
  opacity: 1;
}

.section-interlock.is-locked .section-interlock-seam {
  opacity: 0;
  visibility: hidden;/**/
  pointer-events: none;
}

.section-interlock-seam__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.section-interlock-seam__line,
.section-interlock-seam__glow {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-interlock-seam__line {
  stroke: rgba(20, 38, 68, 0.82);
  stroke-width: 1.15;
  opacity: 0.92;
}

.section-interlock-seam__glow {
  stroke: rgba(58, 94, 156, 0);
  stroke-width: 1.8;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(58, 94, 156, 0))
          drop-shadow(0 0 6px rgba(58, 94, 156, 0));
}

.section-interlock.is-locking .section-interlock-seam__glow {
  animation: seamGlowPulse 480ms ease-out 1;
}

.section-interlock.is-seam-fading .section-interlock-seam {
  animation: seamOverlayFade 260ms ease-out 1 forwards;
}

@keyframes seamGlowPulse {
  0% {
    opacity: 0;
    stroke: rgba(58, 94, 156, 0);
    filter: drop-shadow(0 0 2px rgba(58, 94, 156, 0))
            drop-shadow(0 0 6px rgba(58, 94, 156, 0));
  }
  35% {
    opacity: 1;
    stroke: rgba(58, 94, 156, 0.92);
    filter: drop-shadow(0 0 3px rgba(58, 94, 156, 0.28))
            drop-shadow(0 0 8px rgba(58, 94, 156, 0.24));
  }
  100% {
    opacity: 0;
    stroke: rgba(58, 94, 156, 0);
    filter: drop-shadow(0 0 2px rgba(58, 94, 156, 0))
            drop-shadow(0 0 6px rgba(58, 94, 156, 0));
  }
}

@keyframes seamOverlayFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* -----------------------------------------
   REDUCED MOTION
   ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .section-interlock,
  .section-interlock--from-right,
  .section-interlock--from-left,
  .section-interlock.is-visible,
  .section-interlock.is-locking,
  .section-interlock.is-locked {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .section-interlock::after,
  .section-interlock-seam,
  .section-interlock-seam__line,
  .section-interlock-seam__glow {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* -----------------------------------------
   MOBILE
   keep the effect lighter and more controlled
   ----------------------------------------- */

@media (max-width: 768px) {
  .section-clip-top {
    clip-path: polygon(
      0 24px,
      50% 0,
      100% 24px,
      100% 100%,
      0 100%
    );
    margin-top: -24px;
  }

  .section-clip-bottom {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      50% calc(100% - 24px),
      0 100%
    );
  }

  .section-clip-both {
    clip-path: polygon(
      0 24px,
      50% 0,
      100% 24px,
      100% 100%,
      50% calc(100% - 24px),
      0 100%
    );
    margin-top: -24px;
  }

  .section-interlock--from-right {
    transform: translate3d(12px, 14px, 0);
  }

  .section-interlock--from-left {
    transform: translate3d(-12px, 14px, 0);
  }

  .section-interlock--from-right.is-visible {
    transform: translate3d(4px, 8px, 0);
  }

  .section-interlock--from-left.is-visible {
    transform: translate3d(-4px, 8px, 0);
  }

  .section-interlock::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .section-interlock-seam,
  .section-interlock-seam__svg,
  .section-interlock-seam__line,
  .section-interlock-seam__glow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}