/* ============================================================
   COLT HERO ANIMATION — Editorial Visual
   Warm gradient wash + canvas force-field lines + ornaments
   Magazine-inspired, not tactical/tech
   ============================================================ */

/* Default: hidden (shown by body[data-version="colt"] in colt.css) */
.colt-hero-identity {
  display: none;
}

.colt-hero-animation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Show only when Colt version active */
body[data-version="colt"] .colt-hero-animation {
  opacity: 1;
}

/* Hide Obsidian animation when Colt active */
body[data-version="colt"] .hero-animation canvas {
  opacity: 0;
}

/* Hide Sentinel animation when Colt active */
body[data-version="colt"] .sentinel-hero-animation {
  opacity: 0 !important;
  visibility: hidden;
}

/* Hide Lab animation when Colt active */
body[data-version="colt"] .lab-hero-animation {
  opacity: 0 !important;
  visibility: hidden;
}

/* ============================================================
   WARM GRADIENT WASH — Subtle copper/warm glow
   ============================================================ */

.colt-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 50% at 70% 40%,
    rgba(200, 121, 65, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Secondary warm gradient */
.colt-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 40% at 20% 70%,
    rgba(123, 107, 93, 0.04) 0%,
    transparent 60%
  );
}

/* ============================================================
   FORCE-FIELD LINES CANVAS
   ============================================================ */

.colt-lines-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================================
   CORNER ORNAMENTS — Typographic decorative marks
   ============================================================ */

.colt-ornaments {
  position: absolute;
  inset: 24px;
  pointer-events: none;
}

.colt-ornament {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(200, 121, 65, 0.2);
  opacity: 0.5;
}

/* Top-left ornament */
.colt-ornament.tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

/* Top-right ornament */
.colt-ornament.tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

/* Bottom-left ornament */
.colt-ornament.bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

/* Bottom-right ornament */
.colt-ornament.br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* ============================================================
   LIGHT MODE ADJUSTMENTS
   ============================================================ */

body[data-theme="light"] .colt-gradient {
  background: radial-gradient(
    ellipse 80% 50% at 70% 40%,
    rgba(200, 121, 65, 0.08) 0%,
    transparent 70%
  );
}

body[data-theme="light"] .colt-gradient::after {
  background: radial-gradient(
    ellipse 60% 40% at 20% 70%,
    rgba(123, 107, 93, 0.06) 0%,
    transparent 60%
  );
}

body[data-theme="light"] .colt-ornament {
  border-color: rgba(200, 121, 65, 0.35);
  opacity: 0.6;
}

/* ============================================================
   MOBILE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
  .colt-ornament {
    width: 16px;
    height: 16px;
  }

  .colt-ornaments {
    inset: 16px;
  }
}

@media (max-width: 480px) {
  .colt-ornament {
    width: 12px;
    height: 12px;
  }
}

/* ============================================================
   REDUCED MOTION — Disable animations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .colt-ornament {
    opacity: 0.4;
  }
}