/* ==========================================================================
   TACTICAL FRAME — HOW TO USE
   ==========================================================================

This CSS file defines reusable, polygon-styled tactical frames with glow,
inner border, and dark/light border variants for intelligence-style content
blocks or containers in Broad Horizon or Raven Intel.

USAGE:

1. HTML Structure
-----------------
<div class="raven-frame red-light">
  <div class="raven-frame-inner">
    <h3>INTELLIGENCE</h3>
    <h4>Donetsk Oblast</h4>
    <p>Brief description or signal.</p>
  </div>
</div>

2. Variant Classes
------------------
- red-light   → Light background, red border (#BD0104)
- red-dark    → Dark mode red border (#800000)
- blue-light  → Light background, blue border (#33CCFF)
- blue-dark   → Dark mode blue border (#005577)
- Add class `.glow-on` for optional animated runner effect (rotating tactical shimmer around the frame)

3. Integration
--------------
- Works on any block or container (e.g. GenerateBlocks, signals, briefs)
- Use 'Additional CSS Class' in the block editor to apply
- Can be combined with Raven map, tab, or content overlays

4. Optional Enhancements
------------------------
- Add :hover effect (already styled)
- Add icons, headings, or flex layouts inside `.raven-frame-inner`
- Combine with `.raven-map-block`, `.raven-info-box`, etc.

========================================================================== */
@keyframes border-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.25),
      0 0 5px rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.4),
      0 0 10px rgba(255, 0, 0, 0.6);
  }
}

.raven-frame-rectangle {
  position: relative;
  background: transparent;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px
  );
  font-family: 'Electrolize', monospace;
  margin: 1rem 0;
  padding: 1rem;
  color: inherit;
  overflow: hidden;
  animation: border-glow 2.5s ease-in-out infinite;
  z-index: 1;
}

.raven-frame-rectangle::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid;
  border-image: linear-gradient(135deg, #BD0104, #4D6B88) 1;
  clip-path: inherit;
  z-index: 2;
}

.raven-frame-rectangle::after {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.3); /* brighter line */
  clip-path: inherit;
  z-index: 1;
}

.raven-frame {
  position: relative;
  background: transparent;
  border: 1.5px solid currentColor;
  clip-path
  : polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  
  font-family: 'Electrolize', monospace;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 5px rgba(255, 0, 0, 0.3);
  color: inherit;
  overflow: hidden;
  margin: 1rem 0;
  padding: 1rem;
  transform: translateZ(0);
  will-change: box-shadow;
}

.raven-frame::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 1px solid currentColor;
  opacity: 0.25;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px
  );
  z-index: 1;
  pointer-events: none;
}
/*
.raven-frame:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 16px rgba(255, 0, 0, 0.45);
  transform: scale(1.01);
}
*/
.raven-frame.red-light  { border-color: #BD0104; }
.raven-frame.red-dark   { border-color: #800000; }
.raven-frame.blue-light { border-color: #4D6B88; }
.raven-frame.blue-dark  { border-color: #005577; }

.raven-frame-inner {
  position: relative;
  z-index: 2;
}

/* Optional glowing runner effect (fixed version) */
.raven-frame.glow-on::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg,currentColor, rgba(255,0,0,0.1), currentColor) 1;
  animation: shimmer-border 4s linear infinite;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px
  );
  z-index: 3;
  pointer-events: none;
}

@keyframes pulse-glow {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes shimmer-border {
  0%   { border-image-slice: 1; }
  50%  { border-image-slice: 1; }
  100% { border-image-slice: 1; }
}