/* Drop 747: website motion — background patterns, scroll reveals and page transitions. Switched on and off in
   Website → Look & motion (body data attributes). Brand navy and gold are the variables below. */
body { --sm-navy: #0F294C; --sm-navy2: #16386A; --sm-gold: #D4A03A; --sm-paper: #FFFFFF; }
[data-theme="dark"] body { --sm-navy2: #4F77B5; --sm-paper: #061326; }

/* Patterns — faint, from the logo: a blueprint grid, its pixel dots, and circuit traces */
body[data-patterns="1"] .hp-sec:not(.hp-alt) { background-image: linear-gradient(color-mix(in srgb, var(--sm-navy2) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--sm-navy2) 7%, transparent) 1px, transparent 1px); background-size: 44px 44px; }
body[data-patterns="1"] .hp-sec.hp-alt { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sm-gold) 35%, transparent) 1px, transparent 1.6px); background-size: 22px 22px; }
body[data-patterns="1"] .hp-fcta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23D4A03A' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M0 40h40v40h40M160 120h-40V80H80M80 0v30M80 160v-30'/%3E%3C/g%3E%3Cg fill='%23D4A03A' fill-opacity='.35'%3E%3Ccircle cx='80' cy='80' r='2.5'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3Ccircle cx='120' cy='120' r='2'/%3E%3C/g%3E%3C/svg%3E"); }

/* Scroll reveals — added by site-motion.js to section content only when switched on */
.sm-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.sm-rv.sm-in { opacity: 1; transform: none; }

/* Page transitions */
.sm-tx { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; }
.sm-tx-split .h { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform .55s cubic-bezier(.77,0,.18,1); overflow: hidden; }
.sm-tx-split .h.l { left: 0; background: var(--sm-paper); transform: translateX(-101%); border-right: 1px solid var(--sm-gold); }
.sm-tx-split .h.r { right: 0; background: var(--sm-navy); transform: translateX(101%); }
.sm-tx-split .h img { position: absolute; top: 50%; width: 88px; }
.sm-tx-split .h.l img { right: 0; transform: translate(50%, -50%); clip-path: inset(0 50% 0 0); } .sm-tx-split .h.r img { left: 0; transform: translate(-50%, -50%); clip-path: inset(0 0 0 50%); }
.sm-tx-split.close .h { transform: none; }
.sm-tx-pixels { display: grid; grid-template-columns: repeat(16, 1fr); grid-auto-rows: 1fr; }
.sm-tx-pixels i { background: var(--sm-navy); transform: scale(0); transition: transform .3s cubic-bezier(.2,.8,.2,1); } .sm-tx-pixels i.g { background: var(--sm-gold); }
.sm-tx-pixels.close i { transform: scale(1.03); }
.sm-tx-glide .p { position: absolute; inset: 0; background: var(--sm-navy); transform: translateX(-100%); transition: transform .5s cubic-bezier(.77,0,.18,1); box-shadow: 6px 0 0 var(--sm-gold); }
[dir="rtl"] .sm-tx-glide .p { transform: translateX(100%); box-shadow: -6px 0 0 var(--sm-gold); }
.sm-tx-glide.close .p { transform: none; } .sm-tx-glide.leave .p { transform: translateX(100%); } [dir="rtl"] .sm-tx-glide.leave .p { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .sm-rv { opacity: 1; transform: none; transition: none; } .sm-tx { display: none; } }
