/* ════════════════════════════════════════════════════════════
   SITE MOTION SYSTEM — motion.css  (brand-agnostic)
   ------------------------------------------------------------
   Load it on every page (order-independent — works before OR after
   the site's own stylesheet). To match the brand, set any of these
   on :root in the SITE'S css; each has a sensible fallback so you
   only override what you want:

     :root{
       --motion-1: 232,168,32;            primary accent  (r,g,b)
       --motion-2: 130,175,225;           secondary accent (r,g,b)
       --motion-accent: #e8a820;          solid accent: bars/cursor/progress
       --motion-accent-2: #f5c842;        lighter accent
       --motion-ink: #0f2540;             deep brand color (cursor hover)
       --motion-nav-bg: rgba(255,255,255,.98);  scrolled-nav background
     }

   The JS (animations.js) reads --motion-1 / --motion-2 for the hero
   canvas. Honors prefers-reduced-motion automatically.
   ════════════════════════════════════════════════════════════ */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .rv,.rv-l,.rv-r,.rv-scale,.rv-stagger>* { opacity:1 !important; transform:none !important; }
  .orb,.mq-track { animation:none !important; }
  #hero-canvas,.banner-canvas { display:none !important; }
}

/* page-load / page-leave fade */
body { animation: pgIn .5s ease both; }

body.leaving { opacity:0; transition:opacity .28s ease; }

@keyframes pgIn { from{opacity:0;} to{opacity:1;} }

/* scroll progress bar */
#sprog {
  position:fixed; top:0; left:0; z-index:9997; height:3px; width:0;
  background:linear-gradient(90deg,
    var(--motion-accent,#e8a820) 0%,
    var(--motion-accent-2,#f5c842) 50%,
    rgba(var(--motion-2,130,175,225)) 100%);
  box-shadow:0 0 8px rgba(var(--motion-1,232,168,32),.55);
  transition:width .06s linear;
}

/* custom cursor (desktop only) */
#cur,#cur-r,#cur-halo { display:none; }

@media (hover:hover) and (pointer:fine) {
  #cur { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; display:block;
    width:8px; height:8px; border-radius:50%; background:var(--motion-accent,#e8a820);
    transform:translate(-50%,-50%); transition:width .3s var(--motion-ease),height .3s var(--motion-ease),background .3s; }
  #cur-r { position:fixed; top:0; left:0; z-index:9998; pointer-events:none; display:block;
    width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(var(--motion-1,232,168,32),.45);
    transform:translate(-50%,-50%); transition:width .35s var(--motion-ease),height .35s var(--motion-ease),border-color .3s; }
  #cur-halo { position:fixed; top:0; left:0; z-index:9996; pointer-events:none; display:block;
    width:130px; height:130px; border-radius:50%;
    background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.06) 0%, transparent 70%);
    transform:translate(-50%,-50%); transition:opacity .4s,background .3s; opacity:0; }
  body:hover #cur-halo { opacity:1; }
  body.cx #cur { width:13px; height:13px; background:var(--motion-ink,#0f2540); }
  body.cx #cur-r { width:46px; height:46px; border-color:rgba(var(--motion-2,130,175,225),.5); }
  body.cx #cur-halo { background:radial-gradient(circle, rgba(var(--motion-2,130,175,225),.06) 0%, transparent 70%); }
}

/* scroll-aware nav condense */
[data-motion-nav] { transition: padding .3s var(--motion-ease), background .3s, box-shadow .3s; }

[data-motion-nav].scrolled {
  background: var(--motion-nav-bg,rgba(255,255,255,.98));
  box-shadow: 0 2px 0 rgba(15,37,64,.04), 0 10px 28px rgba(15,37,64,.12);
}

/* floating ambient orbs — live inside dark hero sections */
.orb-field { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.orb { position:absolute; border-radius:50%; filter:blur(34px); will-change:transform,opacity; transform:translateZ(0); contain:layout paint size; }

.orb-1 { width:420px; height:420px; top:-90px; left:-70px;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.42), transparent 70%);
  animation:wtOrb1 9s ease-in-out infinite alternate; }

.orb-2 { width:360px; height:360px; bottom:-100px; right:-50px;
  background:radial-gradient(circle, rgba(var(--motion-2,130,175,225),.32), transparent 70%);
  animation:wtOrb2 12s ease-in-out infinite alternate; }

.orb-3 { width:300px; height:300px; top:45%; left:60%;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.22), transparent 70%);
  animation:wtOrb3 7s ease-in-out infinite alternate; }

@keyframes wtOrb1 { 0%{opacity:.40;transform:scale(1);} 100%{opacity:.75;transform:scale(1.12) translate(2%,2%);} }

