/* ============================================================================
   Kvanta22 / MC-Outpost motion layer
   - Loaded after the Astro design system so it can add motion without rewriting
     component styles.
   - Nothing is hidden in CSS. When JavaScript or GSAP is unavailable, the site
     remains fully visible and usable.
   ========================================================================== */

html {
  overflow-x: hidden;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

body > main,
body > .footer {
  position: relative;
  z-index: 1;
}

/* ---- subtle global depth field ------------------------------------------------ */
.motion-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0.74;
}

.motion-atmosphere__grid,
.motion-atmosphere__glow {
  position: absolute;
  inset: -12%;
  will-change: transform;
}

.motion-atmosphere__grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent-2) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 72%);
  opacity: 0.18;
}

.motion-atmosphere__glow--a {
  inset: -28% -18% auto auto;
  width: min(72vw, 1040px);
  height: min(72vw, 1040px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 68%);
  filter: blur(18px);
  opacity: 0.68;
}

.motion-atmosphere__glow--b {
  inset: auto auto -34% -20%;
  width: min(66vw, 920px);
  height: min(66vw, 920px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 69%);
  filter: blur(22px);
  opacity: 0.58;
}

/* ---- docked navigation -------------------------------------------------------- */
body > .nav {
  transition:
    background-color 0.38s var(--ease),
    border-color 0.38s var(--ease),
    box-shadow 0.38s var(--ease);
}

body > .nav .nav__brandplate,
body > .nav .nav__wordmark,
body > .nav .nav__links {
  transition: transform 0.38s var(--ease), opacity 0.38s var(--ease);
}

body > .nav.motion-docked {
  /* Keep the sticky outer box height stable while scrolling. Shrinking the
     box itself forces layout reflow and can feed visible micro-jitter back
     into the scroll position. The inner brand treatment still compacts. */
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent-2) 24%, var(--line));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

body > .nav.motion-docked .nav__brandplate {
  transform: scale(0.88);
}

body > .nav.motion-docked .nav__wordmark {
  transform: translateX(-0.18rem);
}

body > .nav .nav__cta {
  position: relative;
  overflow: hidden;
  background-size: 180% 100%;
  transition:
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-position 0.55s var(--ease);
}

body > .nav .nav__cta:hover {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow: 0 0 28px var(--glow);
}

body > .nav .nav__burger span {
  transform-origin: center;
  transition: transform 0.28s var(--ease), opacity 0.2s ease;
}

body > .nav .nav__cb:checked + .nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body > .nav .nav__cb:checked + .nav__burger span:nth-child(2) {
  opacity: 0;
}

body > .nav .nav__cb:checked + .nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- motion surfaces: cards, pillars, transmissions --------------------------- */
.motion-surface {
  isolation: isolate;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

html.motion-capable .motion-surface {
  transition-property: border-color, box-shadow;
}

.tx.motion-surface {
  position: relative;
  overflow: hidden;
}

.motion-surface > :not(.motion-surface-glow) {
  position: relative;
  z-index: 2;
}

.motion-surface-glow {
  position: absolute;
  z-index: 1;
  left: var(--motion-glow-x, 50%);
  top: var(--motion-glow-y, 50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--card-accent, var(--accent-2)) 24%, transparent),
    transparent 68%
  );
  filter: blur(4px);
  transition: opacity 0.34s var(--ease);
}

.motion-surface:hover .motion-surface-glow,
.motion-surface:focus-within .motion-surface-glow {
  opacity: 0.85;
}

/* ---- buttons ------------------------------------------------------------------ */
.btn .motion-btn-sheen {
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: -42%;
  width: 28%;
  pointer-events: none;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  opacity: 0;
  transition: transform 0.68s var(--ease), opacity 0.24s ease;
}

.btn:hover .motion-btn-sheen,
.btn:focus-visible .motion-btn-sheen {
  transform: skewX(-18deg) translateX(560%);
  opacity: 0.78;
}

.btn .btn__chevrons {
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}

.btn:hover .btn__chevrons,
.btn:focus-visible .btn__chevrons {
  transform: translate(4px, -1px);
  opacity: 1;
}

/* ---- framed media ------------------------------------------------------------- */
.motion-media {
  transform-origin: center;
}

.hero__visual {
  transform-origin: center center;
}

.grad-text {
  background-size: 190% 100%;
}

