/* Motion and finishing touches (Dwayne, 2026-10-27: "I just want the website to be, wow, great website").
   Calm, quick movement only. Everything here is off for visitors who ask their device for less motion, and the
   page looks complete without it (the hidden-until-scrolled state needs motion.js to add html.js-motion). */

/* Header: turns solid with a soft shadow once you scroll (motion.js adds .scrolled). Safe for everyone. */
.header { transition: background .25s, box-shadow .25s; }
.header.scrolled { background: rgba(255, 255, 255, .98); box-shadow: 0 6px 24px rgba(14, 34, 51, .08); }

/* Buttons use the site's font (a <button> otherwise falls back to the phone's own font, like the Menu button did). */
button.btn { font-family: inherit; }

/* Phones and tablets: the Menu panel (motion.js opens it). */
@media (max-width: 1080px) {
  .header .wrap { position: relative; }
  .header.menu-open .mainnav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(14, 34, 51, .12); padding: 6px 16px 14px; white-space: normal; z-index: 30; }
  .header.menu-open .mainnav a { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .header.menu-open .mainnav a:last-child { border-bottom: 0; }
  .header.menu-open { background: #fff; }
}

/* Stars and counters stay readable without motion. */
.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {

  /* Moving between pages: a quick cross-fade instead of a white flash (Chrome, Edge, Safari). */
  @view-transition { navigation: auto; }
  .header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

  /* Cards: a soft light follows the mouse. */
  .spot:hover { background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 106, 156, .07), transparent 70%); }

  /* Homepage headline word changes with a quick slide. */
  .hero h1 .rotate { display: inline-block; transition: opacity .25s, transform .25s; }
  .hero h1 .rotate.out { opacity: 0; transform: translateY(.25em); }

  /* The chat types itself: a blinking cursor while it types. */
  .hub-pop.chat span.typing::after { content: "|"; margin-left: 1px; animation: blink .8s steps(1) infinite; }
  /* Sections, cards and steps ease up into place as you scroll. */
  .js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .js-motion .reveal.in { opacity: 1; transform: none; }

  /* Hero: the words arrive first, then the screen, then a website chat and a call pop up like it's happening now. */
  .js-motion .hero .wrap > div:first-child > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .js-motion .hero .wrap > div:first-child > :nth-child(2) { animation-delay: .08s; }
  .js-motion .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .16s; }
  .js-motion .hero .wrap > div:first-child > :nth-child(4) { animation-delay: .24s; }
  .js-motion .hero .wrap > div:first-child > :nth-child(5) { animation-delay: .32s; }
  .js-motion .hero-art.hub .monitor { animation: rise 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
  .js-motion .hero-art.hub .desk-phone { animation: rise 1s .45s cubic-bezier(.2, .7, .2, 1) both, float 7s 1.6s ease-in-out infinite; }
  .js-motion .hub-pop.chat { animation: pop .55s 1.3s cubic-bezier(.2, .9, .3, 1.2) both; }
  .js-motion .hub-pop.call { animation: pop .55s 2.1s cubic-bezier(.2, .9, .3, 1.2) both; }
  /* The call is ringing: a soft green ring around it, a few times. */
  .js-motion .hub-pop.call::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid #3DD68C; opacity: 0; animation: ring 1.6s 2.6s ease-out 3; pointer-events: none; }

  /* Light slowly moving behind the hero and the dark "why switch" band. */
  .hero { position: relative; }
  .hero > .wrap { position: relative; z-index: 1; }
  .hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 50% at 70% 20%, rgba(10, 106, 156, .10), transparent 70%), radial-gradient(35% 45% at 20% 80%, rgba(61, 214, 140, .07), transparent 70%); animation: drift 22s ease-in-out infinite alternate; pointer-events: none; }
  .section.dark { position: relative; overflow: hidden; }
  .section.dark > .wrap { position: relative; z-index: 1; }
  .section.dark::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(35% 45% at 25% 30%, rgba(10, 106, 156, .35), transparent 70%), radial-gradient(30% 40% at 80% 75%, rgba(159, 211, 240, .12), transparent 70%); animation: drift 26s ease-in-out infinite alternate; pointer-events: none; }

  /* Buttons and cards lift a little under the mouse; arrows nudge forward. */
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10, 106, 156, .18); }
  .btn .arrow { display: inline-block; transition: transform .2s; }
  .btn:hover .arrow, a:hover > .arrow { transform: translateX(4px); }
  .review, .step, .link-card, .product { transition: transform .25s, box-shadow .25s, border-color .25s; }
  .review:hover, .link-card:hover, .product:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 34, 51, .10); }
  .step:hover { transform: translateY(-3px); }

  /* Switching tabs and gallery views: a short cross-fade instead of a jump. */
  [role="tabpanel"]:not([hidden]) { animation: fade .45s ease both; }
  .mock:not([hidden]) { animation: fade .35s ease both; }
  img.swap { animation: fade .4s ease both; }

  /* Review stars fill in from left to right when they come into view. */
  .js-motion .review.reveal .stars, .js-motion .rating.reveal .stars { background: linear-gradient(90deg, #F2B01E 50%, #DCE3EA 50%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.1s .25s ease; }
  .js-motion .review.reveal.in .stars, .js-motion .rating.reveal.in .stars { background-position: 0 0; }
}

/* Phones: the reviews become a swipeable row (motion.js turns it gently every few seconds). */
@media (max-width: 700px) {
  .reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .reviews::-webkit-scrollbar { display: none; }
  .reviews .review { flex: 0 0 86%; scroll-snap-align: center; }
}

/* Phones: a small "Call / Get a quote" bar bottom-left once you scroll (the chat button keeps the right corner). */
.quote-bar { display: none; }
@media (max-width: 700px) {
  .quote-bar { display: flex; gap: 8px; position: fixed; left: 16px; bottom: 16px; z-index: 40; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
  .quote-bar.show { opacity: 1; transform: none; pointer-events: auto; }
  .quote-bar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 99px; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 8px 22px rgba(14, 34, 51, .22); }
  .quote-bar .qb-quote { background: #0A6A9C; color: #fff; }
  @media (max-width: 350px) { .quote-bar { bottom: 72px; } } /* very small phones: sit above the chat button */
  .quote-bar .qb-call { width: 44px; padding: 0; justify-content: center; font-size: 19px; background: #fff; color: #0A6A9C; border: 1px solid #D6E2EA; }
}
@media print { .quote-bar { display: none !important; } }

/* FAQ plus sign turns smoothly. */
.faq .plus { transition: transform .25s; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print { .js-motion .reveal { opacity: 1 !important; transform: none !important; } }