/**
 * Subtle continuous motion for gradients and background images.
 * Respects prefers-reduced-motion.
 */

@keyframes km-mesh-drift {
  0% {
    transform: translate(-6%, -4%) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(5%, 6%) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translate(-4%, 3%) scale(1.02);
    opacity: 0.9;
  }
}

@keyframes km-ken-burns {
  from {
    transform: scale(1.02) translate(0, 0);
  }
  to {
    transform: scale(1.1) translate(1.2%, -1.2%);
  }
}

@keyframes km-bg-pan {
  from {
    transform: scale(1.18) translate(0, 0);
  }
  to {
    transform: scale(1.28) translate(3%, -2.5%);
  }
}

.page-about .km-page-hero::after,
.page-contact .km-page-hero::after {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 35%, rgba(14, 29, 66, 0.28), transparent 42%),
    radial-gradient(circle at 78% 62%, rgba(0, 60, 140, 0.22), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(14, 29, 66, 0.12), transparent 45%);
  animation: km-mesh-drift 22s ease-in-out infinite alternate;
  z-index: 0;
}

.page-about .km-page-hero .container,
.page-contact .km-page-hero .container {
  z-index: 1;
}

.page-about .km-about-intro {
  position: relative;
  overflow: hidden;
}

.page-about .km-about-intro::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(14, 29, 66, 0.06) 0%, transparent 42%),
    linear-gradient(300deg, rgba(0, 80, 160, 0.05) 0%, transparent 50%);
  animation: km-mesh-drift 28s ease-in-out infinite alternate-reverse;
  z-index: 0;
}

.page-about .km-about-intro .container {
  position: relative;
  z-index: 1;
}

.page-about .km-about-pillars {
  position: relative;
  overflow: hidden;
}

.page-about .km-about-pillars::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(118deg, rgba(14, 29, 66, 0.07) 0%, transparent 45%),
    linear-gradient(300deg, rgba(0, 70, 150, 0.05) 0%, transparent 50%);
  animation: km-mesh-drift 26s ease-in-out infinite alternate-reverse;
}

.page-about .km-about-pillars .container {
  position: relative;
  z-index: 1;
}

.page-about .km-about-ceo::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(14, 29, 66, 0.18), transparent 42%),
    radial-gradient(circle at 90% 80%, rgba(14, 29, 66, 0.15), transparent 40%);
  animation: km-mesh-drift 24s ease-in-out infinite alternate;
}

.page-about .km-about-ceo .container {
  position: relative;
  z-index: 1;
}

.page-about .km-about-ceo__frame {
  overflow: hidden;
  border-radius: inherit;
}

.page-about .km-about-ceo__frame img {
  animation: km-ken-burns 30s ease-in-out infinite alternate-reverse;
  will-change: transform;
}

.page-about .km-about-intro__figure {
  overflow: hidden;
}

.page-about .km-about-intro__figure img {
  animation: km-ken-burns 32s ease-in-out infinite alternate;
  will-change: transform;
}

.page-site .km-drift-bg {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 62vh, 36rem);
}

.page-site .km-drift-bg::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  background-color: #121a24;
  background-image: var(--km-drift-img);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: km-bg-pan 36s ease-in-out infinite alternate;
  will-change: transform;
}

.page-site .km-drift-bg > * {
  position: relative;
  z-index: 1;
}

.page-site:not(.page-home) .km-subpage-hero::after,
.page-supply .km-subpage-hero--tail::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(14, 29, 66, 0.22), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(0, 90, 180, 0.15), transparent 42%);
  animation: km-mesh-drift 24s ease-in-out infinite alternate;
}

.page-site:not(.page-home) .km-subpage-hero .container {
  z-index: 1;
}

/* ——— Architecture gallery band ——— */
.page-architecture .team_section.layout_padding {
  position: relative;
  overflow: hidden;
}

.page-architecture .team_section.layout_padding::before {
  content: "";
  position: absolute;
  inset: -14%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(118deg, rgba(14, 29, 66, 0.06) 0%, transparent 48%),
    linear-gradient(305deg, rgba(0, 70, 150, 0.05) 0%, transparent 52%);
  animation: km-mesh-drift 30s ease-in-out infinite alternate-reverse;
}

.page-architecture .team_section.layout_padding .container {
  position: relative;
  z-index: 1;
}

/* ——— Services: showcase grid atmosphere ——— */
.page-service .km-service-showcase {
  position: relative;
  overflow: hidden;
}

.page-service .km-service-showcase::before {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(14, 29, 66, 0.12), transparent 45%),
    radial-gradient(circle at 92% 75%, rgba(124, 58, 237, 0.1), transparent 42%);
  animation: km-mesh-drift 26s ease-in-out infinite alternate;
}

.page-service .km-service-showcase .container {
  position: relative;
  z-index: 1;
}

/* ——— Training cards band ——— */
.page-training .trainings {
  position: relative;
  overflow: hidden;
}

.page-training .trainings::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(125deg, rgba(14, 29, 66, 0.07) 0%, transparent 50%),
    linear-gradient(285deg, rgba(0, 90, 180, 0.05) 0%, transparent 48%);
  animation: km-mesh-drift 32s ease-in-out infinite alternate-reverse;
}

.page-training .trainings .container {
  position: relative;
  z-index: 1;
}

/* ——— Privacy: soft drift behind copy ——— */
.page-privacy main.container {
  position: relative;
  overflow: hidden;
}

.page-privacy main.container::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(14, 29, 66, 0.06), transparent 55%);
  animation: km-mesh-drift 36s ease-in-out infinite alternate;
}

.page-privacy main.container > * {
  position: relative;
  z-index: 1;
}

/* ——— Project detail ——— */
.page-project .km-page-hero--project {
  position: relative;
}

.page-project .km-page-hero--project::after {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(14, 29, 66, 0.2), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(14, 29, 66, 0.14), transparent 40%);
  animation: km-mesh-drift 22s ease-in-out infinite alternate;
}

.page-project .km-page-hero--project .container {
  z-index: 1;
}

.page-project .km-project-detail {
  position: relative;
  overflow: hidden;
}

.page-project .km-project-detail::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(120deg, rgba(14, 29, 66, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(124, 58, 237, 0.08), transparent 42%);
  animation: km-mesh-drift 28s ease-in-out infinite alternate-reverse;
}

.page-project .km-project-detail__inner {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-about .km-page-hero::after,
  .page-contact .km-page-hero::after,
  .page-about .km-about-intro::before,
  .page-about .km-about-pillars::before,
  .page-about .km-about-ceo::after,
  .page-about .km-about-intro__figure img,
  .page-about .km-about-ceo__frame img,
  .page-site .km-drift-bg::before,
  .page-site:not(.page-home) .km-subpage-hero::after,
  .page-supply .km-subpage-hero--tail::after,
  .page-architecture .team_section.layout_padding::before,
  .page-service .km-service-showcase::before,
  .page-training .trainings::before,
  .page-privacy main.container::before,
  .page-project .km-page-hero--project::after,
  .page-project .km-project-detail::before {
    animation: none !important;
  }

  .page-about .km-about-intro__figure img,
  .page-about .km-about-ceo__frame img {
    transform: none;
  }
}