/* Ambient visual treatment for the /websites landing page only.
   Scoped with :has(#services) so the SOC portfolio, admin, resume, request,
   and terms pages keep their existing presentation. */

body:has(#services) #root > div {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Slow-moving aurora behind the whole services page. */
body:has(#services) #root > div::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -22vh -18vw;
  pointer-events: none;
  opacity: 0.62;
  background:
    radial-gradient(circle at 18% 22%, rgba(20, 184, 166, 0.12), transparent 24%),
    radial-gradient(circle at 82% 30%, rgba(59, 130, 246, 0.11), transparent 24%),
    radial-gradient(circle at 58% 76%, rgba(8, 145, 178, 0.08), transparent 27%),
    radial-gradient(circle at 28% 82%, rgba(99, 102, 241, 0.06), transparent 21%);
  filter: blur(14px);
  transform: translate3d(0, 0, 0) scale(1.05);
  animation: mk-websites-aurora 22s ease-in-out infinite alternate;
}

/* Very light drifting star/dot field. */
body:has(#services) #root > div::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(circle, rgba(94, 234, 212, 0.52) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(125, 211, 252, 0.38) 0 1px, transparent 1.3px);
  background-position: 0 0, 37px 61px;
  background-size: 96px 96px, 137px 137px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  animation: mk-websites-stars 34s linear infinite;
}

body:has(#services) nav,
body:has(#services) main {
  position: relative;
  z-index: 1;
}

/* A few large decorative orbit/ring shapes, kept behind content. */
body:has(#services) #services,
body:has(#services) #pricing,
body:has(#services) #process,
body:has(#services) #work {
  position: relative;
  overflow: hidden;
}

body:has(#services) #services::before,
body:has(#services) #pricing::after,
body:has(#services) #process::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 28rem;
  height: 28rem;
  border-radius: 9999px;
  border: 1px solid rgba(45, 212, 191, 0.10);
  box-shadow:
    inset 0 0 0 52px rgba(20, 184, 166, 0.015),
    inset 0 0 0 104px rgba(56, 189, 248, 0.012),
    0 0 90px rgba(20, 184, 166, 0.025);
}

body:has(#services) #services::before {
  right: -12rem;
  top: 4rem;
  animation: mk-websites-orbit 18s ease-in-out infinite alternate;
}

body:has(#services) #pricing::after {
  left: -15rem;
  bottom: 2rem;
  width: 34rem;
  height: 34rem;
  border-color: rgba(96, 165, 250, 0.09);
  animation: mk-websites-orbit-reverse 24s ease-in-out infinite alternate;
}

body:has(#services) #process::before {
  right: -18rem;
  bottom: -11rem;
  width: 37rem;
  height: 37rem;
  border-color: rgba(45, 212, 191, 0.075);
  animation: mk-websites-orbit 26s ease-in-out infinite alternate;
}

/* Keep actual section content over the decorations. */
body:has(#services) #services > *,
body:has(#services) #pricing > *,
body:has(#services) #process > *,
body:has(#services) #work > * {
  position: relative;
  z-index: 1;
}

/* Gentle edge light on service cards. */
body:has(#services) #services article,
body:has(#services) #pricing article,
body:has(#services) #process article {
  transform-style: preserve-3d;
}

body:has(#services) #services article::after,
body:has(#services) #pricing article::after,
body:has(#services) #process article::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(115deg, transparent 22%, rgba(94, 234, 212, 0.10) 46%, rgba(125, 211, 252, 0.08) 55%, transparent 78%);
  background-size: 220% 100%;
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

body:has(#services) #services article:hover::after,
body:has(#services) #pricing article:hover::after,
body:has(#services) #process article:hover::after {
  opacity: 1;
  animation: mk-websites-card-sheen 1.35s ease forwards;
}

/* The real-project browser frame gets a slow breathing outer glow. */
body:has(#services) #work iframe {
  position: relative;
  z-index: 1;
}

body:has(#services) #work iframe:focus-visible {
  outline: 2px solid rgba(45, 212, 191, 0.7);
  outline-offset: -4px;
}

body:has(#services) #work > div > div:nth-child(2) > div:first-of-type {
  animation: mk-websites-browser-glow 7s ease-in-out infinite;
}

/* Small CTA shimmer, only while hovering. */
body:has(#services) a[href$="/request"] {
  position: relative;
  overflow: hidden;
}

body:has(#services) a[href$="/request"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -80%;
  bottom: -80%;
  left: -45%;
  width: 28%;
  opacity: 0;
  transform: rotate(18deg);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.28), transparent);
}

body:has(#services) a[href$="/request"]:hover::after {
  opacity: 1;
  animation: mk-websites-button-sheen 850ms ease-out forwards;
}

/* Thin animated accent rail beside the content as the page scrolls. */
body:has(#services) main::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 8rem;
  bottom: 8rem;
  left: max(1rem, calc((100vw - 80rem) / 2));
  width: 1px;
  opacity: 0.23;
  background: linear-gradient(to bottom, transparent, rgba(45, 212, 191, 0.75) 18%, rgba(56, 189, 248, 0.42) 54%, rgba(99, 102, 241, 0.34) 78%, transparent);
}

@keyframes mk-websites-aurora {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-1deg); }
  45% { transform: translate3d(2.5%, 1.8%, 0) scale(1.08) rotate(1deg); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.06) rotate(-0.5deg); }
}

@keyframes mk-websites-stars {
  from { background-position: 0 0, 37px 61px; }
  to { background-position: 96px 192px, -100px 198px; }
}

@keyframes mk-websites-orbit {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.98); }
  to { transform: translate3d(-1.5rem, 1rem, 0) rotate(7deg) scale(1.04); }
}

@keyframes mk-websites-orbit-reverse {
  from { transform: translate3d(0, 0, 0) rotate(3deg) scale(1.02); }
  to { transform: translate3d(1.7rem, -1.2rem, 0) rotate(-6deg) scale(0.97); }
}

@keyframes mk-websites-card-sheen {
  from { background-position: 160% 0; }
  to { background-position: -70% 0; }
}

@keyframes mk-websites-browser-glow {
  0%, 100% { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28), 0 0 0 rgba(20, 184, 166, 0); }
  50% { box-shadow: 0 30px 78px rgba(0, 0, 0, 0.34), 0 0 46px rgba(20, 184, 166, 0.055); }
}

@keyframes mk-websites-button-sheen {
  from { left: -45%; }
  to { left: 125%; }
}

@media (max-width: 900px) {
  body:has(#services) main::before {
    display: none;
  }

  body:has(#services) #services::before,
  body:has(#services) #pricing::after,
  body:has(#services) #process::before {
    opacity: 0.6;
    transform: scale(0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#services) #root > div::before,
  body:has(#services) #root > div::after,
  body:has(#services) #services::before,
  body:has(#services) #pricing::after,
  body:has(#services) #process::before,
  body:has(#services) #work > div > div:nth-child(2) > div:first-of-type,
  body:has(#services) #services article:hover::after,
  body:has(#services) #pricing article:hover::after,
  body:has(#services) #process article:hover::after,
  body:has(#services) a[href$="/request"]:hover::after {
    animation: none !important;
  }

  body:has(#services) #root > div::before,
  body:has(#services) #root > div::after {
    transform: none;
  }
}