src/styles/deep-research-loader.css

/*
  Deep Research Loader – Fullscreen 3-Phase Animation
  Gemini Aesthetic (baby blue arcs, shimmer, conic gradients)
*/

/* =============================================
   FULLSCREEN OVERLAY
   ============================================= */
.dr-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a0f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.dr-loader-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Ambient Gemini glow behind the main visual */
.dr-ambient-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);
  filter: blur(80px);
  opacity: 0.4;
  animation: dr-glow-spin 8s linear infinite;
  pointer-events: none;
}

@keyframes dr-glow-spin {
  to { transform: rotate(360deg); }
}

/* =============================================
   PHASE CONTAINER (Crossfade logic)
   ============================================= */
.dr-phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.dr-phase.active {
  opacity: 1;
  pointer-events: auto;
}

/* =============================================
   STATUS TEXT (Bottom, Gemini shimmer)
   ============================================= */
.dr-status-text-container {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  z-index: 10;
}

.dr-status-bar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.dr-status-text {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dr-text-shimmer 4s ease infinite;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  filter: drop-shadow(0 0 8px rgba(122, 186, 255, 0.4));
}

.dr-phase-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Inter', sans-serif;
}

/* Phase progress dots */
.dr-phase-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dr-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.5s ease;
}

.dr-phase-dot.active {
  background: #7abaff;
  box-shadow: 0 0 12px rgba(122, 186, 255, 0.6);
  transform: scale(1.3);
}

.dr-phase-dot.done {
  background: rgba(122, 186, 255, 0.5);
}

@keyframes dr-text-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =============================================
   PHASE 1: ROTATING EARTH WITH ARCS (3D Globe)
   ============================================= */
.dr-earth-container {
  width: min(80vw, 80vh, 400px);
  height: min(80vw, 80vh, 400px);
  position: relative;
}

.dr-earth-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 40px rgba(66, 133, 244, 0.3));
}

/* Earth 3D rotation: horizontal scroll of map strip */
.dr-earth-scroll-strip {
  animation: dr-earth-scroll 20s linear infinite;
}

@keyframes dr-earth-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-600px); }
}

/* Ocean & Continents */
.dr-earth-ocean {
  fill: #0d1b2a;
  stroke: rgba(66, 133, 244, 0.3);
  stroke-width: 2;
}

.dr-earth-continent {
  fill: rgba(66, 133, 244, 0.12);
  stroke: rgba(122, 186, 255, 0.4);
  stroke-width: 0.8;
}

/* Grid lines on globe */
.dr-earth-grid {
  fill: none;
  stroke: rgba(122, 186, 255, 0.08);
  stroke-width: 0.5;
}

/* Curved latitude lines for 3D effect */
.dr-earth-lat {
  fill: none;
  stroke: rgba(122, 186, 255, 0.08);
  stroke-width: 0.5;
}

/* Data arcs from Central Europe */
.dr-arc {
  fill: none;
  stroke: #7abaff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 400 400; /* Solid line that builds up */
  stroke-dashoffset: 400;
  opacity: 0.8;
  filter: drop-shadow(0 0 6px rgba(122, 186, 255, 0.8));
}

.dr-arc:nth-child(1) { animation: dr-arc-flow 2.5s ease-in-out infinite; }
.dr-arc:nth-child(2) { animation: dr-arc-flow 3.0s ease-in-out infinite 0.3s; }
.dr-arc:nth-child(3) { animation: dr-arc-flow 2.8s ease-in-out infinite 0.6s; }
.dr-arc:nth-child(4) { animation: dr-arc-flow 3.2s ease-in-out infinite 0.9s; }
.dr-arc:nth-child(5) { animation: dr-arc-flow 2.6s ease-in-out infinite 1.2s; }
.dr-arc:nth-child(6) { animation: dr-arc-flow 3.4s ease-in-out infinite 1.5s; }
.dr-arc:nth-child(7) { animation: dr-arc-flow 2.9s ease-in-out infinite 1.8s; }
.dr-arc:nth-child(8) { animation: dr-arc-flow 3.1s ease-in-out infinite 2.1s; }

@keyframes dr-arc-flow {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: -400; }
}

/* Pulsating endpoint dots */
.dr-endpoint {
  fill: #7abaff;
  opacity: 0;
  animation: dr-endpoint-pulse 2s ease-in-out infinite;
}

.dr-endpoint:nth-child(1) { animation-delay: 0s; }
.dr-endpoint:nth-child(2) { animation-delay: 0.4s; }
.dr-endpoint:nth-child(3) { animation-delay: 0.8s; }
.dr-endpoint:nth-child(4) { animation-delay: 1.2s; }
.dr-endpoint:nth-child(5) { animation-delay: 1.6s; }
.dr-endpoint:nth-child(6) { animation-delay: 2.0s; }
.dr-endpoint:nth-child(7) { animation-delay: 2.4s; }
.dr-endpoint:nth-child(8) { animation-delay: 2.8s; }

@keyframes dr-endpoint-pulse {
  0%, 100% { opacity: 0.3; r: 3; }
  50% { opacity: 1; r: 5; }
}

