/* ================================================================
   Dev Tools Shared — Primitives v1.0
   Shared keyframes + page background pattern used by ALL tool pages.
   Extracted from alerts-style-adc.css (reference, 2026-04-19).
   Import order: після dev-tools-base.css + devtools-style-adc.css,
                 перед dt-balka / dt-chronograph / dt-backarrow / dt-panels.
   ================================================================ */

/* ================================================================
   KEYFRAMES — shared across all tool pages
   ================================================================ */

/* Generic forge-glow pulse */
@keyframes forge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
  50%       { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.18); }
}

/* Status indicator blink */
@keyframes status-forge-ok {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Card entrance */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HUD meter fill */
@keyframes meter-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Generic spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Corner gear — slow forward rotation */
@keyframes al-sp-gear-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Corner gear — slow reverse rotation */
@keyframes al-sp-gear-slow-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Corner gear spins (used when gear is positioned absolutely) */
@keyframes sp-spin-tl { to { transform: translate(-50%,-50%) rotate(360deg);  } }
@keyframes sp-spin-tr { to { transform: translate( 50%,-50%) rotate(-360deg); } }
@keyframes sp-spin-bl { to { transform: translate(-50%, 50%) rotate(360deg);  } }
@keyframes sp-spin-br { to { transform: translate( 50%, 50%) rotate(-360deg); } }

/* ================================================================
   PAGE BACKGROUND — forge forge + blueprint grid
   Applied to any .dev-tools-scope page that opts in via a page class
   (e.g. .al-page, .ev-page, .mon-page …).
   ================================================================ */
.dev-tools-scope {
  /* Shared steampunk pipe-kit vars used by dt-panels */
  --sp-copper-light:  #9a7350;
  --sp-copper:        #7a5a35;
  --sp-copper-mid:    #6a4a2a;
  --sp-copper-dark:   #4a3518;
  --sp-copper-shadow: #3a2510;
  --sp-brass-light:   #c8a855;
  --sp-brass:         #a08535;
  --sp-brass-mid:     #806828;
  --sp-brass-dark:    #5a4a1a;
  --sp-brass-shadow:  #4a3a12;
  --sp-pipe-width:    22px;
  --sp-pipe-outer:    26px;
  --sp-band-width:    6px;
  --sp-rivet-size:    5px;
  --sp-steel-light:   #8A8A8A;
  --sp-steel:         #6A6A6A;
  --sp-steel-mid:     #555;
  --sp-steel-dark:    #3A3A3A;
  --sp-glow-amber:    #c58b3a;
  --sp-glow-teal:     #7c8f88;
  --sp-glow-red:      #c14418;
}

/* ── Tonal page background — deepest forge black + subtle diagonal stripes ── */
.dev-tools-scope [class$="-page"],
.dev-tools-scope.devtools-body {
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 35%,
      transparent 0%,
      rgba(0, 0, 0, 0.50) 80%,
      rgba(0, 0, 0, 0.80) 100%
    ),
    repeating-linear-gradient(
      178deg,
      rgba(197, 139, 58, 0.020) 0px,
      rgba(197, 139, 58, 0.020) 1px,
      transparent 1px,
      transparent 5px
    ),
    var(--bg-void) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  color: var(--text-bright) !important;
}


/* ── Decorative corner gears (top-right large, bottom-left small) ── */
.dev-tools-scope [class$="-page"]::before {
  content: '';
  position: fixed;
  top: -120px; right: -140px;
  width: 440px; height: 440px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100 100)' fill='none' stroke='%235c4430' stroke-width='2'%3E%3Ccircle r='82' stroke-opacity='0.35'/%3E%3Ccircle r='64' stroke-opacity='0.3'/%3E%3Ccircle r='46' stroke-opacity='0.3'/%3E%3Ccircle r='14' stroke-opacity='0.45'/%3E%3Cg stroke-opacity='0.35'%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(30)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(60)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(90)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(120)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(150)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(180)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(210)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(240)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(270)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(300)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(330)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: al-sp-gear-slow 160s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

.dev-tools-scope [class$="-page"]::after {
  content: '';
  position: fixed;
  bottom: -160px; left: -180px;
  width: 520px; height: 520px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100 100)' fill='none' stroke='%238c6b46' stroke-width='1.8'%3E%3Ccircle r='80' stroke-opacity='0.28'/%3E%3Ccircle r='60' stroke-opacity='0.24'/%3E%3Ccircle r='38' stroke-opacity='0.22'/%3E%3Ccircle r='12' stroke-opacity='0.35'/%3E%3Cg stroke-opacity='0.28'%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(36)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(72)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(108)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(144)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(180)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(216)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(252)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(288)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(324)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: al-sp-gear-slow-rev 220s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}