/* Title Pack showcase (homepage, after the tools grid): a premium Collections pack --
   a centered heading, then a preview wall (preview-wall.css) of its titles playing, mostly
   the Modern folder (data-folder on each tile). Tiles start on a still frame and
   assets/js/title-pack.js swaps in each animation; with reduced motion the stills stay. */

.title-pack { background: #FAFAF8; padding-bottom: 88px; overflow: hidden; }
.title-pack-head { text-align: center; margin-bottom: 46px; }
.title-pack-head .badge { margin-bottom: 14px; }
.title-pack-head h2 { font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.title-pack-head p { color: var(--muted); font-size: 18px; font-weight: 500; margin: 14px auto 0; max-width: 560px; }
.title-pack-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 20px; font-size: 14px; }
.title-pack-meta img { width: 26px; height: 26px; display: block; }
.title-pack-plan { color: var(--muted); font-weight: 600; }
.title-pack-more { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.title-pack-more:hover { border-bottom-color: var(--ink); }

.title-pack .pwall-tile { background: #000; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .55); transition: transform .2s ease, box-shadow .2s ease; }
/* Trendy Shine previews leave wide black margins around the title: zoom in so it fills the
   tile. Modern previews fill their frame already; Apple Motion titles are small, so zoom further. */
.title-pack .pwall-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); }
.title-pack .pwall-tile[data-folder="modern"] img { transform: none; }
.title-pack .pwall-tile[data-folder="apple-motion"] img { transform: scale(1.3); }
.title-pack .pwall-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 16px 30px -16px rgba(0, 0, 0, .6); }

.title-pack-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 34px; }
.title-pack-note b { color: var(--ink); font-weight: 700; }

@media (max-width: 600px) {
  .title-pack { padding-bottom: 64px; }
  .title-pack-head { margin-bottom: 32px; }
  .title-pack-head p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .title-pack .pwall-tile { transition: none; }
  .title-pack .pwall-tile:hover { transform: none; }
}