/* Five One Nine Marketing — Global Styles (SHARED)
 *
 * Custom CSS that complements Tailwind. Used across every page.
 * Tokens that mirror Tailwind config use the same hex values — keep them in sync.
 */

body { font-family: 'Poppins', system-ui, sans-serif; color: #414042; background: #F8F8F8; }
.font-heading { font-family: 'Lora', Georgia, 'Times New Roman', serif; }

/* Slate-grain gradient panel with noise texture overlay. Reserved for ~1-2 hero/CTA moments per page. */
.bg-slate-grain { position: relative; background: linear-gradient(145deg, #8AABB2, #C5D9DE); }
.bg-slate-grain > * { position: relative; z-index: 1; }
.bg-slate-grain::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  pointer-events: none; mix-blend-mode: overlay; z-index: 0;
}

/* Photo placeholders, replace with real assets later (Figma source). */
.placeholder-photo {
  background: linear-gradient(135deg, #4a4a4a 0%, #6a6a6a 50%, #4a4a4a 100%);
  filter: grayscale(100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); font-size: 12px;
  font-family: 'Poppins', sans-serif; text-align: center;
  padding: 16px; border-radius: 16px;
}
.placeholder-photo.square { aspect-ratio: 1 / 1; }
.placeholder-photo.portrait { aspect-ratio: 4 / 5; }
.placeholder-photo.landscape { aspect-ratio: 16 / 9; }
.placeholder-photo.wide { aspect-ratio: 4 / 3; }

/* Logo placeholders for the "Worked With" wall, replace with real client SVGs later. */
.placeholder-logo {
  background: #f5f5f5; border: 1px solid #e2e5e8;
  display: flex; align-items: center; justify-content: center;
  color: #8a8f94; font-size: 11px; font-family: 'Poppins', sans-serif;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 24px; transition: all 250ms ease-out;
  filter: grayscale(100%);
}
.placeholder-logo:hover { filter: grayscale(0%); background: #fafafa; }

/* Scroll-reveal animation hooks (Level 2 motion per design system). */
[data-animate] { opacity: 0; transform: translateY(16px); }
[data-animate].is-active { opacity: 1; transform: translateY(0); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }

[data-stagger] { opacity: 0; transform: translateY(12px); }
[data-stagger].is-active { opacity: 1; transform: translateY(0); transition: opacity 400ms ease-out, transform 400ms ease-out; }

/* Testimonial marquee, continuous seamless scroll with hover pause.
   Math: 5 unique cards per set, each card 320px (w-80) + 20px right margin (mr-5) = 340px per slot.
   Set width = 5 × 340 = 1700px. Track has 3 sets (15 cards total = 5100px).
   Translation = exactly one set (-1700px), so set 2 lands precisely where set 1 started: seamless loop.
   Track always extends past viewport (5100 - 1700 = 3400px buffer), so no gap on any viewport up to 3400px. */
@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-1700px); }
}
.testimonial-track {
  animation: testimonial-scroll 60s linear infinite;
  will-change: transform;
}
.testimonial-marquee-container { mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%); }
.testimonial-marquee-container:hover .testimonial-track,
.testimonial-marquee-container:focus-within .testimonial-track { animation-play-state: paused; }

/* Narrative section: second sentence starts in secondary color and fades to headline color as the user scrolls past it.
   Modern browsers (Chrome 115+, Edge 115+) get a true scroll-driven gradient via animation-timeline: view().
   Other browsers fall back to a class-swap transition triggered by IntersectionObserver in components.js. */
.narrative-fade { color: #8A8F94; transition: color 1500ms cubic-bezier(0.16, 1, 0.3, 1); }
.narrative-fade.is-revealed { color: #2E3C41; }
@supports (animation-timeline: view()) {
  .narrative-fade {
    animation: narrative-color-fade linear both;
    animation-timeline: view();
    animation-range: cover 15% cover 55%;
    transition: none;
  }
  @keyframes narrative-color-fade {
    from { color: #8A8F94; }
    to { color: #2E3C41; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .narrative-fade { color: #2E3C41; transition: none; animation: none; }
}

/* Underline-link hover effect for inline text links. */
.underline-link { position: relative; }
.underline-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: currentColor;
  transition: width 200ms ease-out;
}
.underline-link:hover::after { width: 100%; }

/* Focus state for keyboard navigation, brand-coral outline. */
*:focus-visible { outline: 2px solid #F57F5B; outline-offset: 2px; border-radius: 4px; }

/* Skip-to-content link for screen reader users, hidden until focused. */
.skip-link {
  position: absolute; top: -40px; left: 16px; z-index: 100;
  background: #F57F5B; color: white; padding: 8px 16px;
  border-radius: 50px; font-weight: 600;
  transition: top 150ms ease-out;
}
.skip-link:focus { top: 16px; }

/* Nav pill buttons (3-tier hierarchy per brand.md: Slate Light default, Slate Dark hover, Slate active). */
.nav-button {
  background: #CBE1E8; color: #2E3C41; font-weight: 500;
  padding: 0.625rem 1.25rem; border-radius: 50px; font-size: 15px;
  transition: all 150ms ease-out;
}
.nav-button:hover { background: #8AB3BD; color: #FFFFFF; }
.nav-button[data-active="true"] { background: #A8CDD7; color: #FFFFFF; }
.nav-button[data-active="true"]:hover { background: #8AB3BD; }

/* Global reduced-motion respect: suppress all transitions and animations for users who prefer it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-animate], [data-stagger] { opacity: 1; transform: none; }
  .testimonial-track { animation: none; }
}