/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Sparkle Page Visualizations - Animations & Styling */

/* ===== Keyframe Animations ===== */

/* Quadrant card fly-in animations */
@keyframes flyIn0 {
  from {
    opacity: 0;
    transform: translate(-100px, -100px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes flyIn1 {
  from {
    opacity: 0;
    transform: translate(100px, -100px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes flyIn2 {
  from {
    opacity: 0;
    transform: translate(-100px, 100px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes flyIn3 {
  from {
    opacity: 0;
    transform: translate(100px, 100px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Heatmap pulse effect */
@keyframes pulse-heat {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
}

/* Loading globe spin */
@keyframes spin-globe {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Gauge needle swing */
@keyframes gauge-swing {
  0% {
    transform: rotate(-180deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

/* Gauge arc drawing */
@keyframes gauge-draw {
  from {
    stroke-dasharray: 0, 1000;
  }
  to {
    stroke-dasharray: 1000, 1000;
  }
}

/* Gauge color fade */
@keyframes gauge-color-shift {
  0% { color: #ef4444; }
  50% { color: #f59e0b; }
  100% { color: #10b981; }
}

/* Scenario card glows */
@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 0 0 rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
  }
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 0 0 rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.8), 0 0 20px rgba(16, 185, 129, 0.4);
  }
}

/* Generic fade and scale animations */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInScale-alt {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes loading-fade {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes timeline-draw {
  from {
    stroke-dasharray: 0, 500;
  }
  to {
    stroke-dasharray: 500, 500;
  }
}

/* ===== Scenario Card Styling ===== */

.scenario-card {
  transition: all 0.3s ease;
}

.scenario-card.negative {
  animation: pulse-red 2.5s ease-in-out infinite;
}

.scenario-card.positive {
  animation: pulse-green 2.5s ease-in-out infinite;
}

.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* ===== Particle Canvas ===== */

#particle-canvas {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -10;
}

/* ===== Gauge Styling ===== */

.gauge-arc {
  stroke-linecap: round;
  animation: gauge-draw 2s ease-in-out forwards;
}

.gauge-needle {
  transform-origin: center;
  animation: gauge-swing 2s ease-out forwards;
}

/* ===== Timeline Elements ===== */

.timeline-main {
  animation: timeline-draw 2s ease-out forwards;
}

.timeline-branch {
  animation: timeline-draw 2.5s ease-out forwards;
}

.timeline-endpoint {
  animation: fadeInScale 0.6s ease-out forwards;
}

/* ===== Reasoning Flowchart Nodes ===== */

.reasoning-node {
  animation: fadeInScale 0.5s ease-out forwards;
}

.reasoning-node rect:hover {
  filter: brightness(1.1);
}

.reasoning-node text {
  transition: fill 0.3s ease;
}

.reasoning-node:hover text {
  fill: #fff;
}

/* ===== Conflict Visualizer ===== */

.conflict-source,
.conflict-target {
  animation: fadeInScale 0.5s ease-out forwards;
}

.conflict-line {
  animation: slideInRight 0.8s ease-out forwards;
  stroke-linecap: round;
}

.conflict-resolution {
  animation: fadeInScale 0.6s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

/* ===== Loading Animation ===== */

.loading-globe {
  animation: spin-globe 3s linear infinite;
}

.loading-text {
  animation: loading-fade 1.5s ease-in-out infinite;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ===== Responsive Design ===== */

@media (max-width: 768px) {
  /* Disable heavy animations on mobile */
  .scenario-card.negative,
  .scenario-card.positive {
    animation: none;
  }

  #particle-canvas {
    display: none;
  }

  .pulse-heat {
    animation: none;
  }

  .timeline-branch {
    animation: none;
  }

  /* Simpler hover effects */
  .scenario-card:hover {
    transform: none;
  }

  /* Reduce animation duration for mobile */
  .gauge-arc,
  .gauge-needle {
    animation-duration: 1s;
  }

  .reasoning-node {
    animation: fadeInScale 0.3s ease-out forwards;
  }
}

/* ===== Chart.js Customizations ===== */

canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* ===== SVG Styling ===== */

svg {
  overflow: visible;
}

svg text {
  user-select: none;
  -webkit-user-select: none;
}

svg circle:hover,
svg rect:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* ===== Navigation Bar Customizations ===== */

nav a {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

nav a:hover {
  background-color: rgba(191, 219, 254, 0.5);
}

nav a.active {
  background-color: #3b82f6;
  color: white;
}

/* ===== Section Headers ===== */

section h2 {
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #2563eb 0%, #3b82f6 50%, transparent 100%);
  animation: slideInRight 0.8s ease-out;
}

/* ===== Visualization Cards ===== */

.bg-white {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.bg-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===== Print Styling ===== */

@media print {
  #particle-canvas {
    display: none !important;
  }

  .scenario-card {
    animation: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  svg {
    page-break-inside: avoid;
  }

  canvas {
    page-break-inside: avoid;
  }
}

/* ===== Accessibility ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .loading-globe {
    animation: none;
  }

  .scenario-card.negative,
  .scenario-card.positive {
    animation: none;
  }

  .gauge-arc,
  .gauge-needle {
    animation: none;
  }
}

/* ===== Scrollbar Styling ===== */

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Link Styling ===== */

a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* ===== Badge/Tag Styling ===== */

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

/* ===== Sticky Navigation Height Adjustment ===== */

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

/* ===== Footer ===== */

footer {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent);
  border-top: 1px solid #e5e7eb;
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-top: 4rem;
}