/* SecureLynx Page Transition Layer
   Stronger harmonic section focus: blue/green energy transfer, edge sweep, corner lock, and exit decay.
   Safe rollback: remove this file and the page-transition.js include from includes/footer.php. */

:root {
  --slx-transition-header-offset: 88px;
  --slx-harmonic-cyan: 0, 224, 255;
  --slx-harmonic-green: 48, 255, 172;
  --slx-harmonic-blue: 34, 120, 255;
  --slx-field-strength: 1;
}

html.slx-section-scroll-ready {
  scroll-behavior: smooth;
  scroll-padding-top: var(--slx-transition-header-offset);
}

body.slx-section-transitioning {
  overscroll-behavior-y: contain;
}

.slx-transition-section {
  position: relative;
  isolation: isolate;
  scroll-margin-top: var(--slx-transition-header-offset);
  transition:
    filter 560ms ease,
    box-shadow 760ms ease,
    background-color 760ms ease;
}

@media (min-width: 1025px) {
  main > section.slx-transition-section:not(.tight):not(.assessment-section):not(.assessment-hero) {
  min-height: calc(100svh - var(--slx-transition-header-offset));
  display: flex;
  align-items: center;
}

  main > section.slx-transition-section.tight {
    min-height: min(78svh, 760px);
    display: flex;
    align-items: center;
  }
}

/* Field + edge illumination. Content does not move or scale. */
.slx-transition-section::before,
.slx-transition-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 720ms ease,
    transform 880ms cubic-bezier(.18, .82, .28, 1),
    filter 720ms ease;
}

.slx-transition-section::before {
  inset: clamp(9px, 1.15vw, 18px);
  z-index: -1;
  border-radius: clamp(22px, 2.2vw, 38px);
  background:
    linear-gradient(90deg, transparent, rgba(var(--slx-harmonic-cyan), .95), rgba(var(--slx-harmonic-green), .72), transparent) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(var(--slx-harmonic-blue), .54), rgba(var(--slx-harmonic-green), .86), rgba(var(--slx-harmonic-cyan), .58), transparent) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent, rgba(var(--slx-harmonic-cyan), .76), rgba(var(--slx-harmonic-green), .30), transparent) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent, rgba(var(--slx-harmonic-blue), .48), rgba(var(--slx-harmonic-cyan), .68), transparent) right / 2px 100% no-repeat;
  box-shadow:
    0 0 42px rgba(var(--slx-harmonic-cyan), .31),
    0 0 92px rgba(var(--slx-harmonic-green), .19),
    0 0 132px rgba(var(--slx-harmonic-blue), .11),
    inset 0 0 64px rgba(var(--slx-harmonic-cyan), .11),
    inset 0 0 104px rgba(var(--slx-harmonic-green), .075);
  transform: translateY(24px);
  filter: saturate(1.1);
}

.slx-transition-section::after {
  inset: -2px 0;
  z-index: -2;
  background:
    radial-gradient(circle at 10% 16%, rgba(var(--slx-harmonic-cyan), .34), transparent 25%),
    radial-gradient(circle at 88% 76%, rgba(var(--slx-harmonic-green), .27), transparent 31%),
    radial-gradient(circle at 48% 50%, rgba(var(--slx-harmonic-blue), .12), transparent 46%),
    linear-gradient(115deg, transparent 14%, rgba(var(--slx-harmonic-cyan), .12), rgba(var(--slx-harmonic-green), .085), transparent 72%);
  filter: blur(3px);
  transform: translateY(34px);
}

.slx-transition-section.is-section-active::before,
.slx-transition-section.is-section-active::after {
  opacity: calc(.96 * var(--slx-field-strength));
  transform: translateY(0);
}

.slx-transition-section.is-section-active {
  filter: saturate(1.13) contrast(1.055) brightness(1.025);
}

/* Exit decay lets the previous section cool down instead of switching off abruptly. */
.slx-transition-section.is-section-exiting::before {
  opacity: .42;
  transform: translateY(-12px);
  transition-duration: 1050ms;
}

.slx-transition-section.is-section-exiting::after {
  opacity: .24;
  transform: translateY(-18px);
  transition-duration: 1150ms;
}

/* Harmonic layers injected by JS. */
.slx-harmonic-sweep,
.slx-harmonic-corners,
.slx-harmonic-current {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 460ms ease;
}

/* Strong visible energy transfer sweep. */
.slx-harmonic-sweep::before,
.slx-harmonic-sweep::after {
  content: "";
  position: absolute;
  left: -16%;
  right: -16%;
  top: -28%;
  height: 46%;
  transform: translateY(-130%);
}

