/**
 * HOLOGRAPHIC UI LAYER — URTI Global Design System
 * Luxury industrial: black × deep forest green × subtle gold
 * Bloomberg Terminal × Space Program × Sovereign Infrastructure
 *
 * Injected across all 4 URTI domain experiences:
 * urtiforestry.com · urtiglobal.com · urtioperations.com · urtimusic.com
 */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --holo-gold:          #C9A84C;
  --holo-gold-bright:   #e2c878;
  --holo-gold-glow:     rgba(201, 168, 76, 0.22);
  --holo-gold-border:   rgba(201, 168, 76, 0.38);
  --holo-green:         #1a5a37;
  --holo-green-edge:    rgba(26, 90, 55, 0.55);
  --holo-green-glow:    rgba(26, 90, 55, 0.28);
  --holo-shimmer-light: rgba(255, 242, 180, 0.85);
  --holo-prismatic-cyan: #4ade80;
  --holo-prismatic-teal: #22d3d1;
  --holo-prismatic-violet: #a78bfa;
  --holo-particle-z:    1;
}

/* ─── Keyframes ─────────────────────────────────────────────── */

/* Rotating gradient border sweep */
@keyframes holo-border-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer sweep left→right */
@keyframes holo-shimmer-sweep {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}

/* Corner bracket breath */
@keyframes holo-bracket-breath {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.65; }
}

/* Pulse glow intensity */
@keyframes holo-pulse {
  0%, 100% {
    box-shadow:
      0 0 6px  var(--holo-gold-glow),
      0 0 18px var(--holo-gold-glow),
      inset 0 0 12px rgba(201,168,76,0.04);
  }
  50% {
    box-shadow:
      0 0 12px var(--holo-gold-glow),
      0 0 35px var(--holo-gold-glow),
      0 0 55px rgba(201,168,76,0.10),
      inset 0 0 20px rgba(201,168,76,0.06);
  }
}

/* Refraction line sweep */
@keyframes holo-refract {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Full prismatic iridescent sweep — H1/H2 shimmer */
@keyframes holo-prismatic {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}

/* Rainbow sheen sweep for CTA buttons */
@keyframes holo-cta-rainbow {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── Global Holographic Shimmer for H1 & H2 Headings ──────────
   Prismatic iridescent sweep — gold × teal × violet
   Applied to ALL h1/h2 elements across all 4 URTI domains
   (uriforestry · urtiglobal · urtioperations · urtimusic)

   Uses background-clip:text so element's own color is used as the
   base — white, gold, or any light heading color all get the shimmer
   sweep treatment without overriding their original color.

   .holo-heading class gets its own timing (6s) to keep it distinct.
   ────────────────────────────────────────────────────────────── */
.holo-shimmer {
  background: linear-gradient(
    105deg,
    var(--holo-gold)          0%,
    var(--holo-shimmer-light) 20%,
    var(--holo-prismatic-cyan) 38%,
    var(--holo-prismatic-violet) 50%,
    var(--holo-prismatic-teal)  62%,
    var(--holo-shimmer-light) 80%,
    var(--holo-gold-bright)   100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holo-prismatic 7s linear infinite;
}

/* Global H1/H2 shimmer — applies to all headings site-wide */
h1.holo-shimmer,
h2.holo-shimmer {
  animation: holo-prismatic 7s linear infinite;
}

/* .holo-heading class retains its own timing (6s) */
.holo-heading {
  animation: holo-shimmer-sweep 6s linear infinite !important;
}

/* ─── Global Holographic Shimmer for Primary CTA Buttons ────────
   Iridescent rainbow sheen sweep on .btn-gold (primary CTA)
   Complements existing ::after shimmer on .holo-cta
   ────────────────────────────────────────────────────────────── */
.btn-gold,
.hero-cta-primary {
  position: relative;
  overflow: hidden;
}

/* Multi-color iridescent sheen sweep */
.btn-gold::after,
.hero-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent                 28%,
    rgba(74, 222, 128, 0.08)   44%,
    rgba(201, 168, 76,  0.14)  50%,
    rgba(167, 139, 250, 0.08)  56%,
    transparent                 72%
  );
  background-size: 200% 100%;
  animation: holo-cta-rainbow 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Keep button text above the sheen layer */
.btn-gold,
a.btn-gold,
.hero-cta-primary {
  position: relative;
  z-index: 1;
}

/* ─── Particle Canvas ───────────────────────────────────────── */
#holo-particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--holo-particle-z);
  opacity: 0.65;
  will-change: transform; /* GPU hint */
}

/* ─── Holographic Card ──────────────────────────────────────── */
.holo-card {
  position: relative;
  border-color: rgba(201,168,76,0.20) !important;
  transition:
    border-color 0.35s ease,
    box-shadow   0.35s ease,
    transform    0.25s ease;
}

/* Animated gradient border via pseudo mask */
.holo-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    transparent             0%,
    var(--holo-gold-border) 20%,
    var(--holo-green-edge)  50%,
    var(--holo-gold-border) 80%,
    transparent             100%
  );
  background-size: 300% 300%;
  animation: holo-border-sweep 7s ease infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Top-left corner bracket */
