/* 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}
/* mid-page repeats sit behind their section's content */
.lp-aurora-soft{opacity:.7}
/* aurora sits on a soft wash so the drifting light has something to bloom against.
   Derived from --primary so it follows each client's brand instead of being blue. */
.lp-aurora{opacity:.9}
.hero:has(.lp-aurora){background:linear-gradient(180deg,
  color-mix(in srgb, var(--primary) 3%, #ffffff) 0%,
  color-mix(in srgb, var(--primary) 9%, #ffffff) 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}
}

/* ---------- ECG / pulse trace background (data-lp-bg="ecg" or heroBg:'ecg') ---------- */
.lp-ecg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.lp-ecg-soft{opacity:.85}

/* ---------- sticky mobile action bar + floating booking bubble ----------
   Injected by effects.js when DamLpConfig.cta is set. Hidden until the hero
   scrolls away, so the first screen stays clean. */
.lp-cta-bar,.lp-cta-bubble{opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s}
body.lp-cta-on .lp-cta-bar,body.lp-cta-on .lp-cta-bubble{opacity:1;visibility:visible}

.lp-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid color-mix(in srgb, var(--primary) 16%, #ffffff);
  box-shadow:0 -6px 24px rgba(0,0,0,.10);transform:translateY(8px)}
body.lp-cta-on .lp-cta-bar{transform:translateY(0)}
.lp-cta-main{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--primary);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;
  border-radius:var(--radius,10px);padding:0 18px}
.lp-cta-tel{flex:none;display:flex;align-items:center;justify-content:center;width:52px;min-height:48px;
  border-radius:var(--radius,10px);text-decoration:none;color:var(--primary);
  border:1.5px solid color-mix(in srgb, var(--primary) 30%, #ffffff);background:#fff}

.lp-cta-bubble{position:fixed;right:22px;bottom:22px;z-index:60;display:none;align-items:center;gap:10px;
  padding:13px 20px;border-radius:999px;background:var(--primary);color:#fff;text-decoration:none;
  font-weight:700;font-size:.95rem;box-shadow:0 10px 30px color-mix(in srgb, var(--primary) 38%, transparent);
  transform:translateY(10px)}
body.lp-cta-on .lp-cta-bubble{transform:translateY(0)}
.lp-cta-bubble:hover{filter:brightness(1.06);box-shadow:0 14px 38px color-mix(in srgb, var(--primary) 46%, transparent)}
.lp-cta-bubble svg{flex:none}

@media (max-width:760px){
  .lp-cta-bar{display:flex}
  .lp-cta-bubble{display:none!important}
  body.lp-cta-on{padding-bottom:74px}
}
@media (min-width:761px){ .lp-cta-bubble{display:inline-flex} }
@media (prefers-reduced-motion:reduce){
  .lp-cta-bar,.lp-cta-bubble{transition:none;transform:none}
}