.slx-harmonic-sweep::before {
  background: linear-gradient(180deg,
    transparent,
    rgba(var(--slx-harmonic-cyan), .28),
    rgba(var(--slx-harmonic-green), .18),
    transparent);
  filter: blur(20px);
}

.slx-harmonic-sweep::after {
  height: 2px;
  top: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--slx-harmonic-cyan), .95),
    rgba(var(--slx-harmonic-green), .85),
    transparent);
  box-shadow:
    0 0 24px rgba(var(--slx-harmonic-cyan), .56),
    0 0 46px rgba(var(--slx-harmonic-green), .36);
}

.slx-transition-section.is-section-active .slx-harmonic-sweep,
.slx-transition-section.is-section-exiting .slx-harmonic-sweep {
  opacity: 1;
}

.slx-transition-section.is-section-entering .slx-harmonic-sweep::before {
  animation: slxFieldSweep 1250ms cubic-bezier(.16, .82, .22, 1) both;
}

.slx-transition-section.is-section-entering .slx-harmonic-sweep::after {
  animation: slxEdgeTrace 1250ms cubic-bezier(.16, .82, .22, 1) both;
}

@keyframes slxFieldSweep {
  0% { transform: translateY(-145%); opacity: 0; }
  20% { opacity: 1; }
  74% { opacity: .82; }
  100% { transform: translateY(360%); opacity: 0; }
}

@keyframes slxEdgeTrace {
  0% { transform: translateY(-120%); opacity: 0; }
  16% { opacity: 1; }
  70% { opacity: .85; }
  100% { transform: translateY(calc(100svh - var(--slx-transition-header-offset))); opacity: 0; }
}

/* Corner lock-on: visible, but not arcade. */
.slx-harmonic-corners {
  inset: clamp(9px, 1.15vw, 18px);
  border-radius: clamp(22px, 2.2vw, 38px);
}

.slx-harmonic-corners::before,
.slx-harmonic-corners::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--slx-harmonic-cyan), .95) 0 72px, transparent 72px calc(100% - 72px), rgba(var(--slx-harmonic-green), .85) calc(100% - 72px)) top left / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--slx-harmonic-green), .80) 0 72px, transparent 72px calc(100% - 72px), rgba(var(--slx-harmonic-cyan), .75) calc(100% - 72px)) bottom left / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--slx-harmonic-cyan), .88) 0 72px, transparent 72px calc(100% - 72px), rgba(var(--slx-harmonic-green), .70) calc(100% - 72px)) top left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(var(--slx-harmonic-green), .82) 0 72px, transparent 72px calc(100% - 72px), rgba(var(--slx-harmonic-cyan), .70) calc(100% - 72px)) top right / 2px 100% no-repeat;
  filter: drop-shadow(0 0 14px rgba(var(--slx-harmonic-cyan), .54)) drop-shadow(0 0 28px rgba(var(--slx-harmonic-green), .28));
}

.slx-harmonic-corners::after {
  inset: 8px;
  opacity: .45;
  filter: blur(8px);
}

.slx-transition-section.is-section-active .slx-harmonic-corners {
  opacity: .92;
  animation: slxCornerPulse 2200ms ease-in-out infinite;
}

@keyframes slxCornerPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.22) saturate(1.18); }
}

/* Thin internal current line for movement while the active section is settled. */
.slx-harmonic-current {
  background:
    linear-gradient(110deg,
      transparent 0%,
      transparent 42%,
      rgba(var(--slx-harmonic-cyan), .105) 48%,
      rgba(var(--slx-harmonic-green), .085) 52%,
      transparent 60%,
      transparent 100%);
  filter: blur(.5px);
  mix-blend-mode: screen;
}

.slx-transition-section.is-section-active .slx-harmonic-current {
  opacity: .78;
  animation: slxHarmonicCurrent 5200ms linear infinite;
}

@keyframes slxHarmonicCurrent {
  0% { transform: translateX(-26%); }
  100% { transform: translateX(26%); }
}

body.slx-section-transitioning .substrate-grid,
body.slx-section-transitioning .substrate-network,
body.slx-section-transitioning .substrate-points {
  filter: saturate(1.32) brightness(1.18);
}

@media (max-width: 1024px) {
  html.slx-section-scroll-ready { scroll-behavior: auto; }

  .slx-transition-section::before,
  .slx-transition-section::after,
  .slx-harmonic-sweep,
  .slx-harmonic-corners,
  .slx-harmonic-current {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.slx-section-scroll-ready { scroll-behavior: auto; }

  .slx-transition-section,
  .slx-transition-section::before,
  .slx-transition-section::after,
  .slx-harmonic-sweep,
  .slx-harmonic-sweep::before,
  .slx-harmonic-sweep::after,
  .slx-harmonic-corners,
  .slx-harmonic-current {
    transition: none !important;
    animation: none !important;
  }
}