/* Landing page hero: soft CTA motion, gait-analysis checklist entrance, background light sweep */

/* smooth primary CTA: breathing glow + slow, subtle shine (replaces anim-glow + btn-shine-auto) */
@keyframes cta-breathe{0%,100%{box-shadow:0 10px 28px -14px rgba(163,230,53,.45)}50%{box-shadow:0 16px 46px -12px rgba(163,230,53,.7)}}
@keyframes cta-shine{0%,72%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(330%) skewX(-20deg)}}
.cta-soft{animation:cta-breathe 4s cubic-bezier(.45,0,.55,1) infinite}
.cta-soft.btn-shine::before{width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:cta-shine 6s cubic-bezier(.45,0,.55,1) 2.5s infinite}
.cta-soft.btn-shine:hover::before{animation:shine 1.6s cubic-bezier(.45,0,.55,1)}
.cta-soft[data-magnetic]{transition:transform .9s cubic-bezier(.22,1,.36,1),background-color .45s ease}

/* checklist items in the plan card */
.check-item{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.is-visible .check-item{opacity:1;transform:none}
.is-visible .check-item:nth-child(1){transition-delay:1s}
.is-visible .check-item:nth-child(2){transition-delay:1.2s}
.is-visible .check-item:nth-child(3){transition-delay:1.4s}

/* soft light sweep across the hero background */
@keyframes sweep{0%{transform:translateX(-60%) skewX(-18deg);opacity:0}20%{opacity:1}60%,100%{transform:translateX(260%) skewX(-18deg);opacity:0}}
.light-sweep{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(163,230,53,.05),transparent);animation:sweep 11s var(--ease-standard) 2s infinite;pointer-events:none}

/* hero "feel" graphics: ground-contact ripples on the foot card, watch switch turning off */
@keyframes ripple{0%{transform:scale(.35);opacity:.75}100%{transform:scale(2.2);opacity:0}}
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 3.2s var(--ease-out-expo) infinite}
.switch-track{background:rgba(163,230,53,.35);transition:background-color .6s ease 1.6s}
.switch-knob{transform:translateX(20px);background:#a3e635;transition:transform .7s var(--ease-out-expo) 1.6s,background-color .6s ease 1.6s}
.is-visible .switch-track{background:rgba(250,250,249,.1)}
.is-visible .switch-knob{transform:none;background:#a8a29e}

@media (prefers-reduced-motion:reduce){
  .light-sweep{display:none}
  .cta-soft,.cta-soft.btn-shine::before{animation:none}
  .check-item{opacity:1;transform:none}
  .ripple{animation:none;opacity:.35}
  .switch-track{background:rgba(250,250,249,.1)}
  .switch-knob{transform:none;background:#a8a29e}
}

/* testimonials: long stories are clamped with a soft fade until "Read more" */
.t-clamp{max-height:12.5rem;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent);mask-image:linear-gradient(to bottom,#000 65%,transparent)}
.t-card[hidden]{display:none}

/* intro video lightbox: a vertical player sized to fit the screen, page scroll locked while open */
dialog.modal.modal-video{max-width:min(420px,calc((100dvh - 112px) * 9 / 16),calc(100vw - 32px))}
html:has(dialog.modal[open]){overflow:hidden}

/* application form modal: scrolls inside itself on short screens; invalid fields turn red (design-system error state) */
dialog.modal.modal-form{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:24px}
.field :is(input,textarea)[aria-invalid="true"]{border-color:#ef4444}
.field :is(input,textarea)[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(239,68,68,.15)}
.field:has(input[aria-invalid="true"]) .field-icon{color:#ef4444}
.field:has(input[aria-invalid="true"]) .segmented,.field:has(input[aria-invalid="true"]) .chips>label>span{border-color:#ef4444}
[data-error]:empty,[data-apply-status]:empty{display:none}