/* css/global.css – Global styles for ArtRealmAI (November 25, 2025) */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0d1117;
    color: #e2e8f0;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(165, 180, 252, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 75%, rgba(216, 180, 254, 0.07) 0%, transparent 30%);
    background-attachment: fixed;
}

.title-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(to right, #a5b4fc, #d8b4fe);
}

/* Title Glitch Animation */
@keyframes title-glitch-loop-1 {
    0%, 95% { clip-path: inset(50% 0 50% 0); }
    95.1% { clip-path: inset(45% 0 50% 0); }
    95.3% { clip-path: inset(0 0 95% 0); }
    95.5% { clip-path: inset(90% 0 1% 0); }
    95.7% { clip-path: inset(40% 0 55% 0); }
    95.9%, 100% { clip-path: inset(50% 0 50% 0); }
}
@keyframes title-glitch-loop-2 {
    0%, 95% { clip-path: inset(50% 0 50% 0); }
    95.2% { clip-path: inset(55% 0 40% 0); }
    95.4% { clip-path: inset(95% 0 0 0); }
    95.6% { clip-path: inset(1% 0 90% 0); }
    95.8% { clip-path: inset(50% 0 45% 0); }
    96%, 100% { clip-path: inset(50% 0 50% 0); }
}
.title-glitch { position: relative; }
.title-glitch > span { position: relative; z-index: 1; }
.title-glitch::before, .title-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #0d1117;
    z-index: 2;
}
.title-glitch::before { animation: title-glitch-loop-1 5s infinite linear; text-shadow: -2px 0 #a855f7; }
.title-glitch::after { animation: title-glitch-loop-2 5s infinite linear; text-shadow: 2px 0 #6366f1; }

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .title-glitch::before, .title-glitch::after { animation: none; }
}

/* Card Tags & Lightbox */
.card-tag { position: relative; font-weight: 600; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; backdrop-filter: blur(4px); }
#video-lightbox { transition: opacity 0.3s ease-in-out; }

/* Glitch Keyframes */
@keyframes glitch-anim-1 { 0%, 100% { clip-path: inset(45% 0 50% 0); } 25% { clip-path: inset(0 0 95% 0); } 50% { clip-path: inset(90% 0 1% 0); } 75% { clip-path: inset(40% 0 55% 0); } }
@keyframes glitch-anim-2 { 0%, 100% { clip-path: inset(55% 0 40% 0); } 25% { clip-path: inset(95% 0 0 0); } 50% { clip-path: inset(1% 0 90% 0); } 75% { clip-path: inset(50% 0 45% 0); } }

/* Glitch Link – FINAL VERSION (identical to header nav) */
.glitch-link {
  position: relative;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(to right, #a5b4fc, #d8b4fe);
  transition: all 0.2s;
}

.glitch-link::before,
.glitch-link::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: linear-gradient(to right, #a5b4fc, #d8b4fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.glitch-link:hover::before,
.glitch-link:hover::after,
.glitch-link.tag-selected::before,
.glitch-link.tag-selected::after {
  opacity: 1;
}

.glitch-link::before {
  animation: glitch-anim-1 0.35s infinite linear alternate-reverse;
  text-shadow: -2px 0 #a855f7;
}
.glitch-link::after {
  animation: glitch-anim-2 0.35s infinite linear alternate-reverse;
  text-shadow: 2px 0 #6366f1;
}

.glitch-link.tag-selected { font-weight: bold; }

@media (prefers-reduced-motion: reduce) {
  .glitch-link::before,
  .glitch-link::after { animation: none; }
}

/* Enhanced title glow + tighter spacing */
.title-glitch {
  line-height: 0.9;
  text-shadow: 
    0 0 20px rgba(165, 180, 252, 0.4),
    0 0 40px rgba(216, 180, 254, 0.2);
}

/* Optional: Make the glitch slightly faster on hero */
#root .title-glitch::before { animation-duration: 3.5s; }
#root .title-glitch::after  { animation-duration: 4s; }

/* Default Avatar (Shared with account) */
.default-avatar {
  background: linear-gradient(135deg, #a5b4fc 0%, #d8b4fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #0d1117;
  text-transform: uppercase;
  letter-spacing: 1px;
}