/* =====================================================================
   FILES Converter, Viewer and Editor — custom styles
   Tailwind handles 95% of styling; this file adds small refinements.
   ===================================================================== */

/* Smooth color transitions for theme toggle */
*, *::before, *::after { transition: background-color .25s ease, border-color .25s ease, color .15s ease; }

/* Reveal-on-scroll (toggled via IntersectionObserver in app.js) */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
[data-reveal][data-delay="5"]{ transition-delay:.40s; }
[data-reveal][data-delay="6"]{ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* Glass surface helper */
.glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark .glass {
  background: rgba(15,23,42,.6);
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg,#2563EB,#06B6D4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.dark .text-gradient {
  background: linear-gradient(90deg,#3B82F6,#22D3EE);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Soft animated grid/mesh background for hero */
.hero-blob {
  position:absolute; border-radius:9999px; filter: blur(70px); opacity:.5; pointer-events:none;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); background-clip: padding-box; }

/* Focus ring polish */
:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 6px; }
.dark :focus-visible { outline-color: #3B82F6; }

/* Hide spin buttons on number inputs */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Code blocks for editor/viewer */
pre, textarea.code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-variant-ligatures: none;
  tab-size: 2;
}

/* Dropzone state */
.dropzone.dragging { border-color: #06B6D4 !important; background: rgba(6,182,212,.08) !important; transform: scale(1.01); }

/* Progress bar shimmer */
.progress-shimmer {
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Marquee for extension ticker */
.marquee { display:flex; gap:.5rem; animation: marquee 40s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }