/* ============================================================
   style.css — TwitterGIFDownloader (2025-10-30c)
   - Gate (block site until consent)
   - Light/Dark tokens
   - Fancy sections (Formats + Devices)
   - Feature cards, tiles, buttons, inputs, alerts
   - Footer description under logo
============================================================ */

/* -------- Gate: hide site until consent accepted -------- */
body.gate-on .site-content { opacity: 0; pointer-events: none; filter: blur(2px); transition: opacity .2s ease; }
body.no-scroll { overflow: hidden; }

/* Background gradient helper (optional) */
.bg-gradient-radial-dark {
  background-color: #0B1120;
  background-image:
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(222,23%,13%,1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(216,23%,13%,1) 0, transparent 50%);
}

/* Spinner */
.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inputs & buttons */
.input {
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  border: 1px solid rgba(100,116,139,.45);
  background: rgba(255,255,255,.9);
  color: #0f172a;
}
.input::placeholder { color: #64748b; }
.dark .input {
  background: rgba(2,6,23,.6);
  color: #e2e8f0;
  border-color: rgba(71,85,105,.7);
}
.btn-primary {
  padding: 1rem 1.5rem;
  border-radius: .75rem;
  font-weight: 700;
  background: #2563eb;
  color: #fff;
  border: 1px solid rgba(37,99,235,.1);
  transition: background .2s ease, transform .05s ease;
}
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  padding: .6rem .9rem;
  border-radius: .75rem;
  border: 1px solid rgba(100,116,139,.35);
  color: #0f172a;
  background: transparent;
}
.dark .btn-ghost { color: #e2e8f0; border-color: rgba(71,85,105,.7); }

/* Nav & footer links */
.nav-link { color: #334155; }
.nav-link:hover { color: #0f172a; }
.dark .nav-link { color: #cbd5e1; }
.dark .nav-link:hover { color: #fff; }
.mobile-link { display:block; padding:.65rem .5rem; border-radius:.5rem; }
.mobile-link:hover { background: rgba(15,23,42,.06); }
.dark .mobile-link:hover { background: rgba(148,163,184,.12); }
.footer-link { color: #64748b; }
.footer-link:hover { color: #0f172a; }
.dark .footer-link { color: #cbd5e1; }
.dark .footer-link:hover { color: #fff; }

/* Alerts */
.alert-error {
  background: rgba(185,28,28,.08);
  border: 1px solid rgba(185,28,28,.35);
  color: #991b1b;
  padding: 1rem;
  border-radius: .75rem;
}
.dark .alert-error {
  background: rgba(185,28,28,.12);
  border-color: rgba(248,113,113,.35);
  color: #fecaca;
}

/* Prose defaults */
.prose { color: #334155; }
.prose h1{ font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.prose h2{ font-size: 1.8rem; font-weight: 700; color: #0f172a; border-bottom: 2px solid #3b82f6; padding-bottom: .5rem; margin-top: 2.5rem; margin-bottom: 1.5rem; }
.prose h3{ font-size:1.25rem; font-weight:600; color:#0f172a; margin:2rem 0 .5rem; }
.prose p, .prose li{ font-size:1rem; line-height:1.7; margin-bottom:1rem; }
.prose a{ color:#2563eb; text-decoration:underline; }
.dark .prose { color: #cbd5e1; }
.dark .prose h1, .dark .prose h2, .dark .prose h3 { color:#fff; }

/* Feature cards (why section) */
.feature-card{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.8));
  border:1px solid rgba(100,116,139,.25);
  border-radius:1rem; padding:1.5rem;
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
}
.feature-card h3{ font-size:1.125rem; font-weight:800; margin:.25rem 0 .5rem; }
.feature-card p{ color:#475569; }
.feature-chip{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.02em;
  padding:.25rem .5rem; border-radius:999px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe;
}
.dark .feature-card{
  background: linear-gradient(180deg, rgba(30,41,59,.7), rgba(15,23,42,.7));
  border-color: rgba(71,85,105,.5);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.dark .feature-card p{ color:#cbd5e1; }
.dark .feature-chip{ background:#1e293b; color:#93c5fd; border-color:#334155; }

/* ======= Fancy Sections (Formats + Devices) ======= */
.fancy-section{
  position: relative;
  padding: 4rem 0 5rem;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 400px at 90% 20%, rgba(14,165,233,.08), transparent 60%),
    linear-gradient(180deg, rgba(241,245,249,.6), rgba(241,245,249,0));
}
.dark .fancy-section{
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 400px at 90% 20%, rgba(14,165,233,.16), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,0));
}
.fancy-section.alt{
  background:
    radial-gradient(1000px 400px at 12% 8%, rgba(234,179,8,.09), transparent 60%),
    radial-gradient(900px 400px at 92% 24%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}
.dark .fancy-section.alt{
  background:
    radial-gradient(1000px 400px at 12% 8%, rgba(250,204,21,.16), transparent 60%),
    radial-gradient(900px 400px at 92% 24%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.7), rgba(15,23,42,0));
}

.section-head{ text-align:center; max-width: 56rem; margin: 0 auto; }
.section-badge{
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.35rem .6rem; border-radius:.5rem;
  background:#e2e8f0; color:#0f172a; border:1px solid rgba(15,23,42,.1);
}
.dark .section-badge{ background:#0b1220; color:#e2e8f0; border-color:#334155; }
.section-title{
  margin-top:.75rem; font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 900;
  letter-spacing:-.02em; color:#0f172a;
}
.dark .section-title{ color:#fff; }
.section-lead{
  margin-top:.75rem; font-size:1.05rem; line-height:1.8; color:#475569;
}
.dark .section-lead{ color:#cbd5e1; }

/* Tiles / Cards */
.format-tile, .device-card{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(100,116,139,.25);
  border-radius: 1rem; padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.dark .format-tile, .dark .device-card{
  background: rgba(15,23,42,.7);
  border-color: rgba(71,85,105,.55);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.format-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.format-head h3{ font-weight:800; }
.dot{
  width:.55rem; height:.55rem; border-radius:999px; background:#22c55e;
  box-shadow: 0 0 0 .16rem rgba(34,197,94,.18);
}
.device-card h3{ font-weight:800; margin-bottom:.6rem; }
.device-card ol{ list-style: decimal; padding-left:1.25rem; color:#475569; }
.dark .device-card ol{ color:#cbd5e1; }

/* Alerts spacing, sticky offset etc. */
:root { --header-h: 80px; }
#results, #video-preview, #download-links, #features, #formats, #devices, #troubleshooting, #legal, #quick-faq, .scroll-anchor {
  scroll-margin-top: calc(var(--header-h) + 12px);
}