/* Placeholder styles (Dev scaffold). Design owns the real look via design/batches/. */
:root {
  --bg: #fafafa; --fg: #161616; --muted: #5c5c5c; --card: #ffffff; --line: #dddddd;
  --accent: #3b5bdb; --accent-2: #12b886; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111214; --fg: #f1f1f1; --muted: #a8a8a8; --card: #1b1c1f; --line: #2c2d31; --accent: #748ffc; --accent-2: #38d9a9; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--fg); }
.site-header, main, .site-footer { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.site-header { padding-top: 40px; }
.site-header h1 { margin: 0; font-size: 2rem; }
.tagline { color: var(--muted); margin: 4px 0 24px; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.control { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: 4px; }
.control input, .control select, .controls button {
  font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; min-height: 40px;
}
.control input { min-width: min(260px, 100%); }
.controls button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#result-count { color: var(--muted); font-size: .9rem; }
.grid { list-style: none; padding: 0; margin: 0 0 48px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s ease, border-color .15s ease; }
a.tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.tile-media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #222; }
.tile-text { padding: 12px 14px 14px; }
.tile-name { font-size: 1.1rem; margin: 0 0 4px; }
.tile-tagline { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.tile-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .75rem; color: var(--muted); }
.tile-tag::before { content: '#'; }
.tile-credit { margin: 6px 0 0; font-size: .75rem; color: var(--muted); }
.prose { max-width: 680px; }
a { color: var(--accent); }
a.tile { color: inherit; }
.tile-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; }
.tile-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.tile-draft { border-color: #e8590c !important; color: #e8590c; }
.tile-soon { margin: 0 14px 14px; font-size: .8rem; color: var(--muted); }

/* Placeholder "product in action" loops until real clips + Design's motion spec. */
.placeholder { position: relative; overflow: hidden; background: linear-gradient(135deg, #1f2a44, #16302b); }
.placeholder span { position: absolute; left: 10%; height: 10%; border-radius: 4px; background: rgba(255,255,255,.75); }
.placeholder-bars span { bottom: 12%; width: 12%; height: 30%; transform-origin: bottom; animation: bar 1.4s ease-in-out infinite; background: var(--accent-2); }
.placeholder-bars span:nth-child(2) { left: 30%; animation-delay: -.3s; }
.placeholder-bars span:nth-child(3) { left: 50%; animation-delay: -.6s; }
.placeholder-bars span:nth-child(4) { left: 70%; animation-delay: -.9s; }
@keyframes bar { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1.6); } }
.placeholder-scroll span { width: 80%; animation: scroll 3s linear infinite; }
.placeholder-scroll span:nth-child(2) { animation-delay: -.75s; width: 60%; }
.placeholder-scroll span:nth-child(3) { animation-delay: -1.5s; width: 70%; }
.placeholder-scroll span:nth-child(4) { animation-delay: -2.25s; width: 50%; }
@keyframes scroll { from { top: 105%; } to { top: -15%; } }
.placeholder-pulse span { top: 40%; left: 40%; width: 20%; height: 20%; border-radius: 50%; border: 3px solid var(--accent-2); background: transparent; animation: pulse 2s ease-out infinite; }
.placeholder-pulse span:nth-child(2) { animation-delay: -.5s; }
.placeholder-pulse span:nth-child(3) { animation-delay: -1s; }
.placeholder-pulse span:nth-child(4) { animation-delay: -1.5s; }
@keyframes pulse { from { transform: scale(.2); opacity: 1; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* Still frame by default; plays only while the tile is hovered or focused. */
  .tile { transition: none; }
  a.tile:hover { transform: none; }
  .placeholder span { animation-play-state: paused; }
  .tile:hover .placeholder span, .tile:focus .placeholder span { animation-play-state: running; }
}
.site-footer { color: var(--muted); font-size: .85rem; padding-bottom: 32px; }