/* Duck Duckling — GIF Gallery Styles */
:root {
  --bg:#0b0d12;
  --bg-elev:#11141a;
  --bg-card:#151922;
  --fg:#eaeef6;
  --muted:#7b8498;
  --accent:#ffd13a;
  --accent-dim:rgba(255,209,58,.18);
  --ring:rgba(255,209,58,.35);
  --border:#222836;
  --shadow:0 10px 30px -10px rgba(0,0,0,.55);
  --radius:14px;
  --radius-sm:10px;
  --gap:14px;
  --max-w:1200px;
  --header-h:72px;
  --speed:.18s;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Unbounded',var(--font-sans);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f5f6f8; --bg-elev:#fff; --bg-card:#fff; --fg:#10131a; --muted:#5b6375; --accent:#c49000; --accent-dim:rgba(196,144,0,.12); --border:#dce1ea; --shadow:0 10px 30px -10px rgba(16,19,26,.18); }
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); line-height:1.5; min-height:100vh; }
img,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* Topbar */
.topbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 20px;
  background:linear-gradient(180deg, var(--bg), rgba(11,13,18,.92) 80%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:clamp(1.1rem,2.5vw,1.4rem); letter-spacing:-.02em; }
.brand-duck { font-size:1.2em; filter:drop-shadow(0 2px 6px var(--accent-dim)); animation:duck-bob 3s ease-in-out infinite; }
@keyframes duck-bob { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-3px) rotate(2deg);} }
.brand-name .accent { color:var(--accent); }

/* Filters */
.filters { display:flex; gap:8px; flex:1 1 auto; justify-content:center; flex-wrap:wrap; }
.chip {
  padding:8px 16px; border-radius:999px;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--muted); font-weight:500; font-size:.85rem;
  transition:all var(--speed);
}
.chip:hover { border-color:var(--accent); color:var(--fg); }
.chip.is-active { background:var(--accent); color:#0b0d12; border-color:var(--accent); }
@media (max-width:560px) { .chip { padding:6px 12px; font-size:.8rem; } }

/* Topbar actions */
.topbar-actions { display:flex; gap:8px; align-items:center; }
.search {
  padding:9px 14px; border-radius:999px; width:170px;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--fg); font:inherit; font-size:.85rem; outline:none;
  transition:border-color var(--speed), width var(--speed);
}
.search:focus { border-color:var(--accent); width:210px; }
.search::placeholder { color:var(--muted); }
@media (max-width:560px) { .search { width:130px; } .search:focus { width:150px; } }
.shuffle-btn {
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--muted); transition:all var(--speed);
}
.shuffle-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); transform:rotate(-8deg); }
.shuffle-btn:active { transform:rotate(8deg) scale(.96); }

/* Hero */
.hero { padding:calc(var(--header-h) + 32px) 20px 24px; text-align:center; max-width:var(--max-w); margin:0 auto; }
.hero h1 { margin:0 0 8px; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5vw,3.5rem); line-height:1.1; letter-spacing:-.03em; background:linear-gradient(135deg,var(--fg) 0%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero em { font-style:normal; color:var(--accent); -webkit-text-fill-color:var(--accent); }
.hero p { margin:0; color:var(--muted); font-size:clamp(1rem,2.2vw,1.15rem); }
.hero-stats { margin-top:16px; display:flex; gap:24px; justify-content:center; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
.hero-stats span { display:flex; align-items:center; gap:6px; }
.hero-stats strong { color:var(--fg); font-weight:600; }

/* Grid */
.grid {
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  padding:0 20px 40px; max-width:var(--max-w); margin:0 auto;
}
@media (max-width:640px) { .grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); --gap:10px; padding:0 12px 32px; } }
@media (min-width:1000px) { .grid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } }

/* Card */
.card {
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed);
  cursor:pointer;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); }
.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.card-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease, filter .2s;
}
.card:hover .card-img { transform:scale(1.03); }

/* animate on hover */
.card .card-anim { opacity:0; pointer-events:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .15s; }
.card:hover .card-anim { opacity:1; }

.card-tag {
  position:absolute; right:10px; bottom:10px; z-index:2;
  padding:4px 10px; border-radius:6px;
  background:rgba(11,13,18,.85); backdrop-filter:blur(6px);
  font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border:1px solid var(--border);
  opacity:0; transform:translateY(6px); transition:all var(--speed);
}
.card:hover .card-tag { opacity:1; transform:translateY(0); }
.card[data-src="klipy"] .card-tag { color:var(--accent); border-color:var(--accent); }
.card[data-src="tenor"] .card-tag { color:#ff6b4a; border-color:#ff6b4a; }
.card[data-src="giphy"] .card-tag { color:#5ce1a3; border-color:#5ce1a3; }

/* Placeholder shimmer */
.card.loading .card-img {
  background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elev) 50%, var(--bg-card) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:rgba(11,13,18,.96); backdrop-filter:blur(8px);
  padding:20px; animation:fade-in .15s ease;
}
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.lightbox[hidden] { display:none; }
.lb-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--muted); font-size:1.5rem; line-height:1;
  transition:all var(--speed);
}
.lb-btn:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.lb-close { top:20px; right:20px; transform:none; width:44px; height:44px; font-size:1.2rem; }
.lb-close:hover { background:rgba(255,60,60,.12); border-color:#ff3c3c; color:#ff6b6b; }
.lb-prev { left:16px; } .lb-next { right:16px; }
@media (max-width:640px) { .lb-prev,.lb-next { display:none; } }
.lb-stage { display:flex; align-items:center; justify-content:center; max-width:95vw; max-height:85vh; }
.lb-card { position:relative; max-width:90vw; max-height:80vh; }
.lb-card img, .lb-card video { max-width:100%; max-height:80vh; border-radius:var(--radius); box-shadow:var(--shadow); }
.lb-bar { position:absolute; bottom:-70px; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px; }
.lb-caption { font-weight:500; font-size:.95rem; }
.lb-meta { display:flex; gap:8px; }
.lb-action {
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--bg-card); border:1px solid var(--border); color:var(--muted);
  transition:all var(--speed);
}
.lb-action:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.lb-download { text-decoration:none; }
.lb-download:focus-visible, .lb-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Toast */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  padding:12px 20px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--fg); font-weight:500; font-size:.9rem;
  opacity:0; pointer-events:none;
  transition:all .25s ease; z-index:1100;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Profiles + end note */
.profiles { margin:14px 0 0 !important; font-size:.85rem !important; }
.profiles a { color:var(--accent); font-weight:600; }
.profiles a:hover { text-decoration:underline; }
.end-note { text-align:center; color:var(--muted); padding:10px 20px 60px; margin:0; font-size:.95rem; }
.end-note[hidden] { display:none; }

/* No JS */
.nojs { padding:40px; text-align:center; color:var(--muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .card:hover { transform:none; }
  .card:hover .card-img { transform:none; }
  .brand-duck { animation:none; }
  .shuffle-btn:hover { transform:none; }
}

/* Focus visible polyfill */
:focus:not(:focus-visible) { outline:none; }

/* Scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }