/* ============================================================
   ANJALI PRIYA — EDITORIAL JOURNALISM PORTFOLIO STYLESHEET
   Aesthetic: Modern Editorial Luxe / Press Wire
   Palette: Dark Obsidian Onyx, Warm Champagne Gold, Paper White, Ruby Press Accent
   ============================================================ */

:root {
  --bg-primary: #090c15;
  --bg-secondary: #0f1422;
  --bg-card: rgba(18, 24, 38, 0.7);
  --border-subtle: rgba(243, 192, 104, 0.15);
  --gold-primary: #e5b869;
  --gold-glow: rgba(229, 184, 105, 0.25);
  --ruby-live: #ef4444;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

/* Custom selection */
::selection {
  background: rgba(229, 184, 105, 0.35);
  color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #090c15;
}
::-webkit-scrollbar-thumb {
  background: #2a3449;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e5b869;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(15, 20, 34, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: linear-gradient(135deg, rgba(20, 27, 44, 0.6) 0%, rgba(13, 18, 30, 0.8) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 184, 105, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(229, 184, 105, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(229, 184, 105, 0.12);
}

/* Editorial Gold Gradient Text */
.gold-gradient-text {
  background: linear-gradient(135deg, #fff7ed 0%, #f3c068 50%, #c68925 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ruby-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #f87171 50%, #dc2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Newspaper subtle grid background */
.editorial-grid-bg {
  background-color: #080b12;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(229, 184, 105, 0.08) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* Audio Waveform Meter Animation (Broadcast visualizer) */
.audio-bar {
  animation: equalize 1.4s ease-in-out infinite alternate;
}
.audio-bar:nth-child(1) { animation-delay: 0.1s; height: 35%; }
.audio-bar:nth-child(2) { animation-delay: 0.3s; height: 80%; }
.audio-bar:nth-child(3) { animation-delay: 0.15s; height: 50%; }
.audio-bar:nth-child(4) { animation-delay: 0.45s; height: 95%; }
.audio-bar:nth-child(5) { animation-delay: 0.25s; height: 60%; }
.audio-bar:nth-child(6) { animation-delay: 0.5s; height: 40%; }
.audio-bar:nth-child(7) { animation-delay: 0.35s; height: 75%; }

@keyframes equalize {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

/* Animated Pulse Badge */
.pulse-ruby {
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Interactive 3D Canvas Container */
#three-canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
}

/* Marquee / Ticker Animation */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 32s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Floating animation for badge & doodles */
.floating-subtle {
  animation: float-slow 4s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Lightbox Modal */
.lightbox-modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-modal.active {
  opacity: 1;
  visibility: visible;
}

/* Filter pills */
.filter-btn.active {
  background: #e5b869;
  color: #090c15;
  font-weight: 700;
  border-color: #e5b869;
}

/* Print styling */
@media print {
  body {
    background: #ffffff !important;
    color: #111827 !important;
  }
  nav, footer, #three-canvas-container, .lightbox-modal {
    display: none !important;
  }
}