/*
 * Native adaptations of patterns sourced from 21st.dev.
 * Source map lives in 21ST-COMPONENTS.md.
 */

/* Scroll Reveal — restrained entrance for long-form marketing sections */
.js-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
.js-reveal.is-visible{opacity:1;transform:none}
.js-reveal[data-reveal-delay="1"]{transition-delay:.08s}
.js-reveal[data-reveal-delay="2"]{transition-delay:.16s}
.js-reveal[data-reveal-delay="3"]{transition-delay:.24s}

/* Border Beam — adapted from the Magic UI component indexed by 21st */
.beam-surface{position:relative;isolation:isolate}
.beam-surface:after{content:"";position:absolute;z-index:4;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--beam-angle,0deg),transparent 0 72%,#eef2ff 79%,#3b5bfc 84%,transparent 91%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8;animation:beam-rotate 7s linear infinite}
.metric-grid article.beam-surface:after{inset:1px;opacity:.48}
.case.beam-surface:after{inset:0;opacity:.38}
@property --beam-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes beam-rotate{to{--beam-angle:360deg}}

/* Number Ticker — animated proof points */
.metric-grid strong[data-ticker]{font-variant-numeric:tabular-nums;min-height:1em}
.metric-grid strong.is-counting{color:var(--cobalt)}

/* Fluid Accordion — native version of the spring accordion pattern */
.accordion p{display:block!important;max-height:0;margin:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:max-height .48s cubic-bezier(.2,.8,.2,1),opacity .3s ease,transform .4s ease,margin .4s ease}
.accordion button.open+p{max-height:150px;margin:0 0 24px;opacity:1;transform:none}
.accordion button b{transition:transform .35s ease}
.accordion button.open b{transform:rotate(180deg)}

/* Spotlight CTA — cursor-following light adapted for the closing conversion block */
.contact{position:relative;isolation:isolate;overflow:hidden}
.contact:before{display:none}
.contact .pill{transition:transform .25s ease,box-shadow .25s ease}
.contact .pill:hover{transform:translateY(-3px);box-shadow:0 16px 40px #3b5bfc42}

/* Interactive cards — shared lift language */
.metric-grid article,.case,.article-grid article,.trust-grid article{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.metric-grid article:hover,.case:hover{transform:translateY(-6px);box-shadow:0 24px 54px #17274416}
.article-grid article:hover,.trust-grid article:hover{transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;transform:none;transition:none}
  .beam-surface:after{animation:none}
  .accordion p{transition:none}
  .contact:before{transition:none}
}