/* Shared site-wide page-load animation for gorillobuild.com. Loaded via a
   plain <link> since the site has no bundler - every page just includes
   this stylesheet alongside its own inline <style> block.

   Rather than requiring every page's markup to be touched by hand, this
   targets each page's existing heading/intro/content class names directly
   (they're already consistent across the site - .page-eyebrow/.page-title,
   .hero-eyebrow/.hero-title, etc.), so linking the stylesheet is enough for
   a page to pick up the cascade automatically. Nav and footer intentionally
   have no rules here, so they stay static. */

@keyframes gb-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gb-animate-in {
  animation: gb-fade-in-up 450ms ease-out both;
}
.gb-animate-in-1 { animation-delay: 0ms; }
.gb-animate-in-2 { animation-delay: 90ms; }
.gb-animate-in-3 { animation-delay: 180ms; }
.gb-animate-in-4 { animation-delay: 270ms; }
.gb-animate-in-5 { animation-delay: 360ms; }

/* Tier 1: headings */
.page-eyebrow, .page-title,
.hero-eyebrow, .hero-title, .hero-logo,
.features-eyebrow, .features-hero-title,
.support-eyebrow, .support-title,
.legal-eyebrow, .legal-title,
#account-heading {
  animation: gb-fade-in-up 450ms ease-out both;
}

/* Tier 2: intro/subtitle text */
.page-intro,
.hero-subtitle,
.features-hero-subtitle,
.support-subtitle,
.legal-updated {
  animation: gb-fade-in-up 450ms ease-out both 90ms;
}

/* Tier 3: the main content block/cards */
.auth-card,
.settings-layout,
.contact-form,
.pricing-grid, #pricing-error,
.browse-layout, .mobile-filter-overlay,
.legal-placeholder-banner, .legal-section,
.hero-content .btn-primary, .hero-content .btn-ghost-gold, .about,
.hero-search, .hero-pills, .hero-trust, .section-wrapper,
.projects-wrapper, .support-layout,
.stats-bar, .features-grid, .gorillo-section, .previews-section,
.panel {
  animation: gb-fade-in-up 450ms ease-out both 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .gb-animate-in,
  .page-eyebrow, .page-title,
  .hero-eyebrow, .hero-title, .hero-logo,
  .features-eyebrow, .features-hero-title,
  .support-eyebrow, .support-title,
  .legal-eyebrow, .legal-title,
  #account-heading,
  .page-intro, .hero-subtitle, .features-hero-subtitle, .support-subtitle, .legal-updated,
  .auth-card, .settings-layout, .contact-form,
  .pricing-grid, #pricing-error,
  .browse-layout, .mobile-filter-overlay,
  .legal-placeholder-banner, .legal-section,
  .hero-content .btn-primary, .hero-content .btn-ghost-gold, .about,
  .hero-search, .hero-pills, .hero-trust, .section-wrapper,
  .projects-wrapper, .support-layout,
  .stats-bar, .features-grid, .gorillo-section, .previews-section,
  .panel {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Site-wide dark theming for the browser's own UI --------------------
   Piggy-backs on this already-everywhere stylesheet (see header note) so
   every page gets it without touching 26 heads by hand.

   Without these, iOS Safari treats the site as light: it paints the address
   bar, the bottom toolbar and the overscroll ("rubber-band") area WHITE,
   which clashes with the dark site even though <meta theme-color> is dark.
   color-scheme:dark opts the page into dark UA chrome (and lets the dark
   theme-color actually take effect); giving <html> a dark background means
   the overscroll / safe-area behind the bars is dark instead of the default
   white canvas. Each page's <body> gradient sits on top and is unaffected. */
:root { color-scheme: dark; }
html { background: #0d1117; }