/* ═══════════════════════════════════════════════════════════════════════
   sacred-tech.css — added 2026-06-10
   The "Sacred-Tech Cinematic" visual layer.
   Combines: Cyberpunk holographic + HBO cinematic prestige
            + Christian symbolism (gold cross / KJV / cathedral light)

   Additive only — augments existing main.css, tech-visuals.css, joy-layer.css
   without overwriting anything.

   Respects: prefers-reduced-motion (all keyframes pause)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. Cathedral light pillars — vertical gold beams rising from bottom
   ───────────────────────────────────────────────────────────────────── */
.sacred-pillars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.sacred-pillars__beam {
  position: absolute;
  bottom: 0;
  width: clamp(2px, 0.18vw, 4px);
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(212, 168, 67, 0.55) 0%,
    rgba(212, 168, 67, 0.30) 30%,
    rgba(212, 168, 67, 0.10) 65%,
    rgba(212, 168, 67, 0.00) 100%
  );
  filter: blur(1.5px);
  transform-origin: bottom center;
  animation: sacred-pillar-breathe 5.5s ease-in-out infinite;
}

.sacred-pillars__beam:nth-child(1) { left: 12%;  animation-delay: 0s;    height: 78%; }
.sacred-pillars__beam:nth-child(2) { left: 28%;  animation-delay: 1.2s;  height: 92%; }
.sacred-pillars__beam:nth-child(3) { left: 42%;  animation-delay: 0.6s;  height: 65%; }
.sacred-pillars__beam:nth-child(4) { left: 58%;  animation-delay: 2.4s;  height: 88%; }
.sacred-pillars__beam:nth-child(5) { left: 72%;  animation-delay: 0.9s;  height: 70%; }
.sacred-pillars__beam:nth-child(6) { left: 88%;  animation-delay: 1.8s;  height: 82%; }

@keyframes sacred-pillar-breathe {
  0%, 100% { opacity: 0.45; transform: scaleY(0.92); }
  50%      { opacity: 0.85; transform: scaleY(1.02); }
}

/* ─────────────────────────────────────────────────────────────────────
   2. Holographic scan-line sweep — slow vertical sweep every 9s
   ───────────────────────────────────────────────────────────────────── */
.sacred-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.sacred-scanline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(212, 168, 67, 0.00) 0%,
    rgba(212, 168, 67, 0.08) 45%,
    rgba(212, 168, 67, 0.18) 50%,
    rgba(212, 168, 67, 0.08) 55%,
    rgba(212, 168, 67, 0.00) 100%
  );
  filter: blur(2px);
  animation: sacred-scanline-sweep 9s linear infinite;
  top: -120px;
}

@keyframes sacred-scanline-sweep {
  0%   { top: -120px; opacity: 0.0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { top: 100%;   opacity: 0.0; }
}

/* ─────────────────────────────────────────────────────────────────────
   3. KJV verse-rain — falling gold characters (Matrix but sacred)
   Uses canvas (#sacred-verse-rain) — JS draws characters
   ───────────────────────────────────────────────────────────────────── */
.sacred-verse-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: screen;
}

/* ─────────────────────────────────────────────────────────────────────
   4. Hologram glitch on cinematic-hero (subtle CRT flicker)
   ───────────────────────────────────────────────────────────────────── */
.cinematic-hero {
  position: relative;
}

.cinematic-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(212, 168, 67, 0.02) 0px,
      rgba(212, 168, 67, 0.02) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* Subtle hologram flicker on hero h1 (very rare, every 8s, 0.2s flash) */
@keyframes sacred-hologram-flicker {
  0%, 92%, 100% { opacity: 1; filter: hue-rotate(0deg) brightness(1); }
  93%           { opacity: 0.88; filter: hue-rotate(8deg) brightness(1.15); }
  94%           { opacity: 1;   filter: hue-rotate(-4deg) brightness(0.95); }
  95%           { opacity: 0.92; filter: hue-rotate(2deg) brightness(1.05); }
}

.cinematic-hero__h1 {
  animation-name: tech-aurora-shift, sacred-hologram-flicker !important;
  animation-duration: 16s, 8s !important;
  animation-timing-function: ease-in-out, ease-in-out !important;
  animation-iteration-count: infinite, infinite !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5. Sacred-tech kicker badge — "AI · KJV · HOUSEHOLD" rotating chip
   ───────────────────────────────────────────────────────────────────── */
.sacred-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(212, 168, 67, 0.45);
  border-radius: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(212, 168, 67, 0.92);
  background: rgba(13, 17, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  z-index: 4;
}

.sacred-chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D4A843;
  box-shadow: 0 0 8px rgba(212, 168, 67, 0.8);
  animation: sacred-chip-pulse 2s ease-in-out infinite;
}

@keyframes sacred-chip-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   6. Cross-constellation moment — emerges every ~28s for 3s, then disperses
   Triggered by .is-cross-forming class added by sacred-tech.js
   ───────────────────────────────────────────────────────────────────── */
.cinematic-hero.is-cross-forming .tech-neural-bg {
  animation: sacred-cross-glow 3s ease-in-out;
}

