/* =============================================================================
 * custom.css — Hand-written styles that complement Tailwind utilities
 * (glassmorphism, scrollbar, focus rings, tab/accordion states, motion).
 * Tailwind handles ~95% of styling; this file covers the rest.
 * ========================================================================== */

:root {
  --ink: #0f172a;
  --charcoal: #1e293b;
  --amber: #f08804;
  --orange: #ff9900;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  /* Subtle gaming grid + radial glow behind the dark theme. */
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 153, 0, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.08), transparent 55%),
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
}

/* ----- Accessibility: skip link + screen-reader-only ----- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  border-radius: 0.5rem;
  background: var(--orange);
  color: var(--ink);
  padding: 0.5rem 1rem;
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Visible, consistent keyboard focus rings everywhere. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----- Glassmorphic header ----- */
#site-header {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(51, 65, 85, 0.35);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#site-header.is-scrolled {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(255, 153, 0, 0.25);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.8);
}

/* ----- Tabs ----- */
.tab-active {
  color: var(--orange);
  border-color: var(--orange);
}

/* ----- Gallery main image fade on swap ----- */
#gallery-main { transition: opacity 0.18s ease; }

/* ----- Multi-line clamp fallback (Tailwind ships line-clamp, this is a safety net) ----- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- Custom scrollbar for the dark theme ----- */
* { scrollbar-width: thin; scrollbar-color: var(--amber) var(--charcoal); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--charcoal); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--amber), var(--orange));
  border-radius: 999px;
  border: 2px solid var(--charcoal);
}

/* ----- Hero shimmer accent ----- */
.hero-shine {
  background: linear-gradient(110deg, #f08804 20%, #ff9900 40%, #ffd28a 50%, #ff9900 60%, #f08804 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}