/* Patriot's Edge - laser effects. Everything here is decoration only and is switched off for visitors who prefer reduced motion. */

/* glowing burn-line under buttons (hover / keyboard focus) */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;left:10%;right:10%;bottom:5px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#ff9d3d 25%,#ffe2a8 50%,#ff9d3d 75%,transparent);
  box-shadow:0 0 8px 1px rgba(255,120,30,.85),0 0 16px 3px rgba(255,90,10,.35);
  transform:scaleX(0);opacity:0}
.btn-cream::after{background:linear-gradient(90deg,transparent,#c2490f 25%,#ff9d3d 50%,#c2490f 75%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .btn::after{transition:transform .35s ease,opacity .25s ease}
  .btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);opacity:1}
}
.btn[disabled]::after{display:none}

@media (prefers-reduced-motion:no-preference){
  /* hero headline: a laser beam sweeps across and "engraves" the words in */
  .hero h1{position:relative;width:fit-content;max-width:100%;
    animation:fx-engrave 1.9s cubic-bezier(.45,.05,.25,1) .25s both}
  .hero h1::after{content:'';position:absolute;top:-8px;bottom:-8px;left:0;width:3px;border-radius:2px;pointer-events:none;
    background:linear-gradient(180deg,transparent,#ffe9bd 12%,#fff5dc 50%,#ffe9bd 88%,transparent);
    box-shadow:-3px 0 12px 3px rgba(255,110,25,.95),-12px 0 28px 8px rgba(255,70,0,.45);
    animation:fx-beam 1.9s cubic-bezier(.45,.05,.25,1) .25s both}
  .hero h1 em{animation:fx-heat 2.6s ease-out .25s both}
  .hero .lead,.hero-cta,.hero-points{animation:fx-rise .9s ease-out both}
  .hero .lead{animation-delay:1.5s}.hero-cta{animation-delay:1.7s}.hero-points{animation-delay:1.9s}
  .hero .eyebrow{animation:fx-rise .8s ease-out .1s both}

  /* a scan line passes over the hero photo once */
  .hero-frame{position:relative}
  .hero-frame::after{content:'';position:absolute;left:14px;right:14px;top:14px;height:2px;pointer-events:none;border-radius:2px;
    background:linear-gradient(90deg,transparent,#ffb05a 12%,#fff1d2 50%,#ffb05a 88%,transparent);
    box-shadow:0 0 12px 3px rgba(255,100,20,.85),0 0 30px 8px rgba(255,70,0,.35);
    animation:fx-scan 2.6s ease-in-out .7s both}

  /* glowing ember line under section headings as they scroll into view */
  .js .section-head h2::after{content:'';display:block;height:3px;width:0;margin:.3em auto 0;border-radius:3px;opacity:0;
    background:linear-gradient(90deg,transparent,#c2490f 18%,#ff9d3d 50%,#c2490f 82%,transparent);
    box-shadow:0 0 10px 1px rgba(255,110,25,.75),0 0 22px 4px rgba(255,80,0,.3)}
  .js .section-head.in-view h2::after{animation:fx-line 1.5s cubic-bezier(.3,.6,.2,1) .1s both}
  .js .section-head h2{position:relative}

  /* sparks and ember glow on card hover (js/fx.js) */
  .card::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;
    background:radial-gradient(circle 110px at var(--mx,50%) var(--my,50%),rgba(255,140,50,.22),rgba(255,90,10,.08) 55%,transparent 75%);mix-blend-mode:screen}
  .card.fx-hot::before{opacity:1}
}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.fx-spark{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff7e0 0 30%,#ffb04a 55%,rgba(255,90,10,0) 75%);
  box-shadow:0 0 8px 2px rgba(255,120,30,.9);will-change:transform,opacity;
  animation:fx-spark .75s ease-out forwards}
.fx-dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 25%,#ff5a2a 55%,rgba(255,40,0,0) 75%);box-shadow:0 0 12px 4px rgba(255,60,20,.7);
  transition:opacity .2s;will-change:transform}
.fx-dot.on{opacity:.9}

@keyframes fx-engrave{from{clip-path:inset(-40px 100% -40px -40px)}to{clip-path:inset(-40px -40px -40px -40px)}}
@keyframes fx-beam{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fx-heat{0%,45%{filter:brightness(1.7) saturate(1.5);text-shadow:0 0 14px rgba(255,120,30,.9),0 0 2px rgba(255,220,160,.8)}100%{filter:none}}
@keyframes fx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fx-scan{0%{top:14px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 34px);opacity:0}}
@keyframes fx-line{0%{width:0;opacity:0}15%{opacity:1}100%{width:min(260px,62%);opacity:.95}}
@keyframes fx-spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}