/* DAM landing-page design kit — layered interactive effects.
   Enhances the builder's existing classes; colours come from --primary/--secondary/--accent. */

/* hero background canvas (injected by effects.js; style chosen via DamLpConfig.heroBg) */
.hero{position:relative}
.hero-inner{position:relative;z-index:1}
.lp-flow,.lp-aurora{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* aurora sits on a soft wash so the drifting light has something to bloom against */
.lp-aurora{opacity:.9}
.hero:has(.lp-aurora){background:linear-gradient(180deg,#f7fafe 0%,#eef4fc 100%)}

/* glowing / glancing primary buttons (shine sweep) */
.btn-primary,.btn-small,.final-cta .btn-primary{position:relative;overflow:hidden}
.btn-primary::after,.btn-small::after{content:"";position:absolute;top:-10%;left:-75%;height:120%;width:42%;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-22deg);pointer-events:none;animation:lp-glance 5s ease-in-out infinite;z-index:1}
@keyframes lp-glance{0%,55%{left:-75%}80%,100%{left:145%}}

/* animated growth chart component: <div data-lp-chart data-lp-values="4,6,9,..."></div> */
.lp-chart{width:100%;height:auto;display:block}
.lp-chart text{font-family:Inter,sans-serif}
.lp-chart .lp-line{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .2s}
.lp-chart .lp-area{opacity:0;transition:opacity 1.1s ease .9s}
.lp-chart .lp-dot{opacity:0;transition:opacity .3s ease}
.lp-chart.in .lp-line{stroke-dashoffset:0}
.lp-chart.in .lp-area{opacity:1}
.lp-chart.in .lp-dot{opacity:1}

@media(prefers-reduced-motion:reduce){
  .btn-primary::after,.btn-small::after{display:none}
  .lp-flow{display:none}
  /* aurora keeps a single static frame — it carries the hero's colour, so hiding
     it entirely would leave the headline on bare white */
  .lp-chart .lp-line{stroke-dashoffset:0}
  .lp-chart .lp-area,.lp-chart .lp-dot{opacity:1}
}