@keyframes sacred-cross-glow {
  0%, 100% { opacity: 0.45; filter: blur(0) brightness(1); }
  50%      { opacity: 0.95; filter: blur(0.5px) brightness(1.6); }
}

/* ─────────────────────────────────────────────────────────────────────
   7. Section transition gradient — between sections, soft gold sweep
   ───────────────────────────────────────────────────────────────────── */
.section-divider {
  overflow: visible;
  position: relative;
}

.section-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 30vw, 360px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 168, 67, 0) 0%,
    rgba(212, 168, 67, 0.65) 50%,
    rgba(212, 168, 67, 0) 100%
  );
  z-index: 0;
  animation: sacred-divider-pulse 6s ease-in-out infinite;
}

@keyframes sacred-divider-pulse {
  0%, 100% { opacity: 0.4; width: clamp(140px, 25vw, 280px); }
  50%      { opacity: 0.95; width: clamp(220px, 38vw, 440px); }
}

/* ─────────────────────────────────────────────────────────────────────
   8. Data-flow lines on tech-character diagram — animated draw
   ───────────────────────────────────────────────────────────────────── */
.tech-character__diagram svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: sacred-draw-path 3s ease-out forwards;
  animation-delay: 0.4s;
}

@keyframes sacred-draw-path {
  to { stroke-dashoffset: 0; }
}

.tech-character__diagram svg circle {
  animation: sacred-node-appear 0.6s ease-out forwards;
  opacity: 0;
  animation-delay: 2.5s;
}

@keyframes sacred-node-appear {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────
   9. Cinematic-hero kicker — additional gold underline pulse
   ───────────────────────────────────────────────────────────────────── */
.cinematic-hero__kicker {
  position: relative;
  display: inline-block;
}

.cinematic-hero__kicker::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 168, 67, 0),
    rgba(212, 168, 67, 0.7) 50%,
    rgba(212, 168, 67, 0)
  );
  animation: sacred-kicker-line 4s ease-in-out infinite;
}

@keyframes sacred-kicker-line {
  0%, 100% { width: 40%;  opacity: 0.4; }
  50%      { width: 90%;  opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   10. Buttons — gold cinematic glow on hover
   ───────────────────────────────────────────────────────────────────── */
.btn--gold {
  position: relative;
  transition: box-shadow 300ms ease, transform 200ms ease;
}

.btn--gold:hover {
  box-shadow: 0 0 32px rgba(212, 168, 67, 0.45),
              0 0 4px rgba(212, 168, 67, 0.85);
  transform: translateY(-1px);
}

.btn--gold::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    100deg,
    rgba(212, 168, 67, 0),
    rgba(212, 168, 67, 0.4),
    rgba(212, 168, 67, 0)
  );
  background-size: 200% 100%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 300ms ease;
  animation: sacred-btn-shine 3s linear infinite;
  pointer-events: none;
}

.btn--gold:hover::before { opacity: 1; }

@keyframes sacred-btn-shine {
  0%   { background-position: -200% 50%; }
  100% { background-position:  200% 50%; }
}

/* ─────────────────────────────────────────────────────────────────────
   11. Verse-band — animated quote marks (subtle entrance + breathe)
   ───────────────────────────────────────────────────────────────────── */
.verse-band {
  position: relative;
}

.verse-band__line {
  position: relative;
  z-index: 1;
}

.verse-band::before,
.verse-band::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 60%;
  top: 20%;
  background: linear-gradient(
    180deg,
    rgba(212, 168, 67, 0),
    rgba(212, 168, 67, 0.55) 50%,
    rgba(212, 168, 67, 0)
  );
  animation: sacred-verse-line 4s ease-in-out infinite;
}

.verse-band::before { left: 8%; }
.verse-band::after  { right: 8%; animation-delay: 1s; }

@keyframes sacred-verse-line {
  0%, 100% { opacity: 0.4; height: 55%; }
  50%      { opacity: 1;   height: 70%; }
}

/* ─────────────────────────────────────────────────────────────────────
   12. Honor reduced-motion preference — pause everything dynamic
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sacred-pillars__beam,
  .sacred-scanline::before,
  .cinematic-hero__h1,
  .sacred-chip__dot,
  .section-divider::after,
  .tech-character__diagram svg path,
  .tech-character__diagram svg circle,
  .cinematic-hero__kicker::after,
  .btn--gold::before,
  .verse-band::before,
  .verse-band::after {
    animation: none !important;
    transition: none !important;
  }
  .sacred-verse-rain,
  .sacred-pillars,
  .sacred-scanline {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   13. Mobile — reduce intensity for performance + battery
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sacred-pillars { opacity: 0.35; }
  .sacred-pillars__beam:nth-child(2),
  .sacred-pillars__beam:nth-child(4),
  .sacred-pillars__beam:nth-child(6) { display: none; }
  .sacred-verse-rain { opacity: 0.12; }
  .sacred-scanline { display: none; }
  .cinematic-hero::after { opacity: 0.3; }
}