/* Disruption Joe activation layer: subtle signal field, toned-down depth, text-clipped shimmer. */

:root {
  --dj-activation-tan: #D4BC94;
  --dj-activation-cream: #f0ece4;
  --dj-activation-white: #f5f5f5;
  --dj-activation-black: #0a0a0a;
}

body.dj-activation-page {
  overflow-x: hidden;
}

html.dj-activation-root {
  overflow-x: hidden;
}

body.dj-activation-page main {
  position: relative;
  isolation: isolate;
}

body.dj-activation-page main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 18%, rgba(212, 188, 148, 0.07), transparent 27rem),
    radial-gradient(circle at 18% 58%, rgba(212, 188, 148, 0.04), transparent 31rem),
    linear-gradient(180deg, transparent 0%, rgba(212, 188, 148, 0.018) 46%, transparent 86%);
  opacity: 0.82;
}

body.dj-activation-page .dj-activated-section {
  position: relative;
}

body.dj-activation-page .dj-activated-section:not(.dj-activated-hero):not(.svc-hero):not(.design-hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(1.5rem, calc((100vw - 1120px) / 2));
  right: max(1.5rem, calc((100vw - 1120px) / 2));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(212, 188, 148, 0.18), rgba(245, 245, 245, 0.08), transparent);
  opacity: 0.54;
}

.dj-activation-has-field {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.dj-activation-has-field > :not(.dj-activation-field) {
  position: relative;
  z-index: 2;
}

.dj-activation-field {
  position: absolute;
  inset: -4.5rem -10vw -4rem;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 940px;
}

.dj-activation-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 30%, rgba(10, 10, 10, 0.08) 55%, rgba(10, 10, 10, 0.48) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.12), rgba(10, 10, 10, 0.68) 90%);
}

.dj-activation-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 42% 28% at 54% 42%, rgba(212, 188, 148, 0.11), transparent 74%),
    radial-gradient(ellipse 30% 22% at 78% 22%, rgba(169, 216, 255, 0.025), transparent 70%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.dj-activation-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.66;
}

.dj-depth-plane {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(212, 188, 148, 0.07);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(245, 245, 245, 0.025), rgba(245, 245, 245, 0.004)),
    linear-gradient(180deg, rgba(212, 188, 148, 0.045), transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(245, 245, 245, 0.04),
    0 42px 110px rgba(0, 0, 0, 0.62);
  filter: saturate(0.92);
  transform-style: preserve-3d;
}

.dj-depth-plane.one {
  width: min(36vw, 440px);
  height: min(44vw, 540px);
  top: 14%;
  right: 10%;
  transform: rotateX(60deg) rotateZ(-13deg) translateZ(-120px);
  opacity: 0.26;
}

.dj-depth-plane.two {
  width: min(30vw, 360px);
  height: min(24vw, 280px);
  left: 19%;
  bottom: 7%;
  transform: rotateX(66deg) rotateZ(15deg) translateZ(-190px);
  opacity: 0.2;
}

.dj-depth-plane.three {
  width: min(24vw, 300px);
  height: min(11vw, 135px);
  top: 37%;
  right: 31%;
  transform: rotateX(54deg) rotateZ(-19deg) translateZ(-240px);
  opacity: 0.14;
}

.dj-shimmer-headline {
  color: transparent !important;
  background-image:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(212, 188, 148, 0.08) 44%,
      rgba(212, 188, 148, 0.58) 48%,
      rgba(212, 188, 148, 0.86) 50%,
      rgba(240, 236, 228, 0.76) 52%,
      rgba(212, 188, 148, 0.28) 56%,
      transparent 64%,
      transparent 100%
    ),
    linear-gradient(var(--white, #f5f5f5), var(--white, #f5f5f5));
  background-size: 240% 100%, 100% 100%;
  background-position: 152% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 12px 38px rgba(0, 0, 0, 0.72));
  animation: djHeadlineTextShimmer 8.5s ease-in-out infinite;
}

.dj-shimmer-headline em,
.dj-shimmer-headline span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

