/*
 * Marketing site styles (CCV-14). Loaded only by the "marketing" layout.
 * Scoped under body.marketing-site so nothing leaks into the app.
 *
 * Palette follows the 2026 homepage mockup — classic Western print look:
 * deep brick/maroon accent, warm cream paper, charcoal bars, slab-serif
 * display type (Besley, a Clarendon revival).
 */

.marketing-site {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.marketing-site .font-display {
  /* Rokkitt — condensed geometric slab (Rockwell Condensed style), matching
     the mockup's headline/title lettering. */
  font-family: "Rokkitt", "Rockwell", ui-serif, Georgia, serif;
  letter-spacing: 0.015em;
}

/* Filmic grain over the hero video — subtle vintage-Western texture. */
.hero-grain {
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Staggered load reveal ------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.rise {
  opacity: 0;
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Soft pulse for the eyebrow dot */
@keyframes ping-dot {
  0%   { box-shadow: 0 0 0 0 rgba(125, 47, 36, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(125, 47, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 47, 36, 0); }
}
.dot-pulse { animation: ping-dot 2.2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dot-pulse { animation: none; }
  .rise { animation: none; opacity: 1; }
}