/* ================================================
   RAWNAQ — AMBIENT DECORATION
   Subtle background motifs that fill the empty space
   in chapter sections. Every motif shares the same
   hairline / blueprint language (1px strokes, low
   opacity, --c-muted-2 for structure, --c-emerald for
   accent) but no two chapters use the same shape.
   Purely decorative — never intercepts interaction.
   ================================================ */

.rq-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.rq-deco svg {
  position: absolute;
  overflow: visible;
}

.rq-deco line,
.rq-deco path,
.rq-deco circle,
.rq-deco rect {
  vector-effect: non-scaling-stroke;
}

/* Shared dot-grid texture, reused at different scales/positions
   so it reads as one family without repeating identically. */
.rq-deco__dotgrid {
  position: absolute;
  background-image: radial-gradient(var(--c-muted-2) 1px, transparent 1.5px);
  background-repeat: repeat;
  opacity: 0.22;
}

@media (prefers-reduced-motion: no-preference) {
  .rq-deco__spin {
    animation: rq-spin-slow 90s linear infinite;
    transform-origin: center;
  }
}

@keyframes rq-spin-slow {
  to { transform: rotate(360deg); }
}

.rq-deco__spin {
  transform-box: view-box;
  transform-origin: center;
}

/* ------------------------------------------------
   CHAPTER 01 — SHIFT
   Right-hand empty zone: fine dot grid + a single
   outlined ring-and-node, echoing the diamond motif
   used elsewhere in the brand without repeating it.
   ------------------------------------------------ */
.rq-deco--shift .rq-deco__dotgrid {
  top: 8%;
  right: 6%;
  bottom: auto;
  left: auto;
  width: min(32vw, 420px);
  height: min(60%, 420px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, black 45%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 45%, transparent 78%);
}

.rq-deco__shift-ring {
  right: clamp(4%, 8vw, 12%);
  top: 50%;
  left: auto;
  bottom: auto;
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .rq-deco--shift .rq-deco__dotgrid {
    top: -4%;
    right: -10%;
    width: 60vw;
    height: 40vw;
    opacity: 0.14;
  }
  .rq-deco__shift-ring {
    right: -12%;
    top: 4%;
    width: 46vw;
    height: 46vw;
    transform: none;
    opacity: 0.6;
  }
}

/* ------------------------------------------------
   CHAPTER 02 — TRANSFORMATION
   Concentric orbit rings + crosshair, radiating from
   the center behind the statement text. Slow rotation
   gives the "signature" chapter some quiet motion in
   place of the (unused) WebGL canvas.
   ------------------------------------------------ */
.rq-deco__orbit {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: clamp(340px, 46vw, 640px);
  height: clamp(340px, 46vw, 640px);
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .rq-deco__orbit {
    width: 88vw;
    height: 88vw;
  }
}

/* ------------------------------------------------
   CHAPTER 03 — SERVICES
   Desktop left panel: a ruler-tick rail beneath the
   description, plus a small corner bracket.
   Mobile header: a compact dot cluster instead — a
   different shape from the same family.
   ------------------------------------------------ */
.rq-deco--services-left {
  inset: auto clamp(24px, 3.5vw, 56px) var(--space-xl) clamp(24px, 3.5vw, 56px);
  height: 90px;
}

.rq-deco__ruler {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
}

.rq-deco__bracket--services {
  right: -6px;
  top: -6px;
  width: 56px;
  height: 56px;
}

.rq-deco--services-mobile .rq-deco__dotgrid {
  top: -18%;
  right: -14%;
  width: 42vw;
  height: 30vw;
  background-size: 16px 16px;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* ------------------------------------------------
   CHAPTER 04 — PROCESS
   Header slice: faint diagonal hairlines behind the
   title/desc, echoing a technical drawing hatch.
   ------------------------------------------------ */
.rq-deco--process {
  background-image: repeating-linear-gradient(
    -34deg,
    rgba(90, 99, 96, 0.14) 0px,
    rgba(90, 99, 96, 0.14) 1px,
    transparent 1px,
    transparent 46px
  );
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 75%, transparent);
}

.rq-deco__bracket--process {
  left: -4px;
  bottom: -4px;
  width: 44px;
  height: 44px;
}

@media (max-width: 768px) {
  .rq-deco--process {
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 90%, transparent);
  }
}

/* ------------------------------------------------
   CHAPTER 06 — DIFFERENCE
   A single crosshair at the grid's center intersection
   — a blueprint "register mark" tying the four items
   together. Desktop (2x2 grid) only; on the mobile
   single-column stack the intersection doesn't exist.
   ------------------------------------------------ */
.rq-deco__crosshair {
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  display: none;
}

@media (min-width: 769px) {
  .rq-deco__crosshair {
    display: block;
  }
}

/* ------------------------------------------------
   CHAPTER 05 — WORK
   Header row: a compact bracket + dot pairing that
   balances the CTA button, desktop only (mobile bento
   is already visually full).
   ------------------------------------------------ */
.rq-deco--work {
  display: none;
}

@media (min-width: 769px) {
  .rq-deco--work {
    display: block;
    right: 0;
    top: -18px;
    width: 90px;
    height: 40px;
  }
}

/* ------------------------------------------------
   CHAPTER 07 — CTA
   Corner brackets flanking the centered content,
   companion to the existing giant "READY" watermark.
   ------------------------------------------------ */
.rq-deco__bracket--cta-tl,
.rq-deco__bracket--cta-br {
  /* Not nested inside a .rq-deco wrapper (see index.html), so these two
     need their own position/pointer-events instead of inheriting them. */
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

.rq-deco__bracket--cta-tl {
  left: clamp(20px, 6vw, 64px);
  top: clamp(20px, 6vh, 56px);
  width: 46px;
  height: 46px;
}

.rq-deco__bracket--cta-br {
  right: clamp(20px, 6vw, 64px);
  bottom: clamp(20px, 6vh, 56px);
  width: 46px;
  height: 46px;
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .rq-deco__bracket--cta-tl,
  .rq-deco__bracket--cta-br {
    width: 30px;
    height: 30px;
  }
}