.holo-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top:  1.5px solid var(--holo-gold);
  border-left: 1.5px solid var(--holo-gold);
  opacity: 0.4;
  pointer-events: none;
  animation: holo-bracket-breath 3.5s ease infinite;
  transition: opacity 0.3s ease;
}

.holo-card:hover {
  border-color: rgba(201,168,76,0.40) !important;
  box-shadow:
    0 0 20px rgba(201,168,76,0.09),
    0 0 40px rgba(201,168,76,0.05),
    inset 0 0 25px rgba(201,168,76,0.025);
  transform: translateY(-1px);
}

.holo-card:hover::before { opacity: 1; }
.holo-card:hover::after  { opacity: 0.8; }

/* ─── Holographic Heading Shimmer ───────────────────────────── */
.holo-heading {
  background: linear-gradient(
    90deg,
    currentColor  0%,
    currentColor  38%,
    var(--holo-shimmer-light) 50%,
    currentColor  62%,
    currentColor  100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holo-shimmer-sweep 6s linear infinite;
}

/* ─── Holographic CTA Button ────────────────────────────────── */
.holo-cta {
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform  0.2s ease;
}

/* Moving light sheen */
.holo-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent           30%,
    rgba(255,255,255,0.08) 50%,
    transparent           70%
  );
  background-size: 200% 100%;
  animation: holo-shimmer-sweep 3.5s linear infinite;
  pointer-events: none;
}

.holo-cta:hover {
  box-shadow:
    0 0 22px var(--holo-gold-glow),
    0 4px 18px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}

/* ─── Holographic Light Glow (text links / labels) ──────────── */
.holo-glow {
  transition: text-shadow 0.3s ease;
}

.holo-glow:hover {
  text-shadow:
    0 0 8px  rgba(201,168,76,0.55),
    0 0 18px rgba(201,168,76,0.28);
}

/* ─── Refraction Accent Underline ───────────────────────────── */
.holo-accent {
  position: relative;
}

.holo-accent::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--holo-gold),
    #4ade80,
    var(--holo-gold),
    transparent
  );
  background-size: 200% auto;
  animation: holo-refract 4s linear infinite;
  opacity: 0.55;
}

/* ─── Holographic Section Divider ───────────────────────────── */
.holo-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent           0%,
    rgba(201,168,76,0.0)  5%,
    rgba(201,168,76,0.45) 30%,
    rgba(26, 90, 55,0.55) 50%,
    rgba(201,168,76,0.45) 70%,
    rgba(201,168,76,0.0)  95%,
    transparent           100%
  );
  background-size: 200% auto;
  animation: holo-border-sweep 9s ease infinite;
  border: none;
  margin: 0;
}

/* ─── Pulse Glow on featured cards ─────────────────────────── */
.holo-pulse {
  animation: holo-pulse 3s ease infinite;
}

/* ─── Auto-enhanced nav links ───────────────────────────────── */
.holo-nav-link {
  transition:
    color      0.25s ease,
    text-shadow 0.25s ease;
}

.holo-nav-link:hover {
  text-shadow:
    0 0 6px  rgba(201,168,76,0.5),
    0 0 14px rgba(201,168,76,0.25);
}

/* ─── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .holo-card::before,
  .holo-card::after,
  .holo-heading,
  .holo-shimmer,
  h1.holo-shimmer,
  h2.holo-shimmer,
  .holo-cta::after,
  .btn-gold::after,
  .hero-cta-primary::after,
  .holo-divider,
  .holo-accent::after {
    animation: none !important;
  }
  #holo-particle-canvas {
    display: none;
  }
}