/* Generated by scripts/build-css-bundles.py from: readability.css, motion.css. Edit those files, not this one. */

/* --- readability.css --- */
/* Site-wide readability (owner request, 31 October 2026; see DESIGN.md). Same fonts and palette:
   dim greys use a brighter step of the same white, small body copy is a little larger, and blue buttons meet 4.5:1. */

/* Secondary text: 70% white → 82% white; FAQ answers likewise. */
main .text-white\/70,
main .uk-accordion-content .text-muted-foreground { color: rgb(255 255 255 / .82); }

/* Descriptive copy set in text-sm (14px / 20px) → 15px with a 1.6 line height. */
main p.text-sm:not(.lg\:text-base),
main li.text-sm,
main span.text-sm.text-white\/70,
main #pricing span.text-sm,
main .uk-accordion-content :is(p, ul) { font-size: .9375rem; line-height: 1.6; }

/* Longer paragraphs that already use 16px get more line spacing. */
main p.text-white\/70 { line-height: 1.65; }
@media (min-width: 1024px) { main p.text-sm.lg\:text-base { line-height: 1.6; } }

/* Phones and tablets: body copy at 16px, the recommended minimum for reading on a phone. */
@media (max-width: 1023px) {
  main p.text-sm.lg\:text-base { font-size: 1rem; line-height: 1.6; }
  main [data-slot="accordion-item"] span.text-sm.lg\:text-base { font-size: 1rem; line-height: 1.5; }
}

/* Footer: 35% white failed contrast (3:1) → 65% white; the hover colour is kept. */
footer :is(.footer-services, .footer-links, .footer-support) a,
footer .text-white\/35,
footer .footer-legal { color: rgb(255 255 255 / .65); }
footer .footer-legal :is(a, span) { color: inherit; }
footer a:hover,
footer .text-white\/35:hover { color: var(--color-primary); }
@media (max-width: 767px) {
  footer .footer-legal { font-size: .8125rem; }
}

/* Blue buttons: white on brand #0084ff is 3.7:1, below the 4.5:1 minimum. They use the darker blue of the enquiry button
   (#126ce5, 4.9:1; hover #0e5cc7). Blue text and accents keep the brand #0084ff, which passes on black. */
:is(.btn.primary, .book-demo-btn, .consult-btn, .cta-btn, .pricing-cta, .site-header-demo, .sa-about-link, .ob-demo) {
  background-color: #126ce5;
  border-color: #126ce5;
}
@media (hover: hover) {
  :is(.btn.primary, .book-demo-btn, .consult-btn, .cta-btn, .pricing-cta, .site-header-demo, .sa-about-link, .ob-demo):hover {
    background-color: #0e5cc7;
    border-color: #0e5cc7;
  }
}

/* Brand-blue text on mid-grey cards reads below 4.5:1; those spots use the lighter site blue (#8bc1ff, as the email link). */
main p a.text-primary.underline { color: #8bc1ff; }

/* Sitemap page buttons were hard-coded to brand #0084ff; same accessible blue as other buttons. */
main a.bg-\[\#0084FF\] { background-color: #126ce5; }
main a.bg-\[\#0084FF\]:hover { background-color: #0e5cc7; }

/* Button arrows are drawn as SVG: the "↗" character turns into a boxed emoji on iPhones. */
a > span[aria-hidden="true"] > .sa-arrow { display: block; }
a:has(> span[aria-hidden="true"] > .sa-arrow) { display: inline-flex; align-items: center; gap: .5rem; }

/* --- motion.css --- */
/* Site-wide motion (owner request, 31 Oct 2026): scroll reveals, hero life and hover feedback.
   Transform and opacity only (no layout shift). Everything is off for prefers-reduced-motion.
   Reveal classes are added by /src/js/motion.js; without JS nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: elements start slightly lower and transparent, then settle in, staggered by --motion-i. */
  /* Uses the separate `translate` property so hover `transform` effects still work after the reveal. */
  .motion-ready [data-motion] {
    opacity: 0;
    translate: 0 22px;
    --motion-delay: calc(var(--motion-i, 0) * 80ms);
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--motion-delay), translate .6s cubic-bezier(.2, .7, .2, 1) var(--motion-delay),
      transform .25s ease, box-shadow .25s ease;
  }
  .motion-ready [data-motion].is-visible { opacity: 1; translate: none; }

  /* Hero: phones keep floating after they arrive; badge and buttons slide in. Headline and image are never hidden (LCP). */
  .sa-hero-phone-motion { animation: sa-hero-enter .65s cubic-bezier(.2, .7, .2, 1) both, sa-hero-float 7s ease-in-out .9s infinite; }
  .sa-hero-phone--rooms .sa-hero-phone-motion { animation-delay: .08s, 1.4s; }
  .sa-hero-phone--tournaments .sa-hero-phone-motion { animation-delay: .16s, 2.1s; }
  @keyframes sa-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .sa-platform-hero-copy > .sa-hero-trust,
  .sa-platform-hero-actions { animation: motion-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .sa-platform-hero-copy > .sa-hero-trust { animation-delay: .15s; }
  .sa-platform-hero-actions { animation-delay: .28s; }
  @keyframes motion-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Trust badge: the shield gives a soft pulse every few seconds. */
  .sa-hero-trust svg { animation: motion-pulse 3.2s ease-in-out 1.2s infinite; border-radius: 50%; }
  @keyframes motion-pulse { 0%, 70%, 100% { filter: drop-shadow(0 0 0 rgb(0 132 255 / 0)); } 35% { filter: drop-shadow(0 0 6px rgb(0 132 255 / .9)); } }
}

/* Hover feedback for mouse users. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.btn.primary, .home-contact-submit, .contact-page-submit, .pricing-cta, .sa-about-link, .ob-demo) {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  :is(.btn.primary, .home-contact-submit, .contact-page-submit, .pricing-cta, .sa-about-link, .ob-demo):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgb(18 108 229 / .75);
  }
  :is(.btn.primary, .home-contact-submit, .contact-page-submit, .pricing-cta, .sa-about-link, .ob-demo):active { transform: translateY(0); box-shadow: none; }

  /* Arrow links and buttons: the arrow nudges toward where it leads. */
  a > span[aria-hidden="true"]:last-child { display: inline-block; transition: transform .2s ease; }
  a:hover > span[aria-hidden="true"]:last-child { transform: translateX(3px); }

  /* Cards lift slightly. */
  main :is(.sa-icon-card, .home-tech-group, .features-items article, #white-label-or-build article) {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  main :is(.sa-icon-card, .home-tech-group, .features-items article, #white-label-or-build article):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -18px rgb(0 0 0 / .8);
  }

  /* Technology logos pop on hover. */
  .home-tech-icon { transition: transform .2s ease; }
  .home-tech-group li:hover .home-tech-icon { transform: scale(1.1) rotate(-3deg); }
}