/* Origin point (Central Europe) */
.dr-origin {
  fill: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

/* =============================================
   PHASE 2: SCROLLING ARTICLE + MAGNIFYING GLASS
   ============================================= */
.dr-article-container {
  width: min(85vw, 420px);
  height: min(70vh, 480px);
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #141420;
  border: 1px solid rgba(122, 186, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Browser chrome top bar */
.dr-article-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: rgba(20, 20, 35, 0.95);
  border-bottom: 1px solid rgba(122, 186, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  z-index: 5;
}

.dr-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.dr-chrome-urlbar {
  flex: 1;
  height: 20px;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

/* Scrolling content strip */
.dr-article-scroll-content {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  animation: dr-article-scroll 12s linear infinite;
}

@keyframes dr-article-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Article skeleton elements */
.dr-article-line {
  height: 8px;
  margin: 0 24px 8px 24px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.dr-article-line.short { width: 60%; }
.dr-article-line.medium { width: 80%; }
.dr-article-line.long { width: 92%; }
.dr-article-line.title {
  height: 14px;
  width: 70%;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 20px;
  margin-bottom: 16px;
}
.dr-article-line.subtitle {
  height: 10px;
  width: 50%;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.dr-article-img-placeholder {
  height: 120px;
  margin: 16px 24px;
  background: rgba(122, 186, 255, 0.04);
  border-radius: 8px;
  border: 1px dashed rgba(122, 186, 255, 0.1);
}

/* Magnifying Glass (overlays on top, always visible) */
.dr-magnifier-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.dr-magnifier-overlay svg {
  width: 100%;
  height: 100%;
}

.dr-magnifier-group {
  animation: dr-magnifier-scan 6s ease-in-out infinite;
}

.dr-magnifier-lens {
  fill: rgba(122, 186, 255, 0.06);
  stroke: #7abaff;
  stroke-width: 3;
  filter: drop-shadow(0 0 12px rgba(122, 186, 255, 0.5));
}

.dr-magnifier-handle {
  stroke: #7abaff;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(122, 186, 255, 0.4));
}

.dr-magnifier-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
  stroke-linecap: round;
}

@keyframes dr-magnifier-scan {
  0%   { transform: translate(60px, 80px); }
  15%  { transform: translate(200px, 100px); }
  30%  { transform: translate(120px, 200px); }
  50%  { transform: translate(250px, 160px); }
  70%  { transform: translate(80px, 300px); }
  85%  { transform: translate(220px, 250px); }
  100% { transform: translate(60px, 80px); }
}

/* =============================================
   PHASE 3: SKELETON REPORT (Continuously looping)
   ============================================= */
.dr-report-container {
  width: min(90vw, 480px);
  height: min(75vh, 600px);
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* The entire report content scrolls up continuously to simulate building */
.dr-report-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  animation: dr-report-build 20s linear infinite;
}

.dr-report-block {
  padding: 24px;
}

@keyframes dr-report-build {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Skeleton lines – Gemini shimmer like PDF skeleton */
.dr-report-skel-line {
  height: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(180,160,240,0.15) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  margin-bottom: 10px;
  animation: dr-report-shimmer 2.5s infinite linear, dr-skel-type-in 1.5s ease-out both;
}

.dr-report-skel-line.short { width: 55%; }
.dr-report-skel-line.medium { width: 78%; }
.dr-report-skel-line.long { width: 95%; }
.dr-report-skel-line.title {
  height: 16px;
  width: 65%;
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(180,160,240,0.22) 50%, rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  margin-top: 24px;
  margin-bottom: 16px;
}
.dr-report-skel-line.subtitle {
  height: 12px;
  width: 45%;
  margin-bottom: 16px;
}

@keyframes dr-report-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes dr-skel-type-in {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Image skeleton placeholder */
.dr-report-skel-image {
  width: 100%;
  height: 100px;
  background: rgba(122, 186, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(122, 186, 255, 0.08);
  margin: 16px 0;
  animation: dr-report-shimmer 3s infinite linear;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, rgba(122,186,255,0.03) 25%, rgba(122,186,255,0.08) 50%, rgba(122,186,255,0.03) 75%);
}

/* Pie chart skeleton */
.dr-report-skel-pie {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 16px solid rgba(255,255,255,0.06);
  margin: 16px auto;
  position: relative;
  box-sizing: border-box;
  background: conic-gradient(
    rgba(66,133,244,0.4) 0deg 140deg,
    transparent 140deg 145deg,
    rgba(155,114,203,0.4) 145deg 260deg,
    transparent 260deg 265deg,
    rgba(244,180,0,0.4) 265deg 360deg
  );
}

/* Bar chart skeleton */
.dr-report-skel-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 90px;
  margin: 16px 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dr-report-skel-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  animation: dr-report-shimmer 2.5s infinite linear;
  background-size: 200% 100%;
}

.dr-report-skel-bar:nth-child(1) { height: 55%; background-image: linear-gradient(90deg, rgba(66,133,244,0.25) 25%, rgba(66,133,244,0.4) 50%, rgba(66,133,244,0.25) 75%); }
.dr-report-skel-bar:nth-child(2) { height: 80%; background-image: linear-gradient(90deg, rgba(155,114,203,0.25) 25%, rgba(155,114,203,0.4) 50%, rgba(155,114,203,0.25) 75%); }
.dr-report-skel-bar:nth-child(3) { height: 45%; background-image: linear-gradient(90deg, rgba(217,101,112,0.25) 25%, rgba(217,101,112,0.4) 50%, rgba(217,101,112,0.25) 75%); }
.dr-report-skel-bar:nth-child(4) { height: 92%; background-image: linear-gradient(90deg, rgba(244,180,0,0.25) 25%, rgba(244,180,0,0.4) 50%, rgba(244,180,0,0.25) 75%); }
.dr-report-skel-bar:nth-child(5) { height: 65%; background-image: linear-gradient(90deg, rgba(66,133,244,0.25) 25%, rgba(66,133,244,0.4) 50%, rgba(66,133,244,0.25) 75%); }