/* --------------------------------------------------------- */
/* GD MOTIFS — MS0 SYMBOLIC ARCHITECTURE                     */
/* Atmospheric forms, gestures, motifs, prism logic          */
/* --------------------------------------------------------- */


/* --------------------------------------------- */
/* GLOBAL FOX TRACE (non-homepage usage)         */
/* --------------------------------------------- */

/* For pages where a fox presence is needed without events */
.gd-fox-trace-global {
  position: absolute;
  width: 160px;
  height: 160px;

  opacity: 0.03;
  background: var(--fox-base);
  filter: blur(22px);

  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

/* default placement for global motifs */
.gd-fox-trace-global.top-right {
  top: 12%;
  right: 18%;
}

.gd-fox-trace-global.bottom-left {
  bottom: 14%;
  left: 10%;
}


/* --------------------------------------------- */
/* PRISM LOGIC (light sheets, conceptual fields) */
/* --------------------------------------------- */

.gd-prism-sheet {
  position: absolute;
  width: 140%;
  height: 40px;

  top: 0;
  left: -20%;

  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--graphite) 4%, transparent),
    transparent 80%
  );

  opacity: 0.12;
  filter: blur(6px);

  pointer-events: none;
  z-index: 0;
}

/* angled variant (used in architecture blocks) */
.gd-prism-sheet.diagonal {
  transform: rotate(3deg);
  transform-origin: left center;
}


/* --------------------------------------------- */
/* MICRO-GESTURE BLURS                           */
/* --------------------------------------------- */

.gd-gesture-blur {
  position: absolute;
  width: 120px;
  height: 70px;

  background: color-mix(in srgb, var(--graphite) 6%, transparent);
  opacity: 0.10;
  filter: blur(14px);

  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

.gd-gesture-blur.left-shift {
  top: 32%;
  left: -6%;
}

.gd-gesture-blur.right-shift {
  top: 40%;
  right: -4%;
}


/* --------------------------------------------- */
/* COPPER MICRO-ACCENT                           */
/* --------------------------------------------- */
/* RULES:
   - Must appear only once per viewport
   - Never above 8px thickness
   - Never glowing
*/

.gd-copper-line {
  width: 80px;
  height: 2px;
  background: var(--copper);
  margin: var(--space-m) 0;
  opacity: 0.65;
}

.gd-copper-dot {
  width: 6px;
  height: 6px;
  background: var(--copper);
  border-radius: 50%;
  opacity: 0.65;
}


/* --------------------------------------------- */
/* STRUCTURAL VOID MARK (Avara Anchor)           */
/* --------------------------------------------- */

.gd-void-mark {
  width: 100%;
  height: 1px;

  background: color-mix(in srgb, var(--graphite) 10%, transparent);
  opacity: 0.45;

  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}


/* --------------------------------------------- */
/* MOTIF FIELD WRAPPERS                          */
/* --------------------------------------------- */

.gd-motif-wrapper {
  position: relative;
  overflow: visible;
}

.gd-motif-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}


/* --------------------------------------------- */
/* MOBILE BEHAVIOR                               */
/* --------------------------------------------- */

@media (max-width: 680px) {

  .gd-fox-trace-global,
  .gd-prism-sheet,
  .gd-gesture-blur {
    opacity: 0.06; /* soften motifs for mobile */
    filter: blur(10px);
  }

  .gd-copper-line {
    width: 60px;
  }
}