/* SBVOC × Magic UI-style enhancement layer.
   Keeps the existing navy/copper branding and fonts; adds motion and depth.
   Effects recreated in plain CSS/JS: dot pattern, animated grid, aurora/shine text,
   blur-fade reveal, magic-card spotlight, shimmer & pulse buttons, number ticker,
   glass header, marquee edge fade. Everything is calm under prefers-reduced-motion. */

/* ---------- Glass header on scroll ---------- */
header.nav{transition:box-shadow .25s,background .25s,backdrop-filter .25s}
header.nav.scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}

/* ---------- Hero: dot pattern + animated grid squares ---------- */
.hero,.phero{isolation:isolate}
.hero::before,.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(210,154,82,.42) 1.1px,transparent 1.4px),radial-gradient(640px circle at 18% 35%,rgba(210,154,82,.18),transparent 70%);background-size:22px 22px,100% 100%;
  -webkit-mask:radial-gradient(ellipse 70% 80% at 30% 40%,#000 30%,transparent 75%);mask:radial-gradient(ellipse 70% 80% at 30% 40%,#000 30%,transparent 75%)}
.mg-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(ellipse 80% 90% at 25% 45%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 80% 90% at 25% 45%,#000 20%,transparent 75%)}
.mg-grid i{position:absolute;width:44px;height:44px;background:rgba(210,154,82,.22);border:1px solid rgba(210,154,82,.4);border-radius:4px;opacity:0;animation:mg-sq 4.5s ease-in-out infinite}
@keyframes mg-sq{0%,100%{opacity:0}50%{opacity:1}}
.hero .wrap,.phero .wrap{position:relative}

/* ---------- Hero photo mosaic ---------- */
.mosaic .tile{border-radius:12px;box-shadow:0 18px 40px -26px rgba(0,0,0,.7);transition:transform .4s,box-shadow .4s}
.mosaic .tile img{transition:transform .8s ease}
.mosaic .tile:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.75)}
.mosaic .tile:hover img{transform:scale(1.06)}
.mosaic .tile.t1{isolation:isolate}
.mosaic .tile.t1::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--mg-a,0deg),transparent 0 70%,#D29A52 82%,#F3C98B 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mg-beam 6s linear infinite}
@property --mg-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes mg-beam{to{--mg-a:360deg}}
.mosaic .tile.mg-pop{opacity:0;filter:blur(8px);transform:translateY(16px) scale(.98)}
.mosaic .tile.mg-pop.mg-in{opacity:1;filter:none;transform:none;transition:opacity .8s ease,filter .8s ease,transform .8s ease}

/* ---------- Animated text ---------- */
.hero h1 em,.phero h1 em{background:linear-gradient(100deg,#D29A52 0%,#F3C98B 25%,#D29A52 50%,#F3C98B 75%,#D29A52 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mg-aurora 6s linear infinite}
@keyframes mg-aurora{to{background-position:-200% 0}}
.hero .eyebrow{position:relative}

/* ---------- Buttons ---------- */
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);animation:mg-shimmer 3.4s ease-in-out infinite}
@keyframes mg-shimmer{55%,100%{transform:translateX(130%)}}
.hero .btn-gold{box-shadow:0 0 0 0 rgba(210,154,82,.55);animation:mg-pulse 2.6s ease-out infinite}
@keyframes mg-pulse{0%{box-shadow:0 0 0 0 rgba(210,154,82,.5)}80%,100%{box-shadow:0 0 0 16px rgba(210,154,82,0)}}
.btn{transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}

/* ---------- Magic card spotlight ---------- */
.mg-spot{position:relative;isolation:isolate}
.mg-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(210,154,82,.16),transparent 70%)}
.mg-spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(210,154,82,.85),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mg-spot:hover::before,.mg-spot:hover::after{opacity:1}
.mg-spot > *{position:relative;z-index:1}
.card.mg-spot,.horizon-card.mg-spot,.post.mg-spot{transition:transform .25s,box-shadow .25s}
.card.mg-spot:hover,.horizon-card.mg-spot:hover,.post.mg-spot:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(19,30,41,.45)}
.quick a.mg-spot::after{display:none}

/* ---------- People photos ---------- */
.person{transition:transform .35s,box-shadow .35s}
.person:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(19,30,41,.6)}

/* ---------- Blur fade reveal ---------- */
.mg-fade{opacity:0;filter:blur(6px);transform:translateY(14px);transition:opacity .75s ease,filter .75s ease,transform .75s ease}
.mg-fade.mg-in{opacity:1;filter:none;transform:none}

/* ---------- Marquee edge fade ---------- */
.marquee{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- Stat numbers ---------- */
.give-stats b,.mg-num{font-variant-numeric:tabular-nums}

/* ---------- Section eyebrow accent line ---------- */
.section .eyebrow{display:inline-flex;align-items:center;gap:10px}
.section .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;opacity:.7;transform-origin:left;transform:scaleX(0);transition:transform .6s ease .2s}
.mg-in .eyebrow::before,.eyebrow.mg-in::before,.head.mg-in .eyebrow::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .hero h1 em,.phero h1 em,.btn-gold::after,.hero .btn-gold,.mg-grid i,.mosaic .tile.t1::after{animation:none}
  .mosaic .tile.mg-pop{opacity:1;filter:none;transform:none}
  .mg-fade{opacity:1;filter:none;transform:none;transition:none}
  .card.mg-spot:hover,.horizon-card.mg-spot:hover,.post.mg-spot:hover,.person:hover,.btn:hover{transform:none}
}