@keyframes wtOrb2 { 0%{opacity:.30;transform:scale(1);} 100%{opacity:.62;transform:scale(1.1) translate(-2%,-3%);} }

@keyframes wtOrb3 { 0%{opacity:.16;transform:translate(-50%,-50%) scale(1);} 100%{opacity:.38;transform:translate(-50%,-50%) scale(1.4);} }

/* hero / banner canvases */
#hero-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

.banner-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

/* the section that holds a canvas/orbs must be position:relative and its
   content lifted above — add [data-motion-stage] to that section */
[data-motion-stage] { position:relative; }

[data-motion-stage] > .container,
[data-motion-stage] > div:not(.orb-field):not(.banner-canvas) { position:relative; z-index:2; }

/* scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv.on { opacity:1; transform:none; }

.rv-l { opacity:0; transform:translateX(-26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-l.on { opacity:1; transform:none; }

.rv-r { opacity:0; transform:translateX(26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-r.on { opacity:1; transform:none; }

.rv-scale { opacity:0; transform:scale(.94); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-scale.on { opacity:1; transform:none; }

.rv-stagger > * { opacity:0; transform:translateY(22px); transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease); }

.rv-stagger.on > * { opacity:1; transform:none; }

.rv-stagger.on > *:nth-child(2){transition-delay:.08s;}

.rv-stagger.on > *:nth-child(3){transition-delay:.16s;}

.rv-stagger.on > *:nth-child(4){transition-delay:.24s;}

.rv-stagger.on > *:nth-child(5){transition-delay:.32s;}

.rv-stagger.on > *:nth-child(6){transition-delay:.40s;}

/* marquee trust ticker */
.marquee { overflow:hidden; padding:14px 0; position:relative; }

.marquee--accent { background:linear-gradient(90deg, var(--motion-accent,#e8a820), var(--motion-accent-2,#f5c842)); }

.marquee--ink { background:var(--motion-ink,#0f2540); }

.mq-track { display:flex; white-space:nowrap; animation:mqs 30s linear infinite; }

.marquee:hover .mq-track { animation-play-state:paused; }

.mq-item { display:inline-flex; align-items:center; gap:22px; padding:0 38px;
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }

.marquee--accent .mq-item { color:var(--motion-ink,#0f2540); }

.marquee--ink .mq-item { color:#fff; }

.mq-item span.dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }

@keyframes mqs { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.nav-top{background:none;border:0;font-family:var(--font-body);font-weight:600;font-size:.98rem;color:var(--navy-900);display:inline-flex;align-items:center;gap:6px;padding:0;cursor:pointer}

.nav-top .chev{width:13px;height:13px;transition:transform .25s ease;stroke:var(--navy-900);fill:none;flex:0 0 13px}

.has-mega,.has-dd{position:relative}

.mega,.dd{position:absolute;top:calc(100% + 16px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:20px;opacity:0;visibility:hidden;display:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease;z-index:9200}

.mega::before,.dd::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}

.mega{left:0;grid-template-columns:repeat(3,minmax(195px,1fr));gap:6px 26px;width:max-content;max-width:92vw}

.dd{right:0;min-width:250px;flex-direction:column;gap:2px}

.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{display:grid;opacity:1;visibility:visible;transform:translateY(0)}

.has-dd:hover .dd,.has-dd:focus-within .dd,.has-dd.open .dd{display:flex;opacity:1;visibility:visible;transform:translateY(0)}

.has-mega:hover .chev,.has-dd:hover .chev,.has-mega.open .chev,.has-dd.open .chev{transform:rotate(180deg)}

.mega-col{display:flex;flex-direction:column;gap:2px}

.mega a,.dd a{display:block;padding:9px 11px;border-radius:9px;color:var(--ink-soft);font-size:.93rem;font-weight:500}

.mega a::after,.dd a::after{display:none!important}

.mega a:hover,.dd a:hover{background:var(--line-soft);color:var(--red)}

.mega-h,.dd-h{font-family:var(--font-display);font-weight:700;color:var(--navy-900)!important;font-size:1rem!important;padding-bottom:8px!important;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}

@media(max-width:860px){.nav-top{width:100%;justify-content:space-between;padding:18px 4px;font-size:1.18rem;border-bottom:1px solid var(--line-soft)}.nav-top .chev{width:18px;height:18px;flex:0 0 18px}.mega::before,.dd::before{display:none}.mega,.dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:4px 0 10px 12px;width:auto;max-width:none;display:none}.mega{grid-template-columns:1fr;gap:0}.has-mega.open .mega,.has-dd.open .dd{display:block}.mega a,.dd a{font-size:1.02rem;padding:12px 8px;border-bottom:1px solid var(--line-soft)}}

@media(min-width:861px){.nav-links a.btn{width:auto;white-space:nowrap;justify-content:center;padding:13px 24px}}