@keyframes djHeadlineTextShimmer {
  0%, 18% {
    background-position: 152% 0, 0 0;
  }
  58%, 72% {
    background-position: -82% 0, 0 0;
  }
  100% {
    background-position: -82% 0, 0 0;
  }
}

@media (max-width: 760px) {
  .dj-activation-field {
    inset: -3.5rem -24vw -3rem;
  }

  .dj-depth-plane.one {
    right: -8%;
    top: 18%;
    opacity: 0.18;
  }

  .dj-depth-plane.two {
    left: -10%;
    opacity: 0.14;
  }

  .dj-depth-plane.three {
    display: none;
  }
}

body.dj-activation-page .dj-activated-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(212, 188, 148, 0.16);
  background-image:
    radial-gradient(circle at 82% 12%, rgba(212, 188, 148, 0.085), transparent 12rem),
    linear-gradient(145deg, rgba(245, 245, 245, 0.035), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(245, 245, 245, 0.055),
    0 24px 80px rgba(0, 0, 0, 0.34);
}

body.dj-activation-page .dj-activated-card::before {
  content: "";
  position: absolute;
  inset: -35% auto auto -12%;
  width: 55%;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212, 188, 148, 0.075), transparent 68%);
  transform: rotate(-18deg);
}

body.dj-activation-page .dj-activated-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(212, 188, 148, 0.035) 45%, transparent 62%),
    linear-gradient(180deg, rgba(245, 245, 245, 0.02), transparent 42%);
  opacity: 0.72;
}

body.dj-activation-page .dj-activated-image {
  border-color: rgba(212, 188, 148, 0.18);
  filter: saturate(0.96) contrast(1.04) brightness(0.96);
  box-shadow:
    0 0 0 1px rgba(212, 188, 148, 0.1),
    0 24px 88px rgba(0, 0, 0, 0.48),
    0 0 48px rgba(212, 188, 148, 0.075);
}

body.dj-activation-page .dj-activated-image-wrap {
  position: relative;
  isolation: isolate;
}

body.dj-activation-page .dj-activated-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(245, 245, 245, 0.055), transparent 33%),
    radial-gradient(circle at 74% 16%, rgba(212, 188, 148, 0.14), transparent 42%),
    linear-gradient(180deg, transparent 48%, rgba(10, 10, 10, 0.18));
  mix-blend-mode: screen;
  opacity: 0.48;
}

body.dj-activation-page .dj-activated-image-wrap img {
  position: relative;
  z-index: 1;
}

body.dj-activation-page .dj-activation-sparkline {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: min(18vw, 180px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 188, 148, 0.38), rgba(245, 245, 245, 0.18), transparent);
  box-shadow: 0 0 18px rgba(212, 188, 148, 0.18);
  opacity: 0.5;
  transform: rotate(-12deg);
}

body.dj-activation-page .dj-activation-sparkline.one {
  right: 14%;
  top: 32%;
}

body.dj-activation-page .dj-activation-sparkline.two {
  right: 28%;
  bottom: 22%;
  width: min(14vw, 142px);
  opacity: 0.34;
  transform: rotate(9deg);
}

body.dj-services-page .svc-hero {
  isolation: isolate;
}

body.dj-services-page .svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 24% at 58% 39%, rgba(212, 188, 148, 0.11), transparent 74%),
    linear-gradient(120deg, transparent 34%, rgba(212, 188, 148, 0.055), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.8;
}

body.dj-services-page .svc-hero .dj-activation-sparkline {
  z-index: 4;
}

@media (max-width: 760px) {
  body.dj-activation-page main::before {
    opacity: 0.62;
  }

  body.dj-activation-page .dj-activation-sparkline {
    display: none;
  }

  body.dj-activation-page .dj-activated-section:not(.dj-activated-hero):not(.svc-hero):not(.design-hero)::before {
    left: 1.25rem;
    right: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dj-shimmer-headline {
    animation: none;
    background-position: -18% 0, 0 0;
  }

  .dj-activation-canvas {
    opacity: 0.42;
  }

  body.dj-activation-page .dj-activation-sparkline {
    opacity: 0.26;
  }
}