/* -----------------------------------------------------------------------------
 * style.css — Custom styles & animations layered on top of Tailwind.
 * Tailwind (via CDN) handles utilities; this file owns the theme tokens,
 * glassmorphism, the ambient aurora background and small micro-interactions.
 * --------------------------------------------------------------------------- */

:root {
  --bg: #f6f7fb;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-brd: rgba(15, 23, 42, 0.08);
  --glass-shadow: 0 10px 40px -12px rgba(30, 41, 59, 0.25);
}

html.dark {
  --bg: #060913;
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-brd: rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
}

html, body { background: var(--bg); }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04";
}

/* ---- Glass surface --------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--glass-shadow);
}

/* ---- Ambient aurora backdrop ---------------------------------------------- */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 10% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(50rem 28rem at 100% 0%, rgba(236, 72, 153, 0.14), transparent 55%),
    radial-gradient(45rem 25rem at 50% 120%, rgba(56, 189, 248, 0.12), transparent 60%);
  animation: aurora-shift 18s ease-in-out infinite alternate;
}
html.dark .bg-aurora { opacity: 0.9; }

@keyframes aurora-shift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -2%, 0) scale(1.05); }
}

/* ---- Micro-interactions ---------------------------------------------------- */
#grabBtn { position: relative; overflow: hidden; }
#grabBtn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
#grabBtn:hover::after { transform: translateX(120%); }

/* Format buttons: subtle lift on hover. */
#formats button { transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
#formats button:hover:not(.cursor-not-allowed) { transform: translateY(-2px); }

/* Line clamp fallback for older engines. */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Progress bar sheen. */
#progBar { position: relative; overflow: hidden; }
#progBar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: sheen 1.4s linear infinite;
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Custom scrollbars for log/pre blocks. */
pre::-webkit-scrollbar { height: 8px; width: 8px; }
pre::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.4); border-radius: 8px; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora, #progBar::after, .animate-float, .animate-pulse { animation: none !important; }
  #formats button:hover { transform: none; }
}