/* Site-wide motion + grid background (v1.8.8). Loaded on every front-end page except the landing pages
   (which have their own in landing.css), checkout and dashboard. The grid look is the one used by the
   "Engineering depth" section of the Custom Web Application page. */

:root { --mo-rgb: var(--wbd-cta-rgb, 29 78 216); }

/* ---------- grid + glow background ---------- */
.wbd-grid-bg { position: relative; isolation: isolate; overflow: clip; }
.wbd-grid-bg::before, .wbd-plans-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgb(var(--mo-rgb) / .055) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--mo-rgb) / .055) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 200px, transparent 640px); mask-image: linear-gradient(to bottom, #000 0, #000 200px, transparent 640px); }
.wbd-grid-bg::after, .wbd-plans-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 560px; height: 560px; top: -260px; right: -140px; border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--mo-rgb) / .15), transparent 66%); }
.wbd-plans-hero { position: relative; isolation: isolate; overflow: hidden; }
.wbd-grid-bg--left::after { right: auto; left: -160px; }

/* plan / product pages: the framed sections get the exact "Engineering depth" grid */
.wbd-plans:not(.wbd-lp) .wbd-plan-card { background-image: linear-gradient(rgb(var(--mo-rgb) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--mo-rgb) / .045) 1px, transparent 1px); background-size: 24px 24px; }

/* headings: a short accent bar under centred section titles */
.wbd-mo-head h2 { position: relative; padding-bottom: 14px; }
.wbd-mo-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; border-radius: 3px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgb(var(--mo-rgb)), rgb(var(--mo-rgb) / .35)); transition: width .9s cubic-bezier(.2,.8,.2,1) .3s; }
.wbd-mo-head.wbd-bar h2::after { width: 56px; }

/* cards: soft light follows the pointer (landing.js-style; set by motion.js) */
.wbd-mo-card:hover { background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--mo-rgb) / .10), transparent 70%); }

/* contact form: focus ring in the theme colour */
.wbd-contact-form input:focus, .wbd-contact-form textarea:focus, .wbd-contact-form select:focus { border-color: rgb(var(--mo-rgb)); box-shadow: 0 0 0 4px rgb(var(--mo-rgb) / .14); outline: none; }
.wbd-contact-form input, .wbd-contact-form textarea, .wbd-contact-form select { transition: border-color .2s, box-shadow .25s; }

@keyframes wbdMoDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-60px, 44px, 0) scale(1.15); } }
@keyframes wbdMoPop { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    .wbd-grid-bg::after, .wbd-plans-hero::after { animation: wbdMoDrift 16s ease-in-out infinite alternate; }

    /* sections rise in as they scroll into view (classes are added by motion.js, then removed again) */
    html.wbd-mo-on .wbd-mo { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); will-change: opacity, transform;
        transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
    html.wbd-mo-on .wbd-mo.is-in { opacity: 1; transform: none; }
    /* icon tiles pop once as their card arrives */
    html.wbd-mo-on .wbd-mo.is-in .bg-apple-glow { animation: wbdMoPop .7s cubic-bezier(.3,1.4,.5,1) calc(var(--mo-i, 0) * 70ms + 160ms) both; }
}
@media (max-width: 767px) { .wbd-grid-bg::after, .wbd-plans-hero::after { width: 380px; height: 380px; top: -180px; right: -200px; } }
@media print { .wbd-grid-bg::before, .wbd-grid-bg::after, .wbd-plans-hero::before, .wbd-plans-hero::after { display: none; } }