/* ---- Technology DNA ----------------------------------------------------------- */
.motion-dna-ready .dna li {
  transition:
    opacity 0.38s var(--ease),
    transform 0.38s var(--ease),
    color 0.38s var(--ease),
    text-shadow 0.38s var(--ease);
}

@media (min-width: 960px) {
  .motion-dna-ready .dna li {
    opacity: 0.5;
    transform: translateX(0);
  }

  .motion-dna-ready .dna li.motion-dna-active {
    opacity: 1;
    transform: translateX(8px);
    color: color-mix(in srgb, var(--text) 92%, var(--accent));
    text-shadow: 0 0 26px color-mix(in srgb, var(--accent-2) 17%, transparent);
  }
}

/* ---- signal bridge ------------------------------------------------------------ */
.bridge-visual,
.bridge {
  position: relative;
  isolation: isolate;
}

.bridge-visual {
  overflow: hidden;
}

.motion-bridge-sweep {
  position: absolute;
  z-index: 3;
  inset: -18% auto -18% -24%;
  width: 28%;
  pointer-events: none;
  transform: skewX(-15deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--accent) 10%, transparent) 18%,
      color-mix(in srgb, var(--accent-2) 38%, transparent) 48%,
      color-mix(in srgb, var(--bridge) 24%, transparent) 68%,
      transparent
    );
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.bridge {
  overflow: hidden;
}

.bridge > .motion-bridge-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 120% at 82% 50%, color-mix(in srgb, var(--bridge) 12%, transparent), transparent 68%),
    linear-gradient(90deg, transparent 15%, color-mix(in srgb, var(--accent-2) 4%, transparent), transparent 84%);
  opacity: 0.7;
}

.bridge > .motion-bridge-rail {
  position: absolute;
  z-index: 1;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  bottom: 0;
  height: 1px;
  pointer-events: none;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-2) 22%,
    var(--bridge) 70%,
    transparent
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--bridge) 36%, transparent);
}

.bridge .bridge__inner {
  position: relative;
  z-index: 2;
}

/* ---- Twin Core synchronization ------------------------------------------------ */
.motion-twin-core {
  --twin-lock: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.motion-twin-core::before,
.motion-twin-core::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.motion-twin-core::before {
  inset: 0;
  background:
    radial-gradient(circle at 35% 50%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 25%),
    radial-gradient(circle at 65% 50%, color-mix(in srgb, var(--accent-2) 25%, transparent), transparent 25%);
  mix-blend-mode: screen;
  opacity: var(--twin-lock);
}

.motion-twin-core::after {
  left: 35%;
  right: 35%;
  top: 50%;
  height: 1px;
  transform: scaleX(var(--twin-lock));
  transform-origin: center;
  background: linear-gradient(90deg, var(--accent), #ffffff, var(--accent-2));
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 34px color-mix(in srgb, var(--accent-2) 48%, transparent);
  opacity: var(--twin-lock);
}

/* ---- focus-safe micro-interactions -------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .nav__brand:hover .nav__symbol-image {
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--accent-2) 38%, transparent));
  }
}

/* ---- tablet and mobile --------------------------------------------------------- */
@media (max-width: 959px), (hover: none), (pointer: coarse) {
  .motion-atmosphere {
    opacity: 0.46;
  }

  .motion-atmosphere__grid,
  .motion-atmosphere__glow {
    will-change: auto;
  }

  .motion-atmosphere__grid {
    background-size: 54px 54px;
    opacity: 0.1;
  }

  .motion-atmosphere__glow--a,
  .motion-atmosphere__glow--b {
    filter: blur(12px);
    opacity: 0.42;
  }

  .motion-media,
  .motion-media img {
    will-change: auto;
  }

  .motion-surface {
    transform-style: flat;
  }

  .motion-surface-glow {
    display: none;
  }

  .motion-bridge-sweep {
    width: 38%;
    filter: blur(3px);
    opacity: 0.62;
  }

  body > .nav .nav__links {
    top: 100% !important;
    max-height: calc(100svh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: color-mix(in srgb, var(--bg-2) 96%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38);
  }
}

@media (max-width: 880px) {
  body > .nav.motion-docked .nav__brandplate {
    transform: scale(0.9);
  }
}

@media (max-width: 560px) {
  .bridge .bridge__inner {
    align-items: stretch;
  }

  .bridge .bridge__copy {
    width: 100%;
  }

  .bridge > .motion-bridge-rail {
    left: var(--gutter);
    right: var(--gutter);
  }

  .motion-twin-core::after {
    left: 31%;
    right: 31%;
  }
}