/* ============================================
   NARCY STUDIOS — DECO LAYER
   Motion for every marker, more signal orange, and the hooks the
   auto-placer needs. Loads after styles.css, overrides nothing structural.
   ============================================ */

.section, .hero, .contact-band { position: relative; }
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }

/* hidden only while the placer runs; if the script never loads, never hidden */
.deco-init .deco { visibility: hidden; }

/* ---------- motion for the markers that had none ---------- */
@keyframes nrcDrift  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-12px); } }
@keyframes nrcDriftX { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,0); } }
@keyframes nrcBreathe{ 0%,100% { opacity: .28; } 50% { opacity: .62; } }
@keyframes nrcTick   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes nrcSlideY { 0% { transform: translateY(-8px); } 100% { transform: translateY(8px); } }
@keyframes nrcSpin   { to { transform: rotate(360deg); } }
@keyframes nrcSweep  { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }

.deco-barcode   { animation: nrcBreathe 7s ease-in-out infinite; }
.deco-dots      { animation: nrcDrift 11s ease-in-out infinite; }
.deco-cross     { animation: nrcTick 5s ease-in-out infinite; }
.deco-xmark     { animation: nrcSpin 26s linear infinite; }
.deco-chevrons  { animation: nrcDriftX 6s ease-in-out infinite; }
.deco-stripes   { animation: nrcSweep 3.5s linear infinite; }
.deco-halftone  { animation: nrcBreathe 9s ease-in-out infinite; }
.deco-checker   { animation: nrcDrift 13s ease-in-out infinite; }
.deco-wave      { animation: nrcDriftX 8s ease-in-out infinite; }
.deco-circuit   { animation: nrcBreathe 6s ease-in-out infinite; }
.deco-glitch    { animation: nrcTick 4s steps(3, end) infinite; }
.deco-scan      { animation: nrcSlideY 3s ease-in-out infinite alternate; }
.deco-hud       { animation: nrcSpin 44s linear infinite; }
.deco-cut       { animation: nrcDrift 10s ease-in-out infinite; }
.deco-brackets  { animation: nrcTick 7s ease-in-out infinite; }
.deco-arrow     { animation: nrcDriftX 5s ease-in-out infinite; }
.deco-ellipses  { animation: nrcBreathe 8s ease-in-out infinite; }
.deco-vtext     { animation: nrcBreathe 12s ease-in-out infinite; }
.deco-sparkle   { animation: nrcTick 3.4s ease-in-out infinite; }
.deco-burst     { animation: nrcSpin 30s linear infinite; }
.deco-planet    { animation: nrcDrift 14s ease-in-out infinite; }
.deco-loading   { animation: nrcBreathe 5s ease-in-out infinite; }
.deco-outline   { animation: nrcBreathe 16s ease-in-out infinite; }

/* ---------- orange ----------
   Their patterns are drawn with var(--ink). Re-declaring --ink on the
   element itself repaints the whole marker in signal, no rewrites needed. */
.deco.is-signal {
  --ink: #FF4419;
  --line: #FF4419;
  color: var(--signal);
}
.deco.is-signal.deco-barcode,
.deco.is-signal.deco-dots,
.deco.is-signal.deco-stripes,
.deco.is-signal.deco-halftone,
.deco.is-signal.deco-checker { opacity: .55; }

/* ---------- extra markers, drawn in orange from the start ---------- */
.deco-x-ring {
  width: clamp(96px, 9vw, 160px);
  aspect-ratio: 1;
  border: 2px solid var(--signal);
  border-radius: 50%;
  opacity: .5;
  animation: nrcSpin 34s linear infinite;
}
.deco-x-ring::after {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  background: var(--signal);
  border-radius: 50%;
}
.deco-x-target {
  width: clamp(78px, 7vw, 124px);
  aspect-ratio: 1;
  opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF4419' stroke-width='3'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3Cline x1='50' y1='0' x2='50' y2='22'/%3E%3Cline x1='50' y1='78' x2='50' y2='100'/%3E%3Cline x1='0' y1='50' x2='22' y2='50'/%3E%3Cline x1='78' y1='50' x2='100' y2='50'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: nrcSpin 40s linear infinite;
}
.deco-x-arc {
  width: clamp(104px, 10vw, 176px);
  aspect-ratio: 1;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF4419' stroke-width='3'%3E%3Cpath d='M6 50a44 44 0 0 1 44-44'/%3E%3Cpath d='M22 50a28 28 0 0 1 28-28'/%3E%3Cpath d='M94 50a44 44 0 0 1-44 44'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: nrcSpin 52s linear infinite reverse;
}
.deco-x-cross {
  font-family: var(--mono);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  color: var(--signal);
  opacity: .7;
  animation: nrcTick 4.5s ease-in-out infinite;
}
.deco-x-bars {
  width: clamp(60px, 6vw, 96px);
  height: 34px;
  opacity: .6;
  background:
    linear-gradient(var(--signal), var(--signal)) 0 0/100% 5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 0 12px/64% 5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 0 24px/38% 5px no-repeat;
  animation: nrcDriftX 6.5s ease-in-out infinite;
}
.deco-x-diamond {
  width: clamp(16px, 1.6vw, 24px);
  aspect-ratio: 1;
  background: var(--signal);
  transform: rotate(45deg);
  opacity: .7;
  animation: nrcDrift 9s ease-in-out infinite;
}
.deco-x-dotgrid {
  width: clamp(70px, 7vw, 116px);
  height: clamp(50px, 5vw, 78px);
  opacity: .45;
  background-image: radial-gradient(var(--signal) 1.6px, transparent 1.8px);
  background-size: 12px 12px;
  animation: nrcBreathe 7.5s ease-in-out infinite;
}
.deco-x-tick {
  width: 2px;
  height: clamp(40px, 5vw, 76px);
  background: linear-gradient(var(--signal), transparent);
  opacity: .6;
  animation: nrcBreathe 6s ease-in-out infinite;
}

@media (max-width: 720px) {
  .deco-x-ring, .deco-x-arc, .deco-x-target, .deco-x-dotgrid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deco, .deco[class*="deco-x-"] { animation: none !important; }
}

/* a marker the placer could not fit stays out of the way entirely */
.deco[style*="display: none"] { visibility: hidden !important; }

/* the oversized ghost letterform is decoration, never a colour block */
.deco-outline { background-color: transparent !important; }