/* tech-visuals.css — added 2026-06-03
   AI/technological visual layer for crossaihub.com.
   Adds: neural-network canvas, animated gradients, glow accents,
         pulsing gold cross, typewriter effect, floating glyphs.
   Keeps existing aesthetic — additive only.
*/

/* ---------------------------------------------------------------- *
 * 1. Neural-network canvas background (placed behind hero)
 * ---------------------------------------------------------------- */
.tech-neural-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
}

/* ---------------------------------------------------------------- *
 * 2. Animated gradient swatch behind hero headline
 * ---------------------------------------------------------------- */
@keyframes tech-aurora-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.cinematic-hero__h1 {
  background: linear-gradient(
    100deg,
    #D4A843 0%,
    #f4d77a 35%,
    #c98a2e 55%,
    #f4d77a 80%,
    #D4A843 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: tech-aurora-shift 16s ease-in-out infinite;
}

/* ---------------------------------------------------------------- *
 * 3. Pulsing gold cross logo
 * ---------------------------------------------------------------- */
@keyframes tech-cross-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212,168,67,0.0)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 14px rgba(212,168,67,0.85)); transform: scale(1.04); }
}

.cinematic-hero__logo svg {
  animation: tech-cross-pulse 4.5s ease-in-out infinite;
}

/* ---------------------------------------------------------------- *
 * 4. Section dividers — floating tech glyphs
 * ---------------------------------------------------------------- */
@keyframes tech-glyph-drift {
  0%   { transform: translate(0, 0) rotate(0deg);   opacity: 0.0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translate(20px, -40px) rotate(360deg); opacity: 0.0; }
}

.section-divider {
  position: relative;
}

.section-divider::before,
.section-divider::after {
  content: '◇';
  position: absolute;
  font-size: 0.6rem;
  color: #D4A843;
  opacity: 0;
  animation: tech-glyph-drift 8s ease-in-out infinite;
}

.section-divider::before {
  left: 30%;
  top: 50%;
  animation-delay: 0s;
}

.section-divider::after {
  right: 30%;
  top: 50%;
  animation-delay: 4s;
}

/* ---------------------------------------------------------------- *
 * 5. Typewriter effect — applied to .typewriter-line
 * ---------------------------------------------------------------- */
@keyframes tech-typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes tech-caret-blink {
  0%, 50%   { border-right-color: #D4A843; }
  51%, 100% { border-right-color: transparent; }
}

.typewriter-line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #D4A843;
  animation:
    tech-typewriter 4s steps(40, end) 0.4s 1 both,
    tech-caret-blink 0.85s steps(1) infinite;
}

/* ---------------------------------------------------------------- *
 * 6. Verse band — slow gradient sweep + corner brackets
 * ---------------------------------------------------------------- */
@keyframes tech-verse-glow {
  0%, 100% { box-shadow: inset 0 0 60px rgba(212,168,67,0.05); }
  50%      { box-shadow: inset 0 0 100px rgba(212,168,67,0.12); }
}

.verse-band {
  position: relative;
  animation: tech-verse-glow 6s ease-in-out infinite;
}

.verse-band::before,
.verse-band::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid #D4A843;
  opacity: 0.45;
}

.verse-band::before {
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
}

.verse-band::after {
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
}

/* ---------------------------------------------------------------- *
 * 7. Buttons — gold cross-of-code shimmer on hover
 * ---------------------------------------------------------------- */
.btn--gold {
  position: relative;
  overflow: hidden;
}

.btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease-out;
}

.btn--gold:hover::after {
  transform: translateX(100%);
}

/* ---------------------------------------------------------------- *
 * 8. Cards — subtle hover lift + gold border glow
 * ---------------------------------------------------------------- */
.media-card,
.foundations__card,
.share-card {
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.media-card:hover,
.foundations__card:hover,
.share-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(212,168,67,0.18), 0 2px 6px rgba(0,0,0,0.08);
}

/* ---------------------------------------------------------------- *
 * 9. Scroll-reveal — fade up + slight blur clear
 * ---------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out, filter 0.9s ease-out;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------------------------------------------------------------- *
 * 10. Tech-character diagram — gentle data-flow animation
 * ---------------------------------------------------------------- */
@keyframes tech-flow {
  0%   { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

.tech-character__diagram svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: tech-flow 6s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------------- *
 * Respect motion preferences
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero__h1,
  .cinematic-hero__logo svg,
  .section-divider::before,
  .section-divider::after,
  .verse-band,
  .typewriter-line,
  .tech-character__diagram svg path {
    animation: none !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}